caite.infook - Ebook download as PDF File .pdf), Text File .txt) or read book online. caite.infook. Have you ever needed to create an icon for something and not known where to start? How do you go about crafting the right message, the tone. As an introduction to programming in Icon, the handbook assumes you already know how to program in some other procedural programming language—C or.
|Language:||English, Spanish, Arabic|
|Genre:||Politics & Laws|
|ePub File Size:||16.79 MB|
|PDF File Size:||17.42 MB|
|Distribution:||Free* [*Regsitration Required]|
the HANDBOOK BY JON HICKS • FOREWORD BY THE NOUN PROJECT ii The Icon Handbook by Jon Hicks Published in by Five. Downloads. The Icon Handbook Goodies pack contains: iOS Application Icon Template for Adobe Illustrator CS5. Includes masks for previewing iOS icons with . The Icon Handbook is a reference manual, how-to guide and coffee table ' showcase' in one. learn how to design icons for interfaces.
This time in colour! For websites. I was particularly keen to know more about the work Sebastiaan had done for the Android platform and how different it was to design for. Also to the words team: This chapter will build further on that.
Finding a toilet in a foreign airport would be so much harder if the sign used the Armitage Shanks logo instead of the familiar man and woman symbols. Leaving aside the religious connotations of the term.
The structure of this book intends to take you through the creation of various different types of icons.
And although icons for Apple's Retina display require their areas to be squared. Often just monochrome. With the ever-growing production rate of apps. Before we go too deep into the detail of the various types. References http: Application icons are discussed in chapter 7. Favicons are covered in chapter 3. Their simplicity makes them a great starting point for our journey.
Application icons Mostly photorealistic. As part of the journey. The hieroglyphic for house is based on a floor plan. When German mathematician Johannes Widmann published his book of arithmetic in While the first sun symbol is a pictogram a picture of a thing.
Their meaning could not be determined by examination alone: Egyptian hieroglyphs for house and water. They were made to record events and tell stories about food and shelter. These are symbols that have been invented but do not relate to a physical object: In his Symbol Sourcebook. In addition to pictograms representing an object and ideograms conveying an abstract idea or concept. For many cultures this has been the case until fairly recently.
These images — painted on to cave walls pictographs or carved into rock petroglyphs — were not only art. In Britain. The simplest icon of all. A similar kind of representative imagery shows up later 5. That changed with the groundbreaking work of Viennese philosopher Otto Neurath in the early s and s. Owner is out Owner is in Owner is out Hit the road. From the s until the s. Whenever a hobo arrived in a new town. Neurath believed that the world needed a unified.
In a sense. Hit the road. This is not a safe place ce Up to this point. These would provide vital information such as where they could rest or eat. Kind lady lives here Hit the road. We still use a red X as a warning sign today. Influenced by his love of Egyptian hieroglyphics. When Neurath died suddenly at the end of Gerd Arntz. The Hague. The Netherlands Photo: Max Bruinsma. Otto and Marie Neurath Isotype Collection. University of Reading. The team created a clean geometric identity for the Games.
In particular. Symbols from the left. No line is wasted in these symbols: His style used rounded rectangles with distinctive heavy strokes to give contrast. The first computer icons appeared as early as on the Xerox Alto. It was the first computer to have a GUI and it also started the now familiar office metaphor of desktop.
September It was a research tool intended for organisations like universities. While much of its interface was still text-based. Norm Cox was responsible for designing the icon set.
It was no less influential despite this. I had my first experience of using a computer with a GUI: This provided the opportunity to replace the sprites with my own designs. Back in our family got an Acorn Electron. Laughable now. When I left school to study illustration and design at art college towards the end of the s.
This was then converted into a VDU code by adding up the values of the columns in each row. By making background patterns stepped. My first experience of coding was with BBC Basic. The college was kitted out with now legendary Mac Classics.
If you want Star to file something. I relied on magazines that would print the code for simple games. Cox found ways to make the best of those bitmap limitations.
Andy Hertzfeld. He needed some bitmaps so encouraged me to develop some early images on graph paper. Her famous animated wristwatch icon to let the user know a task is in progress is still used today in Adobe Photoshop.
How did the project with Apple come about? First of all. I particularly wanted to feature the original Mac icons as they encapsulate everything that icons should be and are. Everything I know and love about icons is embodied in that work from I was lucky enough to get the chance to interview Susan for this book. You also designed the Apple Command icon that is now an accepted convention.
I learned that it is meant to be a castle. This seemed appropriate. Was the lack of previous work in that area a help or a hindrance? It was a terrific opportunity to work on the original Macintosh with so many talented colleagues. How did you come up with a symbol for such an abstract concept? I leafed through a book of symbols. I joke that if you can do needlepoint. Years later. What tools did you use to design the original Mac icons other than sketching?
Did you have a graphical editor to work with? Not too many tools initially. It also automatically generated the hex equivalent. Originally called Phoenix and then Firebird. Icons could now be as large as pixels. As I had originally trained in illustration. Looking back now. My interest up to this point was still restricted to merely fiddling around for a bit of fun.
It was no less enjoyable for that. We all came up with various ideas. I started drawing icons again. The amount of detail possible also meant the process had become more timeconsuming. Opera and Linotype. We then used a free. The results were interesting. I decided that I could do one for icon design. While they could design anything they liked. It was an ideal application to use. The thing I noticed most was that there was a significant portion who understood how small the final icon would be.
The children were fascinated to come to terms with the fact that icons are such an integral part of all their lives. It was a big leap in profile for me. The new icon was launched in early Designing the Xerox Star Workstation http: Symbol Sourcebook: A Visual Autobiography Otto Neurath. This chapter looks at the various uses of icons.
They serve a wide range of purposes. This becomes crucial on mobile devices. Icons often support text labels in software. Instead of play and pause buttons. Imagine software. In many cases. Even though the focus of this book is on icons for websites.
Blur Tool…? They would still be usable. Lists of features can be broken up and made more appealing by a representative icon. Compare the top version with that on the bottom. The big. Functionality and navigation As well as the obvious usage. When used thoughtfully.
Here are some examples. At a glance. If you squint slightly. Using icons in the first place can often be effective. In the following example with names changed to protect the innocent.
If the site is for software. Threadless displays both search and shopping cart prominently. We instinctively look for appropriate clues. The icons are not only clear and concise with a very consistent style. On Vimeo. Aside from the obvious video controls of play.
While this works well for the former. Twitter uses this in several places: On Twitter. Managing expectations Icons can also let the user know if something is going to happen when an item is selected. In the same way. The first symbol. This ensures that. In addition.
Status icons are useful in other contexts too. When updating files in Coda. Once upload is complete. An animated clock icon shows the progress of the file upload. Coda is connecting to the server usually very brief 4.
Once the file is saved. Providing feedback Another great use of icons is to provide feedback in response to user actions such as validating forms. While red conveys good luck a positive interpretation in China, it represents danger or warning a negative interpretation in the west. Icons can help reinforce the meaning. In this signup form from grooveshark. The red suggests an error to those that can see it, but the icon makes it clear.
Going one step further, you can give positive feedback too. As well as different metaphors, there were issues of age, culture and legibility to consider.
By , a total of fifty icons were devised. Sun Microsystems learned their email package for an old product called SunView used an icon that confused people outside the United States. The icon was a US-style mailbox with a red flag that was raised and lowered to indicate the presence of new messages. Most people in other cultures had never seen a mailbox with a red flag and thus had no idea what it was supposed to mean. Never mind that the red flag metaphor was incorrectly applied even for a US audience.
Since that time, most software and email providers have found opened and closed envelope icons to be more universally understood across cultures. Wooten goes on to point out problems with other metaphors such as an owl, widely considered in the west to represent wisdom, but which actually means stupidity in parts of Asia.
There was also no existing iconography in this area, so a new cross-cultural visual language had to be developed from scratch. During tests, the visuals were judged in each country on criteria such as: Just as the AIGA discovered with the Department of Transport icons, the metaphors used in icons can be too open to interpretation:. As the icons are never meant to be used individually. In some instances they would be printed small. Salt used. An image of a bone to represent calcium was rejected due to its regional association with dogs.
This meant that the style had to be bolder and simpler than the earlier iterations. The final challenge facing the design team was the medium the visuals would be used in. It takes a large company like McDonald's to really ensure symbols are widely propagated.
The wider their reach. This combination ended up being used for the fat icon. McDonald's has made the results freely available to other food and restaurant industries worldwide to help them become a recognised standard. While red did mean danger in the majority of the countries. The tone of many a potentially insulting paragraph is changed with a wink at the end. As well as conveying mood.
These emoticons started life as combinations of letters to form sideways representations of facial expressions. It even has a standardised Unicode set of characters. They go beyond facial expressions to include objects such as food and hand gestures.
An odd-numbered grid can allow you to centre elements better see chapter 5. Hicksdesign and animator Julian Frost were commissioned to update the emoticon set in This meant some of the basic proportions of the eyes to head had to be changed.
Originally designed by Priidu Zilmer when he joined the Skype visual design team in Original 19px Smiley Updated 20px Smiley As the current emoticon set was widely recognised. This was where the cameras built in to modern computers came in useful.
As part of the redesign. Zilmer's hidden icon was updated too. While having the hands at the sides looks more correct to those in the west. The bow emoticon is particularly important for the Japanese audience and. In the west. Hands folded in front is warm and sincere.
Emoticons have been in Skype since the earliest versions of our Windows application. This excludes users connected via our joint venture partners. How long has Skype had its current emoticons.
How many Skype users are there worldwide? The bow icon from the smallest 20px to the largest 80px notice how details like the hands become just straight rectangles on the smallest version.. Back then we had just ten in total: The pixel versions had been working out great for years on our desktop applications.
What is the story behind the hidden emoticons in Skype? The most common difference in usage of one of our emoticons seems to be bow. Do you have a personal favourite? I rarely have a need to use it. As well as becoming souvenirs of the places I have visited.
The original version of Gowalla went further with the concept of items. Users of location-based social networks like Foursquare and Gowalla gain stamps and pins as part of sharing their location and the story of what they're doing there. Icons had become rewards. I talked to Gowalla's founder.
Josh Williams. Even the generic stamps those not created specifically for a certain building or landmark or natural wonder are generic in name only. The stamps are lovely mementos as well as a way for us to highlight extraordinary places.
How many artists are involved? We have three in-house illustrators. Graphics full of RGB goodness is where we came from. The thick borders and bold colors of the Gowalla stamp style have been part of our style since our days as a small design studio.
Brian Brasher etherbrian. Do you think the common human compulsion to collect is a driving force with Gowalla users or is it more to share your current location for social reasons? Everyone experiences Gowalla in a unique way but.
Capturing those places with beautiful icons. What was the process behind the distinctive Gowalla icon style. Everyone sees the finished product before it goes live. How long do the icons take to produce. Do you have a favorite stamp or pin? It was insanely difficult to choose. Our artists primarily use Illustrator. Each of the artists is very talented and works well within the boundaries of our simple style guide.
The average time is about two hours for each icon. At least. I find it very easy to do so! When trying to decide whether an icon is necessary. Or does it serve a purpose beyond that? I also consider the following points: If it does enhance the content or interface in one of the ways covered in this chapter. If so. Do the icons still convey the same meaning?
The interface is not littered with icons — just key functions like delete. Is it possible that the concept being communicated is just too abstract or unfamiliar to work as an icon? For the majority of you. A logo does not sell directly.
Favicon in the Bookmarks Bar 16px Bookmarks Manager 16px. Initially this had the added benefit of estimating how many times our sites were bookmarked by counting requests for the favicon. Before you start Before we start creating any icon. The subsections below will cover the different considerations: What is the context? A favicon could appear on a variety of backgrounds. Firefox 4 also adds a grey button background to favicons in its address bar.
I'm willing to bet that everyone reading this has at some point made a favicon and. As such. While much larger sizes can also be used these days. If you can achieve clarity at this size. For general use in all browsers. New tab page in Internet Explorer. Standard iOS home screen iPod Touch. If you were to create a favicon for every possible use.
Safari displays an attractive blue globe. A web app. As always. In fact. A site for a Mac and iOS software company would benefit from the various iPad and iPhone specific icons. A missing favicon. It was a hack. It lacks the crispness of PNG. In the early days. Internet Explorer uses favicons in a variety of sizes. An animated favicon just looks irritating and needy!
As for the other options: With 16px icons in particular. Whatever app you use. No matter how complex the logo is. Simple is best. The appendix lists the most common applications that you might use. Getting busy with the drawing All being well. My personal preference is Adobe Illustrator CS5.
For example. Hicksdesign created the Five Details logo. For this company with more than If the image needs to include a background as the Five Details icon does. A simple grey favicon might look nice and subtle in a white address bar bottom right. If the original happens to be a neat multiple of As Five Details focuses on Mac software.
I prefer being able to see each size. In Illustrator. In this case.
In some cases we can tweak the anchor points of the path to make it sit on the pixel grid properly. I felt it would have more strength on top of a light grey box background. This at least gives the right proportions to help us recreate it. Placing the reduced artwork in separate layers and locking it allows us to use it as a guide. Changing the opacity of single pixels.
It may be that we have to take some liberties with the logo proportions to get it to work. Transparency is worth considering. Now we have the crisp silhouette. Assuming that this favicon will always be viewed on a white background would mean specifying a light grey border for our Five Details favicon: Some applications like Illustrator and Opacity allow you to add multiple strokes to the same vector object.
An example dark background. Notice how the Reeder app website changes the isometric box logo to use a side-on perspective for the favicon. Mailchimp does this. To get around this. While the favicon. The white space top and bottom reduces its visual weight compared to other favicons.
Webkit browsers such as Safari and Chrome only display the 32px icon and reduce it to 16px. The Iconbuilder Windows template comes with all the sizes needed for application icons. Iconbuilder comes with templates ready to place your artwork in.
If you want to create an ICO with multiple resolutions. If all looks good. Iconbuilder can also export in other formats at the same time. Press Build and check each size looks correct in the preview window: Note that favicons don't need to be named favicon. Creating other types of favicon As favicons tend to be left to the last minute. Mobile Safari on iPad will look for icons named like so: We can also add an icon named apple-touch-icon-precomposed. Apple Touch Icons.
Apple Touch icons are also being used by apps such as Reeder on the iPad.
For iPad: Android OS 2. In tandem with the sizes attribute. Other than Android. The value of the rel attribute here is proprietary to Apple. For iPhone 4 Retina display: It will always be shown with a white border and. With version Refer to the icon reference chart in the appendix for the various sizes.
The only way to be sure is to test on the device. This part of the process is similar to that of creating application icons for various OSes. If your calculations are correct. We now have four correctly named and sized PNG files in the root of our site. I can recommend the iOS app Review for testing this easily.
So if we want a stroke to appear as 1px on screen. Not including a 16px favicon means the browser default is associated with your site instead and it increases HTTP requests. It not only looks good: While it may not be necessary to create all the icon sizes suggested in this chapter. This chapter starts as all projects do. This kind of symbol appeals to me because it had to be really simple.
You look at things like hobo signs. How are you going to best represent that tool. An icon brief is usually not much more than a laundry list of concepts. I often find myself confronted with a large list of required icons for a website project. Is it for wayfinding. What is it for? Is it warning the user that something different will happen. Is there an age. Is there a single message? Sometimes a brief tries to convey too much information with a single icon history of customer support requests.
It may not be worthwhile creating an icon for every navigation item. Does it need to be an icon? Could it work just as well without it? Does it solve language problems or help with a lack of space? Would using only text make it harder to discover at a glance? Does it need accompanying text to make it understandable? A site for an application may want to drive visitors to download the software and try it out for themselves.
Is it used on a toolbar. After discussing these criteria. The icon you would create for a primary school e-learning tool would be different to one aimed at an older audience. Just as you might use personas and stories to decide how to structure a website. Familiarity makes an icon functional and recognisable.
The first consideration should always be whether there is an existing convention or standard. Sometimes a metaphor can be found from photographs and illustrations as much as existing icons. There is even a filter option in the sidebar to narrow the search results down to icons. The first stop is always a Google image search as its breadth of results is unparalleled. Google image search http: Restricting the size of the results will filter out more illustrative application icons.
A typical question I ask in our studio is. Choosing to go against an existing standard means you lose the advantage of familiarity. By The pictogram for information point. A way of describing the concept. The rapid technical progress of the web has brought with it a need for a whole new set of metaphors. Up to this point. Standardisation is very important with icons.
Prior to That all changed very quickly. The problem with using the text RSS was that. The white radio waves indicate the broadcasting aspect of feeds clearly and simply. How did you arrive at the final icon? Were there many sketches and iterations before that point? A lightning bolt was the original icon being used to represent feeds in Firefox at the time. Were you starting from scratch? The principle behind the design was to create a single simple icon that could be used to unify and represent all syndication protocols.
We finally settled on the idea of waves originating and emanating from a source. It is one of those rare instances where the result you hope to achieve matches almost perfectly with what you actually achieve. Did you have any idea that the icon you designed would become the international standard? How does it feel now that it is? At the time I had no idea that it would take off like it has. Which is almost exactly what happened.
We put the icon out there and people just picked it up and adopted it. It spawned T-shirts and websites and really got people behind it. It feels pretty amazing to be a part of something like that. Most websites were using a sprawling list of buttons labelled with various syndication formats. I ran with that idea and turned it into the version of the feed icon that ultimately shipped. I did several sketches trying to incorporate that.
One in particular. The negative effects of fiddling with an established standard are clear. Without a familiar configuration. Each of the variants was a real example found in the wild.
If there is a standard. The results demonstrated how much variations in the recognised symbol made the symbols less recognisable. Interviewees were asked to choose the most easily identifiable sign out of four variants in each topic. Is that the hem of a skirt dangling beneath the chair A B of the seated figure. An online study undertaken by Iconglobe. Its possible that in the future. This is an object that has been in constant use since the nineteenth century and shows no signs of being phased out quite yet.
While some pictograms may become less useful over time as the objects they represent fade from use. The latter often has a plus sign added for clarity. For how long will this last?
Not only have floppies become obsolete. Generations are growing up with no experience or knowledge of them. Remember how in chapter 2 the metaphor of an owl had two meanings. While some icons do have an existing standard. Consider other icons that use objects. There are occasions when you might need to stray from the standard. The creative challenge of creating your own metaphor makes it all the more satisfying than simply reproducing another home icon.
In the context of a browser UI. For similar localisation problems. This part can seem daunting. Thumbs up may generally be a positive sign.
In the case of our view icon. In general. Keep the related ideas on the same branch. How easily can it be misconstrued as something else? A silhouette of a heavy weight could also look like handbag! Classic examples of this are the instructional symbols used on hand dryers that appear to dispense bacon at the push of a button: In this example.
At each node. Even once this was chosen. Can it be adequately rendered in the space available?
A padlock can still be recognisable at 8px. The solution in this instance was a pictogram. All very nice but. Apple has created a memorable icon for this. While using the first letter is usually avoided. This means research into how others represent apps. Many companies are now having to find a metaphor for applications. Starting with the icon of the base element — the document icon with folded corner — smaller icons badges are then added to convey the different states: This simple visual change helps draw attention to the added meaning.
Top-right would obscure a crucial part of the icon. This has the disadvantage. On its own. The bottom-right area of the document icon is a good place for these. If final size permits.
As an example. Private and Locked. This microphone icon needs a state to show when sound has been muted — which can be achieved by using a diagonal line to cross out the base icon. This can work well. Going back to our document icon with its three different states. Opposite are some example colour comparisons. The key is not to use colour alone to convey the message. While black can represent mourning. Used in isolation. The appendix contains a chart of the common badges you can use to provide additional meaning.
Everyone interprets colour differently and while for most that difference is tiny. Using colour The final part of the metaphor is the use of colour. There are also potential issues with cultural differences again. Chapter 7 covers these and the areas in which the metaphor process differs. Whatever you choose. Unless there are potential problems with trademarks. The events are fun and creative events that let you give back to your cities.
This chapter will build further on that. Place these contexts on separate layers that can be hidden before export. Having said all that. This helps to avoid inconsistency in the artwork. If it needs to work on top of multiple colours. Even though I have my set ways of working. Dragonball Z Drawing style is as personal as the tool you use to draw. In company When creating an icon set. In context If the icons need to sit on top of other elements. Only the artwork on the artboard is exported the exception being SVG.
A Windows toolbar image strip. Save it in another document if you have to. As I've mentioned before. As a consequence. You can just use the backs of envelopes and a free biro from a bank. This will make editing easy and it provides a basis for creating other sizes as well as high resolution for print. The appendix lists the major applications you are likely to use.
Sizing Size is the first factor to affect the artwork. The appendix contains a comprehensive reference chart or see online at http: The context will often determine this. Opacity and Sketch currently support the largest range of export formats.
The smaller it is. Text size may also affect the size of the icons. An oddnumbered grid would also give you different weight options. This gives enough space to make the icon clear. If you wanted the arrow to have a slightly rounded appearance. The circle then overlaps this guide. This will become obvious when you draw icons in company. If the canvas size is 32px. Of all these shapes. But to enable the viewer to easily distinguish each icon. This is often enough to trim off some stray subpixels and make it appear lighter.
If your 1px stroke looks too heavy. As with all grids. A consistent style also helps balance your icons. In these instances. The binoculars icon metaphor for view that we looked at in chapter 4 will be an irregular shape and. Traditional pictogram design would normally use a grid to help ensure consistency across the complete set.
Where possible. The aim is not to improve proficiency in particular applications but, rather, to show you how to create icons with the common toolset found in most of them, so you can be more versatile. Looking at the uses for icons beyond simple decoration, how they help us navigate, give us feedback and express our mood. It also looks how not to use icons! Starting with the simplest form of icons, looking at how to get crisp artwork at small sizes and the various ways favicons are used.
Walking through the drawing process, working with simple pictograms and small colour icons, and looking at the pitfalls on the way.
There are many different formats and deployment methods for icons, depending on the context, which can have a bearing on how we create the artwork.
In particular I cover all the methods for displaying icons on websites. We finish on the largest and most complex of all the icons, which are more often than not, photorealistic works of art.
Handy reference, including: Common icon badges, overview of drawing and creation tools and a comprehensive icon reference chart. Along the way, I talk to icon designers such as Susan Kare, David Lanham and Gedeon Maheux of the Iconfactory and many more about their process behind well known icons. Also to the words team: