Class 4: Introduction to web technology entrepreneurship
- 1. Allan Chao Startup Consultant Startup V8 [email protected] 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?
- 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
- 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
- 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.)