To develop a good website that is focused on its purpose, first design it. Finalize the design. Then develop it. And then, test it. This blog describes the three steps of designing, developing and testing. It also lists the tools required for every step.
Web design is the customer-facing part of the website. A web designer is concerned with how a site looks and how the customers
interact with it. Good web designers create a site that looks great and is easy to use. Look should be good but usability is important too. Web
designers know how to create a site that customers navigate and find what they want.
Web Design in 4 steps: Some of the steps below may be simplified into a single step for a simple and small website of like 10 to 20 pages. The three steps are about gathering and placing content. The fourth step is incorporating visual design to it.
Collect and categorize material for the web site.Sit with your clients, create a list of content that needs to be created for the site. Review
the list of content, trimming anything that does not match the goals or audience needs as described in project requirements . Group your content
into categories.Create an outline of your content and review it with your clients for accuracy.
Structure the material for the website. Take your final content outline and create a sitemap/site diagram/site structure. A site structure is
just a visual representation of your content outline.
Tools: Excel or Visio or Pencil Paper etc...
Decide on the placement of material on main page. Do the same for all other unique pages and any other significantly different page on the site.
Page Description Diagram: The page description diagram is a tool to allow designers and information architects to stay comfortably
within their respective realms. A Page Description Diagram for any given page might have three columns. The first column would list the high priority
content. The second column would list the medium priority content. The third column would list the lowest priority content.
Tools: Word or Pencil Paper.
Wireframes:A wireframe describes placement of contents of a web page by creating a mock layout. It 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.
Tools: Visio or Illustrator or Pencil Paper.
The advantages of the PDD over the wireframe include:
clarifies all content for a given page
clarifies the priority of each chunk of content
completely removes screen design (color, font, placement) from this stage of the conversation.
Page Description Diagram Vs Wireframes:
The wireframes(by information architects) if shown to customer before visual design is done, can set customer's expectations, and then customers
would not normally appreciate visual designs(by designers) that strayed too far from them. This can be avoided by instead using Page Description
Diagrams with customer.
Graphics and Media, Colour, Font, Placement etc... Have a designer / artist develop screen designs for home page and every unique page based on the
web design done above. This is if you want to make a web site template of your own with your own visual design. Or simply buy a ready made template
from websites selling them and then fit it(apply) to the web design done above. For some simple websites the later would probably be a cheaper
To design a good, purposeful and targeted website, design it first and then develop it.
If there are forms and database interaction, then back-end development would be required. For a simple/ informational website, this may not be required.
For back-end development, we provide JEE Training (Servlets / JSP / Struts/ Hibernate / Design Patterns) here at Java Sprint.
If website allows visitors to send inquiry messages to your mail box, you would need integration to mail server. If website allows google search for searching documents on the website, integration to google search service will be required. If website allows online payments via payment gateways like Paypal or Credit card companies, integration to them will be required.
Test various aspects of the website and publish it on a web server. Following are the aspects you might want to test:
Deploy or publish your web site on a web server.
Note: If any questions or queries email us at info@ javasprint.com . This article will get updated.Author: Bharat Chhajer Java Sprint