Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Sketching: How a Simple Pen and Paper Can Transform Your Web Designs

by
This post is part of a series called Let's Talk About Creativity.
Don't Squelch Your Creativity With the Constraints of Possibility
Readers' Poll: How do You Combat Designer's Block?

We spend good part of our time in front of a monitor, most likely we have more than one computer, not mentioning iphones, graphic tablets and all the other ultra modern devilries that invade our desks. We are all part of the generation that need a mouse to leaf through an album with the family photos (goodbye to dear family albums with the pages left to yellow) and Facebook to send birthday wishes to a friend. 20 examples of great "sketch" inspired sites included!

Yet, in the middle of this digital era, the best allies of a web designer are common tools that can be bought with the change under your couch cushions. I’m talking about making pen, pencil and paper a part of the creative process that other "non-digital" designers have been using for ages: sketching.

With this article we’ll treat an argument that certainly many of you will have at heart: we’ll see in fact how sketching can help us arrange the ideas, design an effective layout and – why not- give a fresh and original touch to our design.


Sketching As Part of the Planning Process

Imagine this scenario: We have just finished an exhausting briefing with our client and now it’s the moment to rearrange the ideas. We know the preferences and needs of our client; On this basis we should be able to set the layout we have to design. The problem is the quantity of information we have to consider! We defined that in the homepage we have to put a slider and a visible call-to-action which invites to a contact, the pages of the site will be seven and we must also include the latest news in the homepage and so on.

At this point, I assure you, opening Photoshop with the pretension of creating an effective layout is useless; without a plan for what you have to draw in the detail, you’ll be blocked and forced to essentially design without enough foresight to make intelligent decisions. This often means more work later on, fixing what could have been done right the first time with just a bit of work sketching.

Sketching offers something unique to web designers... it helps us organize large amounts of information into manageable pieces that we can design around.

Instead, if you have the fortune of being able to metabolize concepts and ideas in a design, most likely you’ll forget something important, with the result of having to put your hands on the layout again for the second time. And, you probably also know that there are layouts that even with a small change get completely altered and lose their communicative and aesthetic effectiveness… a really frustrating result indeed.

A few pieces of advice on how to proceed without losing your head? Get pen and paper…

  1. Mark the key words that must distinguish the company and that you want in front of your eyes during the project phase, so that not to lose the focus on want you have to represent graphically. Avoid complicated phrases and concepts, be organic: the more immediate you are, the more your mind can process the information quickly and easily.
  2. Always in a schematic way, possibly as a list, write down the information useful for the design phase. What you have to do is record on paper only the information and concepts that you’ll need once you open the graphic program.
  3. Ration out the information in stages, so that every phrase is as straightforward as possible. If you still have to design the layout of the homepage, don’t take notes on the contents to be included in the contacts page: avoid confusion and distraction. Note the information on different sheets of your notebook, so that you can be concentrated on one single step at a time.

This first phase of sketching regards the elaboration of the information in a schematic and simple way. You’re probably thinking that all this rigor and discipline has nothing to do with creativity and imagination and you want a change of scenery? Okay, let’s move up to the next step.


Sketching As Part of the Creative Process

We said that the sketching is a creative process, but want does this mean in practice?

We can consider the sketching as a “middle land” between the information in our possess and the layout we’ll end up planning. In this territory, hostile and magic, we find colors, fonts, boxes, ideas, inspiration, textures, images, sensations, doubts…and much more. Useless saying that in the middle of all this it’s easy to be confused and to find the right idea, the idea that works and that makes us proud to be a designer.

I think that there’s nothing more irritating than finding oneself in front of a blank sheet, waiting for inspiration that is supposed to come from who knows where, and winding up with creating ugly layouts (then if you’re really lucky like me, you’ll be engaged with a colleague that takes the most of the situation to tell you that your work sucks without bothering to sweeten the pill so that it doesn’t hurt your sensibility as a creative).

One of my own sketchbooks... we'll revisit this later.

Personally I passed some rough times with a few clients: inspiration didn’t want to come and my graphic proposals made me be ashamed of myself. I passed hours looking at gallery sites, feeling even more depressed because it seemed like everybody were able to create beautiful layouts, the only person who wasn’t able to put two rectangles together in a nice way was me.
In my case the ease of the pressure was made easy with the help of a pencil.

Give the kicking start to one’s creative process on paper frees in fact your imagination, allowing you to work in a more spontaneous and stimulating way.

Especially if the project you’re working on is huge and rich of technical details, considering all this, the first phase can certainly be castrating for the creative flux, not to mention the debilitating fear “to fail” that affects many designers: caught in the craving to do fast and well, we often remain paralyzed in front of the monitor unable to rearrange the ideas and channel them in the right direction.

Therefore, before starting to work on whatever kind of graphic program, get pen and paper and… sketch! Scribble, jot down a couple of ideas, start tracing a kind of abstract design to get familiarity and after free your intuition. You’ll analyze afterwards the ideas, now just let yourself go and avoid logic and rationality, they won’t help you in this phase.

Outline the layout, put down a couple of notes , erase it all, start again: during this process your mind works fast and frenetically, so take note of everything before this intuitive phase dims down! You’ll discover that giving complete freedom to your ideas is pleasant and relaxing, besides useful.

Make Mistakes... on Purpose

The first idea will rarely be the right one, be prepared to accept it. Sketching helps you to unblock yourself and seize different graphic opportunities that could be right for you immediately and lightly, but this doesn’t mean that you won’t commit mistakes in this phase. The positive thing is that even if you make mistakes in this phase you can always tear the sheet, sharpen the pencil and start all over again on a new sheet. Throwing away a layout created with Photoshop, just because you realized that it’s not the best solution for your case is without doubts demotivating.

Sketch, Don't Wireframe

At such matter, I advice you not to confuse sketching with the creation of WireFrame: we’re talking about two different things, even if I see there’s some confusion about the argument. A few days ago a web designer told me, quoting his exact words “ah, you use pen and paper? I do everything online” , mentioning a site that permits to create mockups with a mathematical precision, with a complete control on colors and typography.

Well, this is not sketching, this is completely another thing. Clicking with the mouse on some buttons to make appear some rectangles doesn’t permit you to give a shape to your ideas and free your creative flux, try to believe. With this statement I don’t doubt the utility of a good wireframe, I just want to underline the differences between these two approaches.

Embrace Chaos

Put away your craving for precision, ruler and compass! In this phase there’s no room for order and rigor, so don’t limit the creative flux, blocking yourself on margins and white spaces, you can think about them later. In the same way, don’t worry if you’re not particularly artistically gifted and your manual abilities hardly allow you to hold a pencil: sketching is used for reordering the ideas not for forming gifted artists.

At this regard we must add that even if sketching was born as a free mean of expression of imagination and creativity apart your graphic abilities, this doesn’t mean that the sketch doesn’t also have, in a certain way, an artistic value. Let’s see together what I’m talking about.


Sketching As Part of the Design Process

The tendency of many web designers to sketch has given the kicking start to a real graphic style that recalls somehow the aesthetic aspects of the sketching: we have brushes that mime its spontaneity and lightness, not to mention hundreds of fonts in hand-written style easily found in the web. Thanks to such resources creating today a layout in sketch style is quite easy, but besides this designs that use this graphic style usually have a touch of originality that make them appealing and out of the common run.

The sketch style, just because it’s associated to an activity common to many creatives, is often used in sites of freelancers or of communication/design agencies that want to transmit this concept graphically.
Anyway, even the combination of some sketch elements to a more traditional graphic can give a fresh perspective to otherwise ordinary designs.

Let’s see how some sites have used this style in an effective and original way and how this has influenced the aesthetic and the effectiveness of their layouts.

Kunal Chhajer

http://www.kunalchhajer.com/

The site of the web designer Kunal Chhajer reflects exactly the concept of the sketch style. The graphic is light and pleasant, it’s enriched in an original way by some designs that make the layout unique. The style is also recalled in the use of a hand-written font in the navigation menu. All these details give to the design the creativity that a designer wants to express in his personal site.


Creative With a K

http://www.creativewithak.com/

In the Creative with a K site there’s a massive use of sketches and doodles, just to clearly show the “creative nature” of the site. In this case even the peculiarity of the layout, so atypical, makes the site special and unusual, even if it’s difficult to consult.


Lega-Lega

http://www.lega-lega.com/

The site Lega-Lega is an online store of shirts with prints a bit out of the ordinary and it’s aimed definitively at a young market. The addition of some sketch details give a creative and perky cut to the site.


Beavory

http://beavory.com/

Beavory is the site/blog of Karen Mack, Israeli illustrator. The style of her site is deliberately based on a style that recalls her creative nature in a pronounced and original manner. Every detail, from the structure of the layout based on irregular lines – as if they were drawn with a felt pen- to the icons of the social network traces completely an effective sketch style.


Bowtie

http://bowtieperiod.com/

Bowtie is a digital studio that decided to represent itself really in a creative way on the web. The animations of the site, together with cute, uncommon drawings, make the layout attractive and strongly extravagant. They call themselves “creative” and, to prove it, they use elements in sketch style.


MakoMako

http://www.makomako.cz/home/

The layout of the band MakoMako is completely created in sketch style, so that the same structure of the page is based on a sheet of paper with irregular lines, and in the homepage as part of the design, we find besides the usual graphic details based on sketches and hand-written fonts, a pencil. A curious and a very unusual look for a band.


Stan The Snowman


http://stanthesnowman.com/

Now that’s almost summer a lot of its charm vanishes, but the graphic effectiveness of the site Stan the snowman however is out of the question. In this case the addition of stylized images and of a calligraphic font gives a spontaneous style to the layout, playful and informal. And it traces the concept of activity, based on writing greeting cards.


Greenaway Pro


http://www.greenawaypro.co.uk/

The festival Greenaway Pro 2011 site combines in a particular and attractive way the sketch style and the grunge style, giving to its layout a really original imprint. Also in this case the choice of this particular graphic style tends to express an informal, spontaneous and eccentric look . Perfect for a festival that deals with music and surfing, right?


Julian Laval


http://www.julianlaval.com/

Julian is another freelance web designer that wanting to highlight his graphic skills, exploited the communicative power of the sketch in a really creative way. Of course, it’s not only this that makes his site special, but even the curious and deliberately uncommon nature of his drawings. Like many other sites in this style, colors are limited to a gray scale, to make the illustrations more realistic.


Little Creatures


https://www.littlecreatures.com.au/

The site Little Creatures is completely designed in sketch style and thanks to the peculiarity of its sketches, so little refinished, the page is so attractive.


Le Carnet Ordinaire


http://carnetordinaire.com/

Carnet Ordinaire is a site that is like a diary, with travel notes, annotations and personal considerations. Considering the eccentric and intimate nature of the site, the sketch style is the most appropriate one: the layout is based on the image of an opened moleskine, enhanced by sketches and stylized drawings. Even the background is made more original with some cartoons inserted in opacity and by the presence of a pencil , left casually near the moleskine.


Wing Cheng


http://www.wingcheng.com/

The Wing Cheng portfolio is a perfect example of the fresh perspective that the sketch style can give to a layout. The page structure is based on an ajar moleskine, from which the pages fall down. The effect is made more dramatic thanks to shadows that frame the design and the use of calligraphic fonts for every content of the layout, from the titles of the projects to their description. But the real peculiarity of this site regards the exposure of the projects, also sketched in pencil in a really creative way.


Kuztown University


http://www.kutztown.edu/acad/commdes/faculty/

The Kutztown university of communications and design couldn’t find a better way to address effectively to creatives or aspiring ones. The layout is certainly unusual for an academic reality: the background in water color style, the page based on a page of a book, the illustrations in water colors, the particular fonts of the navigation menu… all original and certainly expressive details.


Dan Whittaker


http://www.dannwhittakercreative.com/

Dann Whittaker in his site shows a graphic style common to many web designers. A casual and spontaneous look, based on a page book layout and on a consistent use of details in sketch style. In the complex, the layout is very effective and pleasant aesthetically.


Chernobyl Heart


http://www.chernobylheart.org.uk/

In the case of the Chernobyl Heart site the sketch style is used to highlight graphically the concept of childhood: here we’re talking about children and we see it through some small stylized sketches that copy their way of drawing. Effective and pleasant.


Demain j’arrete


http://demainjarrete.stpo.fr

The sketch style is perfect to present on the web comics and illustrations, so that the layout represents visually and creatively the nature of the site. In the Demain J’arrete case, the whole site has a “charcoal” graphic style, starting from the gradient of the background to the irregular lines that contain the layout and the navigation menu.


Nature Shop


http://www.natureshop.co.nz/

Adding a couple of sketch details in apparently casual way, can give that special creative touch to a minimal and essential site. The result, visible for example in the site Nature Shop, is extremely pleasant.


Ready to Market


http://www.readytomarket.net/

The layout of the Ready to Market is an example on how mixing a modern style with some stylized and comic details can give a new and stimulating result.


Cou Cou Shop


http://www.coucoushop.ch/

The Cou Cou Shop is very nice and pleasant to see. One of the most particular elements of the layout is without doubts the footer, that shows a stylized landscape of Switzerland. Even the sketch of the bag from different angles is a very original detail.


Upside Down-Town


http://upsidedowntown.me/

Colorful, unusual and whimsical: the site of the learning center Upside-Down Town invests a lot on the originality of the sketch style. Every element of the layout, especially in the heading, points to the visual effectiveness of drawings, sketches and colors that highlight graphically and in a pleasant way children’s world.


Conclusion

We saw how the sketching process can help us to process ideas in a creative way and at the same time, how some sketches can give a different and original perspective to our layouts. Make sketching a habit when you start to work on a new design project – and not only- can come extremely handy also in other fields, like in the copywriting – and in time you’ll develop a flexibility of mind that will turn useful in your work. Therefore to conclude: turn off the computer and get paper and pen!

I finish sharing with you two personal sketches: a sketch of my current portfolio and the first ideas I put down for this article, during a really boring train ride.

Now, it’s your turn, I want to see your sketches!

Advertisement