February 25, 2015
Part I - Planning and Design
One of the more misunderstood concepts, in regards to the web design industry, is that the actual process is much different than that of other client centric initiatives - like financial planning for instance. Yes, the details are different, but the methodologies involved are quite similar.
The precise details of the web design process might vary slightly from design agency to individual designers, but the fundamentals are generally the same:
1. Information Gathering
Setting the stage:
The most critical step in the web design process is creating an accurate project definition. The same way that a Painter starts with an initial sketch, or an Architect with his/her blueprints, a project definition is necessary if one is to envision the entire scope with any accuracy. As such, the client survey (Discovery Phase) is used to gather the information needed to get the project moving in the right direction.
1. Information gathering - Discovery phase
What is on the client's mind? What are the needs that you are trying to uncover as the solutions provider? Regardless of your sector, a concise fact finding sheet will have many of the same elements - Purpose, Goals, Design direction etc. The idea here is to ask enough questions so that any grey areas will slowly vanish and the client will feel comfortable knowing that you listened to what both their vision and ROI needs are moving forward.
What is the purpose of the site? Do you want to provide information, promote a service or, sell a product? A clearly defined purpose will result in better ROI metrics later on!
What do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information. Similar to purpose, but with a slightly more ‘outcome’ orientation built into the answer. Exp.: Purpose – provide information; Goal – more subscribers
● Target Audience
Is there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will later help determine the best design style for your site.
How would you describe your brand? How do others perceive your brand? How would you NOT want your brand perceived? Once you’ve figured out the answers, the next step is to figure out how design will push the brand forward.
These are really only the top 4 questions, please look under “Discovery Phase” for a full list.
"Redesigning a website is like remodeling a kitchen - you need to figure out what features and capabilities you need and how you will use them before you design your layout i.e. where to place appliances and electric plugs; and select tiles, curtains and countertops." --
Good web design requires solid site architecture based upon the goals, purpose and target audience established in the project brief. The deliverables from this phase are:
Content Outline breeds Site Maps and/or Wireframes
These three deliverables are dependent on each other and need to be completed sequentially.
Working closely with your clients, create a list of all existing content. Additionally, brainstorm new content that needs to be created for the site. Review your list, trimming anything that does not match the goals or audience needs as stated in the Discovery phase.
Take time to think about the future and how the site content might need to grow. Make sure you leave room for growth. Next group your content into categories. Once your categories are established, create an outline of your content and review it for accuracy.
There are two types of methods that can be used - depending upon the complexity of the desired website:
1. Site Map
For the purposes of planning a website, a visual site map can be very helpful. By drawing even a simple sketch of the sections you would like to have, you can be sure that you capture everything about your website that you need to be successful. When using a site map as a planning tool, you can be as simple or as complex as you need to be.
A sitemap is a list of pages of a web site accessible to the end users. It can be either a document in any form used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.
A wireframe is a non-graphical layout of a web page. It is a simple drawing of the chunks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.
Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer. The website wireframe connects the underlying conceptual structure, or information architecture, to the surface, or visual design of the website.[Ex.] Wireframes help establish functionality, and the relationships between different screen templates of a website. Creating wireframes is an effective way to make rapid prototypes of pages, while measuring the practicality of a design concept.
3. Visual Design
Two interesting quotes to get us started:
"Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intended audience."
"Designers are not mind readers or magicians. Good design is dependent on good site structure and a solid project definition."
Now it is time to let the designers be creative! Review the project brief, sitemap or wireframes with the designer(s), than give them free reign to brainstorm solutions and develop the different visual designs. The designer(s) should also review any branding guidelines as well as the technical requirements for screen resolution, browser compatibility, download time, web standards and accessibility.
At this point, the designer(s) has a clear idea of the purpose of the site, the content that will comprise the site, the site architecture and the elements that need to be on each page.
The target audience is one of the key factors taken into the design consideration. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. As part of the design phase, it is also important to incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.
Drawing on their knowledge of design principles (balance, rhythm, proportion and dominance), design elements (point, line, shape, color, typography) and user centered design (usability), they can develop design options that meet the project goals.
A sample of the visual design tasks:
● 1st draft of visual designs for home page and one sub-page
● Client provides feedback on designs
● 2nd draft of visual designs for home page and one sub-page
● Client selects design and provides feedback
● 3rd draft of visual design for home page and all unique sub-pages
● Client provides feedback on design
● Final visual designs for home page and all unique sub-pages
● Client approval of final design
In this phase, communication between the client and your designer is crucial to ensure that the final website will match their needs and taste. It is important to work closely with your designer, exchanging ideas, until you arrive at the final design for your web site. The most common terminology that describes this feedback system is Agile Methodolgy.