Portfolios: Organisation and NavigationLon Barfield

Organisation and Navigation

HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes

Organisation and Navigation

HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching 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 CodexIn 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

YasuakiOnishi

HOTGLUE has restrictions

Find out what you can doFind out what you can’t do

Be creative with what you can do

Organisation and Navigation

HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes

House design

Interconnections between rooms...

Think of the user

The userThe users tasksThe users contexts

Organisation and Navigation

HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching 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 togetherNavigation: Helping the user get around itSketching and wireframes

Sketch!

Don’t be afraidUse sketches to thinkDoesn’t matter if only you can understand themKeep them as documentation (“Aha. I’ve done that before!”)

Sketches are prototypes

‘Kitchen’ is fine in house diagramsFor digital media we need more detailBut, stick to the bare essentials!As with the house diagrams: Sketch, show interconnections and imagine it in use

Organisation and Navigation

HOTGLUE Creativity within restrictions

Organising Users, tasks, contexts

Navigation Supporting tasks

Sketching Don’t be afraid