1. Designing Online
November 11th 2008

2. Writing Prompt
What is your favorite web site and why do
you like it?

3. Why Study Visual Design?
Connecting visual design to our writing
 Visuals are used to support words
 Magazines
 Newspapers
 Advertisements
 Web sites

4. The Purpose of Visuals
 To say what words may not be able to
 Deliver spatial information through
representations of space (i.e. floor plans,
maps, etc.)
 Represent statistical relationships
 Immediate impact—shock value
 Emphasize our words

5. Important Elements of Visuals
 Emphasis
 Balance
 Contrast
 Repetition
 Point of View
 Motion
 Details

6. Emphasis
 Words
 Type size
 Italics
 Bold
 Underlined
 Headings
 Images
 Composition
 Arrangement
 Directs readers’
attention where
the designer wants it to go

7. Balance
 Words
 Presenting more
than one position
on the issue
 Unbiased
 Images
 Placement of objects
 Harmonious image placement

8. Contrast
 Words
 Comparison
 Highlight differences
 Images
 Achieved by:
• Color
• Size
• Shape
• Number and position

9. Repetition
 Words
 Repetition through style and language
 Example: if you use a heading labeled I we
will expect to see a heading II and III and so
on
 Images
 Visual patterns
 Increases emphasis

10. Design With A Purpose
 If you do not know
the purpose of the
image don’t use it
 Does it illustrate a
concept?
 Highlight an important
point?
 Show something that
is hard to explain in
words alone?
 example

11. When and How to Use Visuals
 Placement of image
 Is it placed closely to the relevant detail or
point in writing?
 Does it capture the readers’ attention in the
way that you want it to?
 Are the important parts clearly visible?
 Provide informative captions for the
images and graphics you use and refer to
them in your text

12. Types of Visuals
 Tables  Determine which
visual will work best
 Bar Graphs for your PURPOSE
 Line Graphs
 Pie Charts
 Photographs
 Video

13. Designing a Wiki Web Site
 Wiki software: pbwiki
 Free, easy-to-use
 What you see is what
you get
 Though pbwiki is an
easy software, it does
not teach you how to
create an effective
web site
 That is your job as the
writer!

14. Designing a Wiki Web Site
Web sites are not read in order from page to
page.
Visitors must be able to move through your
wiki according to their own interests

15. Techniques for Good Design
 Give your wiki a visual theme
 Make the look and feel of your wiki consistent
 A web site does not need loud background or
flashy animations to achieve a visual theme
 Use colors for the text, headings, links, and
background to create a consistent visual
theme

16. Techniques for Good Design
 Keep the visuals simple
 Uncomplicated sites are user friendly, load
faster and, if designed well, more elegant than
image-overloaded sites
 Too many icons, bullets, and other
embellishments may make the wiki appear
cluttered
 Strike a balance with your visuals!
 Example

17. Techniques for Good Design
 Make the text readable—no overly long
sections of text
 Divide information into chunks
 Use short paragraphs when possible
 Use white space to separate elements and to
give a visual relief
 Avoid dark backgrounds—makes text hard to
read
 Example

18. Techniques for Good Design
 Use your side bar!
 Navigation is important to the web
 Make it easy
 Provide links in your side bar
 Make sure each wiki page can take the visitor
back home
http://www.english131-12.pbwiki.com/

19. Designing Your Wiki
 Determine Your Structure
 How will you organize your writing?
 Which main points need separate wiki pages?
 How many links will you need and where will
these links go?
 What information will you put in the sidebar?
 What is your navigational scheme?
• In other words, how will readers get from page
to page and back again to the home page?

20. Think About it…
 As a group, answer the following questions. Write
down your answers.
 What personality do you want your wiki to
project?
 What look or feel do you want your wiki to
possess?
 What elements of design will you use?
 Who is your intended audience? How can you
reach them through the visual design of the wiki?
 What is your central purpose on the wiki? How
can you enhance your purpose through visuals?