5 Steps to a Successful Web Design (or Re-Design) Part 1

Tweet In the following four-part series, we will share with you some excellent tips on successful web design that will help you create effective websites for your clients.

Step One - Design Brief/ Scope of Work.
The most important part to the design process in general is the research phase. This applies heavily to successful web design as information is number one on a website. In this step, goals and a clear direction are defined.

A few icebreaker questions to get a client talking and figure out what they really like are essential to developing a clear direction for the design. Start by learning about the business and their customers in these four different areas.

Learn about the business…
1. Do you currently have a website?
2. If not, do you have an idea of a domain name you would like?
3. If you have a website, what do you not like about it?
4. Do you have a logo? If so, do you have a style guide or brand guidelines we can follow to maintain brand identity?

Learn about their customers/users…
1. Who is your audience?
2. How do your clients perceive your business?
3. What makes your company different from others in your industry?
4. What role will the web site play in your business? Sales tool? Informational? eCommerce?

Learn about their likes and dislikes…
1. What are your competitor’s websites?
2. What other sites do you like why?
3. What other sites do you not like and why?

Learn about the project…
1. What is the budget range for this project?
2. What is the schedule?
3. Who will supply content?
4. Will there be a need for a database, content management system, secured transactions or other back-end setup?

These basic questions are a good starting point from which to begin discussions with your client. It is always best to gather as much information as possible before beginning a project and set goals and expectations early. Thorough planning includes asking plenty of questions and listening to your client's needs carefully. Really get a feel for their business and what they offer to their customers. This will show the client that you know what you are doing and lead to less revisions later in the process.

Step Two - Site-map and Wire-frame.
After the client interview, the designer can begin the planning step for the website. Planning a site-map helps to nail down what content goes where and how a user will navigate that content. The site-map is a structure that shows how the site's pages link together. There are many visualization applications available to aid in building great looking site-maps. The top two applications are OmniGraffle for the Mac, and Visio for Windows, but a pencil and sketch paper works great too.

Once a site-map is approved, it is time to move on to the structure of each page. This is done through a wire-frame. Again, there are many applications available to aid in building some great looking wire-frames. One great resource for laying out a page from wire-frame to final design is Nathan Smith’s 960 grid [http://960.gs/]. This package includes sketch sheet pdf files that work great for wire framing. The advantage of using this system is that the package also includes templates in 12 and 16 column layouts for popular imaging programs like Photoshop, InDesign, OmniGraffle, Visio and more.

While wire framing, focus on organizing content on the page and keep it simple.

“Simplicity is the ultimate sophistication.”
– Leonardo Da Vinci