The Web Design Process: From First Concept to Final Draft

evolution

Web design is something we take pretty seriously.  We want the client to love how their website looks.

It doesn’t matter if we’re designing for a company that works internationally or one that operates locally; we do as many tweaks and revisions as it takes till we have a final product that our clients are happy with.

Even before a client sees the initial design, we critique and adjust it internally.  The first draft they see actually tends to be draft 3 or 4.   Of course, they don’t know that.  Most of the early concepts will never be seen by anyone outside of our office.

But today, we’re making an exception.

To truly appreciate the final product, you need to know the journey of how it got there, right?  So, using a very recent web design of ours, we’re going to show you what it looks like when Radiate Digital crafts a website.

The website was for a hair salon called Salon Marquee.

Starting Point

At the start of every design project, we send our clients a questionnaire asking about their vision for the website.  What color scheme to they want?  What sort of vibe should it give off?  Do they have pictures and/or a logo?  What are some websites they like?

In the case of Salon Marquee, they had both a logo and pictures.  Some of the pictures, however, weren’t quite ready when we received the answers to the questions.

Rather than wait till we had the pictures, we decided to get a start on the design anyway.

Research and Wireframe

1. Home

The wireframe is a blueprint for the website itself.  Depending on the website (and what sort of answers we received to our questions), this step can either be easy, or it can be the hardest part of the design process.

The research and wireframing is something I handle personally.  Before I began creating the wireframe, I scoured the internet, trying to find the best salon websites out there.  Our client also gave us a few websites to reference.  In total, I viewed at least 20 websites, trying to see what worked and what didn’t.

Once I had a vision of what the design should look like, I began piecing together the wireframe.

For the wireframe, it’s not just about placing boxes, lines, and text, but being able to see what the finished website should look like.  It’s not always easy when you’re staring at a glorified blueprint.

That’s why we usually don’t show the wireframe to our clients.  We used to.  Then we found it confused more people than it helped.  Instead, we finish the wireframe, type out a detailed description of what the design should look like, and send it directly to our graphic designers.

First Draft of Design

Salon Marquee homepage

Often, the quality of the initial draft depends on how well the vision of the  wireframe was described to the graphic designer.  In this case, a little too much emphasis was placed on simplicity.  Also, since we didn’t have any pictures yet (aside from staff pictures), our designer used stock images for the main slide and for the services.

While you can occasionally still get away with stock imagery, there was definitely too much happening in this design.

Salon Marquee homepage v2

Draft 1.5

The first change was made to the services.  Rather than using pictures (since we didn’t have any), I had the designer create graphic icons to represent the services.  This gave the design a little more personality and left it feeling less cluttered.

Still, the main image wasn’t cutting it and the design still looked flat.

Salon Marquee homepage v3Second Draft

Though we still didn’t have any more pictures from the salon itself, we figured we would eventually.  So we threw out the other stock image and temporarily borrowed this “action shot” from Flickr.  I also had the designer stretch it from edge to edge on the sides since our websites are responsive (they scale with the size of the browser window).

We also decided to throw in a little texture on the bottom half with the brick pattern.  The design was getting there, but we still weren’t ready to send it to the client.

Third Draft(s)

Salon Marquee homepage v4  Salon Marquee homepage v5

Now we had some actual photos from the salon to work with.  It was a bit of a challenge because the image of the storefront was rather tall.  Right away, we realized that if we were going to put the storefront image on top, we were going to have to crop it a bit.

You’ll also notice we got rid of the call to action button on the bottom and worked it into the slider instead.  But having it across the bottom of the main slide didn’t make much sense to us either.

Salon Marquee homepage v5.5Draft 3.5

The biggest changes made here were moving the call to action and cropping the image of the salon.

Finally, with everything in place and proper images being used, we decided it was time to send the design to our client.

As we often do, we sent two different styles.

 

Fourth Draft(s)

Salon Marquee homepage v7  Salon Marquee homepage v6

Thankfully, the client liked what we sent them.  Ultimately, they chose the design on the left, and their requests for changes were pretty minor.  They asked if we could make the logo bigger and a bit more visible.  Our designer was able to photoshop some of the tree leaves out from behind the logo.

The other request was to make it so that the “Salon Marquee” on the image wasn’t cut off by the menu.  Truth be told, they had asked if we could move the menu altogether.  We didn’t see this as the most viable of options, so instead we made some minor positioning adjustments

We didn’t have a lot of room to work with, but we were able to get the menu off the logo.  At this point, the design was done.  But right as we were able to call it good, we received a couple more images.

Final Draft

Salon Marquee homepage v8

Salon Marquee is located on a beautiful lakeside.  Right at the end of the design process, they sent us some images of the lake itself.  We felt it would be a waste to not include one of them on the homepage.

So, removing the brick pattern (which none of us had been particularly attached to), we were able to slip in a picture of a dock located across from the salon.

We thought the picture was a perfect fit, and our client did too.  With that, the design was given final approval, and we moved on to the integration process.

And now you know how a website gets designed.  Pretty crazy, huh?

What do you think of our final design?  Are you surprised by any part of the process? Is it sad that so much of the work never gets seen?

One Response to "The Web Design Process: From First Concept to Final Draft"

Written by Timothy Snyder
on September 20, 2013