Design Workshop I @ Cornell Tech
-
Upload
zaid-haque -
Category
Design
-
view
485 -
download
0
Transcript of Design Workshop I @ Cornell Tech
![Page 1: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/1.jpg)
Design Workshop IIntro to UX and Graphic Design 8 Nov 2015, Cornell Tech at Cornell University #designworkshops on Slack
Zaid Haque, @zaidhaque
![Page 2: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/2.jpg)
About Me
Red Dot Award: Bilingual Flight Info Display SystemMy Website
![Page 3: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/3.jpg)
Designers are cursed.They hate everything.
![Page 4: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/4.jpg)
Design is subjective.Taste varies from person to person
![Page 5: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/5.jpg)
Outline
• Basic UX design concepts
• Ten-minute graphic design fundamentals
• UI Design trends
• Cool tools (web apps) + Frameworks
• Tech specs for design
![Page 6: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/6.jpg)
UX = User ExperienceWhat makes an ‘experience’? How can you leverage that to create a powerful app?
![Page 7: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/7.jpg)
Cost
FormFunction
Product Parameters
Money, Manpower, effort, etc.
Aesthetics, Beauty
Performance, Features
![Page 8: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/8.jpg)
Cost
FormFunction
Corporate Managers
Everyone has different views on what is important.
Product Parameters
![Page 9: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/9.jpg)
Cost
FormFunction
Software Engineers
Everyone has different views on what is important.
Product Parameters
![Page 10: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/10.jpg)
Cost
Form
Function
“Designers” - closer to Artists
Everyone has different views on what is important.
Product Parameters
![Page 11: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/11.jpg)
Cost
FormFunction
Try to balance these out!
Product Parameters
![Page 12: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/12.jpg)
The Design of Everyday Things
![Page 13: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/13.jpg)
“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.“
![Page 14: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/14.jpg)
UI is a tiny part of UX
Controller
ViewModel
User
UIUX
![Page 15: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/15.jpg)
![Page 16: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/16.jpg)
Things to think about
• What is your user thinking?
• Contextual awareness
• Information Architecture
• Terminology/wording
![Page 17: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/17.jpg)
if you analyze the FUNCTION of an object,
its FORM often becomes obvious.
- F. A. Porsche
![Page 18: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/18.jpg)
Graphic DesignThe shortest crash course ever
![Page 19: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/19.jpg)
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/
![Page 20: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/20.jpg)
Typography
Anatomy of Characters
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy
![Page 21: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/21.jpg)
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
![Page 22: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/22.jpg)
Colors
![Page 23: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/23.jpg)
Colors
#A10914Less -> 0 1 2 3 4 5 6 7 8 9 A B C D E F <- More
Red BlueGreen
![Page 24: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/24.jpg)
Visual Hierarchy
To create emphasis:
• Larger/bolder objects
• Vibrant/colorful objects
• Complex shapes
More importantly… make sure you are not using these ‘tools’ unintentionally.
![Page 25: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/25.jpg)
You willnotice this
first.
![Page 26: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/26.jpg)
![Page 27: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/27.jpg)
Vector vs. RasterDifferent formats for different purposes
.ai, .svg, .epsScalable
Vectors
.jpg, .png, .gifnot scalable
Rasters
![Page 28: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/28.jpg)
UI TrendsIt’s kind of like fashion… except with screens instead of clothes.
![Page 29: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/29.jpg)
Flat UIiOS7, Windows 8, Google Material Design…
![Page 30: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/30.jpg)
![Page 31: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/31.jpg)
![Page 32: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/32.jpg)
Intensive GraphicsIncreased bandwidth = more creativity
![Page 33: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/33.jpg)
![Page 34: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/34.jpg)
![Page 35: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/35.jpg)
Buttons/LinksConsistent with Flat UI. We’ll design some later.
![Page 36: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/36.jpg)
![Page 37: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/37.jpg)
Cool Tools
![Page 43: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/43.jpg)
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
![Page 44: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/44.jpg)
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.
![Page 45: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/45.jpg)
Other resources
• uxmagazine.com
• smashingmagazine.com
• net.tutsplus.com, design.tutsplus.com
• http://dribbble.com
• Android UI Guide
• iOS Human Interface Design
Research/Learning
![Page 46: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/46.jpg)
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)
![Page 47: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/47.jpg)
Homework (?!)Write a critique of something (anything) from a design perspective. Post on #designworkshops
http://critique.zaidhaque.com
![Page 48: Design Workshop I @ Cornell Tech](https://reader033.fdocuments.net/reader033/viewer/2022042906/58aa99211a28ab85678b5cf7/html5/thumbnails/48.jpg)
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