the power of icons
DESCRIPTION
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 iconography for your, or your Client's brand? Andy Fuller runs Designbull, a graphic design agency working for small and large organisations. They specialise in brand identities, icon design, UI design and advertising. He studied Graphic Design with Business Studies and Lettering, Calligraphy and Heraldic Design. He worked with a number of design and advertising agency's before setting up Designbull. Brands he's worked on include Digital River, Going-there.com, Microsoft, NHS, RolandDG and Canon.TRANSCRIPT
![Page 1: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/1.jpg)
hello...
1
![Page 2: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/2.jpg)
The Power of IconsA 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 BrandingNot 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 andHow do you go about developing iconography for your or your clients brand?
![Page 3: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/3.jpg)
“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.
![Page 4: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/4.jpg)
“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.
![Page 5: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/5.jpg)
What do I do...?
4
What do I do?
![Page 6: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/6.jpg)
Brand identitiesWeb design UI/UX
Advertising
5
Iʼm a design consultant - I help clients cut through the ʻbullʼ and get straight to the pointI 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.
![Page 7: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/7.jpg)
Graphic DesignLettering
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.
![Page 8: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/8.jpg)
What is an icon and where do they
come from?
7
![Page 9: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/9.jpg)
“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”
![Page 10: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/10.jpg)
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.
![Page 11: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/11.jpg)
10
Toilet icon… Ideogram - abstract ideaHow 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 actionMost icons today are ideograms or abstractions
![Page 12: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/12.jpg)
10
Toilet icon… Ideogram - abstract ideaHow 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 actionMost icons today are ideograms or abstractions
![Page 13: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/13.jpg)
Ideogram
10
Toilet icon… Ideogram - abstract ideaHow 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 actionMost icons today are ideograms or abstractions
![Page 14: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/14.jpg)
Ideogram
10
Toilet icon… Ideogram - abstract ideaHow 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 actionMost icons today are ideograms or abstractions
![Page 15: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/15.jpg)
Ideogram Pictogram
10
Toilet icon… Ideogram - abstract ideaHow 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 actionMost icons today are ideograms or abstractions
![Page 16: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/16.jpg)
Pictograms
100,000 years ago
11
100,000 years agoPictograms - 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.
![Page 17: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/17.jpg)
Hieroglyphs
5,000 years ago
12
5,000 years ago.Egyptian Hieroglyphs - logogram - pictorial alphabet. Water was a wavy or jagged line...
![Page 18: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/18.jpg)
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.
![Page 19: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/19.jpg)
Informational
40 years ago
14
40 years agoInformation Icons. Originally designed in 1974 for the US Department of Transport - they are still in use todayhttp://www.aiga.org/content.cfm/symbol-signs
![Page 20: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/20.jpg)
35 years ago15
35 years agoIn 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.
![Page 21: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/21.jpg)
35 years ago15
35 years agoIn 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.
![Page 22: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/22.jpg)
16
Icons are everywhere today and have to transcend language barriers.
![Page 23: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/23.jpg)
Icons are everywhere
16
Icons are everywhere today and have to transcend language barriers.
![Page 24: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/24.jpg)
17
From food labeling.McDonalds nutritional icons
![Page 25: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/25.jpg)
18
Sky television menu screenMovies - Ticket stubPadlock - Parental lockSpanner - settings (adjust) IDEOGRAMS
![Page 26: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/26.jpg)
19
Clothing label icons.
![Page 27: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/27.jpg)
20
Convention in icon design. but sometimes may cause confusion...Push Button. Receive bacon.
![Page 28: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/28.jpg)
20
Convention in icon design. but sometimes may cause confusion...Push Button. Receive bacon.
![Page 29: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/29.jpg)
20
Convention in icon design. but sometimes may cause confusion...Push Button. Receive bacon.
![Page 30: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/30.jpg)
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
![Page 31: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/31.jpg)
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
![Page 32: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/32.jpg)
22
Olympic icons are a good example of convention.Following a strict grid systems, angles and also a core brand identity
![Page 33: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/33.jpg)
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...)
![Page 34: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/34.jpg)
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...)
![Page 35: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/35.jpg)
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...!
![Page 36: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/36.jpg)
25
As an example - Logbook app - the most important icons stand out (red price tag, download arrow and padlock) pushes the content forward.
![Page 37: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/37.jpg)
25
As an example - Logbook app - the most important icons stand out (red price tag, download arrow and padlock) pushes the content forward.
![Page 38: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/38.jpg)
26
They help a user understand quicker to navigate.Without icons I would not have known that Brejeiro was a group shared folder.
![Page 39: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/39.jpg)
26
They help a user understand quicker to navigate.Without icons I would not have known that Brejeiro was a group shared folder.
![Page 40: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/40.jpg)
26
They help a user understand quicker to navigate.Without icons I would not have known that Brejeiro was a group shared folder.
![Page 41: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/41.jpg)
26
They help a user understand quicker to navigate.Without icons I would not have known that Brejeiro was a group shared folder.
![Page 42: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/42.jpg)
27
Gadget website dropdown navigation menu with icons removed - it becomes harder to scan the categories.
![Page 43: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/43.jpg)
28
Simple, clean isons follow convention. Unclutters a busy interface design. Hightlights services descriptions.Ranking/product position icon
![Page 44: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/44.jpg)
28
Simple, clean isons follow convention. Unclutters a busy interface design. Hightlights services descriptions.Ranking/product position icon
![Page 45: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/45.jpg)
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.
![Page 46: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/46.jpg)
30
Digital River - payment processor. This animated banner shows the classic icon of the sun for this summer offer in the advertising campaign.
![Page 47: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/47.jpg)
Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite effect.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.
![Page 48: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/48.jpg)
Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite effect.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.
![Page 49: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/49.jpg)
Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite effect.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.
![Page 50: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/50.jpg)
Source: 10 Mistakes in Icon Design Denis Kortunov
31
but can have the exact opposite effect.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.
![Page 51: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/51.jpg)
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.
![Page 52: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/52.jpg)
How do you go about developing
iconography?
33
How do you go about developing iconography for your or your clients brand?
![Page 53: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/53.jpg)
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!).
![Page 54: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/54.jpg)
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.
![Page 55: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/55.jpg)
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.
![Page 56: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/56.jpg)
37
The final logo and icon was approved and I produced a set of logo files, a one page logo guidelines
![Page 57: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/57.jpg)
38
additional icon sets, and app icon files for the iPhone and iPad devices.
![Page 58: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/58.jpg)
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
![Page 59: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/59.jpg)
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
![Page 60: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/60.jpg)
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.
![Page 61: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/61.jpg)
42
Software tech company, docfacto.com develops tools for developers that take the “too hard” out of documentationand 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 ‘different’ from what is expected.
![Page 62: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/62.jpg)
43
Icons created a fun, light-hearted feel to what is a detailed, technical product.
![Page 63: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/63.jpg)
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
![Page 64: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/64.jpg)
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
![Page 65: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/65.jpg)
GLOBAL DESTINATIONSERVICES
YOUR MOBILECITY 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 offer detailed city guides for relocation companies.
![Page 66: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/66.jpg)
46
It’s a responsive website app, which required an icon to represent each service they provide.Thought was taken for scalability and consistency.
![Page 67: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/67.jpg)
46
It’s a responsive website app, which required an icon to represent each service they provide.Thought was taken for scalability and consistency.
![Page 68: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/68.jpg)
47
Still in the UI mockup stageSketching helps to show how elements work and where icons work.Questions box hints at speech bubblesPlanner timeline scrolls with points and datesMap pins on Google map shows places clearly
![Page 69: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/69.jpg)
48
The user interface needs to work responsively on different screen sizes.I then take pics and put it into a preview app (Marvelapp.com)and client can also test it out for usability.
![Page 70: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/70.jpg)
49
Mockup design of how it may look on a large screen.
![Page 71: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/71.jpg)
50
Mockup design of how it may look on a mobile screen.
![Page 72: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/72.jpg)
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
![Page 73: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/73.jpg)
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.
![Page 74: The Power of icons](https://reader034.vdocuments.site/reader034/viewer/2022052601/558cdc1bd8b42aef118b4704/html5/thumbnails/74.jpg)
The Power of IconsAndy 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