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.

1. INFORMATION ARCHITECTURE MEETS WEB
DESIGN
Instructors: Robert and Caris

2. Where IT Lab Bootcamp fits in the design
process

3. “
Information Architecture
Information architecture (IA) is
the art of expressing a model
or concept of information used
in activities that require explicit
details of complex systems.
-Wikipedia

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

7. Concept models
Concept model mapping out commercial elements of a website

8. Flowcharts
Bacon Flow Chart from clusterflock.org

9. Site Maps
Site map of the Research section of the Victoria University Library homepage

10. Wireframes

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

14. Site Map Example: Portfolio

15. Site Map Example: Portfolio
Site map for Rob Yurksaitis’ Portfolio

16. Site Map Example: Portfolio

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

22. Wireframe Examples
Tool used: Balsamiq Tool used: Gliffy.com

23. Wireframe Examples
Tool used: Powerpoint Tool used: Adobe Illustrator

24. Wireframe Examples
Tool used: OmniGraffle (Mac only) Tool used: Visio (PC only)

25. Low Fidelity vs. High Fidelity
Tool used: OmniGraffle

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

28. One solution…
Tool used: Balsamiq

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.

30. One solution…
Tool used: Balsamiq

31. Resources
• More web tools:
http://mashable.com/2010/07/15/wireframing-tools/