Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [1]

By Root 400 0
of pixel perfect rendering.

What You Will Learn


When I first started out in icon design I found that there was very little information to help guide me though the design process. Through a lengthy process of trial and error I came to understand icons.

Throughout the course of this book I will share tips and insights into the world of icon design, discuss various methods of rendering and output and guide you through the process of creating your own icon set.

First I will begin by discussing the history of icon design and highlighting the milestones in icon design that have shaped the way we use them today. Take a look at rendering styles and file conventions then move onto design specific theory before wrapping up with some demonstrations of the process used to create specific icon styles.

A Brief History of Computer Icons


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.

1973 Xerox Alto

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. Xerox only produced 2,000 Altos, but their popularity with various universities and research centers made the new GUI a benchmark for future computer systems. The Xerox Alto was such a significant development in desktop computing, it was a direct source of inspiration for the Apple Lisa (1983).

1981 Xerox Star

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[1], 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.

The icons have various states that are indicated by levels of pixel shading and display an active state when clicked. The Xerox Star's design features — specifically the considerations for user experience and visual feedback — have stood-up to the test of time, and continue to be an excellent example of design and usability.

The Xerox Star has carefully designed icons that create smooth lines against the halftone background of the User Interface.

1983 Apple Lisa

Development of the Apple Lisa started in 1978. At the time Steve Jobs (CEO of Apple) was on the Lisa development team. After a tour of the Xerox PARC facilities in 1979 Jobs was heavily influenced by what he had seen and quickly negotiated for the Lisa team to have two demonstrations of the Alto. 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. Hoping to carve a niche in the personal computing market, Apple saw the value of the office metaphor as a means 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. The Lisa icons are similar to the Xerox designs, but they lack the visual balance that was achieved at PARC.

Apple's first attempt at icon design, based on designs seen at Palo Alto Research Centre in 1979.

1984 Apple Macintosh 1.0

In 1982, Steve Jobs left the Lisa project and joined the Macintosh team. A year after Lisa was launched the Apple Macintosh 1.0 was released. The Macintosh 1.0 introduced drag and drop file copying, movable windows and specially rendered icons. The Macintosh icons were designed by Graphic Artist Susan Kare who is thought to be one of the masters of icon design.

Kare brought a sophistication to icons and digital fonts that hadn't been seen before. Paying special attention

Return Main Page Previous Page Next Page

®Online Book Reader