Web Design Process

A company’s website is one of its most important marketing tools; it is a place to explain what the company does, how they do it, and why they are the best at it. It stimulates interest and answers questions. It gives an overall sense of the company and illustrates the company’s personality.

Here at FatCat, web design is not merely about colors and typefaces—even though we spend quite a bit of time on those elements! Web design is more of an all encompassing project about organization, structure, and message. We don’t just design a pretty website, we design a website that fills your needs and commands your message…and just happens to be beautiful too.

I am going to take you through the steps we take when we design a website using the recent website we designed for our client, Greg Suggs Insurance, as an example.

1. Drawing Wireframes

We start our web design process in the wireframe stage. A wireframe is like the skeleton of a website. It is usually hand drawn, and only displays the bare essentials of the website, including navigation and spatial layout elements. Wireframes are to be created very quickly with many different versions, and then reflected upon and refined. For the Greg Suggs website, I created eleven different wireframes, with a few extra unrefined versions.

The image shown here is the Home Page wireframe we ended up choosing to continue with, however there were wireframes made of each page. Once we have a set of refined wireframes, we meet with the client to discuss the wireframes, changes that should be made, and decide on a set to continue into the next phase with.

Taking the time to draw out wireframes and get the clients approval of them may seem like an unnecessary step that only draws out the process, but it is actually a crucial step that sets the stage for the rest of the project. Sketching out and looking at wireframes—instead of jumping right into the design—allows us to speak with the client and make decisions about the functionality and organization of the website, instead of focusing on color of typography.

We decide on the function first, and the form falls into place after.

.

2. Design Mock Ups

Once the functionality and organization of the website is determined, we move on to the design phase. We create a set of design mock ups—meaning that we create a pixel-based image of what each page of the website would look like.

It is not interactive, and does not live on the internet, but it lays out the aesthetics of the website. The first round of design mock ups are generally a direct representation of the chosen wireframes, and often alerts us of design problems we didn’t realize during the wireframe stage. We then analyze the design problems we encounter and revise the mock ups to create a more refined version of the web design.

We play with color, typography choices, typography size; and in the case of Greg Suggs refined an icon system. Once we have a refined version, we meet with the client to get feedback.

.

3. Design Mock Ups: Revisions

Armed with our clients feedback, we then move into the revisions stage, when we analyze in depth any problems with the sites organization and overhaul some design aspects as necessary.

The design mock ups start out mimicking the original wireframe, but rarely end up a direct copy of the wireframes organization.

It is a process to find the right layout that can be coded to function the way we intend it to.

This evolves through out the design process, but the simple skeleton of the wireframe remains at the base.

.

.

4. Coding

Our pixel image of the design of the website is then programmed into a WordPress theme.

However, once we have the theme, the website is far from complete. At first it is just the background color or image hosted on our server.

We have to manually go in and add all our content and images and edit the CSS and PHP to fix any problems and implement the design structure we created in the mockups.

.

5. Sometimes Things Are Wonky…

When something goes haywire, we have to examine the code and figure out how to fix it!

Coding is often a lot of trial and error and searching for the correct place in the CSS or PHP files to add or subtract commands.

But it’s a fun process, and one that I enjoy learning. It is exciting to be able to make a change in the code, and then immediately refresh the web page to see if it worked.

I often let a prolonged “yesssss” slip out when I solve a particularly difficult problem, like these finicky icons on the Greg Suggs site.

.

.

6. It’s Alive!

Then when you’ve worked out all the kinks, you make it live!

The website is transferred from our staging server to our clients server.

We also make training videos for the client to have for the future and have an in-person session to train them on how to use their new CMS WordPress system and manage their website.

And then you’ve got a living, breathing, evolving website ready to fill your every need!!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>