# data[].attributes.body
What is Start  Button and what it does?
What is Aqua?
What are the differences between Windows7 and Vista?
What is Atari ST?

# data[].attributes.body
1.what is an icon?
2.what is operatin

# data[].attributes.body
why do we need icons?
what the reason behind creating icons?

# data[].attributes.body
can you give an example about how  apps icons work?
how was the icon designed.

# data[].attributes.body
1_what was the world's first GUI?
2_When was th Apple Macintosh released?
3_Who designed the Macintosh icons?
4What's an icon?
When did Microsoft release its first GUI?

# data[].attributes.body
1. When was Xerox Alto the world's first GUI invented?
2. When was the Xerox Alto released?
3. Who is Susan Kare?
4.

# data[].attributes.body
1. why does humanity need icons?
2. what happens when you double click on an icon?
3. what is an icon?
4. why are icons important?
5. Does the look of an icon really matter?

# data[].attributes.body
1: when was the world's first graphical user interface?
2: When was the development of Apple Lisa started?
3: who designed the Macintosh icons?

# data[].attributes.attachment_link.readable_text
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.

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.

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).

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.

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 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 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.

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.

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".

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.

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.

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".

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 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.

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.

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.

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.

# data[].attributes.attachment_link.title
Know Your Icons, Part 1: A Brief History of Computer Icons

# data[].attributes.attachment_link.description
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.

# data[].attributes.attachment_link.readable_text
In the last installment you learned about the history of icon design and how it has evolved from black and white representations of office items into full colored, glassy, hyper-rendered, isometric representations of... office items. In this installment I will be delving further into the world of icons and exploring what icons mean to us today.

What is an Icon?

i·con - noun (Computers) a picture or symbol that appears on a monitor and is used to represent a command, as a file drawer to represent filing - dictionary.com

So we know the meaning of "Icon" in the traditional computing sense of the word, but how does this explain all the illustrative icons we see today? How is a beautifully rendered image of a Teapot, Space Ship or Bucket of Chicken supposed to represent something within the user interface? There's a few answers to this question.

Application Icons: Application icons are a great example of un-conventional design. These icons often have a strong trend towards memorable images over representations of the application itself.

Website Navigation: Website navigation is another place you'll find some unusual "icon" designs. The interpretation of the icon is dependant on the context in which it is used, it's OK to use an un-conventional design as long as the audience knows what it's function is.

Format: Some designs defy explanation, such as "Form over Function." This means that the icon has been designed purely for aesthetics.

No matter how strict or unusual your design is, all icons should be made to specification - there will be more about that soon.

Below you will see a breakdown of modern icon design. Some people may argue that the icons on the "illustration" side of the chart shouldn't be considered icons. This is partly true, they're not traditional icons, but they are Modern Icons in the sense that they could represent applications, games or a specific context.

The icons on the left side of the chart are icons that would be considered to be Traditional Icons with a modern twist. We immediately associate these icons with their function, this is achieved by over 30 years of visual language, which is a powerful factor in the designs success.

The icons down the middle of the chart are icons that are neither illustrative or informative, but a combination of both. The Envelope is traditional because of its form, but it could be perceived differently due to its rendering, a design like this works best within a certain context. The Blue Twitter Bird has immediate recognition from internet users, but is reduced to an illustration of a blue bird for non-users (like my mum) and the stylistic GTalk Bubble is also fairly reliant on brand association.
Links to the Icons above (in no particular order)
Pump It Up, by mgilchuk, My Breafast, by blink, SNOW.E 2 XP, by RADE8, CS3 iKons - Win, by -kol, iChat Bubble, by Delta909, Icecream icon set, by Miniartx, Batman Mask, by Svengraph, In Spirited We Love, by Raindropmemory, Twitter Bird, by freakyframes, StarWars Vehicles Archigraphs, by Cyberella74, Systematrix Full, by royalflushxx, New Moshii World, by anekdamian, Somatic Rebirth Extras, by The Iconfactory and David Lanham

Conventions and Specifications

When designing icons for an interface you can't go past convention. Check previous designs for an indication of how to approach yours. You will find that most Software packages and User Interfaces have similar icons, this is because of User Experience (UX). If a user is suddenly confronted with a design that they're not expecting or comfortable with, they're likely to get confused.

If you're designing for a specific platform, always check the developers notes before you start, these will give you an idea of the size, perspective, and color palette you should be using. You can find links to both the Apple and Microsoft developers notes in the "Resources and Further Reading" section at the end of this post.

Green = Good - Blue = Help - Yellow = Alert - Red = Error

Modern Specifications

Icon specifications get more complicated with each new technology or operating system. Windows and Mac are in an Arms Race over icon size, with the largest icon to date measuring a massive 512 pixels. The trend for huge icons has much to do with modern screen resolutions, but there's also a certain drool factor with a giant, perfectly rendered icon. Look at the examples below if you don't believe me!

Now that I've shown you the Drool Worthy icons, let's move onto some icons I've designed myself. The example below is a de-constructed .ICO file made in my previous life as an icon and interface designer (those who know me as LoungeKat probably didn't know this fact). The main 256px icon has been made in Adobe Photoshop with shapes and layer styles, it was then re-scaled for each individual size (64, 48, 32, 16) and imported into Microangelo Toolset to be combined as an .ICO. The 256px icon isn't part of the icon file itself, but included in the software as a Transparent PNG that windows calls on if the size is required. This keeps the file size down.

As you can see, I've used a few variations on the design depending on the color depth and size of the icon. Icons include all of these sizes and color spaces to accommodate all of the different ways that they can be viewed by the operating system.

It's important to design each size separately, scaling a large image can make the design look blurry. When you're designing a 16px icon it's always best to get right down to pixel view. As you can see, a few well placed pixels can convey much more than you think. You can read additional information on Icons, various specifications, and industry recommendations in Axialis Software's icon guide.

An example of scaling

To get a better understanding of icons I would suggest looking at as many different operating systems, programs, interfaces and portals as possible. Think about the different way color and metaphor is used for each application. Which icons stand out as being easy to understand (perhaps the folder or trash can strike you as the most recognizable?), which icons need further explaining? Trust me, you will be surprised what you find out about the psychology behind the visual language we use every day and often take for granted.

Resources & Further Reading

# data[].attributes.attachment_link.title
Know Your Icons Part 2 - Modern Icon Design

# data[].attributes.attachment_link.description
In the last installment you learned about the history of icon design and how it has evolved from black and white representations of office items into full colored, glassy, hyper-rendered, isometric representations of... office items. In this installment I will be delving further into the world of icons and exploring what icons mean to us today.

# data[].attributes.attachment_link.description
Computer dictionary definition for what icon means including related links, information, and terms.