Upload
carishurd
View
128
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
INFORMATION ARCHITECTURE MEETS WEB DESIGN
Instructors: Robert and Caris
Where IT Lab Bootcamp fits in the design process
“
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
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.
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
What does IA look like? Designers use diagrams to visualize different snapshots of the information environment.
Some of the more common include . . . .
Concept models
Concept model mapping out commercial elements of a website
Flowcharts
Bacon Flow Chart from clusterflock.org
Site Maps
Site map of the Research section of the Victoria University Library homepage
Wireframes
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)
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
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
Site Map Example: Portfolio
Site Map Example: Portfolio
Site map for Rob Yurksaitis’ Portfolio
Site Map Example: Portfolio
Site Map Example: Portfolio
Site map for L. Warren Douglas’ Portfolio
Site Map Example: Sharepoint intranet
Top-level site map for a Sharepoint intranet
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!
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
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
Wireframe Examples Tool used: Balsamiq Tool used: Gliffy.com
Wireframe Examples Tool used: Powerpoint Tool used: Adobe Illustrator
Wireframe Examples Tool used: OmniGraffle (Mac only) Tool used: Visio (PC only)
Low Fidelity vs. High Fidelity Tool used: OmniGraffle
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
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
One solution… Tool used: Balsamiq
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.
One solution… Tool used: Balsamiq
Resources
• More web tools: http://mashable.com/2010/07/15/wireframing-tools/