Google “web design tutorials” and you’ll mostly find Photoshop tricks and tips, CSS 101 articles, and how to make graphics straight out of the ‘90s. What’s often overlooked (yet equally important), however, is what happens before all of that–the brainstorming.

What’s brainstorming and why do I need to do it?

Brainstorming essentially lets you plan out your design before you actually open up Photoshop. Think of it as the outline of your design. Chances are you wouldn’t write a speech or an essay without first doing an outline, so why should you be designing without one?

It’s important to remember that designing is not just about making something look cool and landing yourself on CSS galleries. Those things are great, but design, at it’s core, is about communication. It’s about portraying a message, feeling, and purpose to a specific audience. How are you going to do that unless you know what all those things are? Brainstorming lets you forget about grids and colors for a moment and allows you to focus on the what’s and why’s of design.

Well that’s great, but how exactly do I “brainstorm” a design?

How you go about doing your brainstorming is largely up to you. However, here are a few techniques I’d recommend experimenting with if you do not currently have your own (or even if you do):

Audience analysis. Write a sentence, a paragraph, or a page describing your average visitor. ASL (Age/Sex/Location)? Hobbies? Education? Occupation? Do they have pets? Favorite food and/or drink? And of course, why are they coming to your site?

Outlining. Take out your Moleskine notebook, your favorite text editor, or a dirty napkin and write out all the information that needs to be conveyed on the page. Are there certain links that need to be there? Specific required text or images? Are you going to need to show recent news? Do visitors need to log in somewhere? Will there be ads? List it all out, then organize it. Try organizing by category, importance, and any other significant quality.

Sketching. Why waste all that time in Photoshop drawing and control/command-z-ing just to figure out a layout? Get out a piece of graph paper and quickly draw some out, experimenting with different orders and ways of presenting the information. Which seems the most clear and logical?
Go forth and use your brain.

The point is not so much which technique you use, but that you’re actively thinking about who your audience is, why the site is being built, and what it’s trying to convey.