Web design, as you know, is a highly creative process. And like many creative processes, it’s best begun with sketching – think old school pencil and paper.
Sketching is great for getting your creativity flowing, organizing your thoughts, and quickly capturing all your ideas. The sketches you end up with will become an outline of sorts for your web design project, making your screen-front design time much more efficient.
In addition, having sketching as the foundation of your web design flow is an excellent way to sharpen your skills, keep your idea machine cranking, and begin to understand your style. It’s also a great way to practice and build confidence if you’re relatively new to designing; because sketches are impermanent and visible only to you, the pressure to “do well” is relieved and your real skill and talent can come to the surface more easily.
1. Know the must-haves and where they belong
What are the must-have elements the design needs to feature? This can be anything from a logo or keyword to a specific set of pages. If this is a client-driven project, much of this information would be supplied. If this is a project that’s starting from the ground up, there might not be an established site structure or set number of pages. Whatever you know about the overall design requirements, list it out by page so you won’t forget.
2. Everything is allowed (and required)
When you’re sketching, the purpose is to get all your ideas out of your head and onto paper. The ugly ideas, the playful ideas, even ideas you have no real idea how to execute yet. There are no limits, so let your creativity loose.
One word on ugly or “bad” ideas: it’s surprisingly important to capture the ugly, trite, or overused ideas. Giving them their five seconds of attention will scratch that itch and get them out of the way so your good ideas can come through. Sketch them out and then throw that paper away.
3. Tinker with everything
There are no sacred cows in the sketching process. Play with every element in your sketch: typography, layout, menus, color combinations, box placements, textures, and anything else that comes out. It may feel a bit chaotic, but that’s normal. This is an exercise in capturing every idea. Precision is completely unimportant.
If what you’re working with stinks, scrap it and start a new sketch. Incorporate elements you liked and make changes to what doesn’t work. Take each idea and tinker with it. Keep pushing and adjusting and putting down your “what if?” ideas until you come upon something truly great.
4. Make notes as you go
Leaving yourself annotations on any pages or elements you particularly like will be incredibly helpful as your ideas begin to solidify. Having these notes-to-self recorded will relieve your creative mind from the work of remembering everything it’s already come up with. You’ll significantly reduce the likelihood of forgetting features you’re excited to add, and your idea generator won’t be bogged down with details.
5. Experiment with your materials
As you get more adept at sketching, experiment with the physical materials you’re using. Do you have a go-to pencil that writes like a dream and erases well? Are you more comfortable using a pen?
Think about the paper you’re using, too. Do you like notebook paper or plain copy paper best? Do you prefer graph paper or a dot grid? Is white best, or would a creativity-inducing color like light pink or blue be up your alley? Some designers like flat, smooth paper and others like paper with a bit of texture. Does bleed-through bother you, or do you need paper with a bit more substance?
Is it easier for you to work with a spiral-bound notebook, where all your ideas are self-contained? Or do you prefer working with loose paper or pads so you can put your sketches on the wall or in a folder without fussing with messy edges or perforated tearing guides?
Ultimately you want your materials to facilitate your sketching, rather than distract you from it with minor annoyances.
What to do when you’re done sketching
With sketching as the basis for your design workflow, you capture your ideas and prepare the basic concepts of the design. Once you’re satisfied with the sketches, move to the next stage in your workflow. For some this means wireframes, and for others it’s straight to coding. Whatever your next step is, having this solid visual outline will make your work more efficient and more enjoyable. Have fun!