Today, we’ll explore how sketching can help you arrange ideas, design an effective layout, and give a fresh and original touch to your web designs. Let’s get started!
It’s no secret that we all spend a good part of our time in front of a screen of some sort. You most likely have a computer and a smartphone. You might have a tablet, too. And that’s to speak nothing of the rest of the ultra-modern devilries that invade our desks.
And it makes sense why. We are all part of the generation that can simply swipe through an album of family photos (goodbye to dear family albums with the pages left to turn yellow). And maybe you pop back onto Insta to send birthday wishes to a friend rather than sending a card.
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.
Jump to content in this section:
Sketching As Part of the Planning Process
Imagine this scenario: You’ve just finished an exhausting briefing with your client, and now it’s time to organize your thoughts. You understand the client’s preferences and needs, and based on that information, you need to determine the layout you’ll design. The challenge is the sheer volume of information you have to take into account! You’ve decided that the homepage should include a slider and a visible call-to-action inviting visitors to make contact, the site will have seven pages, and the latest news should also be featured on the homepage, among other things.
At this point, rest assured, opening Figma with the intention of creating an effective layout without a detailed plan is futile. You’ll find yourself stuck, forced to design without the foresight needed to make informed decisions. This often leads to more work later on, as you have to fix what could have been done correctly the first time with just a little bit of planning and sketching.
Sketching offers something unique to web designers... it helps you organize large amounts of information into manageable pieces that you can then 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. Basically, it’s beyond frustrating.
A few pieces of advice on how to proceed without losing your head? Grab that pen and paper we talked about:
- Identify the key words that best represent the company. Keep them in mind throughout the project phase to maintain focus on what you need to depict graphically. Avoid complex phrases and ideas; be straightforward, as this will help your mind process the information quickly and easily.
- In a concise manner, preferably as a list, jot down the relevant information for the design phase. Your goal is to document only the information and concepts you’ll need once you open your graphic program.
- Divide the information into manageable sections, ensuring each statement is as clear as possible. If you’re still working on the homepage layout, don’t take notes on the content for the contacts page; this helps avoid confusion and distractions. Record the information on separate pages in your notebook, allowing you to concentrate on one step at a time.
This initial sketching phase involves organizing information in a clear and simple manner. You might think that all this structure and discipline stifles creativity and imagination, and you’re craving a change of pace? Alright, let’s move on 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?
Think of sketching as a bridge between the information you have and the layout you’ll ultimately create. In this enchanting yet challenging territory, you’ll encounter colors, fonts, boxes, ideas, inspiration, textures, images, sensations, doubts, and much more. Needless to say, amidst all this, it’s easy to get lost and struggle to find the perfect idea that not only works but also makes you proud to be a designer.
There’s arguably nothing more frustrating than staring at a blank sheet, waiting for inspiration to strike from an unknown source, only to end up with unappealing layouts. And if you’re particularly unlucky, like me, you might have a colleague who takes advantage of the situation to criticize your work without sugarcoating it, disregarding your sensitivities as a creative individual.
I’ve personally experienced some difficult times with clients when inspiration just wouldn’t come, and my design proposals left me feeling embarrassed. I spent hours browsing gallery sites, feeling increasingly disheartened as it seemed everyone else could create stunning layouts, while I struggled to put together two rectangles in an appealing way. For me, the pressure was alleviated with the help of a pencil.
Starting your creative process on paper can actually free your imagination, allowing you to work in a more spontaneous and engaging way.
Particularly when working on a large project with numerous technical details, the initial phase can be stifling for the creative flow. Add to that the crippling fear of failure that many designers face—caught between the desire to work quickly and effectively, we often find ourselves paralyzed in front of the monitor, unable to organize our thoughts and direct them effectively.
So, before diving into any graphic program, grab a pen and paper and start sketching! Doodle, jot down a few ideas, create an abstract design to familiarize yourself, and then let your intuition take over. You’ll analyze the ideas later; for now, just let go and avoid logic and rationality, as they won’t help you in this phase.
Draft the layout, make some notes, erase it all, and start again. During this process, your mind works quickly and intensely, so be sure to document everything before the intuitive phase fades away. You’ll find that giving complete freedom to your ideas is not only enjoyable and relaxing but also beneficial.
Make Mistakes... on Purpose
Understand that your first idea will rarely be the perfect one, and be prepared to accept that. Sketching allows you to break free and explore various graphic possibilities quickly and effortlessly, but that doesn’t mean you won’t make mistakes during this phase. The positive aspect is that if you do make mistakes, you can simply tear up the sheet, sharpen your pencil, and start anew. Discarding a layout created in Figma after realizing it’s not the best solution can be quite disheartening.
Sketch, Don’t Wireframe
On this topic, it’s important not to confuse sketching with wireframing, as they are two distinct processes, though some confusion often exists. A web designer once said, "Ah, you use pen and paper? I do everything online," referencing a site that allows for the creation of mockups with exact precision and control over colors and typography.
This, however, is not sketching—it’s an entirely different approach. Clicking buttons to generate rectangles doesn’t truly allow you to shape your ideas and unleash your creative flow. That being said, a good wireframe can be useful, but it’s crucial to recognize the differences between the two approaches.
Embrace Chaos
Let go of your desire for precision and orderly measurements! In this phase, there’s no room for strict rules, so don’t restrict your creative flow by focusing on margins and white spaces; you can address those later. Similarly, don’t worry if you’re not particularly artistically inclined or if your manual skills barely enable you to hold a pencil. Sketching is for organizing ideas, not for producing masterful artists.
That being said, even though sketching is a means of freely expressing imagination and creativity regardless of your artistic abilities, it can still hold artistic value in its own right. Let’s explore what that means.
Sketching As Part of the Design Process
The sketching tendency among web designers has sparked the development of a unique graphic style that mimics the aesthetic aspects of sketching. There are brushes that imitate its spontaneity and lightness, as well as hundreds of hand-written style fonts readily available on the web. With these resources, creating a sketch-style layout is relatively simple. Additionally, designs that incorporate this graphic style often have a touch of originality that makes them stand out from the ordinary.
Since the sketch style is associated with an activity common to many creatives, it is frequently used on freelancer websites or communication/design agencies that want to convey this concept graphically. Moreover, combining sketch elements with a more traditional graphic style can provide a fresh perspective to otherwise conventional designs.
It’s worth exploring how some websites have effectively and originally employed this style, and how it has impacted the aesthetics and effectiveness of their layouts.
1. Little Creatures
The site Little Creatures has sketch style elements scattered about its design -- and thanks to the peculiarity of its sketches -- it reads as unique and interesting.
2. Chernobyl Heart
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.
3. Demain j’arrete
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.
4. Hendrick’s Gin
This alcohol purveyor offers a simple design with sketch-based elements all throughout the site. From buttons to the main logo, sketching figures prominently, albeit subtly.
5. Genesis
This plant-based restaurant leans heavily into the sketch style in its entire site design concept. There are illustrations all over the place, many of which are animated and bring a sense of liveliness for the whole site experience.
6. Sea Harvest
The newspaper illustration-style featured on the Sea Harvest website is captivating from first glance. Honestly, what they feature here are beyond simple sketches but it still deserved a spot on our list.
7. Highcourt
The Highcourt Leisure Club uses sketch designs all throughout its website as a part of a larger parallax experience. It reads as whimsical and classic and serves the "storytelling" motif well.
8. Rollie
The Rollie app uses sketches is a far subtler way than some of the other examples on this list so far. These simple sketches are featured as embellishments here and there throughout the site’s design.
9. TMS
The sketches on the TMS website are a cross between graphical and isometric. They feature characters in motion and serve to illustrate what the site offers.
10. BEEZ
Another great example of a website that uses sketch designs well is Beez. This site includes sketch elements all throughout and provide a whimsical vibe without taking away from its business-oriented focus.
11. MetaMusique
The sketches featured on MetaMusique are in a line art style and serve to imply motion without animation. The overall design here is eye-catching and interesting.
12. La Planque
Lastly, we have the La Planque Restaurant website, which includes sketches to convey the overall purpose of the business and what it offers -- and not without a bit of sense of humor.
Will You Add Sketching to Your Design Process?
We’ve seen how the sketching process can help us develop ideas creatively and how incorporating sketch elements can lend a unique and original perspective to our layouts. Making sketching a habit when starting a new design project—or even in other fields like copywriting—can, over time, cultivate mental flexibility that proves invaluable in your work. So, in conclusion: power down your computer and grab some paper and a pen!
