I’m often asked about the process I use for designing web sites. If you are a potential client, hopefully this will give you some insight into how I work and what you can expect during the process. If you are new to web design, this should serve as a template for your own procedure. Each designer’s approach will be different. There is no one, best way.

It’s tempting for a designer to jump right into Photoshop and start creating a visual design comp. The truth is, the creative process starts long before actually putting color to pixels. Following an established web design method will dramatically increase efficiency and will help the client understand what is taking place and what to expect at each phase of the project. One of the major advantages of this process is that it gets the client involved early and keeps them involved throughout the project.

Learning

The first phase of any web design project is all about discovery. This is the most important step in the process. Before any designing takes place, it’s crucial that you learn as much as you can about the company that the site is being created for.

A good way to start this process is to use a creative brief.  The brief is a series of questions, the answers to which outline the major goals of the project. It can be as simple or as detailed as you wish, but it’s important to get a full understanding of the project scope. I generally ask these questions in a face to face meeting, but many designers provide a questionnaire on their web site that a potential client can fill out and submit.

Whatever method you use, you’ll want to know at the very least:

• What is the personality of the company? This includes branding characteristics and style. (If the company were a person, would it be formal, elegant, casual, humorous, etc.)
• What are the primary and secondary business goals of the site?
  • Why do you need a web site in the first place? This might seem obvious, but it’s important that the purpose of the site is clearly laid out.
  • If this is a redesign, where is the current site failing to fulfill business goals?
• Who is the target audience?
• What are the tasks that site visitors will be expected to accomplish?
• I like to have the client provide a list of several web sites that have a look and feel or features that coincide with their vision for the site.

Planning

In the learning phase, we’ve laid out a series of problems. Our task now is to plan how we are going to solve these problems.

For me, the planning phase starts and ends with content. It’s surprising to me how often content is almost an afterthought. Every aspect of the planning, designing, development and maintenance of your web site revolves around your content. It’s important to establish a detailed site map, or outline of the content architecture.

Card Sorting

A great way to go about this is through a technique called card sorting. You jot down each main content concept, page, interactive element, etc. on a 3×5 index card. Once you have a stack of cards, you sort them into related piles. The ideal situation is to have several potential users complete the task of sorting  the cards so you get an idea of how users see the relationships within the content elements. However, even if you decide not to perform an actual test, this method is a great way of visualizing your content and it’s very easy to move pieces around until you are satisfied.

Once the content structure is established, you’ll need to decide what design elements will appear on the home page. Here, you’ll want to take into consideration the  business goals for the site. A discussion of design theory is beyond the scope of this article, but suffice it to say, you should organize the remaining elements in descending order of importance so that the main call to action is the most noticeable element and so on.

Wire Frame

A wire frame is simply a sketch of the layout of a web page. It can be as simple as a scribble in a napkin, or as fancy as you want to make it. Many designers use software such as Fireworks (sadly discontinued now) or OmniGraffle for creating wire frames. I usually use good old pencil and paper (are you seeing a pattern here?).  Typically, you will have at the least, two wire frames. One for the homepage and one for the interior pages.

The wire frame is gray scale and contains no actual design elements. It simply shows “what goes where”.

Visual Design

Mood Boards

A mood board is a quickly thrown together collage of photos, colors, typography elements, scraps torn from magazines, etc. that together, give an overall feel for the visual direction of a design. They contain no structural elements and can be as organized or as loose as the project demands.  They are intended to invoke an immediate emotional response. Typically, a client will glance at three mood boards and immediately point to one of them and that’s the one I like.

Design Comp

Now that we’ve got the content and the structure for the site and a good idea of the general look and feel we are after, we can finally open Photoshop and get started on the fun part design comp. Because we took the time to organize the content and create wire frames, the job of creating the design comp will be much easier.

When I first started designing web sites, I would create two or three design comps and present them to the client so that they could choose the one they liked. This often led to a painful revision process that would often include the client choosing parts from each of the comps and attempting to combine elements from each. This “patchwork” design would invariably be weaker than a single, focused design would be.  I have found that if I spend time on content, structure, mood and layout first, the design comp almost completes itself. There are usually very few revisions.

Development

Front End

The front end development of the site involves creating the visual presentation of the web site. This involves:

• Markup – The HTML documents that are the structural foundation of a web site.
• Style – The cascading style sheets (CSS) that control the layout and formatting of the pages. This is the look and feel.
• Cross-browser and cross-device compatibility – These days, web content is being viewed on an ever-expanding variety of devices using various software. The goal of this process is to present the content of the site in such a way that it is easily viewable regardless of the device in use.
• Accessibility – Visitors accessing your web sites are often hampered by some type of disability. These can include visual, motor or cognitive disabilities, but also any situation where there is some barrier to the desktop computer experience that most of us have become accustomed to. Following W3C standards helps to ensure that the web content is accessible regardless of the method of access.
• Usability – Simply put, how easy is it to use the web site. Depending on budget and complexity of a site, usability testing is sometimes employed to ensure that the site is easy to navigate and that visitors can efficiently complete the objectives that they desire.
• Performance – Web site visitors are not patient. It’s crucial that the HTML, CSS, JavaScript be as efficient as possible, images are optimized and the server environment is tuned properly so that the site is as fast as it can be. This is becoming more important as the percentage of web site visitors using devices on 3g data networks increases.

Back End

While the front end is the part of the site that the visitor interacts with, the back end has to do with how the web site responds to the information that the visitor provides. This includes the server, the application and the database. Content management systems such as WordPress provide both front end and back end functionality.

Testing

This is an area that often gets overlooked. Every aspect of a web site implementation needs to be thoroughly tested. Much of this can be done by the designer, developer and the site-owner, but getting users involved will almost always spotlight areas that those involved in the creative process never considered. This doesn’t have to be a complicated, expensive procedure.

Maintenance

A web site is never really finished. Most businesses are in an almost constant state of change and their web sites must reflect those changes in order to stay current. Businesses today rely on information and communication more than ever before and company web sites are often the portal for much of this communication.

In other words your web site will need to be maintained and updated regularly. Many companies offer maintenance contracts where the client pays so much per month to have updates done within certain limits. I have always felt that this type of agreement heavily favors the web designer and the client ends up paying much more than they would if they were simply paying an hourly fee for updates.

Following this web design procedure will ensure that your project is properly planned and efficiently executed. It will  help keep the client involved in the project from its early stages, allowing them to have some control in the process. And by encouraging you to create a workable plan and stay focused on the business objectives of the site, this process can save you hours of time.