Advertisement
Theory

Know Your Icons Part 1 - A Brief History of Computer Icons

by

As with great works of art, you must look into the past to appreciate the future. With roots as far back as the 1970's, the humble icon has come a long way. Following is a collection of icons though history. Although there have been many other operating systems in the time between 1981 - 2010, I've hand picked the ones of the most significance to modern icon design. These designs show just a small fraction of the icons in the many and varied User Interfaces throughout the years. To learn more about the history of User Interface Design you can find a comprehensive article on the subject on Wikipedia.

This Post is Day 7 of our Interface Design Session. Creative Sessions

1981 Xerox 8010 Star — The First Consumer GUI Computer

In 1973 the Xerox Alto was the world's first GUI (Graphical User Interface) based computing system. Designed around an "office" metaphor (also a first), the Alto was built as a research computer and therefore wasn't available for commercial release. With 2,000 machines worldwide, the Xerox Alto was so significant, it was a source of inspiration for the Apple Lisa (1983). In 1981 the Xerox Star was released, incorporating many of the design features of the Alto. The Xerox icons demonstrate a consideration for human interaction. As you can see, Calculator, Document, Folder and Trash haven't changed in almost 30 years.

1981 - Xerox 8010 Star

1983 Apple Lisa — Popularized the GUI

Development of the Apple Lisa started in 1978 and was heavily influenced by the earlier Xerox computers. Hoping to carve a niche in the personal computing market, Apple adopted the office metaphor to make navigation easier for new users. Lisa was an advanced GUI for the time as it had movable "Desk Accessories" (early Widgets), drop-down menus and folder based directories. You can see the icons are not much different from the Xerox, except for the size and single pixel outlines, and the use of the computer as the preferences icon (it's now common to use cogs).

1983 - Lisa Office System 1

1984 Apple Macintosh 1.0 — Artist Designed Icons

A year after Lisa the Apple Macintosh 1.0 was released. We now see drag and drop file copying, movable windows and fancy new icons! The Macintosh icons were designed by the now legendary Susan Kare. Susan Kare has to be the all time master of Icon design and was responsible for many icons including the MacPaint interface (fig 2). Kare's philosophy on icon design is simple, "I believe that good icons are more akin to road signs rather than illustrations, and ideally should present an idea in a clear, concise, and memorable way. I try to optimize for clarity and simplicity even as palette and resolution options have increased." This philosophy is at the core of Apple's early commercial success.

1984 - Macintosh System 1.0 (fig 1)

1984 - Macintosh System 1.0 (fig 2)

1985 Atari TOS — Isometric Icons

It's important to note — for those a bit younger than us old sentimental computer users — that the GUI was not only for the Apple systems. The Atari ST had an OS called TOS which had a minimal interface also using the desk metaphor, which by then had become a computer standard. It's interesting to see that the TOS has Isometric Disk icons (file drawers).

1985 - Atari TOS Version 1.0

1985 Amiga Workbench — Four Color Icons

The Amiga Workbench was made for the Amiga 1000 personal computer. Despite the crudely designed icons, Workbench was actually ahead of its time. Including features such as customizable mouse cursors, four color graphics and multi-state icons. You can see the two states of the "Workbench" icon in the example below. The Amiga broke with the desktop convention and chose to use a workbench with drawers instead of files.

1985 - Amiga Workbench 1.0

1985 Windows 1.0x — Microsoft's First GUI OS

In 1985 Microsoft finally released its first GUI. The icons are just as crude as the Amiga but don't include color. It's interesting to see that the first icons for Windows Paint employ different symbols to MacPaint, in particular the Spray Painter.

1985 - Windows 1.0x

1986 GEOS for Commodore 64 — The Alternative OS

I've included GEOS for the Commodore 64 as, at the time, it was the second most popular GUI behind Macintosh 1.0 (based on units shipped). The icons have more character than Windows OS and share the Mac philosophy of clearly expressed metaphors.

1986 - Commodore C64 GEOS

1991 Macintosh System 7 — First Mac OS with Colors

With System 7 we saw the introduction of color to the icons. You may notice that the icons are now slightly raised to appear "clickable".

1991 - Macintosh System 7

1992 Windows 3.1 — New Designer Icons!

In Windows 3.0 (1990) Microsoft employed Susan Kare (who first made icons for the Macintosh 1.0) who greatly improved the designs. In 3.1 Kare further refines the colors and designs for the icons. Windows 3.1 was the first Windows platform with pre-installed True Type Fonts.

1990 - Windows 3

1995 Windows 95 — The Start Button

Windows 95 introduces more colors to the icons and a few more isometric designs. The Windows 95 design is a complete re-build and includes elements that are still part of Windows designs to this day. The elements include, the taskbar, the menu and Microsoft's famous Start Button.

1995 - Windows 95

1997 Macintosh OS 8 — Brighter Icons for Mac

In Mac OS 8 the icons are now beginning to look brighter and rendered to show a strong light source. Macintosh also starts to implement an isometric style with a strong "drop shadow".

1997 - Macintosh OS 8

2001 Mac OS X v10.0 — Jelly Mac

Mac OS X was released around the time I was studying for my degree in Multimedia. Lovingly called the "Jelly Mac" by most of the students. We couldn't help but notice the ultra shiny and plastic-jelly like finish of the icons. The icons in OS X are also a huge leap forward in design from the previous OS 9, which was released just two years earlier (OS 9 looks almost the same as OS 8 above.) Presumably, due to the Dock, the icons are rendered either from a straight forward point of view or slightly above. Designed around the new Aqua theme, icons show complex reflections, highlights and textures. Without the Aqua theme, I doubt that icon design would be as desirable as it is today.

2001 - Mac OS X v10.0

2001 Windows XP — Bright Soft Icons

In 2001 Microsoft introduced, yet another, completely new OS system. Adopting a saturated color palette, the icons are rendered with a soft illustrative look that uses a single light source and a semi transparent drop shadow. They continue to use the isometric style.

2001 - Windows XP

2007 Mac OS X Leopard — Reflective Dock

Mac ditches the stripes and adopts a 3D reflective doc for the icons to "sit on". The use of chrome, glass and reflections is as popular as ever. The icons don't change much from v10.0.

2007 - Mac OS X Leopard

2009 Windows 7 — Soft and Reflective

The Windows 7 icons are completely different from Windows XP and similar to Windows Vista. The major difference between Vista and 7 is the direction the icons are facing. I haven't been able to find any official documentation on the change, but I'm not the only one who's asking the question. The icons in Windows 7 are also softer and more glassy than previous ones.

2009 - Windows 7

Resources & Further Reading

More to Come Soon

In the next installment (Know Your Icons Part 2 - Modern Icon Design) we will be delving further into the world of icons and exploring what icons mean to us today.


This Post is Day 7 of our Interface Design Session. Creative Sessions
Related Posts
  • Computer Skills
    Productivity
    LogMeIn Alternatives for Remotely Accessing ComputersLogmeout400
    With LogMeIn discontinuing the free version of their software, many people are looking for an alternative program to use, both for commercial needs and family support. In this tutorial, I’ll teach you how to set up and use a couple of different options and decide when each is the best choice.Read More…
  • Computer Skills
    OS X
    Understanding the Applications for Target Disk ModeTdm 400
    Mac OS X includes an extremely useful boot utility called Target Disk Mode Target Disk Mode allows a user to transfer data from one Mac, to another Mac, via a FireWire or Thunderbolt connection.  In this tutorial, I'll show you how to set up your hardware for Target Disk Mode and then use it in three different scenarios.Read More…
  • Computer Skills
    OS X
    Understanding Safe ModeSafemode preview retina
    Apple is very careful about making sure that your Mac is rock solid from day one until day one hundred and one. Unfortunately, while their diligence ensures that it’s nearly impossible to crash or upset a new Mac, things may start to get cloudy once you introduce third-party software and peripherals. Sometimes things break. Compatibility issues arise. Software misbehaves. To help you circumvent and resolve these issues, OS X is equipped with a special operating option called Safe Mode. In this tutorial I’ll help you understand this crucial troubleshooting tool.Read More…
  • Computer Skills
    OS X
    Improve Your File Organisation With Finder in MavericksFinder tabs and tags retina
    Finder first saw the light of day alongside the original Macintosh File System, as part of Mac OS System 1, in January 1984. Nearly 30 years later, Finder has changed radically to its current iteration as part of OS X 10.9 Mavericks. With the release of Mavericks Apple introduced several big new features to Finder, including tabs in Finder windows and a universal system for tagging files. In this tutorial, I'll will look at Finder, in Mavericks, and show you how to improve the way you organise your files.Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…