1

Desain Perangkat Lunak

Create Meaningful Graphics,

Icons and Images

Hetti Hidayati

D3 Rekayasa Perangkat Lunak Aplikasi

Fakultas Ilmu Terapan
 Icons 2

Icons are pictorial images most often used to

represent objects and actions with which users can
interact with or that they can manipulate.
 Kinds of Icon 3

Icon Resemblance

Symbolic
Kinds Of Kinds Of
Icon Index Icon Exemplar
(Marcus) (Rogers)
Arbitrary
Symbol
Analogy
Common Icon 4
 Common Icon 5

Hot Cold Fast Slow

Engine Oil Ammeter/ Generator Straight Turn

Automatic Variable Regulation Plus/ Positive Minus/ Neg

 Icon Characteristic 6

Semantik

Sintaksis

Pragmatik
Factors Influences 7

on Icon Usability

o Familiarity
o Clarity
o Simplicity
o Consistency
o Directness
o Efficiency
Factors Influences 8

on Icon Usability

o Context

o Expectancies

o Complexity of Task
 Choosing Icon 9

A Successful Icon

Is obvious what it does

or represents..

Looks different from

all other icons.

Is recognizable when
no larger than 16
pixels square.
Looks as good in
black and white as in
color
 10

Creating Icon Images

Concrete and Abstract and Visually & conceptually distinct

familiar unfamiliar shapes

Folder

Book

Telephone
 11

Creating Icon Images

Communication relationships
in icons

Avoid excessive detail

in icon design

Borders degrading
icon distinctiveness
 The Icon Design Process
12

Define Purpose Collect Idea Draw Test

Define the icon’s purpose Collect, evaluate, and Draw in black and white Test for user —
and use sketch ideas Draw using an icon-editing Expectations. —
utility or drawing package Recognition. — Learning
Test for legibility
 Images 13

Standard
Concistency

Color
Real World Picture

Legibility

Label
Navigational and
decorative image

Internationalization.
 Image Map
14

4M 3M
2M 5M
Video
15
Color 16

Color Characteristic

• What is Color
• Use of Color
• Possible problems with color
• Collor connotation
• Color and Human Vision
Color — What Is It?
17
 Use of Color 18

Color as
a Formatting
Color as Aid
a Visual
Code

Other
Color Uses
Possible Problems with Color 19
 Color Connotations 20

COLOR POSITIVE NEGATIVE

Red Active, Attractive, Dominating, Exciting, Aggressive, Alarming, Energetic
Invigorating, Powerful, Strong

Blue Abstinent, Controlled, Deep, Dreamy, Aggressive, Cold, Introverted,

Faithful, Harmonious, Intellectual, Melancholic
Mysterious, Pornography, Rational, Sensible,
Tenderness

Blue-green or Refreshing Aloof, Cold, Self-willed, Sterile,

turquoise Unemotional
Green Calm, Close to nature, Conciliatory, Gentle, Envious, Inexperienced, Jealous
Harmonious, Optimistic, Refreshing, Strong
willed
Yellow Cheerful, Colorful, Extroverted, Full of fun, Cowardly, Exaggerated,
Light, Lively, Youthful Superficial, Vain
Orange Alive, Communicative, Direct, Exciting, Cheap, Intimate, Possessive,
Joyful, Warm Vigorous
Purple Luxurious, Royal, Serious Sad
 Choosing Colors 21

Color must Use Do not

always have default display non-
a meaningful colors for link text in
purpose links link colors

Use the
browser
Presentation
Test all
216-color colors
palette
 Choosing Colors 22

Color must Use Do not

always have default display non-
a meaningful colors for link text in
purpose links link colors

Use the
browser
Presentation
Test all
216-color colors
palette
 Choosing Colors 23

Color must Use Do not

always have default display non-
a meaningful colors for link text in
purpose links link colors

Use the
browser
Presentation
Test all
216-color colors
palette
Uses of Color to Avoid 24