May 12, 2010 Off

Before You Start a New Website

By in Design, Web Design

As web designers, we build new websites all the time from complete scratch, whether it is for a client or our own project. We know that the best websites take time to create, careful planning, and adequate detail. Yet, as creative people, we don’t like to do a lot of planning and often times jump right into the design process.

In this post, we’ll go over the importance of the planning stage, and some essential steps that need to be taken to make the planning phase more organized, and most certainly less painful. By taking extra steps like these, websites will likely have better conversion rates, better aesthetic outcomes, and you will have happier clients.

1. Sitemap & Flowchart

I always start off every new web project with a sitemap and flowchart. My sitemaps are rather informal, and are mostly useful for creating a more formal and better flowchart.

The sitemap should list out all the pages that will be needed, and a general categorization of these pages. A flowchart, however, will include all these pages as well, but in a visual way that connects the pages and plans out the user’s flow throughout the intended website.

By spending just a bit of extra time organizing the content in this way, one can save a lot of time and effort throughout the web design process, and yield better results.

Click for full size.

Try out a program like Microsoft Visio for easy and fast flowcharts.

2. A Wireframe

According to your flowchart, what content is going to need to go where? Where should it be placed on the homepage, versus an internal page? Try out a few different wireframe ideas before jumping into design mode, and find the best place for everything.

So far, a flowchart is meant to organize the content we’ll need, and a wireframe is meant to organize how we’re going to display that content so that users can follow a flow similar to what you pictured via the flowchart. For example, in our sitemap image above (click to view larger), we can see which pages need to be featured on the front page, and even which pages should be given the most attention. We can also see what the wireframes of the internal pages should look like, depending on the content we have laid out for each page.

3. Color Palette

Don’t just have an idea of a color scheme in your head; actively pick one out before deciding what colors are going to be where on the page. After picking a color scheme from somewhere like, stick to it, and try to use all the colors at least once.

If you’re going for a simple look, go for a palette with few colors but in different variations. If you’re bold enough to try something more daring, figure out a way to implement all the colors without clashing or making the webpage too busy. On top of helping to create a fitting scheme, color palettes can also help designers improve on how to see and plan colors.

Now, Just Add the Finishing Touches

The top three items are the three basics of the web design process, and by planning them out ahead of time, the final design phase can be organized and simpler. Just add effects, imagery, type, place colors, and done! Of course, it’s not as simple as just filling in the details willy-nilly. It still takes time, talent, and effort to get the final design completed. However, with just a bit of planning ahead of time, any designer can know where they’re going with a design, and any clients can even have better interaction throughout the process.

About: Kayla Knight:
Hello, my name is Kayla Knight, and I am a web designer and developer based in Iowa, Usa. I focus on user-centric, beautiful, simple, and functional web design. You can check out my portfolio here:

Tags: , , , , , ,

Comments are closed.