First year Digital Media studio. Design and build of a portfolio using HOTGLUE. Basics of structure and navigation design. Introduced with a look at designing within system restraints with real hotglue!

1. Portfolios:
Organisation and
Navigation
Lon Barfield

2. Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes

3. Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes

4. HOT GLUE
“making a website with HOTGLUE is just as
easy as making a paper collage!”

5. 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”

6. 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”

7. 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.

8. Restrictions...
“Because of the structure of HOTGLUE there is
no classic undo-functionality.”
No Undo???

9. Being creative within restrictions
Think of real world hot-glue (1971 patent)

13. Not just for gluing
Yasuaki
Onishi

17. HOTGLUE has restrictions
Find out what you can do
Find out what you can’t do
Be creative with what you can do

18. Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes

19. House design
Interconnections between rooms...

20. Think of the user
The user
The users tasks
The users contexts

21. Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes

22. Navigation
What will they want to do with the portfolio?
How can you help them do it?
Tasks and sequences of tasks

23. Organisation and Navigation
HOTGLUE (CMS)
Organising: gathering stuff together
Navigation: Helping the user get around it
Sketching and wireframes

24. 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!”)

25. 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

26. Organisation and Navigation
HOTGLUE
Organising
Navigation
Sketching
Creativity within restrictions
Users, tasks, contexts
Supporting tasks
Don’t be afraid