INFORMATION ARCHITECTURE IN WEB DESIGN

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?Information architecture is essentially about categorizing and organizing information.• 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 revealthe site’s structure.

Yahoo! home page-- November, 1998

What does IA look like?Designers use diagrams to visualize different snapshots of the information environment.

Concept models

Concept model mapping out commercial elements of a website

Flowcharts

Bacon Flow Chart from clusterflock.org

Site Maps

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

Step 1: Design research (or gathering requirements)

Content• Decide what content will go on all five of your pages.

• Home• Assignments• Page 1• Page 2• Page 3

My site structure• Home

• Welcome• Describe site sections

• About• Bio• Photo?• Interests:

• Puppies• British television

• Contact• Email address• Twitter handle• Form?

• Resume• Work experience• Courses• Skills• Education

• Assignments• Project 01• Project 02• Troubleshooting• Project 03• jQuery• iMovie• Final project

IA in the web design process

• 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

WireframingWith 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 ExamplesTool used: Balsamiq Tool used: Gliffy.com

Wireframe ExamplesTool used: Powerpoint Tool used: Adobe Illustrator

Wireframe ExamplesTool used: OmniGraffle (Mac only) Tool used: Visio (PC only)

Low Fidelity vs. High FidelityTool used: OmniGraffle

Wireframe ExamplesMany 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 problemLet’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

Resources

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

What is CSS?CSS = Cascading Style Sheetshttp://www.w3schools.com/css/demo_default.htm

http://www.ajaxonomy.com

Intro to Stylesheets

HTML CSS

Purpose content Presentation

File type .html .css

Syntax <tag></tag> #div {property:value}

Comments <!– stuff --> /* stuff */

Difference between HTML and CSS

Linking HTML and CSS<head>

<title>John Q. Cat's Resume</title><link rel="stylesheet" type="text/css"

href="resume2.css" /></head>

CSS Syntax

CSS Syntax: Class and IDA class selector specifies a style for many elements.Use a class if you will repeat the style for several items.

An ID selector specifies a style for a single element.Use an ID to set a style for a single element.

.boring { color: black; text-align: left;}

<p class=“boring”>This is a totally boring paragraph, just like every other one.</p>

#special { color: red; font-weight: bold;}

<p id=“special”>This is a really special, one-time-only paragraph!!</p>

CSS

HTML

The <div> and <span> tagsThe <div> tag defines a block of content in your HTML document.The <span> tag define an in-line element in your HTML document.

<div class=“boring”>

<p>I’m a regular ol’ block of content. But now I want to point out something <span id=“special”>very IMPORTANT</span>!</p>

</div>

I’m a regular ol’ block of content. But now I want to point out something very IMPORTANT!

Colors

http://kuler.adobe.com/

http://www.w3schools.com/cssref/css_colornames.asp

Example

body { background-color: #ffffff; color: white; width: 960px; margin: 0 auto;}

Fonts

http://cssfontstack.com

•text-decoration: underline;•font-size: 12pt;•font-weight: bold;•font-family: “Times New Roman”, Georgia, Serif;

Example

h1 { font-size: 16pt;text-transform:

uppercase;font-weight: normal;

}

h2 { font-size: 12pt;

}

HTML Referencing CSS

<div id="header">

<h1>Web Portfolio</h1>

</div>

#header { text-

align:left; }

But how are the two documents linked together

• Go to: http://tinyurl.com/bootcampcss

• Download resume2.html

• Download resume2.css

• <link> tag

CSS Task #1

• Change the background color of the page to brown.

• body {background-

color: brown;}

CSS Task #2

• Change the text color to white.

• body {background-

color: brown;color: white;

}

Let’s try it!

CSS Task #3

• Change the background color of the page to maroon.

Let’s try it!

• Font-family• http://cssfontstack.com/

• Font sizing• Points over pixels

• Formatting• Bold• Italic• Underline-removal• All caps

fonts

Text Transformation Tasks

• Make the H1 16 pt, all caps, and normal weight

• Make the H2 14 pt• Bold the navigation

links, remove the underline, make all caps

CSS• h1 {

font-size: 16pt;text-transform:

uppercase;font-weight: normal;

}• h2 { font-size: 14pt;}• nav ul li a {text-transform: uppercase;text-decoration: none;font-weight: bold;}

Let’s try it!

Box model

• all HTML elements can be considered as boxes.

• in CSS, the term "box model" is used when talking about design and layout.

• the CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

• the box model allows us to place a border around elements and space elements in relation to other elements.

Box model

Box Model Task 1• Add a 3px border on the

image• img {

border:3px;}

Let’s try it!

Box Model Task 2

• Change the bottom margin on H1 to 5px.

• Change the top margin on H1 to 15px.

• Remove the margins on H2s

• h1 {margin-bottom:

5px;margin-top:

15px;}

• h2 {margin:0;

}

Let’s try it!

Floating

a CSS positioning property

Derived from print layout and design

4 valid values for the float property:Left and Right NoneInherit

Float Tasks• Float the About Me

section left• Float the Resume section

right

• float: left;• float: right;

Let’s try it!

• Properties are inherited• h1 {

font-size: 20pt;}

• h1.about { background-color:green;

}

The Cascading part of CSS

HTML CSS

Purpose content Presentation

File type .html .css

Syntax <tag></tag> #div {property:value}

Comments <!– stuff --> /* stuff */

Commenting in CSS

Practice other CSS elements• Go to http://www.w3schools.com/css/css_intro.asp • Or search “w3schools css”

• Learn to use Multiple Classes• http://www.maxdesign.com.au/articles/multiple-classes/

• Columnizer is a JavaScript library that creates column layouts. (If you want a bunch a paragraphs and images in a multi-column layout, use Columnizer. However, if you only need one column, to create sidebar for example, then just use the float property in your css.)• http://welcome.totheinter.net/columnizer-jquery-plugin/

• Learn all about floats. • http://css-tricks.com/795-all-about-floats/

Resources

• A good CSS dictionary.• http://www.elizabethcastro.com/html/extras/cssref.html

• A stand-by resource from everything to browser recognized font families to pseudo classes.• http://www.w3schools.com/

• Color contrast site, to check accessibility contrast levels.• http://snook.ca/technical/colour_contrast/colour.html

• CSS3 Generator, for all your CSS3 needs.• http://css3generator.com/

Resources