With the GUI having now been around for over 40 years, today we are taking a look back in time at the evolution of an integral feature – the icon.
Since the early 70’s, when bitmapped screens were first developed with GUI’s, the humble icon has come a long way. The following is a collection of icon design in OS’s through history. This is by no means, a complete list of all the icons in every OS between 1983-2013, however I have hand-picked designs that have the most significance and popularity in icon design.
1981 – Xerox Star
Although technically not the first computer with a GUI, the Xerox Star is considered the first commercial grade system to use the “Desktop” metaphor, with folders, documents, calculator and spread sheets. It featured a bitmapped display, mouse and keyboard. It was developed by Xerox Parc, who 8 years earlier in 1973, developed the Xerox Alto – the first computer to feature a GUI and mouse. The Alto’s software heavily influenced the Star’s development.Surprisingly, the icons are actually pretty good. The display was a 1024px x 808px monochrome screen, at 72PPI. The icons were designed at 72px x 72px and featured rounded corners. Interestingly the icon’s titles were build right into the icons themselves. The icons were incredibly consistent however, with a significant amount of detail. You can see the icon set below really set up the canvas for icon design, with the basic representations still being used today such as the folder, trash can and document.
1983 – Apple Lisa
Once Apple had seen the Xerox Star, they decided to build their own GUI based system – The Lisa. The ill-fated computer featured smaller icons, with more detail to them and much more skeumorephic resemblances, like the clipboard and the preferences icons. The icons were designed at 48px x 24px, due to the Lisa’s smaller screen, resolution and rounded pixels.
1984 Apple Macintosh 1.0
The Macintosh was the fist computer to feature – ‘artist’ designed icons – designed by now famous Susan Kare. The Macintosh icons were well balanced in both shape and size, featuring a good balance in representation between abstract and ‘realistic’. They where also much easier to distinguish between than earlier icons. A number of the icons became classics such as the ‘Happy Mac’, ‘Bomb’ and ‘Hourglass’. The Macintoch also came with a number of fonts that Susan designed, including Chicago, Monaco and Geneva.
1985 Atari TOS
Although mainly considered to be a gaming system, the Atari ST did still have a GUI which shared the desktop metaphor. Interestingly it was one of the first systems to feature isometric icons. Although originally in black and white, later models were some of the first systems to feature an RGB based ‘colored’ display with 512 colors.
1985 Amiga Workbench 1.0
Although Workbench featured colored icons, a significant breakthrough, they were a really good example of how icons shouldn’t be designed. Colors had no meaning, all the sizes were arbitrary, and just generally looked bad. However the icons, along with the GUI in general were highly customizable, which although a first of it’s kind, ultimately led to the chaotic nature of the OS.
1985 Microsoft Windows 1.0x
Windows 1.0 was a highly criticized OS, most notably for it’s high system requirements, and heavy resource usage. Windows 1.0 is often regarded as a “front-end” to the MS-DOS operating system, a description which has also been applied to subsequent versions of Windows. The icons weren’t very well designed, especially when compared to the Macintosh. The designs weren’t very metaphoric and many were difficult to distinguish between. Probably the greatest feature of the icons was the clock – which actually functioned and told the time, however the idea was later dropped in Windows 3.0.
1986 GEOS for Commodore 64 and Apple II
GEOS ran on two systems, the Commodore 64 as well as versions of the Apple II. At the time, it was second most popular GUI, behind only Macintosh 1.0. Although not a breakthrough in icon design by any-means, they were still well designed, simple, and easily distinguished between.
19989 Amiga OS
Amiga OS was the successor to Workbench 3.0. Although consistent, the icons along with the OS itself were not very user-friendly.
1989 NeXTSTEP / OPENSTEP
While Apple and Microsoft were both busy refining their respective OS’s, NeXT, founded by Steve Jobs was pushing the boundaries on what was possible in icon design. NeXTSTEP which later became OPENSTEP, which was later purchased by Apple and evolved into Rhapsody – which became OS X, was essentially the foundation for the modern mac.It was years ahead of it’s time, featuring a collection of highly detailed icons. Susan Kare, who was responsible for the icons on the original Macintoch, was heavily involved, having left Apple with Steve to become Creative Director of NeXT. It’s important to note, that the NeXTSTEP designs were the first examples of shaded, highly detailed, 256-color based icons. Furthermore they were the first icons to be considered skeuomorphic.
1990 Microsoft Windows 3.0
After the poorly designed icons of Windows 1.0, the process was repeated in version 2.0. However, Microsoft employed none other than Susan Kare herself to design the icons for it’s latest OS iteration. Although the icons carried Microsoft’s signature ‘corporate’ style, they were well designed, consistent and relatively attractive at the time.
1991 Macintosh System 7
With the absence of both Steve Jobs and Susan Kare, Apple’s icons took a steady decline in both style and design. Although the icons were now colored, many of them were just augmented versions of Kare’s original Macintosh 1.0 icons. It wasn’t until Apple purchased NeXT in 1996, building OS X from the NeXT OS OPENSTEP, that their icons became significantly more aesthetic.
1995 Windows 95
Arguably the most important release of Windows to date, Windows 95 featured the “Copland Style” isometric icon design of Apple. If you look closely, you’ll notice that many of the icons between the two OS’s use the exact same isometric angle. Coincidence? Probably not. Nevertherless the Windows 95 icons were a natural progression from Windows 3.0. Originally only supporting 16-color design, the icons were later updated to support 256 like their Mac counterparts.
1997 Macintosh OS 8
Although technically released after Windows 95, Mac OS 8 had been in development since 1994 under the code-name ‘Copland’ - which was an homage to American composer Aaron Copland. The OS was considered, ‘next gen’, with a number of features that modernized the Mac. The “Copland style” refers to pseudo-3D icons, set on an isometric grid with about 26° of slant.However the Copland project represented the end of an era in Mac OS, with Apple Chief Technology Officer, Ellen Hancock, freezing development in search of an OS outside the company. This ultimately led to Apple’s purchase of NeXT and the development of OS X.
1997 - Rhapsody
Not many have heard of Rhapsody. It was a short-lived interim OS between the classic Mac OS and Apple’s newly purchased OPENSTEP. As noted earlier, it later evolved into OS X. Nonetheless, the icons were extremely well designed with high levels of detailed of shading, color and shadows.
2000 Windows 2000/Millennium
Windows 2000/Millenium wasn’t much of a progression from 95, however subtle changes were made that gave the icons a more attractive feel. For example, the recycle-bin icon was now more rounded, rather than the square 95 version. Other upgrades were also made, with the availability of 48px x 48px icons, with increased shading due to 24-bit color support in later updates.
2001 Mac OS X
Mac OS X represented a giant leap in both OS development and icon design. Previously, all Mac and most Windows icons had been designed on a 32px x 32px canvas, with improvements in color support and isometric design being the main developments. However that all changed with Mac OS X, the icons represented a complete overhaul in both design and capabilities, and were a hallmark feature of OS X.Icons were now designed at a massive 128 x 128 pixels, with 24-bit color support and 8-bit transparency. Furthermore due the Mac’s anti-aliasing capabilities, the icons were scaled down by the system, resulting in even more realism.
In terms of design, the OS X icons were the first to feature a photo-realistic style, instead of a symbolic one on previous OS’s.
2001 Windows XP
Windows XP, Microsoft’s answer to OS X, was equally momentous in nature. Although visually, the icons may not seem to be as much a drastic change as Apple’s, they featured similar color and transparency support. The icons were now based on a 48px x 48px canvas. Again, although they might not have been as creative or artistic as Apple’s, they were consistent, with more shading, transparency, color and a newly added drop shadow.
2007 Mac OS X 10.5 (Leopard)
Leopard and later iterations of OS X, haven’t’ seen much development in icon design, the reflection and glossy theme was carried further into the rest of the OS.
2007 Windows Vista
The heavily criticized Vista represented changes in icon design more equivalent of Apples’s OS 9 – OS X, 6 years earlier. Microsoft opted for glassy, less illustrative icons, that looked sharper and less rounded. Despite the critiques, Vista is still one of Microsoft’s most successful OS releases to date (in terms of sales). Nevertheless, it was short lived, with Microsoft quickly reverting back to more illustrative icons in Windows 7.
2009 Windows 7
In terms of icons, Windows 7 is kind of half-between Vista and XP. It carries some of the glassy/reflectiveness of Vista, while retaining the illustrative nature of XP.
2006 Adobe CS3 Icons
If you’ve been a designer for a while, you might remember these icons. The Adobe CS3 icons were a big change, for both Adobe and icon design, however they were not very well received upon first release, with many creative advocates claiming they’re too simplistic and trying to look more user-friendly to non-professionals. This ultimately led to a number of designers creating replacement packs. However, they were a refreshing change from Apple and Microsoft’s continuous push of gloss and reflection.
2007 iOS -The iPhone
We all know how revolutionary the iPhone was as a device. In terms of icons, Apple continued it’s skeuomorphic icon design for the next 6 years in iOS. Although unlike the icons on desktops, iOS featured icons that were all the same in both size and shape. The beveled edges in the icons, gave birth to convexed- semi-realistic style icons.
2010 Windows Phone 7
Microsoft’s Windows Phone 7 arguably gave birth to flat design (don’t crucify me in the comments). While Apple was continuing it’s push of skeuomorphism, Microsoft flipped icon design on it’s head with its super-minimalist mobile OS.
2011 Hyper Realistic Icons
With the release of Apple’s much mediated “Retina Display”, designers now had extra pixels to design with. This led to a trend of hyper-realistic icon designs, which are designed at a massive 512 X 512px.
2012 Windows 8
Microsoft took it’s mobile metro design language to desktop and tablet computing with Windows 8.
2012/2013 Flat Design Icons
With minimalism becoming increasing popular among web designers, flat design was born. Gone were all the ornamentation of drop shadows, gradients and bevels, as designers opted for simple shaded icons with ‘flat’ color palettes.
2013 Long Shadow Icons
Long shadow icons are an offspring of flat design. They feature all the same minimalist principles of flat designed icons with the addition of a shadow to create depth and perspective.
2013 iOS 7
Although highly criticized among the design and development community, iOS7 was the first significant change for iOS in 6 years. The icons feature a predefined color palette, complete with gradients and flatesque theme.
2013 Line Icons
Line icons were first widely featured in the interface of iOS 7. Since then, they have caught on to some degree, although considerations on their recognition and UX impacts are on-going.
2013 SVG Animated Icons
With developments in both implementation and support of SVG based icons in web design, animated icons are becoming an increasingly popular trend. Previously, icons could animate with only a state-change, however SVG icons have the capability to animate elements within the icon itself.
0 comments:
Post a Comment