Skip Ribbon Commands
Skip to main content
PLANNING
 

 Site Development Flowchart

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

1-circle.png

Determine audience

  • Identify Target audience. Identify any technology issues with your target audience (Disabilities, connection speeds, etc.)
 
circle-2.png

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 and colleagues)
  • 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.)
circle-3.png

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

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

 

 

 

circle5.png

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).
circle6.png

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.

circle7.png

User Testing

  • Check pages with different Browsers
  • Get users feedback

circle8.png

Publishing 

        • According to the category, create the directory
        • Creating a directory for all images and photos
        • 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
            •  

Last, but not the least important...
 
Maintenance and Update
 
  • Update dated information Calendar of events, schedules, etc.
  • Checks up all the links working? Forms functioning?

 

 How to Create Website Wireframes

 
example_wireframe.jpg
 
 
 
Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.
 
Using wireframes is a great way to begin a web site project, as it allows you to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your needs.