Class 4: Introduction to web technology entrepreneurship


Published on

Published in: Business, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Class 4: Introduction to web technology entrepreneurship

  1. 1. Allan ChaoStartup ConsultantStartup V8allan@startupv8.comUC Berkeley Extension, Summer 2012
  2. 2. Question of the day: Why are some websitesbetter and easier to use than others?
  3. 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. 4. Quiz Time Good luck!10 minutes max
  5. 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. 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. 7. Let’s compare designs Archos Jukebox 6000  Released in 2000
  8. 8. Let’s compare designs Archos Jukebox 6000  Apple iPod  Released in 2000  Released in 2001
  9. 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?
  10. 10. Worst Designs
  11. 11. Best Web Designs Webby Award Winners  dia_id=96&season=16
  12. 12. Design Principles KISS = Keep it simple, stupid Give users what they want Make it enjoyable
  13. 13. How can we make great designs? Learn a lot! (or hire a great designer)  Web Style Guide   Apple Human Interface Principles  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. 14. Lots and lots of design tools Best web design tools of 2010  25 Time saving Generators  In this class, we’ll use  Balsamiq Mockups (for wireframes)  Twitter Bootstrap (for the aesthetics)
  15. 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. 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   If you want to do the design yourself, learn photoshop.
  17. 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)    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. 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. 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. 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. 21. Example wireframe
  22. 22. Example wireframe
  23. 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. 24. Instructions Sign in to  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 
  25. 25. Branding and Identity
  26. 26. Logo Simple  Recognition Memorable  Easy name Timeless  Coca-cola! Versatile  Web, printing, t-shirts, etc. Appropriate  Font and style
  27. 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
  28. 28. Comparison of logos
  29. 29. Logoschangeover time
  30. 30. Choosing Colors
  31. 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. 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. 33. What Graphic mockups look like
  34. 34. Twitter Bootstrap A way to make a decent looking site very quickly   No custom design Examples    
  35. 35. Homework Reading Material  UI vs UX – what’s the difference?   10 Principles of effective web design   9 Essential principles for Good web desgin   Watch Leah Buley’s 1-hr presentation on better web design (slides are under the video)  (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.)