design workshop i @ cornell tech
TRANSCRIPT
Design Workshop IIntro to UX and Graphic Design 8 Nov 2015, Cornell Tech at Cornell University #designworkshops on Slack
Zaid Haque, @zaidhaque
About Me
Red Dot Award: Bilingual Flight Info Display SystemMy Website
Designers are cursed.They hate everything.
Design is subjective.Taste varies from person to person
Outline
• Basic UX design concepts
• Ten-minute graphic design fundamentals
• UI Design trends
• Cool tools (web apps) + Frameworks
• Tech specs for design
UX = User ExperienceWhat makes an ‘experience’? How can you leverage that to create a powerful app?
Cost
FormFunction
Product Parameters
Money, Manpower, effort, etc.
Aesthetics, Beauty
Performance, Features
Cost
FormFunction
Corporate Managers
Everyone has different views on what is important.
Product Parameters
Cost
FormFunction
Software Engineers
Everyone has different views on what is important.
Product Parameters
Cost
Form
Function
“Designers” - closer to Artists
Everyone has different views on what is important.
Product Parameters
Cost
FormFunction
Try to balance these out!
Product Parameters
The Design of Everyday Things
“Quotes
If everyday design were ruled by aesthetics, life might be more pleasing to the eye but less comfortable; if ruled by usability, it might be more comfortable but uglier. If cost or ease of manufacture dominated, products might not be attractive, functional, or durable. Clearly, each consideration has its place. Trouble occurs when one dominates all the others.
Use constraints so that the user feels as if there is only one possible thing to do — the right thing, of course.
Assume that any error that can be made will be made. Plan for it.“
UI is a tiny part of UX
Controller
ViewModel
User
UIUX
Things to think about
• What is your user thinking?
• Contextual awareness
• Information Architecture
• Terminology/wording
if you analyze the FUNCTION of an object,
its FORM often becomes obvious.
- F. A. Porsche
Graphic DesignThe shortest crash course ever
Typography
Sans-serif: Screen media, smaller type Serif: Print media, larger type
(P.S. Don’t use Comic Sans)
Use of Superlight and Bold type is a trend to keep in mind.
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
Typography
Anatomy of Characters
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy
Colors
• Colors have a psychological effect!
• Choose red/yellow for vibrancy/activity, blue/green for calmness.
• Igniter colors
• Try to keep color blindness in mind
Colors
Colors
#A10914Less -> 0 1 2 3 4 5 6 7 8 9 A B C D E F <- More
Red BlueGreen
Visual Hierarchy
To create emphasis:
• Larger/bolder objects
• Vibrant/colorful objects
• Complex shapes
More importantly… make sure you are not using these ‘tools’ unintentionally.
You willnotice this
first.
Vector vs. RasterDifferent formats for different purposes
.ai, .svg, .epsScalable
Vectors
.jpg, .png, .gifnot scalable
Rasters
UI TrendsIt’s kind of like fashion… except with screens instead of clothes.
Flat UIiOS7, Windows 8, Google Material Design…
Intensive GraphicsIncreased bandwidth = more creativity
Buttons/LinksConsistent with Flat UI. We’ll design some later.
Cool Tools
Tech Specs - iOSnon-retina @1x retina @2x plus screens @3x
Home Screen icon 60 x 60 120 x 120 180 x 180
Settings icons 29 x 29 58 x 58 87 x 87
Tab Bar icons 25 x 25 approximately
50 x 50 approximately
75 x 75 approximately
Toolbar/Navigation 22 x 22 approximately
44 x 44 approximately
66 x 66 approximately
More details: Apple Developer - Icon Sizes
Tech Specs - Android• icons organized by “DPI” - dots per inch
• icon resolutions in mdpi, hdpi, xhdpi
• hdpi resolution = 1.5x mdpi
• xhdpi resolution = 2x mdpi
• 1dp = 1px @ mdpi (=1.5px @ hdpi, etc.)
• Standard action bar icon size: 32x32 dp.
• More info: Android Developer - Iconography
• It’s confusing. Ask me if you’re unsure.
Other resources
• uxmagazine.com
• smashingmagazine.com
• net.tutsplus.com, design.tutsplus.com
• http://dribbble.com
• Android UI Guide
• iOS Human Interface Design
Research/Learning
Other resources
• http://subtlepatterns.com - backgrounds
• http://pexels.com - stock images
• http://nounproject.com - iconography
• http://pixeden.com - misc (paid, free)
• http://graphicriver.net - premium graphics
• http://themforest.net - premium themes
Assets/downloads (mostly free)
Homework (?!)Write a critique of something (anything) from a design perspective. Post on #designworkshops
http://critique.zaidhaque.com
Design Workshop IIntro to UX and Graphic Design 8 Nov 2015, Cornell Tech at Cornell University
Zaid Haque, @zaidhaque
https://zaidhaque.typeform.com/to/olqrP0