info 330 wireframes and templating. how to analyze a web site sites have site-level layout and look...
TRANSCRIPT
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