visual design - cs.cmu.edu237/handouts/notes-visual-design.pdf · visual design 15-237...
TRANSCRIPT
![Page 1: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/1.jpg)
VISUAL DESIGN
15-237 Cross-Platform Mobile Apps Spring 2013
![Page 2: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/2.jpg)
What is visual design?
![Page 3: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/3.jpg)
Good visual design establishes credibility
establishes a brand/personality
enforces usability
![Page 4: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/4.jpg)
Design is largely about communication.
Form should reflect function.
![Page 5: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/5.jpg)
INFORMATION HIERARCHY
![Page 6: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/6.jpg)
Participation in this course is required and consists of the following activities: Attending and participating in lectures and recitations. Reading the printed and online notes and other assigned readings. Carrying out homework assignments. Taking the quizzes, midterms, and final.Actively participating in Piazza. Attendance is required (if not always strictly recorded). Repeated failure to attend lectures may result in a lowered semester grade regardless of your numeric average. You will be responsible for all materials presented in lectures and recitations. You should not expect that all lecture or recitation materials will be given to you in written form (including the online class notes we provide). Note that missed quizzes and tests may not be made up in general (though certain exceptions are permitted -- see the relevant sections below).Assessment: Any material covered in lecture, in recitation, in assigned readings, or in homework assignments may be included in any future homework assignment, quiz, or test.
![Page 7: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/7.jpg)
Participation in this course is required and consists of the following activities:
• Attending and participating in lectures and recitations.• Reading the printed and online notes and other assigned readings.• Carrying out homework assignments.• Taking the quizzes, midterms, and final.• Actively participating in Piazza.
Attendance is required (if not always strictly recorded). Repeated failure to attend lectures may result in a lowered semester grade regardless of your numeric average. You will be responsible for all materials presented in lectures and recitations. You should not expect that all lecture or recitation materials will be given to you in written form (including the online class notes we provide). Note that missed quizzes and tests may not be made up in general (though certain exceptions are permitted -- see the relevant sections below).
Assessment: Any material covered in lecture, in recitation, in assigned readings, or in homework assignments may be included in any future homework assignment, quiz, or test.
![Page 8: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/8.jpg)
informationarchitects.net/blog/
![Page 9: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/9.jpg)
The purpose of information hierarchy is to call
attention to things.
Try varying
typeface
font size font styling color
spacing etc.
(but not all at once, please)
![Page 10: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/10.jpg)
COLOR
![Page 11: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/11.jpg)
Picking one or two strong colors can give your application/brand a personality.
![Page 12: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/12.jpg)
Facebook Twitter Spotify Yelp
Picking one or two strong colors can give your application/brand a personality.
![Page 13: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/13.jpg)
But use strong colors sparingly.
![Page 14: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/14.jpg)
Brightness and saturation
![Page 15: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/15.jpg)
Brightness and saturation
![Page 16: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/16.jpg)
Brightness and saturation
![Page 17: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/17.jpg)
Decrease contrast to deemphasize content
But make it legible
Some colors don’t interact well
Can do this on colored backgrounds as well
Contrast
![Page 18: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/18.jpg)
Evernote Hello
![Page 19: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/19.jpg)
500px Foursquare
![Page 20: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/20.jpg)
VISUAL STYLES
![Page 21: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/21.jpg)
Apple Google Microsoft
![Page 22: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/22.jpg)
Twitterrific 4 Twitterrific 5
![Page 23: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/23.jpg)
ALIGNMENT
![Page 24: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/24.jpg)
![Page 25: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/25.jpg)
![Page 26: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/26.jpg)
![Page 27: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/27.jpg)
![Page 28: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/28.jpg)
Path
![Page 29: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/29.jpg)
Path
![Page 30: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/30.jpg)
Path
![Page 31: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/31.jpg)
TYPOGRAPHY
![Page 32: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/32.jpg)
sans-serif
serif
![Page 33: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/33.jpg)
Serif for news content
Sans-serif for metadata
Circa
![Page 34: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/34.jpg)
ICONS
![Page 35: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/35.jpg)
Instagram Path
![Page 36: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/36.jpg)
![Page 37: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/37.jpg)
Tumblr
![Page 38: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/38.jpg)
Color
![Page 39: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/39.jpg)
http://thenounproject.com/
http://adamwhitcroft.com/batch/
http://glyphicons.com/
![Page 40: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/40.jpg)
VISUAL DESIGN WITH CSS
![Page 41: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/41.jpg)
![Page 43: VISUAL DESIGN - cs.cmu.edu237/handouts/notes-visual-design.pdf · VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013. What is visual design? Good visual design establishes](https://reader033.vdocuments.mx/reader033/viewer/2022050202/5f56191d3e27eb682e66a9e7/html5/thumbnails/43.jpg)
Image credits:http://pttrns.com/
http://www.matthewmooredesign.com/almost-flat-design/