Icon Design Lecture Slides

Icon Design
Icon Design
 An icon is a visual representation of an application or
programme or file. Icon is an image that has the potential to
becomes the element of navigation in the process of
interaction.
 In computing and digital design, icons are pictograms used
in the web or mobile interface to support its usability and
provide the successful flow of human-computer interaction.
 One of the big benefits of icons is it’s ability to replace
the text.
2
Icon Design
3
Icon Design
 Icons are different from Logos: logos are scalable
vector pieces of branding designed for letterheads
and billboards. Icons are most often raster-based
outputs customised to look good within a square
canvas, at specific sizes and in specific contexts.
4
Icon Design
 Icons can cause usability problems when designers
hide functionality behind icons that are hard to
recognize. An icon’s first job is to guide users to
where they need to go. If you want to create your
own icons, you can download and test Adobe’s
Experience Design CC for free and get started right
way.
5
Icon Types
There are seven types of icons:
1) Universal Icons
2) Conflicting Icons
3) Unique Icons
4) Interactive Icons
5) Decorative and Entertaining Icon
6) App Icon
7) Favicon Icon
6
Universal Icon
A few icons enjoy nearly universal recognition among users. The symbols
for home, printing, searching and the shopping cart are such icons.
There is only one problem: Universal icons are rare. Beyond the
examples cited above, most icons are ambiguous. They can have different
meanings depending on the interface.
7
Icons with Conflicting Meaning
Trouble comes when you implement a commonly
used pictogram that has contradictory meanings.
The heart and the star are excellent examples. Not
only does the functionality associated with these
icons vary from app to app, but these two icons
compete with each other.
8
Icons with Conflicting Meaning
9
Unique Icons
 Icons are especially bad for anything abstract
because they generally are not strong visual
representations. How do you describe a unique
object or action? Apple’s icon for its Game Center
app, for example, is a group of colourful circles.
What does the Game Center icon mean? How
does it relate to gaming?
10
Unique Icons
11
Unique Icons
 Consider what everyone else is doing in your
space, then try a different direction. Always do
your research — the world doesn’t need another
checkmark icon.
 Play around with different colours and
compositions, and challenge yourself to find new
and clever metaphors.
12
Unique Icons
13
Interactive Icons
The icons of this type are directly involved in
interaction process and are the core supporters of
navigation. They are clickable or tapable and
respond to the users request doing the action
symbolized by them. Their main goal is to inform
users about the functions or features behind the
buttons.
14
Interactive Icons
15
Decorative and Entertaining Icon
The icons of this type give more about aesthetic
appeal than functionality. However, this aspect is
also significant and needs to be considered as the
style and appearance corresponding to the target
audience preferences and expectations set the solid
ground for high desirability. Decorative icons are
often used to present seasonal features and special
offers.
16
Decorative and Entertaining Icon
17
App Icon
App icons are the interactive brand signs that
present the application on different platforms
supporting the original identity of the digital
product. In most cases, it features the
logo of the app designed according to the
requirements set for this kind of icons. However,
it also can apply something else, for example, a
mascot or an abstract combination of
corporate colors.
18
App Icon
19
App Icon
20
Favicon Icon
Favicon, also known as URL icon or bookmark icon,
is a special type of symbol which represents the
product or brand in the URL-line of the browser as
well as in the bookmark tab. It allows users to get a
quick visual connection with it while they are
browsing. This interface element proved itself
effective for productive website promotion and good
recognizability of its visual identity.
21
Favicon Icon
22
Best Principles of Icon Design
 Every product needs a beautiful and memorable
sign that attracts attention in the market and
stands out on the home screen.
 But what exactly do you do if you need to design
an icon for a app / Websites that your users
will notice and remember? Let’s take a look at
some of the best principles of icon design.
23
Best Principles of Designing the Icon
1) Clarity: Clarity is an essential characteristic of a
great user interface. An Icon is the first opportunity
to communicate, a product’s purpose. When they
are unclear, there’s a high risk of confusion.
 Users are often intimidated by unfamiliar
interfaces. What they really want is a clear idea of
what will happen before they perform an action in
an unfamiliar app. That’s why your icons need to
set clear expectations for users before they click or
tap on them.
24
 A good user experience can be measured in many
ways, one of which is how much it frees the
user from having to think. Clarity is the most
important characteristic of a great interface.
The bottom tab bar icons might confuse first-time

Android users.
25
Symbolism is key. People often associate
pictograms with specific objects or actions based on
previous experience. For example, in the Western
world, the symbol of an envelope is commonly used
to represent mail – both in digital and in physical
spaces.
26
27
• Check competitors. If you have a hard time
finding ideas on how to design a mobile application
icon, take inspiration from products in your niche.
Your competitors have probably already found the
most obvious way to represent the primary function
of a product.
• Deconstruct user’s preferences. When designing
any visual element, it’s important to consider what
your target audience like or don’t like it. If you can
conduct user testing, you can ask users directly by
showing them different variations of your design to
find the one users like the most.
28
2) Memorability: Memorability is about making
something that stands out. If it stands out, it has a
better chance of being noticed by users.
• Complexity is the enemy of
memorability. The more details you add, the less
recognizable the object you design will be.
• Test your icon on the screen. Do a quick test to
figure out if the image stands out on the screen –
just place it on a grid of pictograms, and you’ll see
whether or not it stands out.
29
30
3) Consistency: Icons as well as the other elements of layout
have to feel consistent as they often become
the most powerful conventions and signifiers. For instance,
if there are several icons in the
app – as it usually happens – they should follow the same
style, concept and correspond to
the general design solution for the app.
 One way to ensure consistency between app and icon is to
keep the colour palette of your interface and icon in line,
and use a similar and consistent design language — a green
interface reinforced by a green app icon.
31
32
33
4) Scalability: You should design a mobile app icon
to make it crystal clear on every screen resolution.
• Avoid fancy graphics effects. Don’t include
photographic details, 3D perspectives and
drop shadows because they are hard to discern at a
small screen.
• Don’t use a lot of details. While on larger displays
you have enough real estate to show large graphics
and impressive visual effects, on a small screen such
elements can become blurry.
34
35
5) Make Icon good touch for Mobile app: People
interact with touch-based interfaces using their
fingers. UI controls have to be big enough to capture
fingertip actions without frustrating users with
unintended actions and tiny targets. The width of
the average adult finger is about 11 millimeters (mm)
wide, while a baby’s is 8 mm; some basketball
players have fingers wider than 19 mm!
The recommended target size for touchscreen objects
is 7 to 10 mm.
36
37
How to Test ICON for Usability
Icons need to be handled with care. Always
test them for usability. Watch how a real
first-time user interacts with your UI, which will
help you to determine whether the icons are
clear enough:
Test the icons for recognisability.
Ask people what they think the icons represent.
They shouldn’t have to wonder what they do,
because they won’t bother trying to find out.
38
How to Test ICON for Usability
Test the icons for memorability.
Icons that are hard to remember are usually
inefficient. Bring back a set of test users and ask
whether they remember an icon’s meaning after
having been told a couple weeks earlier.
39

Icon Design Lecture Slides

Uploaded by

Copyright:

Available Formats

Icon Design Lecture Slides

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Icon Design Lecture Slides

Uploaded by

Copyright:

Available Formats

Icon Design

The bottom tab bar icons might confuse first-time

You might also like