How Apple Ended Up Leading the Icon Design Trends

Final product image
What You’ll Be Creating

Have you ever wondered how Apple actually ended up leading the design trends when it comes to icons? Well, in today’s article, we’re going to examine how it all happened and try to figure out if sometimes you’re better off fighting against trends.

1. How It
All Started

Today, computers have become one of the most
important tools at our disposal. From the simple
act of sending an email to the leisure of watching a movie or the beautiful
yet intricate art of creating a song, they help us carry out most of
our daily tasks, building what we could truly call a palpable symbiosis between human
and machine.

But have you ever
wondered how it all came to be?

Well, whether we actually believe it or not, this new way of living came
to be during the interval of just one human lifespan, and it originated back in
the 70s, somewhere within the research labs of an American technology company
called Xerox.

1.1. The
Birth and Importance of the GUI

In 1970, the Xerox Corporation decided to assemble a team of information
and physical sciences experts known as the “Architects of Information” under
one common roof—the Xerox Palo Alto Research
Center (PARC). According to PARC, the team led by Dr. George Edward
Pake sought to explore the emerging field of computer science in order to
“create the office of the future”.

Two years after PARC was established (1972), its Learning Research Group (LRG)
gave birth to Smalltalk, which was
an object-oriented, dynamically typed programming language. Smalltalk ended up
revolutionizing the software industry and influencing future programming systems,
since it enabled programs to be improved without having to be entirely rewritten.

A year later, in 1973, the Xerox Alto project took form. It aimed to introduce a high-resolution
bitmapped display (606 x 808 px) personal workstation, capable of breaking free
of the large centralized mainframes that people were used to up to that point. Due
to its high production costs, the system ended up being a limited series prototype/research computer, but would help pave the road ahead.

In 1975, the Alto debuted the first Graphical User Interface (GUI) based on the “desktop” environment,
which enabled the user to interact more easily with the machine using
contextual icons (documents, folders), pop-up menus, and multiple overlapping application
windows that could be controlled with a mouse using a point-and-click approach.

xerox alto gui replica
Xerox ALTO GUI Reproduction

Fast forward a few
years and in 1981, the Xerox Star 8010
was introduced, making it the first commercially available computer that came
with a GUI using icons based on the “office” metaphor.

Without knowing it, Xerox
ended up creating the GUI concept,
which completely shaped the way we humans interact with our computer
counterparts, becoming a commonly adopted industry standard as we now know.

1.2. The
Story of How Apple Stole the Keys to the Kingdom

In the summer of
1979, Steve Jobs, who was only 24 at the time, made a deal with Xerox that
allowed them to buy 100,000 shares of Apple stock at a valuation of
$1 million before its highly anticipated IPO.

In return, Jobs
would be given access to PARC, allowing him to take a look at the current projects, or as he put it, “open up the kimono”.

Xerox accepted, and
so Jobs and his colleagues went on to see Xerox’s PARC in December, but he
immediately felt that he hadn’t been shown enough. A few days later, Jobs was
given a couple more tours, at the end of which he found himself standing in
front of the Xerox Alto.

The briefing was
led by Larry Tesler, who was thrilled to show off the work that his bosses never
seemed to fully appreciate, but his colleague Adele Goldberg felt that the company
was making a big mistake and tried to keep the briefing as vague as
possible.

As quoted by Walter
Isaacson in his “Steve Jobs” biography, she recalled “it was a very controlled
show of a few applications, primarily a word-processing one”. Of course, Jobs
wouldn’t have it, and after a few calls to the headquarters he was invited back
a few days later, but this time he brought a larger team including Bill
Atkinson and Bruce Horn, who both knew what to look for.

As the
presentation started, Jobs quickly got angry since he was basically being shown
more of the word processor, so he started shouting, demanding them to stop the charade.
The folks at XEROX decided to open up the kimono a bit more and
agreed that Tesler could show them an unclassified version of Smalltalk.
Unfortunately for them, Atkinson and others had already read some of the papers
published by Xerox PARC, so Jobs called back to the headquarters, which in the end gave him and his team access to everything.

When Tesler started
showing them the real “goods”, both Jobs and his colleagues were fully blown away. People recalled seeing him hopping around with joy.

According to
Isaacson:

“Jobs kept saying that he couldn’t believe that Xerox had not
commercialized the technology”. “You’re sitting on a gold mine! I can’t believe
Xerox is not taking advantage of this.”

It was in that moment that Jobs realized that the Alto’s GUI was the
feature that was going to bring computers to the people, and so Xerox ended up unwillingly
giving away the keys to its kingdom.

Xerox might have invented the future of desktop computing, but ultimately it was Jobs who ended up seeing its true potential.

While some call it “one of the biggest heists in the chronicles of the industry”, others tend to defend what Apple did, due to the fact that they took the mouse and GUI concept and adapted them into something simpler that people could actually use.

For $300, XEROX’s mouse had three buttons and didn’t roll around smoothly, so Jobs visited a local industrial design firm called IDEO and told its founder Dean Hovey that he wanted a simple design based on one button that would cost $15 and could be used on his jeans. In 1983, the product ended up being shipped with the Apple Lisa, being among the first commercially available products of its kind.

If ALTO’s GUI required you to select a command in order to do things like resizing a window or changing the extension that located a file, Apple engineers created an interface that allowed you not only to drag windows and files around, but also to drop them within folders.

As Isaacson puts it:

“the Apple system transformed the desktop metaphor into virtual reality by allowing you to directly touch, manipulate, drag, and relocate things.”

“Apple’s engineers worked in tandem with its designers – with Jobs spurring them on daily – to improve the desktop concept by adding delightful icons and menus that pulled down from a bar atop each window and the capability to open files and folders with a double click.”

2. Apple’s Influence on the Evolution of Icons

While Apple didn’t invent the icon, it quickly ended up shaping the way it looked like by focusing on beauty and the constant push of the technology limitations of the time.

Throughout the years, it has constantly created new iterations of what an icon should look and feel like, thus positioning itself as a trend maker.

2.1. The Lisa OS

The first iteration of Apple’s GUI took shape back in the year 1983 when the Lisa was released to the public market. Even though Apple stated that the name was an acronym for Locally Integrated Software Architecture, Jobs himself told Isaacson that the name had a personal association, since his first daughter was named Lisa Nicole Brennan.

“Obviously it was named for my daughter”.

Jobs ultimately ended up taking over the daily management of the project from John Couch, implementing his ideas with the help of Atkinson and Tesler.

The computer ran Lisa OS and had a desktop filled with a checkerboard background, a single menu bar located at the top of the screen, and a few basic icons such as:

  • preferences
  • trash
  • clipboard
  • disk
  • diskette
  • clock
  • calculator
  • folder
  • etc.

The icons themselves were stripped-down depictions of real-life objects found within the workplace, and based on the screen technology of the time. They were created using a simple pixel grid using flat 2D shapes that were filled with white and delimited by a hard black outline.

Since they were based on what Jobs had seen on the Xerox Alto and later on the Xerox Star, they looked pretty similar, having only a handful of changes here and there.

Ultimately, Couch and a couple of other colleagues had enough of Jobs’s “meddling”, which led to him getting kicked off of the project.

2.2. Apple Macintosh System 1.0

While the Lisa wasn’t the hit that Jobs hoped it would be due to its high price and relatively low performance, it paved the way for the next iteration, which would come under the Macintosh name in 1984.

Soon after Jobs got kicked off the Lisa project, he took interest in Jef Raskin‘s Macintosh, although he later argued with Raskin over the final price and performance of the machine.

Raskin, while charmed by the idea of a bitmapped display and the use of windows, believed that the use of visual symbols such as icons would be unpractical, and furthermore detested the idea of using a mouse instead of a keyboard.

On the other hand, Bill Atkinson and Jobs firmly believed the contrary, which ultimately pushed Raskin to send a memo to Michael Scott that unknowingly led to his termination.

Soon after Jobs took over the Macintosh project, he started attending a calligraphy class over at Reed, where he fell in love with typefaces. It wasn’t long until he figured out that since the Mac would be using a bitmapped screen, they could create an endless array of fonts as long as they rendered them pixel by pixel.

Andy Hertzfeld ended up hiring an old high school friend by the name of Susan Kare, who initially was tasked with creating the pixel-based typefaces. Kare ultimately ended up developing the icons for the OS, helping define the graphical interface.

As Isaacson points out:

“Jobs lavished similar attention on the title bars atop windows and documents. He had Atkinson and Kare do them over and over again as he agonized over their look. He did not like the ones on the Lisa because they were too black and harsh. He wanted the ones on the Mac to be smoother, to have pinstripes.”

While the icons followed the same style as the ones from the Lisa and were still limited by the display technology of the time, Kare made sure that they would stand out through their simple yet artistic nature.

Every icon was recreated from scratch, and was designed in such a way that it would be clear to the user what it would be used for.

While Kare handled the design of the icons, it was Jobs who ultimately pushed the limits of her abilities in order to get the best possible result.

2.3. Macintosh System 7

Codenamed “Big Bang”, System 7 was released in 1991 and was the first Apple OS to be made available on a CD. 

Going beyond that, it represented the next evolution in terms of GUI design, since it introduced colors and shading to Mac users.

While the icons followed the same design approach, where they were delimited by hard black lines, they now came with colors, which made the entire interface look more appealing.

2.4. Mac OS 8

In 1997, Apple released Mac OS 8, which was a small improvement over System 7.

While the OS wasn’t exactly the incremental leap that the users for hoping for, it helped pave the way for what was yet to come.

The icons themselves felt more refined, as they adopted a more three-dimensional style by making different elements overlap in order to add perspective or by using shading in order to add volume. Subtle highlights were also used in order to turn them into clickable pieces of eye candy. 

2.5. Mac OS X 10.0

Launched in 2001, Mac OS X 10.0 (dubbed Jelly Mac) marked the return of Jobs to Apple, and was based on NeXTSTEP OS which was developed by the company that he created (NeXT), which they ultimately ended up acquiring with the goal of developing a new operating system.

The GUI itself felt more vibrant and jelly-like due to the playful use of transparency, lighting and shading that made its users instantly fall in love with it.

In terms of icon design, this was Apple’s debut of the skeuomorphic style, which was a complete departure from what anybody had seen previously. 

This new approach was made possible due to the evolution of screen display technology, which enabled them to push the boundaries of what an icon could and should be.

The style itself could be described as an extremely close depiction of a real-life object, since it used gradients, textures, highlights, and shadows in order to make it look as realistic as possible.

2.6. iPhone OS 1

Being the visionary that he was, Jobs quickly figured out that the next digital revolution would happen within the realm of pocket computing, so in 2007, Apple released a completely new product, expanding its portfolio line by introducing the first iPhone.

Equipped with a 3.5-inch screen, it ran a stripped-down version of OS X that was optimized for touch, which they called iPhone OS 1. It proved to be an instant hit due to its ease of use.

The GUI itself was driven by the same skeuomorphic design principle, which meant that the entire screen was pure beauty for the user’s eyes.

Going beyond beauty, the idea was to get users familiarized with the idea of using a touchscreen instead of actual physical buttons, so they created them as close as possible to a real physical button.

2.7. iOS 7

When Apple officially launched iOS 7 in 2014, users and designers alike saw a complete departure from skeuomorphism, which kind of shook everybody.

This change happened under the leadership of Jony Ive, who took over a bigger role in iOS software development after the departure of its former chief, Scott Forstall.

Ive himself explains that the decision to strip the OS of all its shadows and physical references came naturally as they:

“understood that people had already become comfortable with touching glass, they didn’t need physical buttons, they understood the benefits”.

Going beyond that, Microsoft had been pushing its new design language Metro (now Fluent Design) for some years now, and people seemed to be liking it more and more as it spread from PCs to mobile phones and its gaming console. So it probably made sense for Apple to abandon skeuomorphism and do things in a more simple manner.

While Metro relied entirely on the use of white symbols stacked on top of single colored backgrounds, iOS 7 kept it more joyful by adding subtle gradients to its backgrounds.

At a time where everybody was going as flat as possible with their design language, Ive brought gradients back, and it wasn’t long until others started following in his footsteps.

The problem was that many users complained that Apple ended up removing all the visual cues and brought a more font-centric approach, which made some operations feel less natural.

Fast forward to today, and while iOS has reached version 12, things haven’t changed all that much, which might prove that Apple usually knows what it’s doing.

2.8. Today’s Presence

As Apple gradually evolved its design language, it ended up shaping the entire industry, becoming a trend-maker for those who were involved in creating icons.

This can clearly be seen in current design patterns, such as this little networking icon pack that clearly relies on the initial glossy design of the Mac OS X 10.0. We can see the same use of playful colors and shapes, accompanied by vibrant gradients enhanced by subtle highlights and shadows.

network icons example
Network Icons by Envato Market

While skeuomorphism isn’t all that popular anymore, the style still holds its own, as we continue to have a huge number of icons based on it, such as this icon generator pack which allows you to build your own variations. From metal effects to wooden and glass ones, you can easily see how its creator takes the same approach of creating not a symbol but a real-world representation of it, using the same visual tools as Apple.

skeuomorphic icons example
Skeuomorphic Icons by Envato Market

iOS 7 brought a complete departure from Apple’s incredibly detailed icons, which at first made a lot of people roll their eyes, but guess what, eventually they did what they always do and followed in their footsteps, as we can clearly see in the below examples.

flat icons example
Flat Gradient Icons by Envato Market

Using simple gradients and flattened shapes, the aesthetics fall somewhere between flat design and skeuomorphism, bringing together elements from both trends.

seo icons example
SEO Icons by Envato Market

In a way, we can thank Apple for bringing the gradients trend back, since at one point Microsoft managed to shift the trend with its completely flat design language, but that didn’t last too long, as you can clearly see now.

social icons example
Social Icons by Envato Market

3. How Did Apple Manage to Lead the Icon Design Trends?

So how did one company manage to pull off all of this?

I mean, just look at the current trends, and tell me you don’t see Apple’s footprint within their design.

Well, when you start to think of it, it actually starts to make sense if you take the following facts into consideration.

3.1. They Had Jobs

Personally, I deeply believe that Apple as a company would have never reached the heights that it now sits on had it not been for Steve Jobs.

Through his outgoing personality and obsession for details, he managed to turn a garage project into one of the most successful companies in the world, completely changing multiple industries during the process.

As difficult a person as people said he was, he constantly proved to be a huge source of inspiration who not only managed to bring great minds around to the same idea, but also demonstrated again and again that he could turn it into reality.

Going beyond that, Jobs wanted and needed to create art, since he knew that users would ultimately end up appreciating the craftsmanship that was put into his products. It all had to be perfect, starting from the outer shell and going all the way into the software that made it all possible.

3.2. In the Right Place at the Right Time

Thanks to that XEROX PARC visit, Jobs ended up being in the right place at the right time, which allowed him to see the true potential that the GUI had.

Being the visionary that he was, he immediately realized that an icon-driven, mouse-operated system was the breakthrough that would ultimately land the personal computer within the homes of thousands if not millions of people.

Just think of it, if Jobs hadn’t pushed the engineers into showing him more, he might have never ended up witnessing the magic of the ALTO, which could have led to a completely different version of Apple, if any.

Going beyond that, personal computers were just starting to take form, and nobody knew exactly if and when they would end up taking over the world, which is why some companies missed out on the opportunity to take their slice of the pie. 

3.3. They Kept a Closed Loop

Ever since its early beginnings, Jobs sought out to build Apple as a closed system, where both the hardware and software were carefully produced in-house, in order to make the user’s experience as good as possible.

This allowed him to take on the challenge of figuring out what his customers needed and wanted before they did, which for some weird reason he always managed to pull off.

Ultimately, it was Jobs who ended up dictating what would make for a good user experience, when it came to the look and behavior of both its desktop and mobile operating systems.

4. Should We or Should We Not Fight Against Current Trends?

This next question is probably one that many of you have asked yourselves, and that is should you go with the trend or try and fight against it?

Well, to be honest, it’s quite a tricky one to answer, since it depends on a couple of factors.

4.1. Use Case

As an icon designer, you constantly end up working on projects that rely on your skills in order to bring a concept to life under the form of a visually appealing yet practical symbol.

The problem is that when you’re working within closed, controlled ecosystems, you need to adhere to a certain guideline so that your icon will “fit in” with the rest.

This is the classic case of app icons, where you need to look at what the trend is and adhere to a common ground. Of course, this doesn’t mean that you can’t innovate or stand out. Whether it’s through the use of colors or shapes, you can easily take a concept and make it your own as long as you have the necessary skills and vision.

On the other hand, if you’re working on more open projects, like a website, you can easily go against the trend and get a different feel for your icons as long as you, your client and the intended audience are pleased with the final result.

4.2. Project Limitations

In some cases, you’ll get the opportunity to work with a new client, but they already know what they want in terms of style. Depending on their influence on the decision making, you might end up being forced to adhere to a certain trend to a greater or lesser degree.

If this happens, you have two options. You either go against the imposed vision and prove that you know better and come up with something that actually fits the client’s needs, or you crack under the pressure and end up following the suggested style or trend.

Personally, I’ve had my share of situations when I clearly knew that the client was out of their “ballpark”, so I decided that I was going to push my vision, my take on the project, which was ultimately the one that got used. In the end, both the client and I were happy that I took a different approach, one that steered away from the accepted trend of the time.  

4.3. Your Need to Grow

The people that usually end up becoming trend makers are those that feel that they can push themselves harder in order to explore and grow.

Just imagine what would happen if we all followed the same guidelines and never deviated from them—not for colors, not for shapes, not for anything.

Everything that we put out there would be a similar if not exact copy of what everybody else was doing.

At the end of the day, you have to ask yourself if this is all you can do, or can you do better?

Can you improve your style so that you end up breaking the accepted design pattern and leading it in a fresh new direction?

4.4. Your Ability to Stay Ahead of the Curve

As it happens, when a new trend is set, things eventually end up leveling, which usually results in a huge mass of icons on top of icons that look and feel all too familiar.

This can be a great opportunity to break the circle and come up with something new and fresh that can set you and your style apart, thus leading to a new trend.

You just have to examine the past and the present, and you can easily identify and isolate key traits of a popular style that will help you figure out what might come next.

Whether you believe it or not, there’s always a clear pattern that ultimately ends up repeating itself by adding a few changes here and there.

4.5. Have You Got What It Takes to Become a Trend Maker?

Ultimately, the biggest factor has to do with your ability to become a trend maker.

Whether you believe it or not, we all have the tools to do it, but it takes skill, personality, and a lot of focus in order to be able to create something that instantly becomes a head-turner.

Whether it’s your incredible use of shapes or your outgoing personality, you need to figure out what it takes for others to follow and then gradually start imitating your work in order for a new trend to be established.

Conclusion

Ultimately, we can all agree that Apple has managed to do a great job at setting and maintaining trends throughout the years, but that doesn’t mean you can’t break out of it.

Sometimes, you’re better off being different, as long as you can do it in a way that remains true to the nature of your craft, and that is easing the user’s experience when it comes to interacting with a certain software application or interface.

As always, I hope you found this article useful, and if you have any questions or suggestions, please post them within the comments section and I’ll do my best to get back to you as soon as I can!

Expand Your Icon-Building Skills!

Always wanted to learn more about icons, but never knew exactly where to start? Well, today’s your lucky day since I took the time to put together a list of tutorials and articles that should keep you going for the following days.

{excerpt}
Read More

Leave a Reply

Your email address will not be published. Required fields are marked *