1.
Design Workshop I
Intro to UX and Graphic Design
8 Nov 2015, Cornell Tech at Cornell University
#designworkshops on Slack
Zaid Haque, @zaidhaque

2.
About Me
Red Dot Award: Bilingual Flight Info Display SystemMy Website

3.
Designers are cursed.
They hate everything.

4.
Design is subjective.
Taste varies from person to person

5.
Outline
• Basic UX design concepts
• Ten-minute graphic design fundamentals
• UI Design trends
• Cool tools (web apps) + Frameworks
• Tech specs for design

6.
UX = User Experience
What makes an ‘experience’? How can you
leverage that to create a powerful app?

7.
Cost
FormFunction
Product Parameters
Money, Manpower,
effort, etc.
Aesthetics,
Beauty
Performance,
Features

8.
Cost
FormFunction
Corporate Managers
Everyone has
different views on
what is important.
Product Parameters

9.
Cost
Form
Function
Software Engineers
Everyone has
different views on
what is important.
Product Parameters

10.
Cost
Form
Function
“Designers” - closer to Artists
Everyone has
different views on
what is important.
Product Parameters

11.
Cost
FormFunction
Try to balance these out!
Product Parameters

12.
The
Design of
Everyday
Things

13.
“
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.
“

14.
UI is a tiny part of UX
Controller
ViewModel
User
UIUX

15.
Things to think about
• What is your user thinking?
• Contextual awareness
• Information Architecture
• Terminology/wording

16.
if you analyze the FUNCTION of an object,
its FORM often
becomes obvious.
- F. A. Porsche

17.
Graphic Design
The shortest crash course ever

18.
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/

19.
Typography
Anatomy of
Characters
http://www.fonts.com/content/learning/
fontology/level-1/type-anatomy/anatomy

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

21.
Colors

22.
Colors
#A10914
Less -> 0 1 2 3 4 5 6 7 8 9 A B C D E F <- More
Red BlueGreen

23.
Visual Hierarchy
To create emphasis:
• Larger/bolder objects
• Vibrant/colorful objects
• Complex shapes
More importantly… make sure you are not
using these ‘tools’ unintentionally.

24.
You will
notice this
first.

25.
Vector vs.
Raster
Different formats for
different purposes
.ai, .svg, .eps
Scalable
Vectors
.jpg, .png, .gif
not scalable
Rasters

26.
UI Trends
It’s kind of like fashion…
except with screens instead of clothes.

27.
Flat UI
iOS7, Windows 8, Google Material Design…

28.
Intensive Graphics
Increased bandwidth = more creativity

29.
Buttons/Links
Consistent with Flat UI. We’ll design some later.

30.
Cool Tools

31.
Adobe Color
http://color.adobe.com/

32.
FlatUIColors
http://flatuicolors.com

33.
CSSMatic
http://cssmatic.com/

34.
ResizeMyBrowser
http://resizemybrowser.com/

35.
960 Grid System
http://960.gs/

36.
Tech Specs - iOS
non-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

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

38.
Other resources
• uxmagazine.com
• smashingmagazine.com
• net.tutsplus.com, design.tutsplus.com
• http://dribbble.com
• Android UI Guide
• iOS Human Interface Design
Research/Learning

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

40.
Homework (?!)
Write a critique of something (anything) from a
design perspective. Post on #designworkshops
http://critique.zaidhaque.com

41.
Design Workshop I
Intro to UX and Graphic Design
8 Nov 2015, Cornell Tech at Cornell University
Zaid Haque, @zaidhaque
https://
zaidhaque.typeform
.com/to/olqrP0