Ch' 12 Design And Documentation

1
Ch. 12 - Design And Documentation

• ICS 691 Information Architecture

2
Information Architecture Development
3
Previous Work

• Previous work from research strategy
• Document/data types, content objects, metadata,
  volume, existing structure, business goals,
  funding, politics, culture, technology, human
  resources, audiences, tasks, needs, information
  seeking behavior, experience, vocabularies
• Think, articulate, communicate, test

4
Deliverables

• Designer has to put the work into a clear,
  understandable concrete form
• Communicate between designers
• Present to clients
• Turn it to implementers

5
Problem

• Information can organized and repurposed in
  infinite number of ways
• Architecture multi-dimensional ? two-dimensional
• Present all previous work on a visual medium
• Whiteboard, paper, computer screen
• Limited size

6
Guidelines

• Provide multiple views of an information
  architecture.
• Use a variety of techniques to display different
  aspects of the architecture.
• Develop those views for specific audiences and
  needs.
• For other designers programmers clients boss

7
Blueprints

• Show the relationships between pages and other
  content components.
• Can be used to portray organization, navigation,
  and labeling systems.
• Can be top-down or bottom up.

8
High-Level Blueprints

• A top-down process
• Start with a main page, adding pages, linking
  between pages
• Provide the overview and organization of the
  whole system
• Like a sitemap

9
High-Level Blueprints

• The goal is to provide a big picture
• Dont have to be detailed or self-explanatory
• Accompanied by the designers explanation and
  defense

10
Detailed Blueprints

• Closer to implementation
• More details add complexity to the blueprints
• Modularize blueprints
• Give unique identifiers

11
Detailed Blueprint
12
Detailed Blueprint

• Each component can be further broken down into
  lower level components, with appending subscripts
  as identifiers.

13
Wireframes

• They show how an individual pages look is from
  an architectural perspective
• Layout almost all components menus, labels,
  buttons, links, images, etc.
• Tools to make a wireframe
• Hand scratch on paper/board
• Word, Visio, HTML, etc.

14
What Pages Need Wireframes

• Typically used for important pages, such as main
  pages, major category pages, and other important
  application interfaces.
• Can be used to describe templates that can be
  applied to many pages

15
Example Pages for Creating Wireframes
16
Evolution of Wireframes

• LOW-, MEDIUM-, and HIGH-fidelity wireframes.
• A high-fidelity wireframe is close to a prototype
  page.
• Wireframes should be complete with page numbers,
  page titles, project titles, last modified date,
  etc., professionally developed.

17
A High-Fidelity Wireframe
18
Content Mapping Inventory

• A bottom-up approach, meeting the top-down design
  from blueprints and wireframes.
• Content Inventory Taking a Content Inventory by
  Janice Crotty Fraser. http//www.webtechniques.com
  /archives/2001/10/fraser/

19
Content Mapping

• Breaks down or combines existing content into
  content chunks.
• Maps content chunks unto web pages.
• Sounds like
• Contents are data
• Data binding?

20
(No Transcript)
21
(No Transcript)
22
Content Modeling

• Specifies what types of chunks we are working
  with
• How chunks are related to each other
• What metadata describes those chunks.
• ? chunks, relationships, metadata
• Different types of relationships (p. 296)

23
When to Do Content Modeling

• p. 298
• Content Management System (CMS)
• Sounds like
• Semantic Data Model, Conceptual Model for
  databases
• ? DBMS