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

Site Blog

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