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