visual design - cs.cmu.edu237/handouts/notes-visual-design.pdf · visual design 15-237...

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

This is a web app!

http://pattern.dk/sun/

Image credits:http://pttrns.com/

http://www.matthewmooredesign.com/almost-flat-design/