• CONTACT
• •  EN
  •  FR

Webdesign 101 - The Correct Way Of Doing Web design

It is a common pitfall to think that it is easy to create an attractive and modern website. it definitely takes much more than one talented artist. Web design must be done appropriately while keeping the main audiance in mind. While some web design projects leave a lot of room for creativity for the web designers some other projects  won't allow to go out of certain parameters .

Creating an adequate  website design requires following a meticoulous cycle of development.

The basic idea is as follows:

Requirement Analysis:

• Client needs to be able to explain what he / she needs and the web designer must take notes of the requirements.
• Client needs to be able to describe their target audience
• A list of all the competitor websites need to be created
• Common web design elements , requirements and features , related to the industry must be extracted from the compiled list of competitor websites
• Client needs to show example websites they find appropriate for the website design. If the client can't show a list of websites they need to be directed to either a list that is compiled by the web designer or they need to select  templates they find appropriate from a templating website such as templatemonster.com
• Client and the web designer need to agree on which web browsers (i.e. Internet Explorer , Safari , Chrome , Etc.) and platforms (i.e. mobile phone, ipad, desktop computer etc.) are being targeted . If the project has limited budget client needs to be able to accept that the web page might not look as well on older web browsers (Internet explorer 6 and below) or web browsers that are used less commonly (i.e. Opera) .

Estimate

• Web designer needs to submit required budget and estimated time to complete the web design project. 
• It is important at this stage to specify the number of maximum number of revisions a client could request. (i.e. number of initial mock-ups that the designer will provide or how much each new mock-up will cost to the client if there is a cost associated with it)
• It is also important to agree upon and specify who will provide the initial content, text , pictures , video ,etc. , for the website .
• Web designer  also needs to setup milestones  to show the client progress and get feedback on a regular basis. The more milestones the better. It isn't a good practice to simply prepare a website design and expect the client to like it.

Client Approval

• Client needs to formally approve the project in a written manner and must accept to take responsibility to make the agreed upon payment.
• It is a common practice in website design projects to ask for a retainer of up to 30% at the beginning of the project. This shows that the client is commited to this project.

Common Milestones For Webdesign

All web design projects have the following common milestones

• Upon Client approval or during the stage of estimation the web designer with the help of the client and the project manager needs to prepare wireframes for the website. A wireframe is a birds eye view of how the website will be layed-out for separate pages , and how the user is expected to navigate through the website. It is very important for the web designer to get approval for the wire-frames. An example tool that is used in creating wireframes of a website is mockingbird.
• The designer needs to prepare mock-ups, screen shots of how the website is expected to look like. At this stage if the web designer needs to purchase any images or videos from a stock photography company,i.e. istockphoto.com,   they need to inform the client of the associated cost of such an expense and need to get approval of the client to purchase the selected images when the time to launch the website comes. The most common tool used to prepare designs is called Adobe Photo Shop. When the web designer saves the files they usually save it in PSD format. But unless the client specifically requests to have the PSD files almost all the time the web designer will convert the web design mock-ups into a image format such as PNG so that the client can view the mock-up easily without needing to purchase a copy of a designer software.
• If the client approves the mockup the next step is to "slice" the mockup. The verb "slicing" comes from the use of the "slice tool" of the design program Adobe Photo Shop. The aim is to turn the design into minor images that can be displayed on a website. Adobe Photo Shop allows the web designer to save the design as html. However, the HTML that is created is very primitive and it uses tables.
• The web designer will often want to convert the primitive HTML and images into valid XHTML + CSS . Validation of XHTML and CSS could often be done via service like W3C Validator
• Next step in web design is often to add dynamic design components that are needed in order for the website to function properly. Dynamic elements could be the menu system of the website . An AJAX based sideshow to impress the end user, adding some AJAX or FLASH animations etc.