This document discusses information architecture (IA) and how it relates to web design. It defines IA as organizing and structuring information, like with libraries. Early websites made their IA very visible through home page maps and categories. Designers use diagrams like concept models, flowcharts, and site maps to visualize the IA. These inform the design process, which involves research, generating design ideas through IA diagrams, and wireframing pages. Wireframes depict page layout and functionality without graphics. They connect IA to visual design and allow rapid prototyping. The document provides examples of low- and high-fidelity wireframes using different tools, and demonstrates wireframing a homepage and resume page to specified requirements.
4. What does that mean?
IA is essentially about categorizing and organizing
information.
• Like with libraries and archives, web environments need
structure to insure a user can find information easily and
efficiently.
• A key element to practicing IA is visualizing
information architectures in the form of diagrams.
5. What does IA look like?
Early websites offered a
pretty explicit view of their
architecture.
Home pages served as
maps, visibly grouping
categories with their sub-
categories to reveal
the site’s taxonomy.
Yahoo! home page-- November, 1998
6. What does IA look like?
Designers use diagrams to visualize different snapshots of
the information environment.
Some of the more common include . . . .
11. IA in the web design process
Before you start designing you need to . . .
• Account for all of your content
• Document user and stakeholder needs
• Understand the technological parameters
Step 1: Design research (or gathering
requirements)
12. IA in the web design process
All of these details are organized in a design document.
With these requirements, an IA can begin designing the
structure of the site.
The design document is a combination of what and how.
Step 1: Design research
13. IA in the web design process
• With the design document as a guide, visualize the web
architecture through IA diagrams
• A key step is building a site map, or “a visual
representation of the relationships between different
pages on a web site.” –Brown, Communicating Design
Step 2: Generating design ideas
17. Site Map Example: Portfolio
Site map for L. Warren Douglas’ Portfolio
18. Site Map Example: Sharepoint intranet
Top-level site map for a Sharepoint intranet
19. Wireframing
With the design document and a basic site structure it’s
time to wireframe out the site.
…which leads us to the second part of this presentation!
20. Wireframes
• Definition (via wikipedia): visual guide that represents the
skeletal framework of a website. Depicts page layout or
arrangement of website’s content, including interface
elements and navigational systems and how they work
together.
• Usually lacks style, color or graphics, since the main focus
lies in functionality, behavior and priority of content.
• What a screen does, not what it looks like
21. Why wireframe?
• Wireframes connect information architecture to visual
design
• Wireframes help you figure out how your site should work
and relationships between the pages
• Wireframes allow you to rapidly prototype pages to try
things out before you commit to a design or layout
26. Wireframe Examples
Many times paper (or whiteboard) is
the easiest, fastest and most
accessible tool for wireframing.
Advantages: fast, cheap, easy to
iterate (use pencil, not pen!)
Disadvantages: can’t share with
teammates via web very easily, issues
with interactions are harder to discern
when not in an interactive
environment.
Tool used: Paper and pencil
27. Example problem
Let’s work this one out together!
We’re going to wireframe out what the homepage of your
portfolio website might look like, given the requirements
below:
1. You want to include the following links in your global
navigation (which appears on every page of your site):
• Home
• Portfolio
• Resume
• Contact
2. You want your blog updates to be featured on the
homepage.
3. You have determined that you will install website
search functionality so that users can search through
your site. Be sure that this function is included in your
wireframe!
4. You want your contact information (name, phone,
email) and your photograph or logo to be prominent
on the site.
Home
Resume Portfolio Contact
Item 1
Item 2
Item 3
29. Example problem
Home
Resume Portfolio Contact
Item 1
Item 2
Item 3
Now try it on your own!
On paper, wireframe out what the resume of your
portfolio website might look like, given the same
requirements:
1. You want to include the following links in your
global navigation (which appears on every page
of your site):
• Home
• Portfolio
• Resume
• Contact
2. You have determined that you will install website
search functionality so that users can search
through your site. Be sure that this function is
included in your wireframe!
3. You want your contact information (name,
mailing address, email) and your photograph or
logo to be prominent on the site.