When hiring a website design studio, one of the first questions you should ask is what their design process is like. You want to get an idea of what their thought process is in determining the correct layout and graphic look of your site; also, how they determine the site hierarchy. There should be thought put into the conversion process, which is the steps necessary to convert a site visitor into a customer. Most website owners are concerned about the graphic look of their new site, but this is not the biggest concern. Additionally, many website designers come from a graphic design background not a marketing background and don’t think through the functionality of the site or how to make that conversion a reality.

designing-website-part-2-1Establishing a purpose for your site

The first step in the design process really should be to establish the overall purpose of the site and defining success. Of course, we all want to define success as a simple increase in our business profits, but how are you going to increase profits? For an ecommerce site, success is determined simply by a site visitor following through to the checkout process and actually handing over their credit card information. For this website, www.pacificiworks.com, I define success as a potential client completing the quote request form.

Ask yourself some common sense questions. What are my top one to three goals for creating a new website? What will it take to achieve these goals? For many site owners, the answer is “I just want people to call me.” That’s fine, stating that as the goal will help with the rest of the design process.

designing-website-part-2-2Now think about your customer

Once you establish your company goals, start to think about what your site’s viewer’s goals are going to be. Avoid being general; be very specific. Create hypothetical customer personas. For example, if I were building a website for a general contractor, I might create several personas, and try to think through what these individuals are looking for. Persona 1: a fairly well off couple just purchased an older home and wants to contract a reputable local company who can do a complete remodel. Persona 2: a real estate investor looking for a contractor to assist in building new homes for resale. Persona 3: a larger general contractor looking to sub-contract work. Persona 4: a government agency looking for proposals for a new public works project. Think about and then put in writing the type of information that needs to be displayed to convince these potential customers to interact further with your business.

As a new site owner, we all want to jump to the end and talk about graphic design and end functionality but you really don’t know what features you need until you complete these first steps.

Create a sitemap

Site Map

Now that you have defined purpose and customer, you can begin to create the sitemap which is basically a flow chart of all of the individual pages and features of the site. The site’s main navigation is represented by the first line of links and everything under that will be sub-links or sections within the main navigation. Now is the time you should start to think about the specific features you want. Looking back at the general contractor example, if you think Persona 2 would appreciate a portfolio of your company’s past work, then you now know you need a portfolio of completed projects. If you feel Persona 3 would appreciate a company that seems to have a high degree of competence in their industry, they may be impressed with a blog containing several dozen high quality articles discussing the industry. The purpose of the site creates the sitemap.

Develop the content of the site


The next step is the most difficult and is where most website design projects experience the longest delays. For each page of the sitemap, write out the actual content. If the content is text, write it out. If the content contains images, write descriptions of each image that needs to either be taken, transferred to the site designer, photographed, or created by a graphic designer. If the content is video, write out all the script for the video which you will hand over to the production company before they begin the storyboard process.

Each page should list a title, goal of its content, keywords for search engine optimization, headline, and actual page copy. I find it valuable to just start writing, then go back and begin to break down the content into more easily digestible parts. I’ll often cut out entire paragraphs and convert them over to an infographic or chart.

Each page should also list what will appear in the side bar, if applicable.

Lastly, if you are not comfortable writing, you should probably consider hiring a copywriter or at least a website design who can sub-contract these services out to professional copywriters.

Create wireframes


Wireframes break each page of content into a visual representation of the graphic look. This is where we bring everything together. In my previous website design article on design conventions, I discussed the importance of visual hierarchies in your site design. This is where you implement that step. If your content documents says a page contains text and three images, how will the page flow? Are the images best displayed as a slideshow? Are they contained within the text or above, or below? If our content documents state we should have a sidebar, is it on the left or right? The purpose of the sidebar will help to determine its position on the page.

In wireframing, you are determining the importance of various aspect of your content. More important content is placed higher on the page. If a page contains a video, and that is more important than the page’s text, you now know a lot about what the page’s layout is going to be.

Now the fun part

Only when all of the above steps are complete are you ready to actually begin the creation of the graphics of the site. Think about it, for most website creators, whether they are professional designers or just a business owner using an online tool, this is actually the first step. Quite frankly, this is why they fail. Web design is no longer about fancy graphics, it’s about functionality and user experience. If you have completed all of the steps up to this point, the graphic design of you site should be pretty straight forward. Just pick a color scheme, gather your images and other content, and put everything together based on the wireframes.

Obtain feedback and be ready to make changes

The final step is to launch your site, right? Well actually, good website design does not stop at launch. Aside from the general maintenance and upkeep of your site, you need to be ready to modify, add or subtract content based on the feedback of your customers. You need to track the performance of your site as well as get user feedback and be prepared to make possibly significant changes to better focus content based on actual results. For example, back to our general contractor example, let’s say you added a recent work feature, but you only included a single photo of each project. Site feedback begins telling you multiple photos would really go a long way to convincing customers to follow through with hiring you as it adds credibility. Let’s say this feedback came to you in the form of several phone calls or emails from potential customers asking if you have additional imagery. You need to be ready, long after the site is complete, to go back and take more photographs or have a site design flexible enough to allow more photographs to be placed within each relevant page.