The Web Design and Development Process: What to Expect

If you are considering working with Visible Logic for your next web design project, you may be curious about our process. I thought it would be helpful to outline the general steps of what to expect.

We’ve been in business for 11 years now and have developed a process for our web projects that is very effective. While every project is unique, nearly all of our web design projects follow these steps.

1. Research, goals, planning
2. Sitemaps
3. Wireframes
4. Design
5. Development

I am going to walk you through a “typical” web site project, using some examples pulled from different projects we’ve completed.

1. Research, goals and planning

Ok. That is one big category! You’d be surprised how many people come to us and say:

I need a web site.

Or, I need you to redesign my web site.

And they really don’t have a clear goal for their web site or fully understand what could or should be included in a web site.

Planning your web site should start with a 10,000 foot view. What are your goals? For nearly every organization it is ultimately to be profitable and/or to help people. The next question is how will your web site help you with this goal. It may be very direct: an e-commerce sites sells your products. But for many companies, the web site never closes a sale, it just supports the sales process. So you need to think about what type of messages and content will move a sale forward.

Planning and research also includes developing, editing or organizing content. It may come to a surprise to many, but as a web design and branding company we spend a lot of time and effort reviewing and improving content and messaging for our client’s web sites. Without this research phase up front, it is unlikely that the goals for your site will be reached. (Note: I recently wrote about the work that precedes the design in a logo design project, and you may want to read that too, as there is a lot of common ground on all design projects.)

Research may also involve larger branding work, where you examine competitors, think about your audience, and positioning. Always think about why someone will come to your site and what information (or entertainment, etc.) they are looking for.

It is valuable at this time to review Google Analytics for a current site to see what content is already working for you in search. Then look at what content should be kept as is, updated, or ditched.

2. Sitemaps

Once we’ve gathered information about the goals, message, content and brand for the web site, we like to put together a sitemap. A sitemap is an organizational chart of how all the content on a web site is organized. We usually put this together like a flowchart.

Here is an example of the sitemap we did for New Leaf Project Management. You can compare this to their live site. You’ll see some changes were made during the process, but you should also be able understand how the sitemap translates to the design and organization of a finished web design.

You should realize that not everyone enters your site from your homepage. In fact, the better your search engine optimization (SEO) the more likely people will come to your web site via an interior page. So, the organization of information needs to be easily understandable. People do not like that feeling of being confused and frustrated. A well-organized site, with clear navigation and logically organized content can help someone easily find their way around, and encourage them to explore.

3. Wireframes

Sitemaps organize information on a the scale of the entire web site. Wireframes organize information on one page at a time.

Wireframes show the placement of content within pages, and are bit like blueprints. However, this can be a dangerous metaphor because a blueprint is meant to be followed strictly, but wireframes are often more loosely created.

Typically, wireframes show all the types of content on a page. They show the relative importance of each. They may–or may not–show the actual placement and size of items.

Here is an example of a wireframe that we did for SilkoHonda‘s home page If you compare it to the finished site you will notice that the elements are all the same, but the exact placement is different. For example, the navigation in the wireframe is two lines, but we decided to stack the entries and make it one line. Also, in the sidebar, we used a combination of text links and graphic links in the final design, rather than one long list of text links.

For a couple of reasons, we don’t always do wireframes before starting on a web site design. Wireframes tend to be boxy and it’s easy for the web design to pick up on that, even if it’s not the design or feel that is appropriate. Also, some people have a difficult time with the fact that wireframes kind of describe placement and size, but not literally.

Therefore, we generally skip wireframes if the content does not demand it. However, on larger, complex sites the development of wireframes can be critical to make sure all of the different elements have been accounted for.

4. Design

This is the part everyone usually looks forward to. Since our roots are in design we love the process. Our clients love the moment when we reveal the designs.

Once the mockups are viewed there is a sense that the web site is really going to happen.

Generally, we show more than one option to our web design clients. Depending on the state of their brand identity these may be three wildly different options, or they may be quite close together. If we are working with someone who is launching a new company and the web site will drive their visual position, we may explore some diverse options. If a client already has an existing, strong brand identity the web design solutions may all have the same color palette but much different layouts, as an example.

We prefer to work in Photoshop and show mockups online. We do not convert things to HTML and CSS for this stage. Although our experience as web designers ensure that we are only showing design ideas that can be converted to a live site. Because these mockups are often large jpeg files they may load slowly and are definitely not optimized for speed, SEO or anything else.

I encourage you to look at how we developed the design for the web site for The Western Maine Economic Development Council. Here is a link to the online mockups we provided. You can click through and see how the design evolved, and the options we showed. Make sure you check out the final site, too.

5. Development

Once we have the design approved, we convert the Photoshop-based mockups to HTML and CSS. In most cases, we build our sites in WordPress. We’ve chosen WordPress as our preferred Content Management System (CMS) because 1) we can build out the sites with complete design control very efficiently and 2) our clients love how easy it is to use.

We have development partners that we work with if a project is beyond the limitations of WordPress. But for most of our small business clients, we create the site internally using WordPress. For the three projects highlighted above, New Leaf Project Management and Western Maine Economic Development Council sites were both built in WordPress. SilkoHonda has a lot of integration points with external inventory systems, etc. and was built on a more customized and robust platform in partnership with Dunkirk Systems.

As part of the development phase we also check the design and functionality in different browsers and different operating systems. This is also when we create and then test the mobile versions of the site.

Then we are ready to launch!

Training and Maintenance

As we complete the web site, we also make plans with our clients for how the site will be maintained. We provide a customized user guide and phone-based training for every site we build.

With a few exceptions, most of our clients want to be able to self-manage their sites. Using WordPress they are able to update text, graphics, links, photos, etc. Some of them are also blogging or adding content in other areas. We help them maintain their sites at whatever level they want. Some clients don’t have the time or staff to do their own updates and we handle that for them. Others take care of day-to-day content changes but have us assist when they are ready to make larger changes like adding or moving pages or making other layout changes. Finally, we also work with our clients to make sure they understand what is involved with maintaining a WordPress site: taking care of software updates, managing plug-ins, moderating blog comments, etc.

Did this help you understand what to expect with the web design process? Please comment below or contact us with questions.