Visual design The “look” of your interface
Role of Graphic Design What someone initially encounters – Sets a framework for understanding content
Role of Graphic Design What someone initially encounters – Sets a framework for understanding content
Role of Graphic Design What someone initially encounters – Sets a framework for understanding content
Graphic Design A comprehensible mental image Appropriate organization of data, functions, tasks and roles High-quality appearances The “look” Effective interaction sequencing The “feel” Classes at UNCC –
Graphic Design Involves knowledge of: – Sequencing – Organization – Layout – Imagery – Color – Typography
Graphic Design Principles Metaphor Clarity Consistency Contrast Alignment Proximity
Clarity Every element in an interface should have a reason for being there – Make that reason clear too! White/open space – Leads the eye – Provides symmetry and balance – Strengthens impact of message – Allows eye to rest between elements of activity – Used to promote simplicity, elegance, class, refinement
Clarity via “White” Space White = Open
Example Home page Content page 1Content page 2
Example Clear, clean appearance Opinion?
Example Does this convey different impressions?
Consistency In layout, color, images, icons, typography, text, … Within screen, across screens Stay within metaphor everywhere Platform may have a style guide – Follow it!
Alignment Western world – Start from top left Novices often center things – No definition, calm, very formal Grids – (Hidden) horizontal and vertical lines to help locate window components – Align related things – Group items logically
Grids – use them
key/98/28/index4a_page2.html?tw =design Layout Grids
From MUHome/cshtml/print/grids.html Three Column Layout Grids
From MUHome/cshtml/print/grids.html Symmetry vs. Asymmetry Beware of too much symmetry
Proximity Items close together appear to have a relationship Distance implies no relationship Time: Time
Example Name Addr1 Addr2 City State Phone Fax Name Addr1 Addr2 City State Phone Fax Name Addr1 Addr2 City State Phone Fax
Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow Slide from Saul Greenberg
Economy of visual elements – Minimize number of controls – Include only those that are necessary eliminate, or relegate others to secondary windows (but don’t want too many extra windows!) – Minimize clutter so information is not hidden
Haphazard layout from mullet & sano
Repairing a Haphazard layout from mullet & sano
Example Overuse of 3D effects
Example Visual noise
Contrast Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
Color Use for a purpose and sparingly Draw attention, communicate organization, to indicate status, to establish relationships, aid search Use redundant cues – Color-blindness – Enhances performance Be consistent with color associations from jobs and cultures
How many small ovals?
Now how many small ovals?
Yellow – happy, caution, joy Brown – warm, fall, dirt, earth Green – go, on, safe, envy, lush, pastoral Purple – royal, sophisticated, Barney Color Meanings: Contextually Specific Red – aggression, love – hot, warning, stop, radiation Pink – female, cute, cotton candy Orange – warm, autumn, Halloween Blue – cold, off
Color Meanings: Culturally Specific
Legibility and readability Characters, symbols, graphical elements should be easily noticable and distinguishable Text set in Braggadocio Text set in Helvetica TEXT SET IN CAPITOLS Text set in Times Roman Saul Greenberg U. Calgary
Legibility and readability Proper use of typography – 1-2 typefaces (3 max) – normal, italics, bold – 1-3 sizes max Large Medium Small Large Medium Small Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive Saul Greenberg U. Calgary
Remember Form follows function – Visual elements should help convey purpose and meaning Be consistent Just like all design – iterate and get feedback!! Let’s analyze: – & –