design: how to see
TRANSCRIPT
![Page 1: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/1.jpg)
design
how to see
![Page 2: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/2.jpg)
overview
• cognition• design rules• visuals• animation• fonts
![Page 3: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/3.jpg)
cognition
• gestalt• memory• motivation
![Page 4: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/4.jpg)
gestalt
![Page 5: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/5.jpg)
gestalt
![Page 6: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/6.jpg)
gestalt: figure/ground
![Page 7: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/7.jpg)
gestalt: proximity
![Page 8: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/8.jpg)
gestalt: similarity
![Page 9: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/9.jpg)
gestalt: closure
• We fill in the gaps
![Page 10: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/10.jpg)
gestalt: closure
• We fill in the gaps
![Page 11: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/11.jpg)
gestalt: continuation
![Page 12: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/12.jpg)
gestalt: common fate
![Page 13: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/13.jpg)
gestalt: common region
![Page 14: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/14.jpg)
gestalt: grouping
• elements that are near each other appear related
• watch the space between unrelated elements• place headings close to their content• corollary:– aligment. people assume lined-up elements are
related. – that’s one reason why we should not center
headings
![Page 15: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/15.jpg)
memory
![Page 16: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/16.jpg)
memory
• humans have limited working memory• 5 items• gestalt grouping improves the quantity we can
handle
![Page 17: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/17.jpg)
motivation
![Page 18: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/18.jpg)
motivation
• we lose motivation as tasks take longer• lack of feedback makes us give up• answering unnecessary questions• group steps together– install program– wizards
![Page 19: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/19.jpg)
design rules
![Page 20: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/20.jpg)
design rules
• purpose of design rules is to:– direct the eye– make relationships clear– teach how to use color– reduce visual complexity– ensure beauty
![Page 21: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/21.jpg)
design rules
• reduce complexity– occam’s razor– hick’s law– pareto principle– fitt’s law– fibonnaci
• use economics– feedback– mental models
• create beauty– law of thirds– the golden ratio
![Page 22: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/22.jpg)
reduce complexity
![Page 23: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/23.jpg)
occam’s razor
• the simplest solution is best– be ruthless about the value of each new thing– remove the unnecessary
![Page 24: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/24.jpg)
hick’s law
• with every additional option, time it takes to choose one increases– so:– reduce number of options
![Page 25: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/25.jpg)
pareto principle
• “80/20 rule”• most users will use 20% of your capabilities• identify which ones they do• put those up front• bury other options
![Page 26: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/26.jpg)
fitt’s law
• time to move to a target is a function of– target size – distance to the target– so make targets bigger and easier to click
• make all the target clickable– no separate state for text on an object
• opposite as well: – give what we want to be hard to click (cancel
buttons) a smaller clickable area
![Page 27: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/27.jpg)
feedback
• give a user clear indication something has happened, is happening, could happen– hover text (alt text)– focus()– loading bars– highlighting
![Page 28: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/28.jpg)
use economics
![Page 29: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/29.jpg)
mental models
• easier to understand & learn new things if based on things we already understand
• model designs off real world situations & objects
• we relate it to our understanding of real life
![Page 30: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/30.jpg)
motion
• users love it• but never use just for “oo, aah”• always use to– emphasize– guide the eye– show change – show relationships
![Page 31: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/31.jpg)
animation
• should show relationships• should emphasize • should guide the eye• gestalt: common fate• gestalt: grouping laws
![Page 32: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/32.jpg)
create beauty
![Page 33: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/33.jpg)
law of thirds
![Page 34: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/34.jpg)
the golden ratio
![Page 35: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/35.jpg)
fibonnaci (yes!)
• found in:– classical creative works– nature
• can be used to :– create visual patterns– create shapes– create organic figures– create grids – dictate sizing and ratios
1, 1, 2, 3, 5, 8, 13, 21, 34, 55
![Page 36: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/36.jpg)
a quick primer on type
![Page 37: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/37.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 38: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/38.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 39: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/39.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 40: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/40.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 41: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/41.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 42: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/42.jpg)
Fonts (“type”)• face• weight• serif• glyph• baseline• topline• bottom line• ascenders• descenders• kerning• leading• tracking
![Page 43: Design: how to see](https://reader034.vdocument.in/reader034/viewer/2022042723/58f1b0991a28ab617b8b45db/html5/thumbnails/43.jpg)
thanks