We here at Digital Qatar have recently been talking a lot about organizational goals, identifying and understanding your audiences – other elements that will impact your web site strategy. Now, I want to switch gears and focus a little on the documentation that will help you communicate your strategy to business stakeholders and technical developers.
Once you have prioritized the site goals/audiences and defined a set of requirements for your website, you are ready to start thinking about what the web site or application will look like and how it will be organized. While the level of fidelity of this type of documentation varies from sketches to well-documented, polished wirefames – most projects will benefit from some form of visual representation of the how the system is organized and what is displayed on each page (see wireframes magazine for examples). The three most common types of documentation are site maps, task flows and wireframes.
Site maps
A site map is a visual representation of the pages within a web site. Site maps are used to show how the content and functionality of a web site are organized. They typically show the relationships between pages and which pages contain dynamic or static content. Dynamic content is content that can be re purposed to several areas of a web site, while static content is only published to an individual page.
Simple Site Map
When creating a site map, consider the following key points:
- Access: If your site has restricted content, or requires users to register, you may want to consider communicating what pages are not available to users who have not signed in.
- Static vs. dynamic: Some pages are static such as a company’s “About Us” page, while other pages such as “list views” or user dashboard (My Profile) create dynamic views of content. It may be helpful to represent this in a site map so that developers can quickly reference which pages have static content and which pages are generated dynamically.
Task Flow Diagrams
Task flow diagrams are a visual representation of paths and processes that users follow as they use a web application. Task flows detail the screen flow and options that are presented to users as they use a system to complete a task. While a site map shows organization of content and functionality, tasks flows illustrate the user paths and key decision points.
Simple Task Flow Diagram for Site Registration
Wireframes
A wireframe is a low-fidelity prototype of a single screen within a web site or application. Wireframes show the layout information: what and where content needs to be presented on each page of the site. It shows persistent elements such as logos, headers, footer and navigation elements. Wireframes serve as the blueprint for designers to work from and apply a style to. Wireframes indicate layout and organization, not the look and feel associated with color, typography, or imagery. Links are typically indicated with blue, underlined text. In short, wireframes serve as a sketch of what a page layout will eventually become in code.
Annotating wireframes:
Wireframes are often annotated to provide further description of what it is represented in the sketch. These annotations sometimes describe how the user arrived at this screen and include notes to the business advocates, visual designers, and developers. The annotations can also describe functional specification about how the system works. For example: “When the user clicks on ‘Sign Up’ button the user is presented the registration form found on page 7 of these wireframes.”
A wireframe for a blog post
For more information on Wireframes, Site maps, and Task Flows:
Where the Wireframes Are: Special Deliverable #3
