Cardeo Design Blog, Code, Design, WordPress, Minimal, CSS, Freebies, Twitter, Facebook, Social Media

The web design process: part 1

June 10th, 2009

Everyone always preaches that the “process” is so important, but they never actually go into details on what the process is! Don’t get me wrong, I think having a process is critical to designing an effective website. The goal of this post is to outline a step by step guide for designing a website – from initial concept to launch.

Overview

I’m going to start by listing all the parts of my design process. Let me state here that there are many design processes, this just happens to be the one that I’ve found works best for me.

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Defining the end goal

Before we even start thinking about designing a layout, I like to define the end goals of the website. A good way to get your brain working, is to create a list of goals you or your client would like to achieve. Narrow that list down to 3-5 main goals and you are ready to go. For example, if I was designing a blog, my goals might be:

Goal 1: Getting people to subscribe to my blog
This could be achieved by including a prominent “Subscribe” button in the header of my website.

Goal 2: Feature my best content
This could be achieved by including a sticky post to the top of my post feed. I could also create a sidebar widget calling out my most popular posts.

Goal 3: Getting my readers to sign up for my newsletter
A good way to do this would be to put the sign up form in a highly visible area; maybe the top of your sidebar.

Can you see how this is working? By setting clear goals before you start designing, you are letting your goals help determine how you will layout your website. This makes it much easier to figure out the hierarchy of your website, and improves the user experience for your readers.

Navigation planning and sitemap

We’re not quite ready to start designing yet. Before we get out the pencil and paper, we need to do a little information organization. One of the most important features of a well designed website, is a clear and consistent navigation. Here’s a few tips on designing a good nav:

» Place your navigation near the top of your page
» Make sure the navigation is easy to find
» Ensure the nav is the same on every page.
» Don’t move the location of the nav from page to page.

Once you’ve decided on your pages, you need to create a sitemap. A sitemap is like a roadmap for your website. Take a look at Apple’s sitemap for a great example. It also doesn’t hurt to sketch out your sitemap to make sure you navigation is organized properly. There’s many great tools out there that can help you, I’ve recently been using OmniGraffle to sitemap out my projects. Once you’re confident you have a solid navigation and sitemap structure, it’s time to move onto the design of your website.

Hand-drawn rough layouts

Alright, time to get the creative juices flowing and start designing. So far we have figured out a couple of main goals for our website, our main navigation, and our sitemap. With those items defined, we can start to put together a rough design. We’re going to want to feature our main goals in some way, add a prominent navigation at the top of the page, and ensure we include our sitemap.

At this point, we should also mention a sub-navigation. If you website is going to have sub-pages within each main navigation page, you’ll need to leave an area for the sub-page links to appear. A couple of good options would be:

» Add them to your blog sidebar
» Add them below your main navigation

Once you have that figured out, it’s time to start sketching out your idea. Keep it simple, boxes are fine, and make sure you try a few different layouts. Most times the best ideas don’t come out until you’ve warmed up your brain, and tried a few different things. I can’t stress enough to keep it simple at this point. Check out this initial rough verison for Twitter. All the important stuff is there, it might not look that sweet, but it doesn’t need to at this point.

Once you’ve hashed out a few ideas and have found one you like, it’s time to move into Photoshop. However, that’s for part 2 of this 4 part series on my web design process. Check back tomorrow to read part 2.

Tags: navigation, process, sitemap