VISUAL DESIGN
15-237 Cross-Platform Mobile Apps Spring 2013
What is visual design?
Good visual design establishes credibility
establishes a brand/personality
enforces usability
Design is largely about communication.
Form should reflect function.
INFORMATION HIERARCHY
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.
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.
informationarchitects.net/blog/
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)
COLOR
Picking one or two strong colors can give your application/brand a personality.
Facebook Twitter Spotify Yelp
Picking one or two strong colors can give your application/brand a personality.
But use strong colors sparingly.
Brightness and saturation
Brightness and saturation
Brightness and saturation
Decrease contrast to deemphasize content
But make it legible
Some colors don’t interact well
Can do this on colored backgrounds as well
Contrast
Evernote Hello
500px Foursquare
VISUAL STYLES
Apple Google Microsoft
Twitterrific 4 Twitterrific 5
ALIGNMENT
Path
Path
Path
TYPOGRAPHY
sans-serif
serif
Serif for news content
Sans-serif for metadata
Circa
ICONS
Instagram Path
Tumblr
Color
http://thenounproject.com/
http://adamwhitcroft.com/batch/
http://glyphicons.com/
VISUAL DESIGN WITH CSS
Image credits:http://pttrns.com/
http://www.matthewmooredesign.com/almost-flat-design/