• Home
• Icon Design
• Web Design
• What They Say
• Blog
• Contact Us

Site Blog

Modern day cave paintings

Icons form visual languages that (like any other language) operate within their own systems of convention and association in order to convey meaning. Whereas spoken language offers the scope for infinite finesse, personal tone, and even ambiguity, the role of iconic language is to invariably provide clarity and brevity – to render the message simple, direct and unambiguous, without personal elaboration or embellishment.

The trade-off for this concise and impersonal approach is that although simplified and unsubtle, an iconic language can transcend international boundaries with relative ease whilst the spoken or written word is much more culturally dependent and requires painstaking training and practice to be utilised effectively. Witness the abundance of Language Packs shipped worldwide with computer operating systems whilst icons remain constant.

The key to icons' success (or failure) is in their utilisation of common references that span the relevant target cultures. These references can be direct analogues of physical counterparts and recognised as such, or abstractions whose meanings ultimately have to be learned. For instance, a circle with a line descending from its lowest point, subsequently branching into two pairs of shorter, horizontally symmetrical lines, all angled downwards, is commonly interpreted as a human being (this lengthy written description in itself highlights the benefits of icons over words for transferring simply understood concepts). This basic symbol has been in use since prehistoric times, as ancient cave

 paintings will testify. Furthermore, the icon itself can be expanded upon to convey further information about the status of the object depicted. If for instance the stick man as defined above is modified by the addition of a bar, at right-angles to one of his arms, then he is now carrying... well, something.

This brings up another important factor: context. If the now modified figure was seen on a wall in the Imperial War Museum, it would be reasonable to assume that he represented a (primitive?) warrior brandishing a weapon of some kind. If the same figure was found in a stadium complex, we may assume that he represents a sportsman carrying a bat, or a vaulter's pole perhaps. All we could really say with any certainty is that in isolation, the figure is carrying an object or implement of some kind since it is an established convention that humans generally do not have disproportionately long arms or extra elbow joints! So context gives us important information about the nature of the subjects depicted and the related message.

Having used an icon in a set context to identify its target, what next? What is it about the target that we wish to convey? Well, this is usually illustrated by additional iconic elements, whether directly analogous or abstract. An iconic arrow head is a powerful example of a real object, abstracted and utilised to add meaning in an iconic context.

The simple arrow head is a convincing representation of direct movement in a specific direction, for obvious reasons. By orientating the arrow head character differently in relation to the main subject icon we obtain extra information or instruction. Returning to the stick figure, his carried 'object' and the two contexts outlined above, in the Imperial War Museum, the addition of an arrow would now suggest: “this way to the armed footsoldier exhibit” for instance, and in the sports stadium, perhaps: “participants this way”. 3D can work well with icons too, adding “forward“ and “backward” to differentiate from “up” and “down” by including arrowhead images with forced perspective.

Icons at their most powerful seem to connect with deeply rooted visual cues in an almost primeval language. The motion of destroying something (or someone), symbolically represented by the path of the destroyer's hand as the recipient is literally crossed out: here's a person and then “no-person”.

The use of colour is an important factor too, again deeply rooted in our cultural (or even animal) make up. In fact our response to colour is automatic, almost a reflex action, although there are cultural variations of course: red for danger (blood), black for death (white in China), green for foliage, blue for the sea. We're still using cave paintings after all.

[Photo (top) by Marie Brizard, Photo (bottom) by kovic]

An opportunity to rethink your product and brand

If you have an application or software which has been in use for a number of years or was recently designed but with rather not-very-impressive icons in use, maybe it's time for a refresh. A complete icon redesign can provide an opportunity not only to freshen up your image, but it can give a new lease of life to your product.

A key to thriving in industry today, as in many other areas of life, is constant and never ending improvement. This is one of the reasons why even a market leader like Microsoft keeps coming up with new versions of Windows and their other programs every so often. They do take the chance to not only improve the performance of the programs, but also to keep modernising and freshening their look.

The modern world is fast changing and companies that don't improve fast enough or take opportunities to re-think and enhance their strategies, brands and operations can be quickly left behind. The impact on market share and profit can be substantial.

So if you have that niggling feeling that your product or application could do with an upgrade or refresh, it may be the right time to seize the opportunity to go for an icon redesign as a key element of product improvement. 

 

A fresh look

Perhaps your product could do with a fresh look. The users of your program are most likely also using iPhones, digital cameras, Facebook and a host of other digital equipment and internet websites that expose them to icons of all sorts all the time. Instinctively, they come to expect quality and finesse.

Strengthen and consolidate your brand

You can take the opportunity to strengthen your brand when going for an icon makeover or redesign. You may want to enhance the unique features of your brand or product, or highlight something that has now become more relevant than in earlier versions.

Harmonise your products

This can be part of your brand strengthening strategy. If your company or organisation has a range of products of diverse identities, this may be an opportunity to bring them all within a family look.

Enhance functionality and user-friendliness

Almost inevitably as you use a program, you discover bugs that could be fixed, possible confusions regarding navigation, etc. There may be some icons and functions to be put in proper sequence or their clarity enhanced. Icon clarity is an important part of insuring ease of use.

 

Taking the time to re-think your brand is not about keeping up with the Joneses; it's about keeping up with the times in a practical and functional way - to ensure that you keep your competitive edge and ultimately serve your customers better.

How Web 2.0 has affected icon design

Icons have become an essential element of modern web design and have to be both functional and visually appealing. Web 2.0 has given rise to an increasing number and different variants of icons. The more Web 2.0 websites, applications and platforms that appear, the greater the need for icons.

Although it is tempting to litter our sites with a myriad of icons, designers have learned to use them sparingly. Today, we use fewer and better icons, which carry more meaning, and those in question are usually to do with social networking and web interaction.

 

The need for social networking icons

The social networking aspect of Web 2.0 has created the need for a totally new set of icons for our websites. Almost every site will now have an icon linking them to a Facebook group or Twitter feed. Others to join this set of icons are Flickr, Stumbleupon, Digg, Del.icio.us, Reddit, LinkedIn, Technorati and RSS feeds. Each one of them has established itself in the Web 2.0 world to such an extent, that words are no longer needed, and their distinguishing icons alone will suffice in conveying the function to users.

This has meant, however, that the links sections of websites run the risk of becoming standardised clones of each other. If every website has the same Twitter icon in the same corner of the web page, it is all going to get a bit repetitive, where users eventually become immune to them. Whilst people want to use standardised icons that are easily recognisable (you wouldn’t mess with the standard design and function of Britain’s road signs would you?) websites are increasingly recognising the demand for adapting these icons to suit the theme of their business or company.

 

Adapting well-known icons to suit the personality of your site

Take the well-known Twitter icon for instance – the letter ‘T’ in the distinct Twitter font, or now the blue bird logo. When done professionally, often by icon designers, the Twitter bird can be adapted to suit a website’s image without messing about too much with the message (i.e. click on this icon to be directed to our Tweets).

If the bright blue colour of the bird doesn’t quite go with the colour scheme or theme of your website, then you could assume it is safe to alter the colour and people will still recognise it as a Twitter link (unless you’re a bird-related website, because that might get a tad confusing!).

 

How do your icons reflect your business?

You may want designers to assist with adding drop shadows, gradients or reflections to the icon to give a tactile and aesthetic quality of elements in the real world, or to give a three-dimensional feel. Likewise you may want to have the Twitter bird listening to music, if you’re a pop website for instance, or you may want an image of the twitter bird on a cupcake, if you are a company that specialises in celebration cakes.

With the vast amount of information that is now available on the internet, each website is competing for the attention of web users, who have a lower concentration span when reading websites than when reading something on paper. This means that fewer words are used and are now replaced with well-known icons.

But providing that the meaning or function of the icon is not tampered with, Web 2.0 has opened up the possibility for designers to express the ideas of your company. Whether it is simplicity you want, or cute and quirky, designers can now develop new icon sets to suit your site, creating a bold, distinguished and bespoke application for web users to interact with, and on which they can share and exchange information.

The multi-faceted uses of great icon design

From business-to-consumer and business-to-business websites, to shopping portals and social networking sites, icons are everywhere, so it’s never been more important and relevant to have great icon design to assist users in their journey. So what works best in icon design? In the age of the information highway, icons that really work are those that signpost successfully. They must allow people to distinguish between things more quickly than they would be able to from reading a paragraph of text, and convey a message much more quickly than a written description would on a website. When you see an icon, you need to be sure of what it means, so simplicity is key. A simple and concise icon will ease recognition, and help to convey numerous messages within a small space.

 

Icons are also great for helping to organise things on your computer. For instance, if a photographer has lots of different cameras, you could use a camera-specific icon to assist in file and folder organisation, and for the labelling of memory cards. A designer or web developer might use icons to organise numerous folders for specific design jobs, or for computer customisation.

 

Many internet users with disabilities find websites difficult or even impossible to use, so website accessibility is becoming more and more important. There are many guidelines that web designers adhere to in order to assist users, including: using meaningful ALT text for all images to provide descriptive text; using descriptive hyperlink text; avoiding the use of frames, which are difficult for special browsers to interpret; providing navigational short cuts for users of text-only browsers and page readers; using an easy-to-see web colour scheme, and easy to read font type, size and colour. Icons play an integral part in improving website accessibility, so clean and uncluttered icon designs allow people with disabilities to easily navigate sites.

 

The most successful icons are those that you hardly notice, or have become so accustomed to using that you click on them without even thinking about it. An excellent example of this would be the programme icons you click on every day. The iLife suite of icons, for example, is intuitive and clear – you know exactly what type of program you’ll be accessing, so the icons’ designs reinforce the value of these applications. If the icon is cool, you have a positive reaction to opening the program, which can affect how you think about the program too. The icons on social networking sites such as Facebook or Bebo are bright, colourful and appeal to the target audience of mostly young people – in fact, the icon design is key to these platforms’ brand identities.

 

Businesses would do well to adhere to the same design principles when it comes to corporate communications. If you want your brand to stand out, make sure your icon design reflects your company’s brand strategy and corporate identity. For any type of business, use of well designed and easily recognisable icons on websites improves functionality and makes the services they offer more accessible and obvious to users, as well as increasing customer engagement.

 

Finally, don’t forget that great icon design also equals great marketing. Think about successful brands that have a logo, shape, or image that in some way encompasses the product itself, such as the Coca Cola bottle or the 20th Century Fox logo. Good icons do the same thing: they use an image to trigger a response. If the icon looks truly great, you have a positive reaction to using the product, which can affect how you think about the product too.

Ensuring that your icons package is a winner on all fronts

In the modern competitive world, design is no longer limited to functionality. Nowadays, sleekness of presentation and user-friendliness are significant factors in how a product or service is perceived. In a world where designer labels are all the rage, much of design is about lifestyle, elegance and panache. This reality applies as much to the icons on your website or integrated into your product as to the suit you're wearing or the stylish chair you're sitting on.

If you decide to have a new icons package designed for your website or product, or go for an icon make-over for an existing brand, you may as well go for the best package - one that incorporates all the qualities that top products have to display to be a winner in a competitive market place. One useful way to approach an icon-design package is to think of your icons as elements in a presentation you are giving to a set of discerning consumers: all the elements of a great presentation have to be there.

Here are a few guidelines to ensure that your icons package comes out a winner on all fronts:

1. CLARITY: Your icons should be neat and clear cut. After all, icons are like little keys to big doorways within a virtual environment. An icon to open the application needs to be distinct from one that will close it or delete something.

2. FUNCTIONALITY: The icons should do what they are there to do, which is to act as effective aids to navigating a program or website. As a total package, your set of icons should be wide enough in range to cover all the functions of the application or program in which they appear, but not so numerous as to cause confusion.

3. INTEGRATED LOOK: A good design package will ensure that the individual pieces make sense and go together in appearance, as though belonging to the same family, when assembled into a package. This will lend a great overall feel to the application or package in which the icons appear.

4. AESTHETICALLY PLEASING: Unless you are being deliberately provocative or counter-intuitive for some good reason, you will want your icons to be aesthetically appropriate to the context in which they will appear. Icons on the iphone, for example, have to be as "sleek" as the iphone or they will look badly out of place.

5. USER-FRIENDLY: Well designed icons will be user-friendly, so that regular users of an application can make almost instinctive use of them. Users will not have to refer to a big fat manual to be able to get started with a program or product.

Whether you are creating a new product or website that requires icons, or enhancing an already existing brand, commissioning an icons design package can be of great help in accomplishing the result you want. You can start this process by putting yourself in the shoes of the end user, giving attention to a few guidelines and then approaching a design company to come up with the goods. That way, your icons package is sure to come out a winner.

 

 

 

 

 

 

 

Why you want to own the copyright to your icon designs

If you have a brand that you’re proud of, you want to show it off to your clients and competitors alike, whether it is through literature or advertising. But the easiest and most convenient way to display your company or business image is through the design of your website, application and icons.

1. Owning copyright means owning your identity

One way of stamping your identity through your website, is by having it specially designed to meet your particular needs and with your ideas and input. Most importantly, however, you should have copyright ownership of your icons and font.

Commissioning the new design of features such as icons and fonts is not a decision to be taken lightly. Properly thought out, these features can make a really big difference to your brand. After all your hard work and input into making your design features unique to your company, you don’t want to stumble upon your icons on a competitor’s site or application. Owning copyright means that the designers can’t simply ‘sell’ your icons to other people.

2. You can’t be sure who owns ‘free’ icons on the web

One of the main problems currently arising in graphic design is the mass availability of fonts and standard icon sets on the web. Why is this a problem? Because while they are very convenient to get hold of, they are stripping many websites of their unique identity, making each one look standard and generic.

Something else that might give you pause about using such icons found on the web is that you can't really be sure whether they are free to use, as you never know who might own them. Working with designers to develop your own brand image and icon sets avoids this problem.

3. You don't get into confusion further down the line

It is important to establish with your designers which of you is going to own the copyright of the finished product. This may seem like a trivial issue, and one you think you will never need to address, but there are reasons for it. One is that you cannot always guarantee that the design company you are working with will still be around a few months down the line. They may go into partnership with another company, or expand and be bought out by another firm. Or maybe you decide to use the services of another designer. Either way, you don’t want to get into a confusing situation where it turns out that the design of your website and all the fonts and icons that go with it don’t actually belong to you.

It has always been the case in English case law (also referred to as 'common law') that copyright remains in the hands of the author of the work, namely the designer or developer, unless there have been prior arrangements agreed between the parties. So basically, the creators own the work unless you get something in writing beforehand.

4. You are free to reproduce as you wish

When you own the copyright of design features like your icon sets, it allows you to take them apart and tweak them as you see fit, and suit them to different versions of your site – for example, for an international counterpart of your business. And you can comfortably reproduce them as you wish, whether you want to scale them down to a smaller size, or scale them up for use on your associated products. After all, shouldn't you be able to do what you like with your icons!

Give your icon design some dimension

Icon design has developed over the years as computer-aided design has become more advanced. There is now a greater demand for three-dimensional images, as they help 3D arrowsto represent objects or signs as we actually visualise them: solid, and with light, shadow and depth. This contemporary and polished look has made three-dimensional icon design one of the approaches most sought-after by businesses and companies for designing images that represent important functions and tools in applications.

Commonly-used software programs for designing vector graphics or multi-dimensional images which are popular with graphic and icon designers include Adobe Illustrator, CorelDRAW and the Gnu Image Manipulation Program (GIMP). If you know what you are doing with these programs, they can be very effective tools for turning those rough pencil sketches into a sleek-looking set of icons, transforming flat polygons into 3D images. The introduction of, for instance, Vista 3D icons has set a new standard in the design of icons and the way they appear on user interfaces and applications. Some have even gone so far as to apply simple animation to such icons, to indicate that they are processing or in use for example.

There are many methods of applying 3D effects to icons. These include bevelling to show perspective, and different forms of rendering to create the illusion that the image is not flat. Adding a gradient to the shading can give the impression of dimension, as can inserting shadows into your icon. Highlighted shading and reflection will make it stand out from the page or screen. Combining all of these, as well as adjusting the opacity or transparency of your icon, will give it that realistic look, according to the style you are going for. Forms of rendering can also give texture to 3D icons: the impression of reflective metal, wood, fur (take a look at the new Mozilla Firefox icon) or even liquid.

It is not only rendering that gives your icons that extra dimension. There are other techniques you can use to achieve a subtle 3D look without going over the top. For example, the icon for a PDF or Word format file shows a sheet of paper with a corner folded down. This small touch prevents it from appearing flat or drab.

Whether you are redesigning from scratch or tweaking an original design, icons are a great way to update a product and your company image. One good example of simple adjustments to an original icon is the evolved design of Apple Inc. icons. The use of rendering and animation can make the dashboard icons dimensional enough almost to let you reach out and grab hold of them. Apple’s journey alongside software and design development is manifested in the various forms of its famous bitten apple logo.

When in the right hands and using a software program that meets your needs, the design journey can be relatively easy. It is something accessible to everyone, not just the big wigs out there, and it is surprising how many people do not realise it. The beauty of computer-aided design is you can have exactly what you want. Seeing the sketchy icon you envisaged in your head finally pop up on screen can be extremely satisfying.

Icons as part of your brand

With so many modern gadgets at their finger tips, from iphones to digital cameras, one can assume that most computer users are getting icon-savvy. They see loads of icons everywhere and instinctively know how to use them most of the time. This sets a challenge to entrepreneurs who are developing new applications and software to come up with ever higher standards.

Like the logos that advertise and promote your business, icons can make a difference to the quality, usability as well as the perception of your product. This makes it important to go for quality and high-standard designs. It's a bit like choosing a special present for a dear friend: you don't go looking in the pound shop. With businesses facing global competition, it makes sense to avoid the cheap and shoddy icons in off-the-shelf packages and to have them specifically tailored to suit your needs.

One approach to getting an icon package designed for your business is to see the icons as an essential part of branding. From this angle, you can identify some branding criteria to consider in commissioning your icons. Here are five factors to consider:

1. Quality: It goes without saying that if you want to compete with the best in the world, then you have to be up there with the best. So better to commission your own unique icons for your company rather than trawl the pound shop for icons that are the modern descendants of ancient clip-art.

2. Uniqueness: This is where you take a look at your competition and come up with something one step ahead of them, or something quite unique. Great brands can even launch something counter-intuitive to the norm in their industry and come out as winners.

3. Consistency: A great icon design package will have a consistent feel to it, so that users know they're in the same application or program as they navigate around. Not only that: you can get a design company to come up with a set of icons that also takes account of what else you have on your website, as well as your advertising material, company logos and so on.

4. Visual appeal: There are lots of boring icons out there, don’t let yours join this losing team. We're going for quality, aren't we? And where's the harm in having something eye-catching too? Strong visual appeal definitely adds a winning edge.

5. Usability: Of course the icons must do the job they are designed to do, and in their proper context. For instance, they should make your application or software easy and pleasant to use, or help to make a website easy to navigate if they are to be used there. Some of the best icons out there manage to feel sophisticated and simple at the same time: they are highly specialised, while facilitating almost instinctive use of applications or programs. This is the sort of standard you want to aim for with your icons.

There you have it: icons can be a strong part of your brand. So get the best designed for you.

 

 

 

 

 

 

Five questions leading to a great icon design brief

Are you planning to have a set of icons designed for your website or application, or a complete icon-makeover in the near future? As any icon designer will tell you, clear guidelines and a good brief can really help them deliver the goods. A design company will tell you the exact technical criteria and information you need to include in your icon design brief.

However, if you want to come up with a superb set of icons, it may be useful to take one step back to reflect on what you really want to achieve. The four or five interrogatives or question-asking words we use in everyday language can help you clarify what you want to achieve and enhance your brief:

1. The what question: what exactly are you aiming to achieve? What is your product and what kind of image do you wish to project? Here is a good opportunity to define clearly what your brand stands for. From this space, you can then decide how best to project an image that does justice to your company's aims and objectives. You can also decide what examples you can provide to support your design brief.
2. The why question: exactly why are you getting icons designed for your company or organisation? Obviously, you have to take into account the core values of your company or of the particular product in question. All businesses offer solutions to the customer and, presumably, what you want to achieve is to project the best image possible of the solutions you're offering through visual looks (including icons) and any other factors in the mix. If your icons are part of a brand, you will want to maintain harmony and consistency in the visuals.
3. The where question: where exactly are the icons to be used? Where will they serve best - whether in terms of functionality, aesthetics or both? Then further down the line, you have to take account of where you will be marketing your products: is there a lot of competition? What are their products like and what is the quality of the icons in their packages if users will be comparing the products side by side?
4. The when question: exactly when is your product coming on stream and therefore what icon package will be most suitable? Are you launching a new product or repackaging an already existing product? If it's several months or a whole year down the line, what new trends will your package be competing against? Are there seasonal factors?
5. The how question: exactly how are the completed icons to be finished and delivered? And how do you intend to liaise with the designers for further upgrades, if this is required? How questions lead neatly to the technical information and practical issues, which is exactly where you want to go next. But now you have a better overview of what you want by going through this exercise.

 

With any luck, answering these questions will give you some new perspective and help you to create a great design brief. When clear creative visioning and technical expertise meet, the results are usually terrific and everybody wins.

[Photo by Diego Medrano]

Common iPhone Application Icon Dimensions

iPhone apps - common icon dimensions

When I first started producing icons and graphic elements for iPhone or iPod apps I couldn't seem to find a single place that listed all of the required icon sizes used throughout the standard GUI elements such as iPhone tab-bar icons and menu icons.

I hope you find the following list of sizes helpful:

Application icon: 57 x 57 pixels

This is the icon size we are most familiar with and is used to launch the app.

 

iTunes app icon: 512 x 512 pixels

This is the large icon size used in the iTunes app store.

 

Spotlight search results icon: 29 x 29 Pixels

This is used in the results from a spotlight search. If no specific icon is created for this purpose, the main app icon is automatically scaled down to this smaller icon size which can give mixed results, so it is worth doing this properly and providing an individual file.

These three icon should be as close to identical as possible, to maintain the brand you are trying to create.

Tips:

• Apple automatically adds the rounded corners to your iTunes and iPhone app icons so you don't need to worry about that.
• Apple automatically adds the 'gloss' to the iTunes icon but you can prevent the gloss being added to the iPhone app icon by specifying 'UIPrerenderedIcon' in your applications 'info.plist'. However you will need to make sure that the icon you submit still looks okay with the standard gloss applied in the iTunes store. If you have applied your own gloss or finish to the app icon you will need to add a 'glossless' version to the iTunes store icon.
• The 512 x 512 pixel iTunes icon needs to be submitted as a JPG, whilst the 57 x 57 pixel iPhone app icon should be a transparent PNG.

Common GUI icon sizes

Menu icons: 30 x 30 pixels

These are the icons, monochrome by default, used in some of the menus as seen below.

 

 

Tab-bar icons: 30 x 30 Pixels

These are the monochrome icons used in the black tab-bar at the bottom of iPhone applications.

 

Tips:

• You only need to submit a single icon for each tab in the tab-bar icons and Apple automatically applies the 'selected' affect (blue highlight and contrasting background). 
• Use a transparent PNG file for both of the above icon types but do consider that the tab-icon will have an effect applied and what it might look like, so it is best to make the design as simple as possible.
• The tab-bar icon works on the transparency within the image so it doesn't matter what colour the 'solid' are of the design is, only the transparency is affected by the various states.

Five reasons to design your own icons for your web site

Not all sites need icons, but for those that do (especially web applications), it is relatively easy and convenient to find free icons on the net. However, using free icons is not necessarily the best practice in web design. For one thing, you can't always be sure of the source when taking free designs off the web, creating the potential for copyright issues to arise in the future. Whilst many free icon sites are good and ethical, many are not, and it can be hard to tell the difference.

There are a whole bunch of other reasons too, such as...

 

1. An opportunity to be creative

Using free icons takes away the opportunity for you to be creative and give your web site some individual character. Whether you design the icons yourself, or give some input to professional icon designers, there is the real opportunity here for you to tailor your icon design to meet the needs of your web site and what it represents.

A lack of bespoke design can look generic and not have that personal touch, which is especially off putting, as websites can often be the first point of contact for queries regarding the business or service you supply.

 

2. Do they fit in with your look?

You want your icons to match the colour scheme or at least complement the look and theme of your website. Getting free icons off the internet often leaves you with a lack of choice and having to settle for second best. There is also the issue of mismatched fonts, which can leave your site looking disorganised. Plus even the most comprehensive icon set will often not meet the needs of your site or web app entirely.

 

3. Expanding the way you use icons

Resizing icons is never a good idea, as it's easy to end up with a patch of fuzz, instead of something sharp and clear. This can be a problem with free icon sets, which often only come in one fixed size. One of the benefits of designing your own icons, or having them professionally designed, is that it allows you to have access to high quality and scalable image files of all your icons, meaning you can increase or decrease the size as you wish. You don't have to limit your icons to your site, after all. You can extend them to literature and even the profile image or avatar for social networking sites and micro-blogging.

 

4. Ownership

Creating icons from scratch allows you to take them apart and alter them to suit different versions of your site. You may have one set of icons for the UK version of your site, and a slightly tweaked version to suit an American version, for example. This is just one of the perks of actually owning your icons.

Designing your own icons is not that difficult a process. Think about what you want on your site. You may have got inspiration from other sites or applications you have seen. By mind mapping your ideas with a designer, you can pick things you like and tailor them to create a unique set of designs of your own.

 

5. Long-term solutions

Using free icons from online sources can be a convenient and temporary solution, but in the long term it can strip away the identity and character of your site. Also bear in mind that free icon sets, especially the better ones, are often used by many different sites -- and potentially your competitors! The initial process does not have to be technical at all, and can range from a mood board of magazine cut outs to some scribbles in a notebook.

 

Of course, free icons are great for getting inspiration, roughing out ideas or for using as place-holders in a design until you can get your own custom icons for your site. But for great presentation and branding, custom designed icons are the only real way to go.

 

[Photo courtest of everydaylifemodern]

The different facets of software icons

To get an inkling of how powerful icons can be in applications, you just need to watch a kid playing video games. They're brilliant at figuring out what those little symbols in a game represent, quickly figuring out how following trails of icons in a particular order would lead to dramatically different outcomes - such as winning or losing a game. People can almost instinctively understand and relate to icons, as if they are keys to deciphering a coded language fast. That shows how powerful icons are. As most modern applications are icon-driven, users have become very good at understanding and using icons. It's second nature.

Icons are indeed little things that make a big difference. For those little graphical symbols are merely doorways to instructions, from the most simple to complex powerful operations. Pressing the delete icon in a program at the wrong time can ruin your day, if not your career! Differentiating icons at an instinctive level is key to a safe and seamless interface.

However, icons are not only utilitarian: there are design, aesthetic and even fun elements to them. If the icons in an application look cluttered, unfriendly and confusing, users may not enjoy working with the application even if it is a good one or capable of leading to good results. It pays to bear in mind the multi-faceted role icons perform in an application and to work with a design company which can pull together all these different elements into a coherent, friendly and functional package that meets your requirements.

 

• Icons aid navigation: this is the primary purpose of icons in most applications. The icons enable users to navigate applications quickly and consistently. The icons are like doorways to a consistent language: short-cuts to orders, instructions and various elements of functionality. So the clearer they are designed, the better the icons will serve to achieve the specific results required.

• Icons encourage familiarity with an application: if you're above a certain age, you'll remember the old, early versions of the Word Perfect program which had no icons at all and how it was a nightmare to navigate the menus. Computer programs have come a long way since those ancient days. So users generally expect high standards in the usability of programs. A properly designed set of icons will enhance how users quickly and easily get familiar with an application and find it as aid to productivity rather than something to be wrestled with.

• Icons can give a professional look to your product: if the professional look is important to you, it makes sense to have an icon set exclusive to your product or brand - rather than using off-the-shelf boring icons. In this role, icons are similar to the way in logos are exclusive to particular companies or entities.

• Icons can help present a consistent and user friendly look to an application: this is one area where a bit of creativity and flair comes in. With user friendliness in mind, you can get a set of icons designed for your brand or applications that will make users love using your software and at the same time make their work easier.

 

If it is true that icons have multi-faceted functions that involve utilitarian as well as artistic, and fun elements, it pays to give attention to getting the best icons developed for your application or brand.

iPhone Icon Design

It might seem as if it was released yesterday, but the iPhone has been around for quite a while now, along with one of its key features: apps. If you're writing or thinking about writing a new app for the iPhone, whether free or commercial, something you need to think about pretty early on is your icon. It's pretty much the first thing your users will see of your app, whether that's in the store, thinking about buying it, or using in their day to day routine.

Whether you are designing the icon yourself or having it designed for you, here are a few simple things to bear in mind:

 

Standing out

There are now tens of thousands of iPhone apps out there, crowding the store and your potential users' phones, so yours has to stand out. There are a bunch of ways to do this - a strong, simple metaphor, bright colours or just an elegant design. Not stand out in a bad way though! If your icon looks too inconsistent with the rest of the display, it could jar the senses and look unprofessional. Equally, the anticipation created by a great icon should be met with an equally great application. Make sure that your icon and app match up in terms of branding and expectation.

One specific point to note: Apple gives developers the option to add their standard gloss to app icons. We recommend against this, instead preferring to add our own gloss, customised for the specific icon, if one is required at all. Using the standard gloss can ruin an otherwise great icon or make it sink in to the crowd.

 

Usability

Usability is most often associated with interface design, but it's also important when thinking about your icon. Does it say what your application does in an obvious way? Or will users have to hunt around or get misdirected every time they try to find your app on their phone? Humans rely on the unconscious mind for almost all our day to day activities, and introducing a strange or poorly associated metaphor into your icon may force the user to switch on their conscious mind to find it, jarring them every time. Even regular habit and learning can't beat strong association, whether it is negative or positive.

 

Scalability

This is a simple one! Make sure your icon is going to work at every size in which it needs to be presented! This means both in terms of technical requirements and design. Small details or 3D aspects may look great at a large size, but fade into a miserable fuzz at smaller resolutions. Think very carefully about how much detail you need to add and why. Ideally, an icon should project a strong association without much detail at all. The same goes for text in icons: it should generally be avoided at all costs, except, perhaps, in the case of well understood acronyms, such as TXT or SMS.

Orcina Software Icon Design Project completed!

Spread Intelligence Icon Project Completed

Spread Intelligence are software developers based in London creatingsolutions for Financial Traders. For more information on this project please take a look at the Icon Design portfolio.

iPhone and iPad Icon Design Service

As well as designing icons for iPhone and iPad applications we have also been involved with iPhone app interface design.

Our most recent iPhone Icon project was for the 'Dictionary!' iPhone app.

We have also produced icons for other mobile platforms such as android icons and Palm Pre.

iPhone Application Icon Design

Our designers were tasked with creating an iPhone application Icon and GUI graphics for the popular 'Dictionary' iPhone app. We also created custom icons for the Android and PalmPre versions.

See more about this iPhone Icon Design project?

Our New Blog

Over the coming weeks we will be sharing some Icon Design hints and tips as well as discussing the industry in general. We hope you find it informative.

If there is anything you would like to see covered or if you have any feedback, please get in touch.

Thanks for Reading.

Latest News

Contact Us

For more information about our services or anything else on this website, please get in touch.

Name:

Email:

Phone:

Message:

 

We will not share your details with anyone.

 

Telephone +44 (0)1487 843 493

Email: adam@creativefreedom.co.uk

Creative Freedom Ltd
The Old Union House
Old Church Lane
Colne
Huntingdon
Cambridgeshire
PE28 3NE

Blog