Class 4: Introduction to web technology entrepreneurship

Allan Chao
Startup Consultant
Startup V8
allan@startupv8.com

UC Berkeley Extension, Summer 2012

Question of the day:
Why are some websites
better 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?

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

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

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.)

Class 4: Introduction to web technology entrepreneurship

More Related Content

What's hot

Similar to Class 4: Introduction to web technology entrepreneurship

More from allanchao

Recently uploaded

Class 4: Introduction to web technology entrepreneurship