Portfolios:
Organisation and
Navigation
Lon Barfield
Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes
Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes
HOT GLUE
“making a website with HOTGLUE is just as
easy as making a paper collage!”
Flexibility Vs Simplicity
“Just one click to create your website”
OR Pixel by pixel specification…
Both approaches have good and bad points
“It’s great, but now I want to do X, and I can’t…”
“I want to do X, but I don’t know where to start”
HOTGLUE. Simple - no design!
“This structural transparency of HOTGLUE UI
permits its users to disregard any separation of
Content and Design and /ultimately/ to remove
Design as such from the creative practice.”
Remember last week: “It would be nice to
publish data without layout issues”
The Hot Glue Design Codex
In editing mode pages are rendered identically to viewing
mode.
No menus or other parts of UI shall be visible without user's
request.
Any newly created HOTGLUE page is always blank.
No menu or interface shall interfere with page elements or
change their position.
Restrictions...
“Because of the structure of HOTGLUE there is
no classic undo-functionality.”
No Undo???
Being creative within restrictions
Think of real world hot-glue (1971 patent)
Not just for gluing
Yasuaki
Onishi
HOTGLUE has restrictions
Find out what you can do
Find out what you can’t do
Be creative with what you can do
Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes
House design
Interconnections between rooms...
Think of the user
The user
The users tasks
The users contexts
Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes
Navigation
What will they want to do with the portfolio?
How can you help them do it?
Tasks and sequences of tasks
Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes
Sketch!
Don’t be afraid
Use sketches to think
Doesn’t matter if only you can understand them
Keep them as documentation (“Aha. I’ve done
that before!”)
Sketches are prototypes
‘Kitchen’ is fine in house diagrams
For digital media we need more detail
But, stick to the bare essentials!
As with the house diagrams: Sketch, show
interconnections and imagine it in use
Organisation and Navigation
HOTGLUE
Organising
Navigation
Sketching

Creativity within restrictions
Users, tasks, contexts
Supporting tasks
Don’t be afraid

Organisation and navigation