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