From ideas to pixels

How some sketches turned into designs...

The first step of any new web design project is analisys. The second one is design – this is often my favourite part of the project and this is where I can unleash creativity.

I usually spend some hours talking with my partner and brainstorming about the client, the brand, the website goals and target, trying to jot down a list of keywords and trying to understand the role of visual design for the specific project. Sometimes it needs to be very creative, since visual design set the tone and style for the site, sometimes it just needs to be minimal and clean. Every project has different needs and every client has different expectations, so every design has a different role.
As a general (and very generic) rule, I think visual design has to be appropriate for the brand of the client, for the site’s target and for the site’s tone.

Said that, before opening Photoshop, I usually tend to sketch some rough concepts on paper and discussing those ideas with my team, in order to get feedback and refine my ideas.
Sometimes this sketches are very basic and their purpose is just to be a guideline for the Photoshop work. Sometimes I end up with more refined sketches and drawings, that serve as a starting point for illustrations or layouts.

In this post I gathered some scans of some sketches from the last 12 months. I’m posting this mostly to share with you part of my workflow and to show a part of my work that is often completely invisible, even if nearly as important as Photoshop skills.

Each of the sketches comes with the final design, so you can see how the very first idea turned into a real website.

Pestaola.gr
The very first sketch has been followed very closely to make the footer illustration for Pestaola.gr.
It has been scanned and then traced in Photoshop, adding colors, shadows and lights.
It served as a basis also for the alternate, winter-ish version.

Omis.me
Om Malik’s new personal blog is an example of how a very rough sketch turned into an actual design. Even if very basic, the layout of the sketch has been kept: ratios, position of elements and overall shapes are very similar in the final design.

ColorFever
This is more like the Pestaola project, where the sketch has been followed closely. This time, when working in Photoshop, I changed the size and position of many elements, to adapt the very first concept to a 1024-optimized web layout. Some of the objects in my drawing also were discarded by the client, so I ended up with a simplified composition.

Rikorda.it
Rikorda is a different example: in this particular care, the sketch wasn’t done for a visual design design purpose, but to evaluate different a user interfaces.
The products tree was a key feature of the new site and we spent quite a lot of time discussing how it could be integrated into the layout.
We sketched different ideas and the drop-down panel below made it to the final design.