1. Graphic Design
Oleh : Lily Wulandari

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

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

4. Graphic Design Principles1
Metaphor
Clarity 2 3
Consistency 4
Alignment
Proximity 5
Contrast 6

5. 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

6. 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

7. Example of Clarity
Clear, clean appearance

8. Example of Clarity
Clear, clean appearance

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

10. Example of Consistency
Home page
Content page 1
Content page 2

11. 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

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

13. Use The Grids
Alignment

14. Example of Grids
Alignment

15. Alignment Example
Alignment

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

17. Aproximity Example

18. Aproximity (Grouping) Example

19. Use the Border Line

20. 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

21. Example
Important Element

22. Economy of Visual Elements1
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

23. PART ONE
Typography

24. 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)

25. 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

26.  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.

27. 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.

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

29. 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

30.  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

31.  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

32.  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

33.  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.

34. PART TWO
Color

35. 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

36. 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.

37. 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.

38. 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

39. 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.

40. 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.

41. PART THREE
ICON

42. 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

43. 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

44. 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.

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

46. THANKS!
Any Question?