Planning is Everything!
Step 1: The first step in designing a new website is determining the Site Architecture or Wireframe for your site. This is the framework from which your site is built. It is basically the series of folders, files (HTML and others) and links between the two that create the site which is displayed through your browser. Some sites are small and have no need for multiple directories (or folders), others are extensive with multiple directories and documents. As the site editor, you will be the main decision maker of how this site is structured. You know your content best. Planning this in advance is key to a well organized and clean site that is easy for visitors to follow and loads quickly. The section called Site Architecture provides detailed diagrams and further description of how this template is structured. A wireframe can be as simple as an outline of sections and subsections in your site. See below for a sample of a simple wireframe.*
Step 2: After determining your directory structure, you will need to contact IT Web Services to help establish these for you on the staging server. These directories (if any) are closely tied to the navigation you see in the light blue bar above. In the case of this site, the names for the main sections of the site are: Introduction, Getting Started, Site Architecture, Contribute Usage, Going Live, and Design Tips. These names and links are associated with the _sitenav.html file that Web Services will be responsible for posting on the server in order to get this navigation to function.
Step 3: Contact Web Services to establish a Contribute Key which gives you access to edit your site in the future. Web Services will establish this key for you and set you up with Contribute traning (see Contribute Usage)
Step 4: Start populating your site using Contribute. For full details, see Contribute Usage. Test your site (see Going Live -> Testing>
Step 5: Notify Web Services and we'll help with launching the new site.
Simple wireframe. Each main bullet represents a "top level" of your site; each indentation represents a subsection.
- Home
- About Us
- Programs
- Leadership
- Mentoring
- Training
- Mediation
- Outreach
- Services
- Contact Us
- Staff
- Main
- Steering Committee