Skip to content

Republic / Design / Icons and 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.

Icons

An impor¬≠tant part of the work with graph¬≠ic inter¬≠faces is icon design. Well-designed icons facil¬≠i¬≠tate under¬≠stand¬≠ing, cre¬≠ate a sim¬≠pler and clean¬≠er inter¬≠face and enhance the user expe¬≠ri¬≠ence. A vec¬≠tor illus¬≠tra¬≠tion is scal¬≠able and very use¬≠ful, but if you have to make real¬≠ly small icons and main¬≠tain qual¬≠i¬≠ty and clar¬≠i¬≠ty you have to draw them pix¬≠el by pix¬≠el.

Here is an exam¬≠ple of an icon project we recent¬≠ly completed:

Case Study: Icons for NovaCura

NovaCu¬≠ra is an expert in busi¬≠ness sys¬≠tems and process improve¬≠ment. Their busi¬≠ness areas are main¬≠ly pro¬≠duc¬≠tion, dis¬≠tri¬≠b¬≠u¬≠tion and service/‚Äčmaintenance as well as finance.

They need¬≠ed help to cre¬≠ate mod¬≠ern and appeal¬≠ing icons for their var¬≠i¬≠ous appli¬≠ca¬≠tions, which will visu¬≠al¬≠ize and match the tech¬≠no¬≠log¬≠i¬≠cal¬≠ly advanced solu¬≠tions. In addi¬≠tion to appli¬≠ca¬≠tion icons, a set of con¬≠sis¬≠tent icons were also need¬≠ed to be used in their process tools Flow.

Read more about the project under Case Studies ¬Ľ

Illus­tra­tions

Some­times the cus­tomer wants some­thing that real­ly high­lights and points out the mes­sage. In many cas­es, the pho­tog­ra­phy works well, at oth­er times the illus­tra­tion is bet­ter suit­ed.

Illus¬≠tra¬≠tions are usu¬≠al¬≠ly made up of vec¬≠tor graph¬≠ics. This means that you can change the size with¬≠out loss of qual¬≠i¬≠ty; from busi¬≠ness cards to bill¬≠boards. There¬≠fore, illus¬≠tra¬≠tion is a real¬≠ly good way to build a cor¬≠po¬≠rate iden¬≠ti¬≠ty and can be used with an advan¬≠tage on the web, in print, and in pre¬≠sen¬≠ta¬≠tions. Among oth¬≠er things, we have made illus¬≠tra¬≠tions into a book on bank secu¬≠ri¬≠ty, a pic¬≠ture bank for com¬≠pa¬≠ny pre¬≠sen¬≠ta¬≠tions and cat¬≠e¬≠go¬≠ry pic¬≠tures for stu¬≠dent dis¬≠counts.

Some¬≠times it is bet¬≠ter to present mate¬≠r¬≠i¬≠al in the form of mov¬≠ing graph¬≠ics and video, for exam¬≠ple, to clar¬≠i¬≠fy process¬≠es or cap¬≠ture the vis¬≠i¬≠tor‚Äôs atten¬≠tion. We make Flash ani¬≠ma¬≠tions that lift all mate¬≠r¬≠i¬≠al. Illus¬≠tra¬≠tions and ani¬≠ma¬≠tions also real¬≠ly fit togeth¬≠er when it comes to rein¬≠forc¬≠ing messages.
Infographics for Novacura
Illustrations for Novacura and GTC
Illustrations for Gemalto och a private project

How the drawings for this site were made

Here we show how the illustrations around the site were created. There is also a video showing the whole process from start to finish, and some tips and tricks for anyone interested.