web design for hypertext
TRANSCRIPT
![Page 1: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/1.jpg)
Web DesignWith Miek
![Page 2: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/2.jpg)
Everything we use is accompanied by an experience.
Every decision that do or don’t make in shaping your hypertext has an effect on the way a person may experience it.
![Page 3: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/3.jpg)
Many think design is about making pretty things.
Design is about planning and shaping things for certain purposes.
![Page 4: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/4.jpg)
Design is about shaping things to in turn shape the way a person has an experience.
![Page 5: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/5.jpg)
That experience may be learning, understanding, being informed, playing, sharing...
Your essay will be experienced too... But what do you want people to experience?
![Page 6: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/6.jpg)
The following are some of the principles of web design that may help you to shape your hypertext essay.
![Page 7: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/7.jpg)
LayoutHierarchyThe order of things on the page/screen
What do you want people to read first?
What is the order of importance for information?
People read in an ‘F’ pattern
Do you want any order at all?
![Page 8: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/8.jpg)
LayoutPage/screen structureTemplating your layouts can be useful to create predictable order
Make things easy to find, like navigation
![Page 9: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/9.jpg)
Layout
![Page 10: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/10.jpg)
LayoutScreen sizeWe have to take into account how large people’s monitors are.Currently, we can safely say that 1024 x 768 pixels is the minimum.
So, to stay within that,we say 960px is the max width, but height can be anything
1024
960
768
![Page 11: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/11.jpg)
TypographyThe craft of arranging typeGood 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.
![Page 12: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/12.jpg)
TypographyTypography is all about contrast...
About mAking heAdings obvious thAt they Are heAdings
Links obviously links, and emphasised things obviously emphasised.(But don’t overdo it)
![Page 13: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/13.jpg)
TypographyKeep line lengths at about 10-15 words across. Too many can be hard to read, or just plain daunting.
Put space between your paragraphs, give your text room to breathe.
Be careful about white text on black backgrounds. It can get hard to read for sustained periods of time. Good for headings, not good for body text.
![Page 14: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/14.jpg)
TypographyOh, and never use Comic Sans.
Unless it’s ironic like this!
![Page 15: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/15.jpg)
Visual
Lang
uage
Genre
You c
an us
e genr
e to sit
uate y
our h
yperte
xt desi
gn
in rela
tion to
other
s. Even
in rela
tion to
other
med
ia
forms, t
hings
from the
world
.
Example
s:
The Re
quiem
for a
Drea
m web
site
The “Lo
st” weird
mini-
sites
![Page 16: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/16.jpg)
NarrativeInformation ArchitectureIn web design, the structure that you give to your pages an navigation is called the “information architecture.”
Like architecture, it is about creating spaces for people to experience and find things.
Experience is as much about what’s in the pages as what’s between them.
![Page 17: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/17.jpg)
Narrative:The way you structure your hypertext network can change the way it is read or experienced...
Like Adrian pointed out, hypertext allows us to break linearity, and create something that can be experienced in many different ways_
![Page 18: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/18.jpg)
Narrative:
Hierarchy Non-hierarchical
![Page 19: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/19.jpg)
Narrative:
Clusters
![Page 20: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/20.jpg)
Narrative:
Re-visit ideasAllow people to explore
![Page 21: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/21.jpg)
Narrative:
Surprise people
![Page 22: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/22.jpg)
Navigation & WayfindingMenusYou can use menus to allow people to get to the various clusters or sections in your hypertext.
Menus can also communicate “where” a person is in your text
But be aware of how it affects the experience.
![Page 23: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/23.jpg)
Navigation & Wayfinding
Category > Idea
![Page 24: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/24.jpg)
Designing your hypertextSketch your ideasYou can use a pen and paper to sketch out an information architecture for your hypertext.
What ideas go where? How do they link together?
That sketch can inform the way that you write.
As you write, the sketch of your structure will change as well.
![Page 25: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/25.jpg)
Designing your hypertextHave an intentRemember, the decisions you make affect the experience that people have.
It is good to have an intention, like what kind of experience you would like to create. For instance, you may want to explore a topic in detail.
You may design your hypertext to give multiple viewpoints on a topic.
![Page 26: Web Design for Hypertext](https://reader036.vdocuments.site/reader036/viewer/2022062313/55a4f2281a28ab38038b4668/html5/thumbnails/26.jpg)
Designing your hypertextHave an intentWhat kind of experience do you want people to have?
Will it be fast-paced? Slow? Why?
Do you want people to feel confronted, bored, confused?