10 Styles That Have Changed the Face of Icon Design

10 Styles That Have Changed the Face of Icon Design

10 Styles That Have Changed the Face of Icon Design

10 Styles That Have Changed the Face of Icon Design

10 Styles That Have Changed the Face of Icon Design
10 Styles That Have Changed the Face of Icon Design
10 Styles That Have Changed the Face of Icon Design 10 Styles That Have Changed the Face of Icon Design 10 Styles That Have Changed the Face of Icon Design 10 Styles That Have Changed the Face of Icon Design 10 Styles That Have Changed the Face of Icon Design

10 Styles That Have Changed the Face of Icon Design

It’s been a while
since I’ve done this sort of article, but today I’m back, and I really think
you’re going to love this one. We’re going to put our creative juices on
hold and spend some quality time together exploring the history and evolution
of those little critters that we like to call “icons”.

So, if you’re into icon design
as much as I am (digital fist bump while smiling like a crazy person), make a
quick stop at the nearest espresso machine and grab a cup of that magical bean
liquor, and then gently hop on back into the chair and let the journey begin.

1. Icons. The What, When, and Why

Well, I guess a lot of you already know the
answer, but if the social sciences class “Research Methods and Techniques” taught me
anything, it’s that for each and every study (which this article clearly is),
you should always start from the root level of your concept and then gradually build
your way up using multiple layers of information.

The What

So, “icon” is a noun
of Greek origin (eikόn), and is
defined according to the Merriam Webster online dictionary as “a conventional
religious image typically painted on a small wooden panel and used in the
devotion of Eastern Christians.”

Now, I think we
can all raise an eyebrow and agree that this isn’t exactly the sort of “icon”
that we’re interested in, since we aren’t actually in the business of painting
divinity-praising images on wood (or I guess most of us aren’t), so let’s try
and approach the term from a more modern, technological perspective.

From a digital
standpoint, an “icon” is a “graphic symbol on a computer display screen that
represents an object (such as a file) or function (such as the command or
delete)”.

An even more
insightful explanation can be found on the online version of the Cambridge
Dictionary
where they define it as “a small picture or symbol on a computer
screen that you point to and click on (=press) with a mouse to give the
computer an instruction.”

Now, before we move on, I would like to point out that although icons
were initially created with the intent of being used within (desktop) computer
graphic interfaces, they have quickly proven their utility, making their way to
other screen-enabled devices that have adopted them due to their ease of use.

The When

The first ever set
of computer icons was born in 1981, when computer scientist David Canfield
Smith
and designer Norman Lloyd Cox joined forces in order to bring the “office
metaphor” to the Xerox Star 8010, which was the first office intended computer
of its time.

xerox star 8010 image provided by DigiBarn
Xerox Star 8010 – image provided by DigiBarn

The idea was to have Norman design a set of office items such as
documents, folders, file cabinets, etc., which were to define the first icon
style (pixel art) on which all the other ones would be based.

The Why

The reason why
icons came to be is that computers advanced to a stage where they needed a
visual symbol capable of easing the interaction between their software’s
interface (the GUI or Graphical User Interface) and the user’s needs.

This means that
from a symbolistic perspective, it has both a function and a meaning,
since it has to carefully and correctly convey the object or action which it
was intended to describe, using visual cues that aim to be self-explanatory.

You can learn more about the research process involved in the creation
of these types of visual metaphors, by reading my 10 Top Tips for Creating Awesome Icons article, which will answer most if not all of your questions.

2. Defining (Creative) Style

Since the article
focuses on presenting and explaining the evolution of icons from a visual
perspective, it’s only natural that we take a couple of moments to see exactly
what “style” is, since a lot of times the term gets misunderstood.

If we go back to
the Merriam Webster dictionary, we’ll see the noun defined as “a particular
manner or technique by which something is done, created, or performed”.

One definition really stood in my mind, since it describes the term as
“a distinctive appearance, typically determined by the principles according to
which something is designed”.

Put both together,
and we quickly realize that style is basically a form of expression (be it
visual or of another nature) based on an intricate relationship between the
methods and principles carefully chosen and developed by a creator (the artist),
in order to bring his or her vision into form.

Now, for example, an actor’s style can easily be reduced to the way that person talks, walks, and looks. Singers can set themselves apart by adopting a specific set of clothing
and a softer or deeper voice.

Designers, on the
other hand, strive to accomplish a sense of style by infusing different visual
characteristics based on methods and techniques that were developed over a long
process of exploration and refinement, making them their own.

Now here is where
it becomes a little tricky, since in design, one’s personal style can quickly be taken, imitated and iterated upon, turning it into a collective style, where
different designers follow similar if not identical compositional techniques.

That being said, no individual style is completely pure, since
everything that is being created is basically a visual iteration and/or
evolution based on somebody else’s previous work.

3. What Influences Style?

At this point, we’ve managed to get a sense of what “style” is, but let’s take a couple of
moments and see what factors can influence its development and evolution.

As we all know, for
every art form there are a set of tools and mediums that end up influencing its
growth and popularity, and icon design is no exception to that rule.

As designers, we spend
our days creating digital products that are meant to live on within a digital medium,
which is influenced by the state and evolution of technology determined by the computing
power and display advances made available in one’s lifetime. This is why the
journey from pixel art icons to fully fledged skeuomorphic ones was a really
long one, since computers didn’t have the raw power to display the amount of
pixels that we currently have.

For designers, this
means that they always have to adapt and become fully dependent on the medium, which
depending on its evolutionary state can influence their style by adding or
removing creative limitations.

A perfect example
of this is VR (Virtual Reality) where we are just starting to make advances by figuring out the possibilities and limitations of this new and exciting
medium.

In the beginning, I promised that the study would focus on presenting and
briefly describing the ten styles that shaped icon design into its current
state, so without wasting any more time, grab another sip of that hot coffee and
let’s jump straight into it.

3.1 The Original Three

We’re going to kick things off by presenting the trinity from which all
started.

Pixel Art Icons

Then

As we saw a few
moments ago, the first ever icon style that came into existence was created
and shaped by the technology of its time, when computers were slow and designers
had to deal with monochromatic displays.

The mission was to
make use of the existing limitations and create the icons using an elaborate
process of positioning a specific number of black pixels over a square grid, until
the symbol started taking shape, which is where the name of the style comes
from.

The style itself can only be described as bold, since it used hard, thick, black lines for the
outlines and softer, thinner lines and details for the inner composing sections.

To me personally, pixel-based icons are really impressive since not only
were they the first to open up personal computers to the consumer market, but they’ve
also managed to stay relevant due to the simplicity of their nature, since over
their 36 years of existence, not much has changed, and maybe that’s a good
thing.

xerox 8010 star globalview os
Xerox 8010 Star GlobalView OS – image provided by ToastyTech

Now

Today, pixel art icons continue to maintain their popularity, since they’re a powerful nostalgia trigger, bringing back the feel and look of the early days of computing, where style wasn’t about how many details you could cram into a small space, but how you could capture the eyes’ attention using as few visual elements as possible.

pixel icons by gustavo zambelli
Pixel Icons by Gustavo Zambelli

Isometric Icons

Then

The year is 1985,
and ATARI has just debuted TOS (The Operating System) with the launch of its
Atari 520ST computer, which is the first time we see a visual evolution from
the pixel icons. If before the user had to deal with two-dimensional icons, now
the experience changes for the better with the introduction of isometric icons,
based on the same “office metaphor”, which added the illusion of depth and dimension
to its GUI (Graphical User Interface) using the third axis.

In terms of style,
this wasn’t a radical departure. Think of it more as a visual improvement,
since they were still pixel based, but brought some subtle changes such as the
addition of projected hard shadows and uniform line thickness.

To some, the word “isometric” doesn’t seem like the best way to label
the style, since by its definition, an isometric projection is a “method for
visually representing three-dimensional objects in two dimensions” in which
“the three coordinate axes appear equally foreshortened and the angle between
any two of them is 120 degrees”. To me personally, they could be seen as the
first attempts at bringing a new perspective to the “office metaphor” that
ultimately led to what we now call isometric icons.

atari tos
Atari TOS – image provided by ToastyTech

Now

Today, the style
has seen a radical departure from its monochromatic pixel-based origins, leaning
heavily on the use of colors and shapes in order to bring three-dimensional
objects to life.

In terms of complexity, the style is fairly difficult to master, since
it requires designers to visually reimagine the object they want to
portray using a rotated cube as a reference object, which isn’t always easy, especially when you’re dealing with oddly shaped objects.

isometric icons by Thomas Brunsdon
Isometric Icons by Thomas Brunsdon

Skeuomorphic Icons

Then

Fast forward four
years, and things are finally starting to break the pattern with the launch of Steve Jobs’s NeXT workstation computer, which came with NeXTSTEP OS.

If up until this
point icons were thought of as being simple symbols meant to ease the interaction
between human and machine, Jobs took it to the next level with the
introduction of the first ever skeuomorphic icons, which were designed to mimic
their real-world counterparts.

Say goodbye to those thick, chunky outlines, and hello to a level of
craftsmanship never before seen inside a GUI (Graphical User Interface),
characterized by the use of shading and highly detailed illustrations all
crammed inside the same small space.

nextstep os 08
NeXTSTEP OS 0.8 – image provided by ToastyTech

Now

As computers became
more powerful and screen technology evolved, skeuomorphism became more of an
art form than a simple symbol, pushing the techniques and imagination of its
creators to a point where the depicted objects blurred the line between pixels
and reality.

From intricate
gradients to life-like textures, highlights and shadows, the process can be
really hard to master if you haven’t had any artistic training. If you’re interested in this style, you can start learning by recreating a Stylized Strawberry Icon which will show you all the basics.

The style itself became super popular in 2007 with the launch of Apple’s
iPhone, and remained so up until the year 2012, when there was a shift from
realistic icons to minimalist ones.

skeuomorphic icon by eddie lobanovskiy
Skeuomorphic Icon by Eddie Lobanovskiy

3.2. The Evolution

At this point, our
timeline is going to get a little blurry here and there, since for some of the upcoming
styles we won’t be able to pinpoint the exact moment when they appeared and
gained popularity, which is why I’ve decided to group and order them based on
the attributes which they share and evolved from.

Line Icons

line icons by Justas Galaburda
Line Icons by Justas Galaburda of Icon Utopia

Line icons are a
direct evolutionary branch of the original pixel art icons, being one of the
current popular styles practiced, due to their ability to portray powerful
imagery using simple shapes and outlines.

For a design
philosophy, the style itself uses the same principle of separating the object’s
different composing sections using hard, thick lines, but it does so using
strokes as opposed to individual squares. This change of technique has made it
easier for the designer to create and adjust them, since you’re now dealing
with shapes and paths instead of individual pixels.

Beyond that, the
style has become more organic, since the evolution of computer displays has
made it possible to use curved lines and rounded corners, compared to the old
days when you had to bring your ideas to life using super-sharp rectangular
shapes.

I personally love the style, since it’s easy to approach and get good at
once you’ve practiced it a few times.

Glyph Icons

From a
terminological perspective, the noun “glyph” comes from the
French “glyphe” which itself originates from the Greek “gluphē” and can be defined as a “hieroglyphic character
or symbol”. From a design perspective, a “glyph” is a visual style, where the
objects are represented using monochromatic shapes that can have subtle empty spaces
separating their different composing sections.

While simple in its nature, the style can be really effective, especially
when used in smaller sizes, since you can depict the object using a
minimalist but still comprehensible result, which is why it can be seen as
the precursor of flat design.

glyph icons by martin david
Glyph Icons by Martin David

Flat Icons

Flat icons as a
style became popular around the year 2012, with the launch of Microsoft’s newly
redesigned visual language that we knew as Metro (now Fluent), which came as a
direct response to Apple’s abuse of skeuomorphism.

Visually speaking,
there was a huge shift in design philosophy, aiming for a clear, minimalist approach by breaking the object down to its bare essentials,
removing as many details as possible in the process.

This led to the
birth of a new type of icons that were easy to understand and use, due to the
fact that the focus had been redirected onto the careful use of colors and
basic geometric shapes.

Eventually, designers saw the potential that flat design had, and they started creating new icons based on clear shapes, free of any gradients or drop
shadows, and developed the style into what it is now.

flat icons by dominic flask
Flat Icons by Dominic Flask

Material Icons

As things started
changing with flat design, in 2014 Google decided to embrace the change and brought
designer Matias Duarte aboard to help create its own visual language, which it
called Material Design.

Now, if skeuomorphism had too much going on, and flat design was well, too flat, Google
positioned itself somewhere in the middle by bringing back the highlights and
shadows but giving them a subtler presence, creating a visual style where
objects are stacked over one another. They went even further and put together a
pretty extensive online guide, where they talk about everything from
material properties to layout principles and color styles, which makes it
really easy to jump in and adopt the style.

In my opinion, material icons are a nice addition to flat design, and as
long as Google has something to say, they will continue to be popular.

material icon by jovie brett bardoles
Material Icon by Jovie Brett Bardoles

Dimensional Icons

For the next style,
it’s really kind of difficult to put a label on, since it sits somewhere between
the boundaries of line icons and isometric ones, borrowing key elements from
both.

I’ve almost broken my brain trying to define it, and I finally came to the conclusion that the
best fit would be dimensional, since the process focuses on adding dimension or
depth to the icon from a horizontal perspective.

The way it’s done is
by presenting both the front and one of the object’s sides, using rectangular
shapes for everything that is not of circular or curved nature. For the objects
that fall within the second category, they are usually represented using one
perspective, the front, which creates a contrasting and at the same time cohesive
balance between the icon’s composing elements.

In terms of difficulty, the style is somewhat easy to understand and
master as long as you’ve got a basic understanding of perspective, so that you
can correctly define and position the details needed for both the front and
side sections.

dimensional icons by ryan putnam
Dimensional Icons by Ryan Putnam

Hand-Drawn Icons

This next one is in
a category of its own, since as visually appealing as it is (just look at these
little beauties), it’s not that frequently used since most of the time it’s
viewed as being too “playful”. The style became more popular after Dropbox’s
rebranding, which showed the potential to build a truly unique identity, using
hand drawn-like lines that have a shaky nature to them.

In my opinion,
this type of icon can prove to be friendlier, since the relation between
them and the user becomes warmer because you’re dealing with symbols that
feel as if they were designed not by a computer, but rather by a living, breathing
human.

In terms of complexity, the style can be hard to handle, especially if
you’re not used to drawing and shading, which also makes it hard to imitate,
since you’re not just creating the shapes by clicking and dragging rectangles
and circles.

hand drawn icons by corrine alexandra
Hand-Drawn Icons by Corrine Alexandra

Animated Icons

Lastly, we have a
breed of icons that is truly unique since its dynamic nature begs you to click
on them. While they might look like pure visual gimmicks, animated icons are
the future of interaction, since they hold an incredible power when it comes to
the engaging process between the user and the interface.

No matter what
form they take (flat, line, etc.), animated icons can bring something new and
fresh to the table, due to their second state (when hovered on), and thus
double the information available to the user, since when hovered on, they can
bring useful data in a matter of seconds.

In a world where
VR (Virtual Reality) and AR (Augmented Reality) are the future, one can see the potential of integrating animations within the fabric of icons.

In terms of complexity, the style can be hard to master, since you are not only designing them but also taking the time to fully bring them to life,
which can be hard if you don’t know exactly what you want to express through
them.

Animated Icons by Dave Chenell

A Few Final Words

Before we wrap things up, I really want to thank each and every designer who participated in the study, and most importantly ToastyTech for providing the images of the operating systems.

That being said, I hope you’ve enjoyed going through the history of what we call icons and discovered something new and captivating.

Also, if you want to learn more about icons, I strongly recommend you go through some of the following articles, since I’m sure you’ll end up finding some fresh and useful tips.