1. Allan ChaoStartup ConsultantStartup V8allan@startupv8.comUC Berkeley Extension, Summer 2012
2. Question of the day: Why are some websitesbetter 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
6. 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
7. Let’s compare designs Archos Jukebox 6000 Released in 2000
8. Let’s compare designs Archos Jukebox 6000 Apple iPod Released in 2000 Released in 2001
9. 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. Best Web Designs Webby Award Winners http://www.webbyawards.com/webbys/current.php?me dia_id=96&season=16
12. Design Principles KISS = Keep it simple, stupid Give users what they want Make it enjoyable
13. 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
14. 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)
15. 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
16. 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.
17. 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
18. 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
19. 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)
20. 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?
21. Example wireframe
22. Example wireframe
23. 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.
24. 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
27. 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. 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?
32. 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
33. What Graphic mockups look like
34. 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/
35. 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.)