The Power of icons

2,315 views 62 slides Jun 28, 2014
Slide 1
Slide 1 of 74
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
57
Slide 58
58
Slide 59
59
Slide 60
60
Slide 61
61
Slide 62
62
Slide 63
63
Slide 64
64
Slide 65
65
Slide 66
66
Slide 67
67
Slide 68
68
Slide 69
69
Slide 70
70
Slide 71
71
Slide 72
72
Slide 73
73
Slide 74
74

About This Presentation

Graphic designer, Andy Fuller talks about icons.What icons are and where they come from. He will also talk about an area of his particular specialism which is the use of icons in interfaces, apps and mobile platforms. What makes a good icon? What makes a bad icon? How do you go about developing icon...


Slide Content

hello...
1

The Power of Icons
A brief talk on what icons are, where they come from and how to develop
iconography to your clients’ brand.
by Andy Fuller : Designbull
2
Thanks for having me. My name is Andy Fuller - Designbull - Creativity in Business Branding
Not often I get asked to talk about one of the things I love designing, Icons!
Iʼll go through what icons are and where do they come from?
Use of icons in interfaces, apps and mobile platforms and
How do you go about developing iconography for your or your clients brand?

“Trying to capture the essence of an object or idea with
only a few lines and at the same time maintaining its
elegance – is pretty much design in a nutshell. That’s what’s
so great about icons, they’re tiny poems.”
Kyle Tezak, The Four Icon Challenge
3
Before I talk about Icons, Iʼll briefly tell you about what I do and how I work.

“Trying to capture the essence of an object or idea with
only a few lines and at the same time maintaining its
elegance – is pretty much design in a nutshell. That’s what’s
so great about icons, they’re tiny poems.”
Kyle Tezak, The Four Icon Challenge
3
Before I talk about Icons, Iʼll briefly tell you about what I do and how I work.

What do I do...?
4
What do I do?

Brand identities
Web design UI/UX
Advertising
5
Iʼm a design consultant - I help clients cut through the ʻbullʼ and get straight to the point
I have an office in Bath with my partner specialising in branding, logo identities, web design and user interfaces and also creating advertising campaigns.
I often work with associates (PR, marketer, copywriter, web developers, photographers and illustrators) to offer clients a full agency service.

Graphic Design
Lettering
Heraldry & Calligraphy
6
My history - I went to college for two years studying Graphic Design and Business Studies, then 2 years studying Heraldic Design and Lettering, Signmaking
and Calligraphy.
Then worked in a number of design and advertising agencyʼs for 10 years before going ʻofficialʼ in 2006.

What is an icon
and where do they
come from?
7

“A thing regarded as a representative
symbol of something”
I•CON
8
When you Google it - “A thing regarded as a representative symbol of something”

Greek word: εἰκών
(eikōn)
meaning likeness or image
9
The word itself comes from the Greek word εἰκών (eikōn), which has two meanings: likeness or image, both of which apply to icons.
It covers a wide range of image types from simple play and pause buttons to detailed, full-colour icons that identify an application.

10
Toilet icon… Ideogram - abstract idea
How do we know this is a toilet - if you had just come out of the jungle and were dying for the toilet would you see this as the toilet?
No! This is learnt through convention.
No smoking Pictogram - picture of actual object or action
Most icons today are ideograms or abstractions

10
Toilet icon… Ideogram - abstract idea
How do we know this is a toilet - if you had just come out of the jungle and were dying for the toilet would you see this as the toilet?
No! This is learnt through convention.
No smoking Pictogram - picture of actual object or action
Most icons today are ideograms or abstractions

Ideogram
10
Toilet icon… Ideogram - abstract idea
How do we know this is a toilet - if you had just come out of the jungle and were dying for the toilet would you see this as the toilet?
No! This is learnt through convention.
No smoking Pictogram - picture of actual object or action
Most icons today are ideograms or abstractions

Ideogram
10
Toilet icon… Ideogram - abstract idea
How do we know this is a toilet - if you had just come out of the jungle and were dying for the toilet would you see this as the toilet?
No! This is learnt through convention.
No smoking Pictogram - picture of actual object or action
Most icons today are ideograms or abstractions

Ideogram Pictogram
10
Toilet icon… Ideogram - abstract idea
How do we know this is a toilet - if you had just come out of the jungle and were dying for the toilet would you see this as the toilet?
No! This is learnt through convention.
No smoking Pictogram - picture of actual object or action
Most icons today are ideograms or abstractions

Pictograms
100,000 years ago
11
100,000 years ago
Pictograms - Cave paintings from Argentina reveals that weʼve been telling stories through pictures for a millenia.
The simplest icon of all - the circle, was used to represent the sun, but developed over time to covey more abstract concepts of heat
and light.

Hieroglyphs
5,000 years ago
12
5,000 years ago.
Egyptian Hieroglyphs - logogram - pictorial alphabet. Water was a wavy or jagged line...

Heraldic
(Symbolic pictograms)
500 years ago
13
500 years ago
Heraldry - Symbolic pictograms. Icons throughout history were not only art - they recorded events, telling stories of food and shelter,
and to distinguish participants in combat when their faces were hidden by iron helmets. Using symbols, shapes and colours were easier
to understand and conveyed repeated themes.

Informational
40 years ago
14
40 years ago
Information Icons. Originally designed in 1974 for the US Department of Transport - they are still in use today
http://www.aiga.org/content.cfm/symbol-signs

35 years ago
15
35 years ago
In 1981 the arrival of the graphical UI (for the Xerox Star) was where the term 'icon' was coined (reusing the term taken from a Russian
orthodox church. ʻTo be holy - to be veneratedʼ)
The classic document icon with the folded down right corner, calculator and printer are still the convention today.

35 years ago
15
35 years ago
In 1981 the arrival of the graphical UI (for the Xerox Star) was where the term 'icon' was coined (reusing the term taken from a Russian
orthodox church. ʻTo be holy - to be veneratedʼ)
The classic document icon with the folded down right corner, calculator and printer are still the convention today.

16
Icons are everywhere today and have to transcend language barriers.

Icons are everywhere
16
Icons are everywhere today and have to transcend language barriers.

17
From food labeling.
McDonalds nutritional icons

18
Sky television menu screen
Movies - Ticket stub
Padlock - Parental lock
Spanner - settings (adjust) IDEOGRAMS

19
Clothing label icons.

20
Convention in icon design.
but sometimes may cause confusion...
Push Button. Receive bacon.

20
Convention in icon design.
but sometimes may cause confusion...
Push Button. Receive bacon.

20
Convention in icon design.
but sometimes may cause confusion...
Push Button. Receive bacon.

21
What is the convention in icon design? A comparative test of Public Symbols
Which Icon symbol was the most recognisable?
A lowercase i is accepted for information

21
What is the convention in icon design? A comparative test of Public Symbols
Which Icon symbol was the most recognisable?
A lowercase i is accepted for information

22
Olympic icons are a good example of convention.
Following a strict grid systems, angles and also a core brand identity

23
Important in keeping consistency in each icon as a complete set design.
Although this icon confused me for a while before I worked it out...
A difficult balance between the convention and style of the brand identity. (form and function...)

23
Important in keeping consistency in each icon as a complete set design.
Although this icon confused me for a while before I worked it out...
A difficult balance between the convention and style of the brand identity. (form and function...)

Icons in interfaces,
apps and mobile
platforms
24
Use of icons in interfaces, apps and mobile platforms.
Weʼre so used to them - we donʼt need to think much.
Theyʼre visual cues - to aid interaction and save you time...!

25
As an example - Logbook app - the most important icons stand out (red price tag, download arrow and padlock) pushes the
content forward.

25
As an example - Logbook app - the most important icons stand out (red price tag, download arrow and padlock) pushes the
content forward.

26
They help a user understand quicker to navigate.
Without icons I would not have known that Brejeiro was a group shared folder.

26
They help a user understand quicker to navigate.
Without icons I would not have known that Brejeiro was a group shared folder.

26
They help a user understand quicker to navigate.
Without icons I would not have known that Brejeiro was a group shared folder.

26
They help a user understand quicker to navigate.
Without icons I would not have known that Brejeiro was a group shared folder.

27
Gadget website dropdown navigation menu with icons removed - it becomes harder to scan the categories.

28
Simple, clean isons follow convention. Unclutters a busy interface design. Hightlights services descriptions.
Ranking/product position icon

28
Simple, clean isons follow convention. Unclutters a busy interface design. Hightlights services descriptions.
Ranking/product position icon

29
Digital River - payment processor. Icons used to help break up the information and visualise benefits on this landing page and
throughout an advertising campaign.

30
Digital River - payment processor. This animated banner shows the classic icon of the sun for this summer o!er in the
advertising campaign.

Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite e!ect.
bloated icons in Microsoft Windows 8 do not work in smaller sizes.
An icon should be easy to read. The fewer elements it has, the better.
Database icons: At first glance everything looks alright.
But if this application (or a separate toolbar) deals only with databases, we can remove the unnecessary part.

Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite e!ect.
bloated icons in Microsoft Windows 8 do not work in smaller sizes.
An icon should be easy to read. The fewer elements it has, the better.
Database icons: At first glance everything looks alright.
But if this application (or a separate toolbar) deals only with databases, we can remove the unnecessary part.

Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite e!ect.
bloated icons in Microsoft Windows 8 do not work in smaller sizes.
An icon should be easy to read. The fewer elements it has, the better.
Database icons: At first glance everything looks alright.
But if this application (or a separate toolbar) deals only with databases, we can remove the unnecessary part.

Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite e!ect.
bloated icons in Microsoft Windows 8 do not work in smaller sizes.
An icon should be easy to read. The fewer elements it has, the better.
Database icons: At first glance everything looks alright.
But if this application (or a separate toolbar) deals only with databases, we can remove the unnecessary part.

32
OS 7 Good or Bad icon design?
When it was first unveiled a year ago there was a lot of negative criticism on the new interface design.
But it started the trend towards flat design, and today, we have become accustomed to it.
It has become the convention within icon design.

How do you go
about developing
iconography?
33
How do you go about developing iconography for your or your clients brand?

34
Bekumo logo design was created on behalf of tecgenie, for an iPad business enterprise app called ‘Bekumo’ (Japanese translation
as ‘hazy cloud.’).
As soon as I had digested all the information from the briefing, I spent some time researching the market (there’s a lot of ‘cloud’
logos out there!).

35
The first idea I came up with was turning the ‘B’ of Bekumo onto its side, creating the cloud icon – which was an important factor
in this logo mark.
the ‘big idea’ – can come down to either a few days or a few weeks.

36
I showed the client the ‘B’ turning into a cloud icon from my first idea and they loved it, so I set to work on working up a selection
of ideas based around this.

37
The final logo and icon was approved and I produced a set of logo files, a one page logo guidelines

38
additional icon sets, and app icon files for the iPhone and iPad devices.

39
Property Document Vault is an online cloud storage application designed specifically for property owners and landlords. It is based on
the SharePoint platform. 
From the initial sketches, initial logo options were shown to the client which included using the well-known ‘cloud’ icon, and
combining this with ideas using a safe lock and a paper clip in the shape of a house

40
The commercial property aspect was not obvious in the previous icons, so we looked at using building shapes in or around the
cloud – and also a more recognisible padlock icon

41
The final logo and icon. We provided the logo and icon saved into various formats for web and print and the client has used this
to help in their new sofware.

42
Software tech company, docfacto.com develops tools for developers that take the “too hard” out of documentation
and helps businesses eliminate documentation debt.
Target market was developers, so after a meeting and discussion with docfacto, a quirkybrand character, logo and icon that was
‘di!erent’ from what is expected.

43
Icons created a fun, light-hearted feel to what is a detailed, technical product.

44
Additional software add-ons each had to have their own icon that was consistent with the main brand and also describe the
product. GRABIT is a screenshot app - holding a frame

44
Additional software add-ons each had to have their own icon that was consistent with the main brand and also describe the
product. GRABIT is a screenshot app - holding a frame

GLOBAL DESTINATION
SERVICES
YOUR MOBILE
CITY TOOL
45
Going-there.com provide specialist on-the-ground services for employees relocating around the globe.
in addition to their new corp site, we’re working on a website app for them called ‘gt2go’. designed for mobiles first and will
o!er detailed city guides for relocation companies.

46
It’s a responsive website app, which required an icon to represent each service they provide.
Thought was taken for scalability and consistency.

46
It’s a responsive website app, which required an icon to represent each service they provide.
Thought was taken for scalability and consistency.

47
Still in the UI mockup stage
Sketching helps to show how elements work and where icons work.
Questions box hints at speech bubbles
Planner timeline scrolls with points and dates
Map pins on Google map shows places clearly

48
The user interface needs to work responsively on di!erent screen sizes.
I then take pics and put it into a preview app (Marvelapp.com)
and client can also test it out for usability.

49
Mockup design of how it may look on a large screen.

50
Mockup design of how it may look on a mobile screen.

To sum up
Keep it simple and memorable
If there is a convention - use it
Don't be abstract, or too detailed
51
Keep it simple and memorable
If there is a convention - use it
Don't be abstract, or too detailed

To sum up
Reduce the number of colours and icons
Be consistent - don't design icons in isolation
- follow a brand identity or representation of app.
52
Reduce the number of colours and icons
Be consistent - don't design icons in isolation - follow a brand identity and representation.

The Power of Icons
Andy Fuller : Designbull
Reference and sources from: 10 Mistakes in Icon Design by Denis Kortunov | Icon Design Handbook by Jon Hicks | Let's Talk Icons by Michael Flarup
53
Thanks for having me. My name is Andy Fuller - Designbull - Creativity in Business Branding