Sketch website concepts

In the first part of our series on interactive design, Danny Franzreb and Holger Grünwald from German design studio Taobot show how you can use Photoshop to visualise ideas and concepts from your sketches.

In this new three-part series, we're going to take you through some of the key stages you need to consider when designing a visually appealing website.

Imagine you want to pitch an idea for a luxury car website, you don't have any material to visualise it yet, and time is not on your side. Roughly sketching your idea is very handy in this situation.

Sketching is a technique mainly used by designers in storyboarding for motion and print design, but it can also be a great help when creating interactive projects. We use it to visualise first concepts to our clients. Or, consider you want to talk about an idea. You might want to use sketches to keep the discussion focused purely on a certain concept or emotion rather than the final layout that's supposed to be handled much later in the process.

Sketching the layout and interaction of certain areas will help you communicate the brief more effectively at every stage, to everyone from photographers and film crews to programmers. We'll take a look at this in the next part of this series.

Here, we'll take you from the initial idea and how to sketch it on paper, to finalising your sketches in Photoshop.

Click here to download the support files (21.5MB)

Click here to download the tutorial for free