Understanding the Web Design Process
Last Modifed: 10-Oct-2009 10:47 PM
So you want to build a website? In a perfect world, you’d want a system, checklist, or template to help you along. The reality is that each website is a project and projects vary depending on a number of factors. So for now, I’m going to start with the basic question, what is the web design process? And will elaborate in a later article or tutorial. For now, the goal of this article is to outline things for you so that you know the general flow of the web design process.
My first assumption is that you have the project, whether it's for you or a client. Consulting with the client and/or the sales process is beyond the scope of this article. To summarize, the process breaks down into six steps:
- planning
- design
- psd to html
- content insertion
- adding interactivity
- testing
Our first step of the web design process is planning. This can be as simple as asking the client a few simple questions or tons of detailed questions. A few questions to consider are:
- What is the primary goal? Secondary goals of the website?
- Do you have content or will we need to create content?
- Do you have an existing brand? Logo? Website?
- What color scheme would you like to use? URL examples?
- Suggestions for current layout? 2 columns, 3 columns? URL examples?
- What should the style or mood of the website be?
These questions will get you going and should have actually been discussed in the pre-sales conversation so you know that you are working within the client’s budget.
The second step of the web design process is the design phase. During the design phase you will typically do the following things:
- Sketch the design
- Produce a wire fame
- Create a web design comp for client’s review
- Make revisions to the design comp to produce the final design
The design process can be difficult if your client hasn’t given you enough information regarding content, layout and color preferences, and style. I typically generate design ideas by searching through galleries on the web and piecing them together in my sketch or wireframes. Once I’ve got that figured out, I can usually crank though the design pretty easily.
For many web designers, this next step in the web design process can often be the trickiest part. PSD to HTML task is the third step of the web design process. What this phrase refers to is turning your Photoshop file (.psd) into the html code. I’ll definitely be covering this topic in detail, but for now, just know that this is the part of the process where you create the html for your website. Sometimes we will turn this HTML file into a web template in order to aid in our website management. When I’ve finished this step, I’m usually pretty happy at this point since I have a working HTML page that the client and I can view on the web.
The next two steps are sort of interchangeable. For me personally, it can depend on a number of things like resources - do I have all of the content?, or how much magic (interactivity) is necessary? and so on. Just know that there is some flexibility to the web design process, but it essentially gives you a checklist of things to do.
Adding Interactivity to the Website is part four of the web design process. For my web designs this usually comes in the form of adding jQuery plugins, Flash movies, CMS integration or other functionality like ecommerce, photo galleries, contact forms, email newsletters, etc. This part can definitely be challenging, but the trick is using reliable tools and technologies that fall in line with industry standards. This step can be very rewarding because it often makes the website come alive.
The fifth step is the Content Insertion, where we typically build out our web pages with the various types of content. This stage includes tasks like:
- creating individual web pages
- adding your text
- inserting photos and
- adding links to pages and menus.
When I’m lucky, I try to get someone else to do this part since it requires very little web design skill, just a knowledge of how to do things correctly. Building your pages correctly, for example, can mean using proper headings, page names, and titles for search engine optimization. These are the kind of tasks you can teach someone to do so you can focus on the true web design.
Once we’ve added our content, the sixth and final step is Testing aka QA (quality assurance). At this point you’ll want to do things like:
- Check the links
- Run a spell checker
- Final testing in various target browsers
- Form submissions
In testing, you’ll want to touch and interact with everything that you can on the website to ensure that it is working well. If it's not, then it's time to identify your issues and work through them to complete your website.
This is a just quick overview of the web design process, but I think it provides you with a pretty decent understanding of how you can approach the web design process for your next website project. Make sure to check out the web design classroom to get the details of how to build a website from beginning to end.