By studying the history of computer icons, we can further understand current aesthetics and predict styles that will be used in the future. This chapter will examine a collection of important milestones in computer icon history, each example representing an evolution in technology and design.
References: Rockstar Icon Designer by Kate McInnes “History, Theory, Tips and Tutorials – An Insight Into The World Of Icon Design” – Pp. 10-34
The Xerox Alto is the first computer to use a desktop metaphor and graphical user interface (GUI). Developed at the Palo Alto Research Center (PARC) in California, USA. The Alto used bit-mapped graphics, a mouse, menus, icons and was built as a research computer.
Incorporating design features from the Alto, the Xerox Star was developed with extensive user research and has icons based on traditional grid based design. Early proposals show icons with front and side perspective, but in the end simple yet elegant two dimensional icons were adopted. The Star’s icons are 72 pixels wide to clearly render on the black and white 72ppi resolution monitor and align with the halftone-grey background.
After the demonstrations the Lisa development team was able to reconstruct the basic elements of a GUI and adapt its use for a commercial audience. Lisa was an advanced GUI for the time as it had movable “Desk Accessories” (early Widgets), drop-down menus and folder-based directories. The Lisa icons are similar to the Xerox designs, but they lack the visual balance that was achieved at PARC.
Kare brought a sophistication to icons and digital fonts that hadn’t been seen before. Paying special attention to metaphor, visual balance and usability, Kare designed some of today’s most recognized icons. Most notable of these designs are the MacPaint interface, the Paint Bucket and the Smiling Mac. 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.
It’s important to note that the GUI was not only for the Apple
systems. The Atari ST had an operating system called TOS which had a somewhat smaller user interface than the Apple computers but it used a desktop metaphor, which by 1985 had become a computer standard. It’s interesting to note that the TOS icons make use of Planometric perspective to reinforce their meaning.
The Amiga Workbench was made for the Amiga 1000 personal computer. Breaking with the desktop convention, the Amiga Workbench adopted a workshop metaphor and has Tools (programs), Projects (files), Draws (folders) and Gadgets (widgets). Despite the crudely designed icons, Workbench was ahead of its time and included features such as customizable mouse cursors, four color graphics, multi-state icons and windows-like multiple screens.
After success with MS-DOS (1982) for the IBM computing system, Microsoft announced to the public that it was developing Microsoft Windows 1.0, a multi-tasking graphical user interface. Windows was finally released two years later after calls from critics that it was Vaporware (a term given to software that is announced but never produced). The icons are basic and don’t include color. The first icons for Windows Paint use different symbols to MacPaint, in particular the Spray Painter which looks like a spray pump and a Lasso which is a butterfly net.
In 1986 GEOS for the Commodore 64 was the second most popular GUI behind Macintosh 1.0. The icons have more character than Windows OS and share the Mac philosophy of clearly expressed metaphors. The GEOS Boot icon is an interesting example of pun-based design solutions. In modern GUIs a design such as this is advised against because the word for Boot is different in many languages and the meaning of the icon would be lost in translation.
NeXTSTEP, a GUI for Unix based computers, was developed by NeXT Computer. NeXT was founded in 1985 by Steve Jobs hired Macintosh Icon Designer Susan Kare as Creative Director.One significant addition to NeXTSTEP was a program dock on the right side of the screen which facilitated easy navigation of programs by the user. In 1997, Apple Computer acquired NeXT for a reported $400 million USD2, and used the OPENSTEP for Mach (1995) operating system as the basis for Mac OS X.
Macintosh System 7 introduced color icons, but this feature was optional for machines capable of displaying it. On older computers, or ones that were set to monochrome, System 7 defaulted back to the black and white design of System 6. System 7 also included TrueType fonts for the very first time, which along with typesetting and printer output, were used to replace some of the bitmap GUI fonts from previous Macintosh systems.
Susan Kare, who had previously made icons for Apple, was employed by Microsoft in 1988 to design icons and interface elements for Windows 3.1. Kare used her keen eye for pixel illustration to further refine the colors and design of the Windows icon set. Windows 3.1 was also the first Windows platform with pre-installed True Type Fonts and support for 256 colors. Along with improving the interface, Kare also created the memorable illustrations for Windows Solitaire.
The Platinum interface was the first GUI to be in full color with 3D shading on the icons and interface. Copland also included innovations such as spring loaded folders and a theme-able interface. The theme-able meant that software developers could make custom skins for Copland, which came bundled with two additional themes, Gizmo and High-Tech. Gizmo was a bold geometric theme for children and High-Tech which was a dark theme with a space-age feel, presumably for young men.
Windows 95 was the first version of Windows to integrate MSDOS
and Microsoft Windows into a single product. With the advancement of virtual memory to improve graphics rendering, Windows 95 introduces more colors to the interface and additional isometric icon designs. The Windows 95 design is a complete rebuild 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.
Mac OS 8 was built using technologies developed for the failed Copland OS and was one of the most significant upgrades to the Mac OS at the time. Mac OS 8 was also one of the top selling software titles released by Apple with 1.2 million copies sold within the first 2 weeks of its release. In Mac OS 8 the icons are brighter and rendered to show a strong light source. Macintosh also starts to implement an isometric style with a strong drop shadow effect.
With their bold black outlines and brightly colored designs, the BeOS icons work together to visually reinforce the BeOS visual identity. The one drawback with the BeOS icons is the confusing mix of elements and metaphors, but this may have been to avoid any complaints from Apple or Microsoft that the designs were infringing copyright. The BeOS icons remain popular within the design community and stand alongside the Apple Lisa and Xerox Alto as one of the best examples of unique icon design.
The icons in Mac OS X are semi-realistic with a thorough use of glossy effects and drop shadows. Helped by the new rendering size of 128 x 128 pixels and 8-bit transparency, the detail is significantly higher than in previous designs. Mac OS X also introduced new viewing guidelines, “sitting on a desk” for Application icons, “sitting on a shelf” for Utility Icons and “straighton” for Toolbar Icons. Although the interface has undergone some changes since the first Mac OS, the icons themselves have stayed close to the original guidelines.
XP has a saturated color palette with icons rendered in a soft illustrative style that uses a single light source and subtle drop shadows. Windows XP adds support for 32-bit color (16.7 million colors plus alpha channel transparency) to the Microsoft icon library and allows for semi transparent areas like shadows, anti-aliasing or glass-like effects. In collaboration with design company, Icon Factory, the XP style took four months to develop with an additional 4 months spent supervising the production of over 100 icons by Microsoft’s creative department.
Tango icons are designed for multi-platform use and have a style that’s intentionally understated so that the icons don’t look out of place on Windows, Mac and Linux desktops. The Tango icon set is clearly rendered, easy to view at smaller scales and conveys precise meanings. A recent addition to the Tango design guidelines is the X-Large style icon. Tango warn against creating this variation as achieving a usable icon at this scale requires restraint and a good eye for design.
It took two years of design proposals before Icon Factory produced a prototype of the Aero icon that was in line with the vision Microsoft had for the Vista. The Microsoft design team made tweaks and edits to the Aero icon set for the release of Windows 7. The difference between Windows Vista and 7 is the direction the icons are facing. There’s no official documentation on the change, but many members of the UI design community were left pondering why the change was made.
In 2008, KDE launched KDE Software Compilation 4 which adopted a new user interface, widgets and icons designed as part of the Oxygen Project. The goal of the Oxygen project was to break with the cartoonish look of the icons in KDE 3.0 and move towards a more mature and modern user experience. Icons are created using the open-source vector editor Inkscape and are exported in the open standard Scalable Vector Graphic (SVG) format.
GNOME 3 has an interface based on a technology called GNOME Shell which uses an application dock and search functionality to locate programs and processes rather than nested folder structures and desktop icons. A move forward in user experience, GNOME 3 has streamlined the UI to take advantage of touch screen technologies and deliver an unobtrusive interface that’s easy to use.
In 2006 Ubuntu 6.06 saw the implementation of the Tango icon guidelines which unified the UI and gave Ubuntu an improved user experience. A new desktop theme, style guide and logo were designed for Ubuntu 10.4 in 2009 inspired by the idea of “Light”. In a controversial move that caused ripples throughout the open source community, Canonical broke away from the default desktop environment of GNOME in 2011. Merging Ubuntu with Ubuntu Netbook Edition Canonical used its own “Unity” desktop as the default desktop environment for Ubuntu 11.04.
The square style icons and dock-like menus are reminiscent of the Apple iPhone and iPad.
What could be taken from this is that the rapidly growing market for these devices is shaping the way consumers expect to navigate programs and applications. It may also be a reflection of the kind of designs to be expected in the future.
With major players in the OS space moving towards a single user experience it isn’t too far-fetched to theorize that desktop interfaces will change to look more like mobile interfaces in the future. Along with these changes, advances in viewing technology are driving the maximum scale of icon designs skyward. The Apple Macintosh line of desktop computers is rumored to have iPhone style retina display technology.
The folder icon, which has been around for over 30 years, appears in countless GUIs and has been rendered in many different styles, but you will notice that it has rarely changed for a different metaphor. The Amiga Workbench swapped the folder for a drawer but this didn’t see an industry wide change to the drawer as a standard design. So what makes the folder so successful? The answer lies in the way it communicates a meaning. There is a clear use for a folder, it is universally recognized, it can be drawn by almost anyone and has just one function.
Users like consistency, take Apple for example. You know that if you purchase an Apple product, it will behave in the same way other Apple products behave. You know that you will see the same visual language used on iPhones, iPads and Mac computers; even the Apple website uses the same visual language. All of these items have been styled to work together as a single user experience. Apple goes to great lengths to bring the user a seamless working environment that – even on different devices – will only have to be learned once.
We can use the same icon style and approximate location across platforms while changing the dimensions of the interface to compliment the device it’s on. The strength of icons as
communication really shines in this respect. A user will know the approximate area of a screen to locate an icon, once the design has caught their attention they will immediately remember its
function.
Innovation will get you noticed, but sometimes for the wrong reasons. If we look back at the BeOS icons, their playful use of colors and metaphor is definitely pleasing to the eye, but it
has also caused some of the meanings to be confusing. If you plan to make a set of icons that has an unusual theme or new styles of metaphor, be prepared to test them extensively before
implementation. Sometimes what is clear and easy to understand to a designer can be extremely confusing to the target audience. Innovation shouldn’t necessarily be avoided; without innovation we wouldn’t have the shiny hyper-realistic style of icons that we have today. Just be prepared to invest additional time in user testing and planning if you want to make a new style work.
References: Rockstar Icon Designer by Kate McInnes “History, Theory, Tips and Tutorials – An Insight Into The World Of Icon Design” – Pp. 10-34
According to WIPO (World Intellectual Property Organization), Intellectual Property refers to the creation and labor
This question could be deeply technical in terms and definition, but let’s proceed with
You might sometimes want to download certain images in the internet which you can
4 Responses
Write Great article. You are such a Great blogger and your website is inspiration for me to start a blog. This article is very helpful for us.
Hey, thank you for dropping by. Hit me back if you have your stuff rolling. Nice to hear from you andet me know about your blog.
Best Regards,
ADAMS Project
Awesome! Its in fact remarkable piece of writing, I have got much clear idea about from this paragraph. Leroy Artiaga
Quality and also high-class. Shirt is a similar method revealed. Abram Mercury