Web Site Design and Development

× "Is a" and "Has a" relation "Has a" relation Arrays as in memory Two Dimensional Arrays Exception Handling Variable, Object & Reference Multi-threading Website Design / Development Story of JEE modules
× JAVA, JEE, SQL: Online Private Tutoring Project based Training Concept based Training Basic Java:           $180 Advanced Java:     $300
(Threads,Sockets,JDBC,GUI)
Advanced Java:     $300
(with games projects like
PcMan, PingPong, TicTacToe)
Author: Bharat Chhajer

Overview

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 Site Development

Web Design

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.
Tools: A Web designer may simply use pencil and paper to design a website. Web designer often knows HTML,CSS, Javascript, Flash etc... to be able to create what a customer will see and experience on interacting. Web designers may also use image/graphics software to create images that match the theme of a website or simply buy them from websites selling them.

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.

1. Content Outline:

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.

Web site structure diagram

2. Site Structure:

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...

3. Page Description Diagram and/or Wireframes:

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.

Web page description diagram

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.

Diagram of wireframe of web site

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.

4. Visual Design (Graphics and Media, Colour, Font, Placement etc... ) :

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 option.

Tools:

We provide Website Development Training (HTML/CSS/ Javascript) here at Java Sprint.

Site Development and Integration:

To design a good, purposeful and targeted website, design it first and then develop it.

1. Develop Pages based on the design:

If the visual design was done using HTML/CSS/ Javascript then part of your building work is done. Build rest of the pages using HTML/CSS/Javascript, flash, image tools, video tools, etc...

We provide Website Development Training (HTML/CSS/ Javascript) here at Java Sprint.

2. Back-end Development:

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.

3. Integration:

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.

Testing and Deployment on server:

1. Testing:

Test various aspects of the website and publish it on a web server. Following are the aspects you might want to test:

2. Deployment / Publish:

Deploy or publish your web site on a web server.

Option 1:

Option 2:

Note: If any questions or queries email us at info@ javasprint.com . This article will get updated.

Author: Bharat Chhajer Java Sprint

References:
www.utexas.edu/learn/designprocess/structure.html
www.boxesandarrows.com/view/the_lazy_ia_s_guide_to_making_sitemaps
www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3