Organisation and navigation
-
Upload
lon-barfield -
Category
Design
-
view
226 -
download
3
description
Transcript of Organisation and navigation
![Page 1: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/1.jpg)
Portfolios: Organisation and NavigationLon Barfield
![Page 2: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/2.jpg)
Organisation and Navigation
HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes
![Page 3: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/3.jpg)
Organisation and Navigation
HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes
![Page 4: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/4.jpg)
HOT GLUE
“making a website with HOTGLUE is just as easy as making a paper collage!”
![Page 5: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/5.jpg)
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”
![Page 6: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/6.jpg)
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”
![Page 7: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/7.jpg)
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.
![Page 8: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/8.jpg)
Restrictions...
“Because of the structure of HOTGLUE there is no classic undo-functionality.”No Undo???
![Page 9: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/9.jpg)
Being creative within restrictions
Think of real world hot-glue (1971 patent)
![Page 10: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/10.jpg)
![Page 11: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/11.jpg)
![Page 12: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/12.jpg)
![Page 13: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/13.jpg)
Not just for gluing
YasuakiOnishi
![Page 14: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/14.jpg)
![Page 15: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/15.jpg)
![Page 16: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/16.jpg)
![Page 17: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/17.jpg)
HOTGLUE has restrictions
Find out what you can doFind out what you can’t do
Be creative with what you can do
![Page 18: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/18.jpg)
Organisation and Navigation
HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes
![Page 19: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/19.jpg)
House design
Interconnections between rooms...
![Page 20: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/20.jpg)
Think of the user
The userThe users tasksThe users contexts
![Page 21: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/21.jpg)
Organisation and Navigation
HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes
![Page 22: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/22.jpg)
Navigation
What will they want to do with the portfolio?How can you help them do it?Tasks and sequences of tasks
![Page 23: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/23.jpg)
Organisation and Navigation
HOTGLUE (CMS)Organising: gathering stuff togetherNavigation: Helping the user get around itSketching and wireframes
![Page 24: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/24.jpg)
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!”)
![Page 25: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/25.jpg)
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
![Page 26: Organisation and navigation](https://reader034.fdocuments.in/reader034/viewer/2022051513/54564187b1af9fb66e8b4e6a/html5/thumbnails/26.jpg)
Organisation and Navigation
HOTGLUE Creativity within restrictions
Organising Users, tasks, contexts
Navigation Supporting tasks
Sketching Don’t be afraid