Have you ever thought how boring it is to do the same things all over again when designing? As a matter of fact, many of the things we do are the same, we just adjust them slightly to fit a specific project. Although our domain is full of new and unexpected, every designer has to follow repetitive tasks once in a while. Doing them according to a plan will help you get over it faster and increase the speed of the development process. In this article we take a look at how to follow a web design process and try to draw some conclusions in the end.

Photo source: thescube.com

When I say web design process, I mean a series of documents outlining each step needed to be taken from the beginning to the end of a project in order to fully complete and deliver it to the client before the deadline. This document is divided into categories and broken into sections and helps a designer, working as a road map for all the projects. There are five categories and we begin with… what else than planning?

1. Planning

Most designer think this is the most important part of any project and I totally agree. Moreover, project managers all over the world focus more on this part than any other one because drawing targets for yourself is the way to reach them. This is the step that requires more client interaction than other ones because you don’t only get information from him, but also discuss possible solutions.

Project analysis

Here you have to analyze the goals of the client, the audience and plans. At the end of this phase you already need to know where you head to and your client needs to have an overall idea about what is happening. Remember that not all of your clients are tech-savvy, therefore don’t make it too technical and take your time to answer questions.

Define roles

Defining roles within the project has to be done in the beginning. You need to know who is going to do what before you start working. You also need to include payment terms, clauses (project closure, termination), copyright and schedule. This means here it’s the phase where you create and sign the contract with all the details. You need to spend a lot of time here because if you send out and sign a completely wrong schedule which is not properly planned, the whole project can fail.

Get access to anything you need

During the planning process you also need to gain access to servers and anything else you need, if you specified in the contract that this is included in your tasks. If you need at the end of the project to upload the website on a server, make sure to have it available all the time, so you can test on it while in development. Get the username, password, control panel log in credentials, database information and anything else you might need. For the sake of the client, specify in the contract that these credentials will not be made public and will only be used for the purpose of the project.

Photo source: http://seocopyblogger.com

Determine the tools

All of us use different tools and you need to specify in the beginning what tools will you use for the specific project. Don’t forget to mention other resources, such as stock photography and fonts – although this is good to be written in the contract. Make sure the client knows he will have to additionally pay for those. This might also be a good time to pop out the budget for the project. Never start working before the client agrees on it and signs it.

2. Design

Obviously this is the stage where you move ideas to reality. This is the stage where you bring out the visual structure of the future product and, although content misses, show how the website will most probably look like in the end. You still communicate with the client in this phase, but not as much as before. You ask for some feedback from time to time, but stick to your ideas and to what you talked about during the first meetings.

Visual elements planning

This is where you come with a visual layout for the website. You use all the information gathered from the client in the first phase and turn some documents and papers into what the client wishes for. This will only be a wireframe for the rest of the project, so using pencil and paper first instead of jumping directly into Photoshop can help very much.

Get digital

After you have everything on paper, it’s time to move all the work on the computer. Create some visual mock-ups in Photoshop and get ready to modify them – you will most definitely have to do it throughout this whole process. Keep everything organized in layers, rename everything so that it is easy to find in a matter of seconds and be sure to save the PSD, not only a picture preview.

Reviewing with the client

Here is the stage of phase two where you communicate mostly with the client. Now it’s time to get your mock-ups and design ideas approved and, if something is wrong, to put everything in place according to the client’s wishes and the discussions you have. Now it’s time for making mistakes and making changes. From this point on it is too late, so make sure to advise your client about this.

3. Development

Now it’s time to transform mock-ups into fully functional websites with content, images and everything else you need for delivery. Everything you do now will be based on the second phase – if there are important details you need to remember, always refer to the two initial stages.

Jump into coding

Although some people think this is a part of the design process, I usually put it here, in development. This is not very important, as it contains the same amount of work wherever it is placed; I just think it fits better here as you already move from graphic/visual work to coding.

Slice your Photoshop mock-up and code it with HTML/CSS. Don’t bother about interactive elements, you just make the page look as identical as possible with the Photoshop files you have. Work in detail on the visuals until you start hard-coding it.

Build the framework

If the page is more than HTML/CSS, you need a framework to build on. It can be ASP.net, PHP, Ruby on Rails or any other programming language, just make sure you implement it now and get the basic engine up and running. Now it’s also time to make sure the databases you need works and to test the web page for the first time.

Photo source: wikimedia.org

Code all the pages

After you are done coding the home page, make sure you code every other content page, from blog post to forum and general content to error pages. Also, make sure all the details are in place and all the pages look the same. You don’t want different font size or color throughout your website.

Develop and test special features

Now it’s the time where interaction comes in the picture. Create all the forms and validate the page now, as it is good to do it while coding and not only at the end. After you develop them, it’s time to test the website for the first time on the server. If you followed this process correctly, you already have the log in credentials and the database up and running, so this should not take too much of your time.

Get content in

If everything works as it should and the code validates, it is time for you to call the client and ask him for the content. It might be smart to call him few days before you are actually ready to put the content in, as it takes several days for busy clients to send the required information to you. After you put everything in, it’s time to take care of typography and small details, so don’t think this phase is as easy as the title sounds.

Test functionality

Now that you have everything in place, it’s time once again to test the website, only now you need to start verifying the functionality and interaction site of the product. Scroll through every single page and make sure everything works. Once you are done with this stage you should be able to deliver the product already.

4. Delivery and launching

So now you developed everything and delivered the client your final product. After he played with it for a few hours, he gave you acceptance to launch it.

This is the time you will have to use your social media skills to launch the site properly. You could have already started on this before with a teasing campaign, otherwise it is not too late to start now. Create some buzz about the company’s design project and track down the reactions. You can create a launch strategy based on them.

Last details

If there are still details to polish (although there shouldn’t be at this point in time), now it’s the time to do it. Make sure you show the polished and improved design to the client before the next stage.

Final upload

Hopefully by now you already tested the website few times on the live server, but probably you modified it since then. Upload the final version to the live server and get ready for take off.

Photo source: rlabs.org

Cross-browser checks

As a last step before going live, this is the time when you check your website’s functionality and design in all the browsers and also on the mobile platforms. It is good to have an overview of how your site looks on all these devices in order to know where to start improving if needed or requested.

Now press that button and launch it!

5. Post launching

After launching the website, there are still some details to set in place. There is obviously signing the project off, officially presenting it to the client, delivering all the necessary files and earning the money. Communicate to your client that your door is always open and that you look forward to work with him again in the future.

Hand off the project first and make sure all the contractual obligations have been met. Both you and the client should be satisfied at this stage.

Give your client all the files you think he needs, from documentation to PSDs and website, passwords, database and framework information and so on. If they will work with another developer at some point in time, it’s smart for him to have those. Also, you will avoid him contacting you for the files whenever he needs them.

Photo source: http://blog.fabsuite.com

This is, obviously, also the time to get the last paycheck, unless you still promised to do some work for him. It’s never a bad idea to check on how pleased he is with the project one or two months down the road.

Conclusion

I agree with the ones who will say that this is a merely basic process. True to that. But I can’t give specifications for each type of project, it wouldn’t be enough time for it. This is a simple framework you will have to work on so it will fit your needs and projects. The bottom line is that this is how a web design process should look like and if you don’t work this way, it might be time for you to start digging more and find out all the professionals do it like that. And if they all use this process, why shouldn’t you try it too?