Graphic Design Oleh : Lily Wulandari

Graphic Design The “look & feel” portion of an interface What someone initially encounters - Conveys an impression, mood

1 2 3 Design Philosophy My personal preferences: Economy of visual elements 2 Less is more 3 Clean, well organized

Graphic Design Principles 1 Metaphor Clarity 2 3 Consistency 4 Alignment Proximity 5 Contrast 6

Metaphore     Metaphor    Tying presentation and visual elements to some familiar relevant items e.g., Desktop metaphor If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart

w a Clarity Every element in an interface should have a reason for being there – Make that reason clear too! White Space: Leads the eye Provides symmetry and balance through its use Strengthens impact of message Allows eye to rest between elements of activity Used to promote simplicity, elegance, class, refinement w a

Example of Clarity Clear, clean appearance www.schwab.com

Example of Clarity Clear, clean appearance www.schwab.com

Consistency In layout, color, images, icons, typography, text, … Within screen, across screens Stay within metaphor everywhere Platform may have a style guide – Follow it!

Example of Consistency Home page Content page 1 Content page 2 www.santafean.com

Allows eye to parse display more easily For alignment use Left, center, or right Here is some new text Here is some new text Here is some new text Alignment Western world – Start from top left Allows eye to parse display more easily

Grids (Hidden) horizontal and vertical lines to help locate window components. Align related things. Group items logically. Minimize number of controls, reduce clutter. Alignment

Use The Grids Alignment

Example of Grids Alignment

Alignment Example Alignment

Proximity Items close together appear to have a relationship. Distance implies no relationship Time Time :

Aproximity Example

Aproximity (Grouping) Example

Use the Border Line

Contrast Pulls you in Guides your eyes around the interface Supports skimming Take advantage of contrast to add focus or to energize an interface Can be used to distinguish active control Can be used to set off most important item – Allow it to dominate Ask yourself what is the most important item in the interface, highlight it Use geometry to help sequencing

Example Important Element www.delta.com

Economy of Visual Elements 1 Less is more. Minimize borders and heavy outlining, section boundaries (use whitespace) Reduce clutter Minimize the number of controls 2 3 4 Coding Techniques Blinking It is suitable for attracting attention, but use as little as possible Reverse Video, blod Good for making something stand out Again, use sparingly

PART ONE Typography

Typography    Typography    Typography is an art and technique for organizing writing, writing design, and modifying written glyphs. This writing arrangement involves: Selection of typography Point size Line length, Space bar (leading) Space adjustments between groups of letters (tracking) Adjustment of space between pairs of letters (kerning)

Typography    Typography    Characters and symbols should be easily noticeable and distinguishable Avoid heavy use of all upper case Studies have found that mixed case promotes faster reading HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST How much fun is it to read all this text when it’s all in capitals and you never get a rest

 Typography Readability : How easy is it to read a lot of text.    Typography    Readability : How easy is it to read a lot of text. Associated with letter spacing, word spacing, leading that is too tight or loose, line spacing / vertical to separate lines of text to make it easier for readers and differentiating lines one from the previous or after.

Typography    Typography    Legibility : How easy is it to recognize a short burst of text. Ensure that each individual character or glyph is unambiguous and can be distinguished from other characters in the font. For example, the small letter h in the old italic style of writing is not legible in small size because the curved foot looks like the letter b.

 Typography Example Serif font – readability    Typography    Typography Example Serif font – readability Sans serif font - legibility (both are variable spaced) Monospace font

Fonts    Serif Decorative Sans serif Monospaced  – Times, Bookman Typography    Serif – Times, Bookman Decorative – Comic Sans Sans serif – Tahoma, Arial Script MT Bold - Script Monospaced – Courier, Lucida

 Guidelines Typography    Typography    Guidelines Typography Use serif for long, extended text; sans serif for “headlines” Use 1-2 fonts/typefaces (3 max) Use normal, italics, bold is OK Never use bold, italics, capitals for large sections of text Use 1-3 point sizes max Be careful of text to background color issues

 Guidelines for Words      Typography    Guidelines for Words Do not use jargon, words, or unique terms that are only for the profession in the computer field, meaning different from outside the computer profession. Don't use abbreviations or acronyms except those that are familiar. Use short and familiar words Use consistent words Positive term Don't chop words with hypernates

 Guidelines for Sentences Short and simple    Typography    Guidelines for Sentences Short and simple Directly and immediately can be used Use affirmative statements (reinforcing) In the order of temporal events Structured sentences so that the main topic is at the beginning

 Convention Guidelines      Typography    Use the convention to refer to the following: Mnemonic key, is the letter of a command label / menu that is pressed to call the command, the letter that becomes the mnemonic key is underlined and is usually the first letter of the word. For example, for Save, which becomes a mnemonic key, is the letter S, so that Save is displayed. Button pressed at the same time For example the shortcut key for Save is CTRL + S, undo is CTRL + Z Field caption Name given by the user or defined by the system. Commands and actions.

PART TWO Color

Principles of Using Colors For accessibility 8 percent of men and 0.4 percent of women have color deficiency (partial or total color blindness). Therefore color selection must be considered for those who have color deficiency For message perception in color: Colors can have different meanings in different situations for different people. A color that is used in unexpected ways can cause confusion. Differences in color connotations also exist between cultures. For example red, in the United States is associated with danger, in Egypt with death, and in India with life Incorrect use in different cultures can cause severe problems

Principles of Using Colors For indications of status, information and action: To show the necessary action, use warm colors. For example: red, orange, yellow To indicate status, use color: Polite, normal or OK: green, blue or white. Alert: yellow, orange, gold Emergency or abnormal: red. To provide status or background information, use cool colors. For example: green, blue, purple The same color carries the same message.

Principles of Using Colors For emphasise For practical attention or to emphasize elements, use bright or highlighted colors, such as red, blue. To not emphasize the element, use an underexposed color such as black. Brightness perceptions of colors ranging from the least are white, yellow, green, blue, red. For message perception in color: Don't use excessive colors, display colors no more than five colors at a time.

Principles of Using Colors Foreground Use colors that are in sharp contrast to the background color for text or data, use: Black Center of the spectrum of colors such as white, yellow, or green. Warm colors, more active colors Use colors that have the same saturation and lightness. To emphasize an element, use a highlight in the bright value of the background color: pure white or yellow

Principles of Using Colors Background Use the background color to arrange a group of elements into a unified whole. Use colors that don't compete with the foreground. Use: Bright colored background with low intensity: off-white or gray light. Desaturated color Cold, dark colors like blue or black. Extreme spectral colors.

Color Association Red  hot, warning, aggression, love. Pink  female, cute, cotton candy. Oranye  autumn, warm, Halloween. Yellow  happy, caution, joy. Brown  warm, fall, dirt, earth. Green  lush, pastoral, envy. Purple  royal, sophisticated, Barney.

PART THREE ICON

ICON Icons are often used to represent objects and actions where users can interact or can manipulate things. 01 This type of icon may stand alone on the desktop or in a window, or grouped together in a toolbar. 02 A secondary use of icons is to strengthen important information, such as a warning icon in the dialog message box. 03

ICON Rogers (1989) provides an extended definition for types of icons: Resemblance : an image that looks like the meaning. Symbolic : an abstract image that represents something Exemplar: picture that illustrates an example or characteristic of something Arbitrary : an image is completely arbitrary in appearance which means it must be learned. Analogy : physical or semantic images related to something. 04

ICON 7 design principles for using icons: Familiar : use familiar objects and are usually known to reduce learning time Clear and legible : shape, structure, and information techniques provide a clear and unambiguous picture. Simple : neat, simple, and not much decoration. Consistent : the shape and structure of icons is consistent even though they are displayed in different sizes. Direct : the meaning of a direct icon can be understood not only for concrete objects or actions but also adjectives, prepositions, and so on. For example for the concept of large, wide, etc.. Efficient : in certain situations the use of icons cannot consume screen space beyond words. Discriminable : the selected symbol must be visually distinguishable from other symbols.

Principles of Use of Icons Consider too: The context in which the icon is used User expectations Task complexity

THANKS! Any Question?