| OCC Home | IT Home | Back to Web Construction |

Web Development Flowchart

This web development flowchart illustrates how to implement a Web Site in the following order:

Determine audience
· Identify Target audience (For existing students, potential students, parents, staff or potential corporate sponsors, etc.)
· Identify any technology issues with your target audience (Disabilities, connection speeds, etc.)

Content
· Determine major Goals and all topics
· Anticipate what questions your visitors will have when they come to your Web site
· Perform necessary research (from Internet, students and colleague)
· What other services do you want the site to provide? (Links to other web pages of interest, provide downloadable files, or want to allow email enquiries to be sent
direct to your email account.)

Classification and Categorization
· According to relationship, divide topics into the main groups, or subgroups
· The home page should branch to a maximum of 5 or 7 main categories only.
· Clear Labeling: using short and descriptive phrases to summarize the features of the groups.

Information architecture
· Create a web site flowchart
· Considering depth of navigation: The primary structure for web information is a hierarchy. The hierarchy should be as few levels deep as possible, consistent with
clear presentation of the information.
· Considering connectivity: Links must be provided between the different branches to aid navigation and usability.
· Considering consistency: Each page should be based on a template containing a standard set of links.
· Avoid Redundancy

Navigation
· Compare other sites for examples
· Determine your navigational requirements (menu, global links and external links)
· Write down the advantages and disadvantages about each navigation method
· Determine necessary technology and programming needs (Searching which methods is the best: Frames, mouse over, dynamic menu or image map).

Layout
A. How to decide Layout
1. Look at web sites with similar goals or functions
2. Evaluate potential templates and clipart available (Be careful about copyright)
3. Research and learn web design strategies from workshops, online materials, courses, and books
4. Layout elements on a grid to divide a web page into rectangular sections in which the heading, images and text will go.

B. Layout Tips:
Maintain consistency among the pages
1. Using a similar layout
2. Using consistent navigation. Keep the navigational aids in the same place on each page, with the same style buttons or icons.
3. Using the same color scheme
4. Using the same backgrounds
5. Page elements, such as titles, text, graphic, who to contact and update information, need to be similar in appearance from page to page.

Divide into Work Teams
· Break up tasks and assign to appropriate team members: for exapmle, Graphic design, coding and Content writing
· Teams should meet regularly and be aware of other teams' responsibilities

Prototype

User Testing
· Check pages with different Browsers
· Get users feedback

Publishing
· According to the category, create the directory
· Creating a directory for all images and photos
· Make sure all the file paths are correct
· Make sure all the links work
· Make sure all images are showing on pages
· Make sure no content is misplaced
· Make sure all forms functioning

Maintenance and Update
· Update dated information Calendar of events, schedules, etc.
· Checks up all the links working? Forms functioning?