As we posted earlier, after looking for another company that could redesign our site, we decided to do it ourselves. Developing HTML/CSS, configuring a CMS (Joomla, in the case of this site) was not a problem for us. Yet this also involved development of visual style and graphical elements, which we, being a mostly software development and QA team, don't do too often.

Yet it seems that with the right ideas, boldness and perseverance, anything becomes possible.

This article explains the thinking behind the icons used on the frontpage of this site, as well as the steps of creating such an icon.

Conceptual thinking

The site had to be simple yet attractive. This influenced our colour choices, the layout, even the wording. Yet it all has to be tied to an idea — to convey what we do, as a company. After much thinking and internal discussions, we decided on describing that our team possesses three key qualities, which can also be seen as three main steps in the process of software product development: Communication, Experience, Quality. These three allow us to take an idea or a problem that our customer has, analyse it and propose a solution (using communication), implement the data structures and code (using experience), and ensure the result works as expected (which is helped by both quality of implementation, and the quality assurance team).

The main page of the site had to represent this thought, taking Idea, through Communication, with Experience, to Quality. Each of these steps is written in plain text, with the icons serving as graphical clues, and enhancing the visual appeal of the site. This meant developing four icons, which were taken from rough sketch to finished stage in a rather short time (remember that this was done in parallel to our usual work on client projects).

These are the rough sketches of all four icons, at reduced resolution. You can see the final version on our front page, and below we'll list the stages an icon goes through before completion.

Sketch

The sketches were drawn by a pencil on a regular A4 paper, using a ruler were possible. The width and height marks that you can see on the above image were used to ensure the same vertical and horizontal scale of all icons.

The sketch lines would not be visible in the final result, so scanning the drawing was a fast and simple proces.

Flat colours

In an raster image editing software (in our case Adobe Photoshop 7), filling a circular selection (marquee), and drawing with regular hard brush, the shapes are filled with flat colours — the Earth, and the people. The connecting lines are done by applying "stroke" function to an elliptical selection (rotated in each case as needed).

You can see that the new shapes don't match the sketch exactly, there is a certain new simplified style of "people" shapes that gives the icon more character. It is good to be flexible like that whenever possible.

Initial textures

Giving people shapes and the connecting lines some character. Of course the biggest change you notice is the presence of landmass on our planet now. The "stylized precision" was achieved by finding a suitable photograph of the Earth on Google Image Search, pasting it in a new layer above the flat colours, and drawing simplified mainland on a yet new layer on top. The Earth photo was then hidden.

Shading, pass 1

Adding shading to the shapes. People get their shadow drawn, and the "oceans" (which is the flat Earth colour below the landmass layer in Photoshop) have an orange highlight and a blue shadow added. Note how the person on the left is casting a shadow on the planet — details like this allow to tie the parts of the drawing together.

This is all done by a regular hard brush. A useful trick is to lock transparency of the layers that are being painted over, otherwise more care would be required — taking more time.

Shading, pass 2

The landmass is also shaded now, slightly exaggerating the thickness of the edges, so the result looks like a much smaller globe. For highlight the same orange colour is chosen, yet for shadow it is a mix of the blue and original green — resulting in greenish blue.

Or blueish green.

Shadow, final

All of the icons, except for the "Idea" one (because it is its own source of light), cast a shadow on an imaginary horizontal plane. This helps "tie" the icon images into the page, giving it depth and room. As you can see on the image above in its original size (the actual icon is much smaller), the shadow is rough and may seem unrealistic — yet it matches the style of the shading on the icon itself, and in case of illustration consistency is more important than realism.

After this, a slight reflection was added to the "floor" plane, to add more "connection", and also to have some varied texture to the shape — you can see the final result on the front page.

Some sites greet us with stock photographs of smiling people, on other sites you will find lots of text, others yet may try to be minimal, forcing you to click through a splash image to read and see who these people are. With our site we would like to show the way our team thinks and works — we are concerned with the problem that needs to be solved, and we prefer simple solutions, since they are the most elegant ones.

I hope this entry was interesting and useful, please do not hesitate to leave us a note (below) if you have any further questions or suggestions.

• Add New

Comments (0)

Write comment

Your Contact Details:

Name:

Email: do not notifynotify Gravatar enabled

Website:

Comment:

Title:

UBBCode:         -color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge

Message:

Security

Please input the anti-spam code that you can read in the image.

Joomla components by Compojoom