• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Class 4: Introduction to web technology entrepreneurship

Class 4: Introduction to web technology entrepreneurship






Total Views
Views on SlideShare
Embed Views



1 Embed 37

http://allanchao.com 37


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Class 4: Introduction to web technology entrepreneurship Class 4: Introduction to web technology entrepreneurship Presentation Transcript

    • Allan ChaoStartup ConsultantStartup V8allan@startupv8.comUC Berkeley Extension, Summer 2012
    • Question of the day: Why are some websitesbetter and easier to use than others?
    • 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
    • Quiz Time Good luck!10 minutes max
    • 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
    • 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
    • Let’s compare designs Archos Jukebox 6000  Released in 2000
    • Let’s compare designs Archos Jukebox 6000  Apple iPod  Released in 2000  Released in 2001
    • 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?
    • 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/
    • Best Web Designs Webby Award Winners  http://www.webbyawards.com/webbys/current.php?me dia_id=96&season=16
    • Design Principles KISS = Keep it simple, stupid Give users what they want Make it enjoyable
    • 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
    • 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)
    • 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
    • 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.
    • 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
    • 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
    • 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)
    • 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?
    • Example wireframe
    • Example wireframe
    • 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.
    • 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
    • Branding and Identity
    • 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/
    • 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
    • Comparison of logos
    • Logoschangeover time
    • Choosing Colors http://kuler.adobe.com http://www.colourlovers.com/
    • 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?
    • 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
    • What Graphic mockups look like
    • 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/
    • 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.)