Your SlideShare is downloading. ×
0
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Class 4: Introduction to web technology entrepreneurship

866

Published on

Published in: Business, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
866
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?
  • 10. 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/
  • 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
  • 25. Branding and Identity
  • 26. 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/
  • 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. Comparison of logos
  • 29. Logoschangeover time
  • 30. Choosing Colors http://kuler.adobe.com http://www.colourlovers.com/
  • 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.)

×