Redroot Design Notes

Thinking Inside the Box: Plan Before You Design

The blank canvas is equal parts exhilarating and scary as hell for artists. Instead of freezing up or leaping off into the wrong direction, I now start my designs by answering important questions and then limiting the scope of the design. While the artistic itch to follow my gut may feel thwarted, I get the work done and meet my clients' needs faster.

Of course, I wasn't always so deliberate. I think a lot of artists are like I was when it comes to starting a new project: see the blank canvas, get a little twitchy, and then shoot from the hip until the chambers are empty. Then, when the smoke has cleared, wade through the results and try to edit it into something that works. And not until some hours into the editing process would I stop and begin to ask the important questions: What am I doing here? What are we trying to accomplish? How far from "there" are we?

This is designing in a vacuum, and it's like Tourette's for web designers. Whatever comes out, comes out. This process works well for some people and for some projects. Sometimes it worked for me. But more often, I ended up with a design or layout that I liked, but wasn't quite right for the client (or worse, for humans). Since I've begun working with clients, I've realized that I need to be a lot more structured in the beginning. Instead of savagely attacking the blank canvas, I need to start projects by first building a box, and then getting inside.

Building Your Box

Creating structure at the top of the project doesn't feel organic to my artistic sensibilities, but it sure helps. Structure doesn't come naturally for me. Rather, I like to get inspired by something I see, fire up Photoshop, and build a comp for a project that's on deck. But while I'm working this way, my mind is rolling on the design in front of me, and the specifics of the project and the needs of the client are floating in the clouds above. The design drives itself. I may end with something that I really love, but sometimes I will need to spend countless hours hammering away to fit it to the real needs of the project. And sometimes the design just won't work at all, and I need to file it away for another project. The bottom line is that this method, my impulse, is a crapshoot, and can result in wasted hours (re: money). These days, I don't have that kind of time to waste.

So up front, before even thinking about color palettes and layouts, I sit down with the important questions and build a box. The artists in us may cringe at this idea. But web designers, by definition, don't have the kind of creative freedom that other artists might have. We're business folk with a task at hand. I know, I know, but this can be a good thing! One of the benefits of building your box is that you get some direction when you need it most: at the start! The blank canvas isn't as daunting when you are limited to what you can do with it. We're restricting our freedom, but we're also reducing the overwhelming number of design choices we need to make.

The requirements of your project are your source for structure. These requirements must come from the client. Clients don't always know what they want, so you need to ask the right questions, and if the answers don't add up, you need to ask again (in a different way). This begins with either a meeting or a client worksheet, or preferably both.

Layout & Structure

Navigation & content architecture are the first wall of your box. Remember, people visit websites with a goal in mind! Architecture & interface will determine the success of their visit, so this is what you need to be thinking about while you lay out the website. What is the goal of this website? Are we pushing visitors towards a sign-up page? Checkout on an E-commerce site? The physical location of a store and a phone number? Whatever the goal, your navigation and user interface need to make it simple and easy for visitors to get there. A great resource for thinking about these topics is Steve Krug's Don't Make Me Think (you should own this book if you are building websites).

Once you have an idea of what content is important and how you want to group it, you've got the makings of your layout, and the beginnings of your box.

The Design (Images, Illustrations, & Background)

But what about the pretty pictures? Here's where to go when deciding on the look & feel of the website.


A fine place to root your ideas is in the logo. If part of your work is to design the logo yourself, my advice is to do the logo before you even start to think about the website design. One way is to use the same principles for the website's design as you find in the logo. Hard lines in the logo? Right angles on the content containers. Soft lines in the logo? Rounded corners on the content containers. Big blocky serifs in the logo? Blocky serifs for your headers. Conversely, instead of matching, you can use complements. Spherical logo? Right angles on your content containers may contrast nicely. Whichever you decide, keep the logo's design in mind. This will give you some direction, help you build your box, and also ensure that the website design doesn't clash with the brand.

Mood Cues

Does the client want "modern and professional"? Or "light and fun"? Use these mood cues to determine typography, color palettes, background images, icons and illustrations. All the fluffy artistic stuff we love to do, that makes the site look beautiful, is cued from these prompts, which should come from the client. Some web designers like to use Mood Boards to demo these options to their clients before actually sitting down to design, which can work really well.

Layout & Structure

Since we already have an idea of how the content flows, we can figure out how much room for fluff we have. I say fluff because self-depracating is how I roll, but really, fluff shouldn't be without value. Use icons and illustrations to draw the visitor's attention to important bits. Use fluff to separate content (horizontal rules with ornaments, for example). Use fluff to keep the visitor entertained while finding what they need. But be careful not to overdo it. So, so careful. Too much fluff and you distract and confuse. And then you aren't doing your job, which is to carry the visitor to the goal as quickly and painlessly as possible.

Get to Work

By now you've got all the essentials decided, your box is built, and you've climbed inside to build your website. This can make finishing the product so much easier. When you're shooting from the hip, you get stuck at certain junctures because you haven't considered some aspect. Wait, what font should I use for this header? Do I want gradients on this call-to-action button? No more of that. Everything is in your box with you, and now you just need to put it all together and tweak. Build your box and then build your website.

Topics include Design