info 330 wireframes and templating. how to analyze a web site sites have site-level layout and look...

INFO 330 Wireframes and Templating

How to analyze a Web site

Sites have• Site-level layout and look• Pages. Pages have– Page-level layout look– Page areas. Areas have• Layout and look• Content

– Branding– Info items– Navigation– Functionality

The Page

A Page

Page areas

Header

Nav ItemThe Page

The

item

are

a ha

s a

view

of a

n ite

m o

f inf

oNarrative full

view

Photo full view

Photo partial view

IndexesHierarchies

The

Nav

are

a co

ntai

ns n

avig

ation

Wireframes abstract and standardize page design

Content

Banner

Footer

Local nav

Global nav

Templates implement wireframes

Standardizing the look & feel and layout of• The site frame (unchanging over the whole

site)• Site sections• Page types• Page areas– Info items – Navigation

A very simple wireframe

Item area goes here

Banner goes here

Nav area goes here

This layout in HTML Tables

This layout in HTML Divs

This layout in templates (XSLT)

You can’t (and don’t want to) avoid templatesIn Web authoring

systems

Dreamweaver

Flash

FrontPage

Nvu

In Server SystemsActive Server Pages (ASP)eRubyColdFusion Markup Language (CFM)JavaServer Pages (JSP)Active PerlPHPOpenACS

In Browser SystemsClosure TemplatesEJSJennerjQote2jTemplatesMjt.TemplateMustachePureTempo JSON templates

http://en.wikipedia.org/wiki/Web_template_system

Templates assume structure

• Layout structure– Sites Sections Pages Areas

• Content structure– Info types: structured info– Info items: instances that obey the structure

• Access Structure– Represented in the database– Rendered as standard widgets

The essence of templating

• What is the same? Put it in the template– Layout– Styling– Labeling

• What is different? Fill it into the template– Values under the labels– Parameters for functions– Layout, styling, and labeling variations

Let’s do some

http://jobview.monster.com

/Information-Architect-Mobile-Job-Houston-TX-109130859.aspx

Global NavPreferred path A

Job

Preferred B

Preferred C

Functions

Possible paths

Company Name

Overview

Duties

Requirements 1

Requirements 2

Job title

Prep for your Wireframe designShow hierarchical nav

Include top search termsWhere do you get these from?

Include inbound links (previous page and associated pages)

Don’t just copy, CREATE!

Include outbound links (preferred paths and possible paths)

Flag functions, but don’t worry about them

Item Area

Representing nav and items

Jobs - Day labor - Part time - Full time - CareerTraining - Courses - Workshops - CounselingPreparation - Searching - Applying - Interviewing

|Job Seekers | Employees | Claimants|

Logo Site title and affiliations

Contact and copyright info

localNav

Global Nav

Want a challenge?

• Propose a faceted classification rather than a hierarchy

Company Name

Overview

Duties

Requirements 1

Requirements 2

Job titleJob Summary

Company

Location

Industries

Job Type

Education level

Career level

Job code

About the Job

Summary

Essential Duties/ Responsibilities

Education

Experience