• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Design for Hypertext
 

Web Design for Hypertext

on

  • 4,140 views

 

Statistics

Views

Total Views
4,140
Views on SlideShare
1,276
Embed Views
2,864

Actions

Likes
0
Downloads
5
Comments
0

5 Embeds 2,864

http://www.sethkeen.net 1554
http://raws.adc.rmit.edu.au 1295
http://media.rmit.edu.au 13
http://translate.googleusercontent.com 1
http://www.spokenword.org 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Design for Hypertext Web Design for Hypertext Presentation Transcript

    • Web Design With Miek
    • 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.
    • Many think design is about making pretty things. Design is about planning and shaping things for certain purposes.
    • Design is about shaping things to in turn shape the way a person has an experience.
    • That experience may be learning, understanding, being informed, playing, sharing... Your essay will be experienced too... But what do you want people to experience?
    • The following are some of the principles of web design that may help you to shape your hypertext essay.
    • 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?
    • Layout Page/screen structure Templating your layouts can be useful to create predictable order Make things easy to find, like navigation
    • Layout
    • 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
    • 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.
    • 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)
    • 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.
    • Typography Oh, and never use Comic Sans. Unless it’s ironic like this!
    • 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
    • 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.
    • 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_
    • Narrative: Hierarchy Non-hierarchical
    • Narrative: Clusters
    • Narrative: Re-visit ideas Allow people to explore
    • Narrative: Surprise people
    • 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.
    • Navigation & Wayfinding Category > Idea
    • 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.
    • 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.
    • 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?