Potential clients are often taken off guard when I tell them how much a new website design will cost. When they look through a portfolio they just see the finished design and not everything that went into creating it.  Below is my process, the steps I go through to create a visual design for a website.

Wireframes and contentiron man

Before opening Photoshop I need to know more about the content of the site. In a perfect world  the client would deliver all the content before designing starts, but that’s not always a realistic expectation. In this early stage I want to know dark knightwhat the primary objective of the site is and how the content will support it.

On a lot of projects I work with a copywriter or information architect since they can add a lot to  a project at this stage. For this example I’m using a wireframe I put together in Indesign since it was a small project.

The discovery stage is done to prevent surprises down the road. To get the client focused on the content instead of design I like to put wireframes

together. The wireframes are pretty dull and they keep people from worrying about color and photos and focused on refining the purpose of the site. Below is a jpg of the home page in the wireframe, you can download a PDF of that page here.

First round design

When the content has started to solidify I can turn my attention towards the design. Sometimes I sketch and sometimes I just work from the wireframe. transporter 3Below you can see the first round of the design.

The design at this stage is like a colored in version of the wireframe. The site sells  handmade crafts from China. The logo has a touch of red in it so I decided to use red a the dominant color. The dark red really helps the logo stand out. Even though this design is kind of dull it establishes a lot of the topography and colors that will be used later on.

Adding some personality

• australia
• fight club
• sin city
• the incredibles
• yes man
• spider man 2
• killshot
• enchanted
• toy story
• race to witch mountain
• inkheart

The embroideries that will be sold on the site are beautiful so that’s where I turned for inspiration. I took a small swatch of one of the products and desaturated all the color from it in Photoshop. This would become the pattern that is used on the header and the footer of the site. The pattern’s layer style is set to overlay and at about 27% opacity.

Since these crafts are hand made I wanted to get some more texture onto the site that was more organic. I used some water color textures in places to accomplish this. In this early version I had a map of China in the background, but I was never happy with it. It seemed to distracting. I tried some other things (here are a couple examples 1 2) before settling on the final.

Here is the final design again without the map of China and a focus on the product.

As you can see there is a lot more to design than just making a site look better. For me design is a process that starts with a solid understanding of what a site will do. The site wouldn’t work for another client because all the elements that went into the design came from the product and brand of the products.

Let me know what you think about my process. Do you do something similar? Should there be more emphasis on the research and wireframes upfront or should there be less? How would you approach this project?

Tags: web design