Web Design
- Everything is steeped in experience, and every decision you make in shaping your hypertext has an effect on the way a person experiences your work.
- Design is about planning and shaping things for specific purposes and shaping things to, in turn shape the way a person has an experience.
- Design is a deliberate shaping of elements
- Begin to think about what you want people to experience and how you can gain a certain amount of control in the reading of your work. Consider leaving gaps for the audience to fill in…
Layout
Hierarchy
- The order of things on the page
- What do you want people to read first?
- What is the order of importance for information?
- ‘F’ reading pattern
- Do you want order? Perhaps by breaking hierarchy we can subvert traditional ideas. Consider ‘losing’ a bit of control over the medium and use the ideas to send a specific message.
Page/Screen Structure
- Navigational Menu
- Room for Content
- Efficiency
- Communication without friction
- Consistent template to be used across the entire website
- Predictability
Screen Size
- Assume 1024×768 pixels is minimum monitor size
- 960 pixels is the max width but height can be anything
Typography
- The craft of arranging type
- ‘Good’ type is easy to read and easy to scan
- On the web, we only get a few fonts but we can make those fonts look ‘pretty good’.
- Contrast between headings/statements
- Mark out important sections via headings
- Keep line lengths at about 10-15 words across. Too many can be hard t read or just plain daunting.
- give your text breathing room and paragraphs
- Links, by default need to obviously emphasised? However, again, in hypertext hidden links can be used to advantage to express meaning
Visual Language
- You can use genre to situate your hypertext design in relation to others. Even in relation to other media forms, things from the world/culture.
- THIS ALWAYS COMES WITH BAGGAGE!
- Eg) The Requiem for a Dream website or the ‘Lost’ weird mini sites
Narrative
Information Architecture
- In web design the structure that you give to your pages and navigation is important
- Create space for people to experience and find things
- experience is as much about what’s in the pages and what’s in between them
- Consider deliberate disorder!
- structure changes the way a text is read or experienced.
- Hypertext is not a pre ordained experience which is what makes it unique.
Hierarchical VS Non-hierarchical Narrative Structure
- Hierarchical – ordered path, defined categories
- Non Hierarchical – not arranged, no path to follow
- Clusters of information
- Methods of linking, directing people to revisit certain material in order to inspire reflection
- Surprise people in a ‘jarring moment’ in your hypertext essay – shape your hypertext to deliberately break convention and predictability.
Navigation & Wayfinding
- Menus – allow people to get to the various clusters or sections in your hypertext
- Use menus to break a sense of structure and comfort in viewers
Desigining your Hypertext
- Sketch out information architecture
- Visually explore links and narrative
- Use the medium to express ideas
- Have an intention and remember that the decisions you make will affect the experience that people have of your work.
- Consider narrative devices – how do you want people to feel by your decisions – confused, bored, confronted?
Meik’s examples of Hypertext Essays:
Visualisation of tweets that begin with certain words which are categorised - simple idea that joins together a bunch of data which we can all derive individual meanings from. The reader becomes the author of the text.
Chrome Experience – The Wilderness Downtown
Daily Writing – Poetic collection of spaces shared by a community. There is no specific concept or direction.
Network of opera characters – visual representation of the nature of a network which is reveled via your own temporal engagement.
Augmented idea of a linear book – takes us through the physical world a book describes.
Pingback: Wk 12 Lab – Hypertext Essay in Review | Mad Media Musings