I thought to write an article about how we handle a new customer and the process behind meeting their needs with a new website or revamping their existing one. To put it simply, we follow a short list that seems to work every time:

1. Get to know the target market: who are we trying to attract?
2. Understand the goal of the website: what do we want the site visitor to do when they arrive?
3. Design a mock-up: a first draft image of what the web site could look like.
4. Begin coding: sending links to the client when pages are ready for review.
5. Keep optimization in mind: always making sure it will be readable by search engines.
6. Complete, test, and launch: the site is live and ready to work.

Let’s look at these steps in some detail and see what’s going on.

1. Get to Know the Target Market

When thinking about marketing a business and how to get the company message across, start thinking like the site visitor and what would be attractive to them. A common mistake is to design the website that you want. The next most common mistake I try to remind my customers of is to avoid making the website that they want. I know that sounds strange, but neither you nor your customer will be buying the product or using the service. As the web designer you should be designing the website that your visitor wants. With research and creativity, a good website will speak directly to its market and leave out any personal aesthetics. An obvious place to see this in action is to take a look at your successful competitors and make some notes on how their websites accomplish this.

2. Understand the Goal of the Website

Once we know who the website is made to attract, we should look at what we expect them to do when they get there. Most of the time the goal of a website is to get the visitor to pick up the phone and dial the number. Other times it might be to get them to take out their credit card and checkout. This request for the visitor to “do something” when they’re at your website is referred to as a “call to action” and it should be loud and clear on every page of the site. This is another simple idea that is effective and often overlooked. If a website is a brochure-style site that gives information about the company and its services, the visitor’s call to action could be to call for an appointment. It’s good practice to tell the visitor what you want them to do and encourage them at the end of every page. For example, the last paragraph of a web page about the customer’s services could read, “to find out if our service is right for you, please call us today at 1-800-555-5555.” and possibly include a link to your contact page. This may seem obvious but it’s the sort of thing that is often left out of service related websites.

3. Design a Mock-Up

Customer Design 1 – Enlarge Image

Customer Design 2 – Enlarge Image

Taking the above into consideration, we’re ready to put together an idea of what the website could look like. This includes how the visitor is going to navigate the website, what colors and photos will be used, and of course typography and layout. To illustrate this, I’ll be using an actual customer whose site was launched this week. The mock-ups to the right were created for an interior plant service in Salt Lake City, UT called Intermountain Plant Works. They started a new marketing campaign and brought me their new logo to work from. The color scheme came from the vibrant colors used in their new logo, and this gave way to lost of white space and a clean layout. We proposed two designs for the customer to soak in and they gave us their feedback in return. You can click on the image to enlarge it.

The idea behind the mock-up is to use Photoshop (or any image editing program) to start the trial and error process of working with the customer, and to see how close we can get to the FINAL design before writing a single line of HTML or CSS code. It’s a lot easier to make changes to a Photoshop document than to write and manipulate code before we know if the customer is 100% happy with the design. This is the time for design changes to the overall site. The mock-up is either uploaded to our server as a jpeg for the customer to view in their browser, or else emailed to them for review. Changes and updates to the mock-up are communicated through phone calls and emails until the customer is happy with the design and it’s ready to be made into a website. This is a process we welcome. It’s important to note that as designers we need to expect this process and assist the customer in bringing their ideas right into the concept. Once the customer is ready, the design is considered final and we’ll begin the process of converting our mock-up into a website.

4. Begin Coding

This is the bulk of the project for the web people. Using standards compliant HTML and CSS styles to recreate the mock-up, the website is built to resemble the mock-up in every possible way while using as much readable text as possible (readable by search engines and humans alike – explained more in the next section). This is where the interaction between the visitor and the website comes to life. In this case, the customer went with design number two. The completed Intermountain Plant Works website can be seen here using CSS, background images, and HTML code. Writing clean code is going beyond the scope if this article, but I invite you to check out the source of this site for an idea of what we like to do.

5. Keep Optimization In Mind

To be clear, we’re not talking about being listed on the first page of Google. That’s called Search Engine Marketing, and it’s a value added to a website that is separate from basic website optimization. Search Engine Optimization means that the website is using basic methods, if not every method, to be readable and understood by search engines looking to index the website along side it’s peers. When a search engine finds a website it reads the HTML to figure out what the website is about. Some ways a web designer can help a search engine do this is by giving every page a title that accurately describes the content within that page. The same thing goes for the page description. Then go right down the HTML line using H1-H5 tags for important information about the page, specifying div’s with class names that coincide with the content it’s wrapped around. The main idea I want to convey here is that when we design a website, every effort is made to keep the website readable by search engines, even if the client is not interested in being on the first page of Google. A website that is read easily by search engines is going to have cleaner, more organized code than a website that has ignored SEO in its code.

Let’s not forget about the visitor here, either. After all, they are the ones we’re concerned with the most. Google is not the customer we need to please. The content should be informative and informational. It should say what the visitor came to read about, and hopefully entice them to make the next step.

6. Complete, Test and Launch

The customer will have the final say on how the site looks and feels. Any last minute changes are made here. The website is fully tested at this point – all links checked and verified, and all components testing positive. One quick way to test for dead links in a website is the Free Online Broken Link Checker which will crawl any website and test links within your site for 404 errors or timeouts. The final step is to get the site live visitors to use. If we’re using WordPress to power the site, we’ll remove the static placeholder page as the homepage and the robots.txt file disallowing search engines to crawl the site. Once the curtain is raised and the site is open for business, we’ll submit the site to search engines and web directories, add the site to Google Local (if applicable), and install Google Analytics tracking code in the footer of each page. We also setup Google Webmaster Tools and submit a sitemap for Google to crawl.

Following this basic checklist has been very successful for us, and has left our customers happy with their new websites. I hope this has been helpful in getting to know more about the process of creating a new website from the ground up. Please leave a comment and let us know your thoughts on the subject. Thanks for reading!