Visual Design

Transcript

1. VISUAL DESIGN 15-237 Cross-Platform Mobile Apps Spring 2013
2. What is visual design?
3. Good visual design establishes credibility establishes a brand/personality enforces usability
4. Design is largely about communication. Form should reflect function.
5. INFORMATION HIERARCHY
6. 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.
7. 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.
8. informationarchitects.net/blog/
9. 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)
10. COLOR
11. Picking one or two strong colors can give your application/brand a personality.
12. Facebook Twitter Spotify Yelp Picking one or two strong colors can give your application/brand a personality.
13. But use strong colors sparingly.
14. Brightness and saturation
15. Brightness and saturation
16. Brightness and saturation
17. Decrease contrast to deemphasize content But make it legible Some colors don’t interact well Can do this on colored backgrounds as well Contrast
18. Evernote Hello
19. 500px Foursquare
20. VISUAL STYLES
21. Apple Google Microsoft
22. Twitterrific 4 Twitterrific 5
23. ALIGNMENT
28. Path
29. Path
30. Path
31. TYPOGRAPHY
32. sans-serif serif
33. sans-serif serif democracy modern clean technical
34. sans-serif serif democracy modern clean technical authority serious respectful traditional
35. Serif for news content Sans-serif for metadata Circa
36. Consider the distance of the device from the eye. http://informationarchitects.net/blog/responsive-typography-the-basics/
37. Consider the distance of the device from the eye. http://informationarchitects.net/blog/responsive-typography-the-basics/
38. Consider the distance of the device from the eye. http://informationarchitects.net/blog/responsive-typography-the-basics/
39. ICONS
40. Instagram Path
42. Tumblr
43. Color
44. http://thenounproject.com/ http://adamwhitcroft.com/batch/ http://glyphicons.com/
45. VISUAL DESIGN WITH CSS
46. This is a web app! http://pattern.dk/sun/
48. Image credits: http://pttrns.com/ http://www.matthewmooredesign.com/almost-flat-design/ http://informationarchitects.net/blog/responsive-typography-the-basics/