1. Allan Chao
Startup Consultant
Startup V8
allan@startupv8.com
UC Berkeley Extension, Summer 2012

2. Question of the day:
Why are some websites
better and easier to use than others?

3. The Agenda
 Quiz
 Quick review of last session
 User Interface (UI / UX) Design…
 Wireframes
 Pre-designed Themes
 E.g. Twitter Bootstrap
 Branding and Aesthetic Design
 Logo
 Graphic Mockups
 Most of the day = Wireframing

4. Quiz Time
Good luck!
10 minutes max

5. Quick review of prior material
 Domains  Market Research
 Domain Registration
 Google SERP
 Virtual property
 Registrars, Dedicated registrars  Google Insights and Trends
 Domainers  Google Analytics
 Cyber squatters  Google Adwords
 Auctions: SEDO, Godaddy
 Top Level Domains
 Focus groups
 Domain Hacks  Interviews
 Privacy Add-on  Custom Application development
 DNS = Domain name system
 “Internet phone book”  Minimum viable product
 Google Apps  Functional requirements
 CMS = Content Management System  Sitemap
 Launch page  Wireframes
 Email list  Graphic design
 LaunchRock
 Content
 Wordpress
 .org vs .com  Code
 Limits to CMS  “Waterfall” traditional software development
 Agile software development
 Iteration

7. What is UI / UX Design?
 UI = User Interface
 UX = User Experience
 User interface is a
subset of user
experience
 The experience is the
strategy, the interface is
the one element of
execution

8. Let’s compare designs
 Archos Jukebox 6000
 Released in 2000

9. Let’s compare designs
 Archos Jukebox 6000  Apple iPod
 Released in 2000  Released in 2001

10. How does this apply to web?
 Interaction
 Navigation
 Layout
 Buttons
 Headers
 “Scan-ability”
 Flow
 Instructions
 Experience
 The emotional aspect
 Does it feel intuitive?
 Is it surprising? In a good way or bad way?
 Is it enjoyable or frustrating?

11. Worst Designs
 http://www.sixtiespress.co.uk/
 http://www.pinesol.com/#/explorer/
 http://www.chestertourist.com/morehotels.htm
 http://www.sphere.bc.ca/test/sruniverse.html
 http://www.theosbrinkagency.com/

12. Best Web Designs
 Webby Award Winners
 http://www.webbyawards.com/webbys/current.php?me
dia_id=96&season=16

13. Design Principles
 KISS = Keep it simple, stupid
 Give users what they want
 Make it enjoyable

14. How can we make great designs?
 Learn a lot! (or hire a great designer)
 Web Style Guide
 http://www.webstyleguide.com/wsg3/index.html
 Apple Human Interface Principles
 http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/
mobilehig/Principles/Principles.html
 Practice a lot!
 That’s what we’re doing today
 Mimic other great designs
 Start paying attention to which websites you enjoy using. Ask yourself why?
 Keep up to date
 “Great” web design changes significantly over time

15. Lots and lots of design tools
 Best web design tools of 2010
 http://www.webdesignshock.com/best-web-design-2010/
 25 Time saving Generators
 http://www.awcore.com/html/news/14/25-Time-saving-Generators_en
 In this class, we’ll use
 Balsamiq Mockups (for wireframes)
 Twitter Bootstrap (for the aesthetics)

16. Great Design Caveats
 Depends on your audience
 Other cultures prefer different kinds of design
 Some cultures prefer more “clutter”
 Design is stylistic and subjective
 Like art, you may think it’s great, but others don’t.
 To mitigate this issue, test the designs in the market

17. Hiring a Designer
 *Great* design costs lots of money.
 Good design is reasonable.
 Bad design is free
 If you hire a designer, let them do their work
 http://theoatmeal.com/comics/design_hell
 If you want to do the design yourself, learn photoshop.

18. Last notes on design
 Don’t use flash.
 It’s outdated, to be replaced by HTML5
 Use design to show your personality (e.g. 404 pages)
 http://www.webdesignshock.com/blahblahnotarealpage
 http://visitsteve.com/jibberish
 http://econsultancy.com/us/blog/9525-16-creative-404-pages-to-
inspire-you-to-overhaul-yours
 First priority is to add functional value
 Second priority is design
 People will use poorly-designed websites if they have to
 No one uses an awesome-designed website if it does nothing

20. Before the UI Design
 You should already have functional requirements
 You should have user stories
 You should have a sitemap or outline of the website flow

21. Where are we?
 Creating the Minimum Viable Product (MVP)
 Functional Requirements
  Wireframes 
 Graphic Design
 Code
 Content (Copywriting, Social Media accounts, analytics, etc.)
 Deploy (aka Release)

22. What’s the point of Wireframing?
 Focus on How it works
 NOT how it looks (the next step, graphic design)
 Focus on making the best user interaction
 Is it intuitive?
 Is it simple?
 Is it enjoyable to use?

23. Example wireframe

24. Example wireframe

25. Balsamiq Mockups
 A program for wireframing
 Both a desktop and an online version
 For this class, we’re going to use the online version
 It’s shared amongst all students
 If you want to keep it confidential, you can use the free
trial of Balsamiq Mockups. You can also buy it for
cheaper than full price because of the academic license.
 There are many other wireframing tools out there. In
this class we will use balsamiq.

26. Instructions
 Sign in to https://ucbextension.mybalsamiq.com/
 You should have an email for the sign up. If not, let me know.
 Create a new project (one per team)
 Invite collaborators (team members)
 Create your first mockup
 Add a “Browser Window”
 Double click it to set the title and URL
 Add some elements
 Save it
 Take a look at other mockups
 https://mockupstogo.mybalsamiq.com/projects/web/grid

28. Branding and Identity

29. Logo
 Simple
 Recognition
 Memorable
 Easy name
 Timeless
 Coca-cola!
 Versatile
 Web, printing, t-shirts, etc.
 Appropriate
 Font and style
 http://justcreative.com/2008/01/08/how-to-design-a-logo/

30. How to design the logo
 For Free…
 WordArt (lol)
 Online Logo design tools
 Learn Photoshop
 For about $500
 99 Designs contest
 Pros: lots of ideas.
 For $500-2000+
 Hire a designer
 Pros: work with a designer very closely, create something really
special

31. Comparison of logos

32. Logos
change
over time

33. Choosing Colors
 http://kuler.adobe.com
 http://www.colourlovers.com/

34. Graphic Designs
 Focus on How it looks, not how it works
 Your goal: know exactly what the final website will look like
 Have you succeeded in great design?
 Do the elements that should stand out stand out?
 Is the site intuitive and enjoyable to use?
 Is the branding unified across the site?
 Does the company have a clear identity/image?

35. Turning Wireframes into Designs
 Photoshop
 This is what most professional web designers use
 Expensive tool
 Very powerful
 Alternative tools
 Publisher
 Illustrator
 Free tools
 GIMP
 Paint.NET

36. What Graphic mockups look like

37. Twitter Bootstrap
 A way to make a decent looking site very quickly
 http://twitter.github.com/bootstrap/
 No custom design
 Examples
 http://soundready.fm/
 https://kippt.com/
 http://www.fleetio.com/
 http://www.jshint.com/

39. Homework
 Reading Material
 UI vs UX – what’s the difference?
 http://www.webdesignerdepot.com/2012/06/ui-vs-ux-whats-the-difference/
 10 Principles of effective web design
 http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
 9 Essential principles for Good web desgin
 http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/
 Watch Leah Buley’s 1-hr presentation on better web design (slides are under the video)
 http://www.ugleah.com/ux-team-of-one/
 (Team) Make the wireframes/mockups for your web application
 You can make the whole site, but we will only have time to build 2-3 pages in this class
 You may find while designing the site that you need to go back and update your sitemap
and functional requirements
 (Team) Keep Going!!
 Keep working on the pitch deck (at the very least, add your new logo)
 Keep spreading the word about your new startup (to get more signups on your launch
page)
 Occasionally review the market research data (Google Analytics, etc.)