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

Domain Registration

Virtual property

Registrars, Dedicated registrars

Domainers

Cyber squatters

Auctions: SEDO, Godaddy

Top Level Domains

Domain Hacks

Privacy Add-on

DNS = Domain name system

“Internet phone book”

Google Apps

CMS = Content Management System

Launch page

Email list

LaunchRock

Wordpress

.org vs .com

Limits to CMS

Market Research

Google SERP

Google Insights and Trends

Google Analytics

Google Adwords

Focus groups

Interviews

Custom Application development

Minimum viable product

Functional requirements

Sitemap

Wireframes

Graphic design

Content

Code

“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

Released in 2000

Apple iPod

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?media_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

Logos change over 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.)