Icons & Illustrations

Icons and illustrations have much in common, but are still different things. An icon always represents something, such as an application or a function in an interface. An illustration on the other hand often complements something, such as an article or a concept. Sometimes we create icons or illustrations as stand-alone projects, and sometimes as a part in a bigger design or interface project.

Case study: Icons for NovaCura

NovaCura are experts in business systems and process enhancement. Their core areas are production, distribution and service/maintenance and economics.

They needed help to create modern and appealing icons for their different applications, that were to visualize and match the technically advanced solutions. In addition to the application icons, they also needed a set of consistent icons to use in the processing tool Flow.

NovaCura also wanted to be able to use the icons for other purposes like prints, banners and movies. Therefore, all graphics were made in vector format in Adobe Illustrator so that the final delivery (apart from the icon-files themselves) were vector originals that can scale infinitely without quality loss.

Flow is an application for creating process flows an a simple and intuitive manner, in a view that reminds of a drawing program. So, for the icon we created a partly rolled out blueprint, with ?process arrows? that are on their way out from the paper, since the processes one creates in the application are supposed to be carried out ?in real life? later on. We also added a pen to enhance the feeling that the users creates something of their own, and also to get a better composition in the icon.


Texo is an integration platform, and were a lot more abstract to visualize. We did a few sketches of different arrows and process flows that were interlaced together, but it was hard to interpret the icons as they became to ?academic?. Instead, we choosed to reuse the idea of a blueprint from Flow, but with a cogwheel to symbolize the automatic process. It´s obvious that the applications belongs to the same suite, but does rather different things.



In addition to these we also created an icon for mobile devices, which also had to become rather abstract since it is supposed to cover a lot of diverse activities. As a symbol for ease-of-use and lightweight we choosed a feather, and the lighting and perspective was done in accordance with the guidelines for Android, since the application will be mostly used on such devices. We also drew a common web app icon with the same process arrows around a globe, and a document icon.


There was also a need for a new set of consistent icons to be used inside Flow. Since the interface is scaleable (to get a good overview), the icons needed to be very simple and readable. We worked to give each icon their own distinct color and silhouette, so that the user easily can distinguish them from one and other even in very zoomed-out views where the icons might be just a few pixels big.


shipSometimes our clients want something which will really point out their message, really underline it. In many instances photos are just the ticket, while at other times illustrations can be more effective.

Illustrations are made up of vector graphics. This means you can change the size without adversely affecting quality. This is why an illustration is a really great way of building your corporate identity ? it can be used on the web, in print, and in presentations.

Animation and movement ? sometimes it?s better to present material in the form of animated graphics and video. We create animations in Flash which highlights all material. Illustrations and animations also work really well together when you want to reinforce a message. Read more about Flash and animation under Code > Campaigns & Games.

Assorted illustrations for Mecenat, Novacura, Bytbostad and Stiernholm