Steps of Web Design

These steps for creating a web site are based on ideas I found online and my own experiences. These steps may not be the best strategy, but then can lead you in the right direction and you can figure out what works best for you.

Gather the Information

The first step to planning a web site before you start the coding or the graphic design is getting all the information you need from the client. What is the main purpose of the web site? Is there a specific type of functionality needed? What is the client trying to achieve with the new website or redesign? Giving the client a questionnaire to fill out beforehand is a good idea, that way you can get all the information you need. Once you receive all the information from the questionnaire then you can get a good idea on what the client wants and what is involved. You’ll also be able to understand the main purpose of the site and if you should use a content management system such as word press or create your own design.

Plan

Once you know what is involved the next step would be to start planning on how you are going to create it. What tools are you going to use? Are you going to use Wordpress or create a custom design? If you are going to create a custom design examples of some tools would be a JavaScript Photo Gallery, such as lightbox. If the client wants a login system then you could use PHP and MySQL. At this point it is a good idea to research similar sites and see what tools they use. You can see who comes up first in a Google search and try to find out why. Brainstorm about what colors to use, where to place certain elements, what kind of fonts you should use, and other similar details.

The next site step is to plan the layout of the site. If you are going to use Wordpress then search for the best theme that servers the site’s purpose. If you are creating a custom design, it is a good idea to first create a sketch on how the user will interact with the site. A sketch will typically start with the home page and show circles of user actions (which may eventually become pages), arrows showing how users will move around the site, and speech bubbles representing what the user is thinking at key places.

Next, think of the pages that will be on your site by looking at the sketch. How will the pages be grouped? How will the user find them? Then create a sitemap, this will effectively merge all the views from your initial sketches into a structure that’s clear and economical. The next step would be to sketch a wireframe layout. When you create the wireframe think of how the navigation will be and play with different layouts.

Design

After you have done all the preliminary work of learning and planning, the next step is to create a mock up design of the site based on the answers from the client and your sketches. The mock up design should embody the personality and character of the brand. Everything has a brand; even if you don’t sell a product or service — for example, if you run a blog — your website still has a certain feel that makes an impression on your visitors. Decide what that impression should be based on information from the client. The beginning steps will make this step much easier and you won’t have to worry about the little details. You will also be able to focus on the more important things and not get too bogged down trying too many Photoshop layouts. When you create the design in Photoshop or illustrator do not forget about the sub-pages, which you will have to design as well. You will need to use proper navigation and a good plan on how to how to access these pages. At this stage it is important to seek feedback regularly to make sure all requirements have been met.

Code

After you the design mock up, the next step is to start the CSS styling. If you use a custom design be sure to use a CSS reset file so all browsers will be able to interpret your code the same way. It is also a good idea to have some starter XHTML files linked together and ready to go. Next, add in your title, descriptions, and Meta tags, or at least make a note of what they should be. Then add the main elements to the layout. Avoid using too many divs, for example you don’t need a div just to contain a logo or text.

Programming

After the design and CSS styling is all done the next step would be the programming, if any is necessary, such as a login system, photo gallery, or a password protected page. Once all the programming has been done then you need to start testing out the web site with different users. Get feedback from them as to whether or not the flow of the site works, if they had any problems finding things, or if they got any errors.

Launch

After the testing has been done it is time to launch the site, this could mean to make the site live for the first time, to start submitting it to search engines, or to start marketing it.

Conclusion

To get the best results, especially if you want a good design, it takes time and planning. A web site is never really finished though; there is never a final version. You can always make improvements and updates to make the web site more effective in serving its function.

Posted in: professional websites, Web Design, web design steps, Web Sites, wed design tutorial