2. 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.
3. Many think design is about
making pretty things.
Design is about planning and
shaping things for certain
purposes.
4. Design is about shaping things
to in turn shape the way
a person has an experience.
5. That experience may be
learning, understanding, being
informed, playing, sharing...
Your essay will be experienced
too... But what do you want
people to experience?
6. The following are some of the
principles of web design that
may help you to shape your
hypertext essay.
7. Layout
Hierarchy
The 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?
10. Layout
1024
Screen size
We have to take into account
how large people’s monitors are.
Currently, we can safely say
768
960
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
11. 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.
12. Typography
Typography 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)
13. Typography
Keep 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.
15. V
G
is
Yo en
ua
in u re ca l
for rela n La
ms tio us
Ex ,t n eg ng
hin to e
Th am gs oth nre ua
Th e R ple fro ers to
e eq s: m . E situ
“Lo ui the ve at ge
st” em n ey
w fo w in o
eir r a or re u
d ld. la r h
tio yp
mi Dre n er
ni- am to tex
site
s w oth t d
eb er es
site me ign
di
a
16. Narrative
Information Architecture
In 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.
17. 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_
22. Navigation & Wayfinding
Menus
You 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.
24. Designing your hypertext
Sketch your ideas
You 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.
25. Designing your hypertext
Have an intent
Remember, 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.
26. Designing your hypertext
Have an intent
What 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?
