2. Question of the day:
Why are some websites
better 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
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.
7. 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
9. Let’s compare designs
Archos Jukebox 6000 Apple iPod
Released in 2000 Released in 2001
10. 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?
12. Best Web Designs
Webby Award Winners
http://www.webbyawards.com/webbys/current.php?me
dia_id=96&season=16
13. Design Principles
KISS = Keep it simple, stupid
Give users what they want
Make it enjoyable
14. 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
15. 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)
16. 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
17. 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.
18. 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
19.
20. 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
21. 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)
22. 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?
25. 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.
26. 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
29. 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/
30. 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
34. 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?
35. 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
37. 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/
38.
39. 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.)