Designing Online
  November 11th 2008
Writing Prompt
What is your favorite web site and why do
                you like it?
Why Study Visual Design?
         Connecting visual design to our writing

 Visuals are used to support words
     Magaz...
The Purpose of Visuals
 To say what words may not be able to
 Deliver spatial information through
  representations of s...
Important Elements of Visuals
 Emphasis
 Balance
 Contrast
 Repetition
 Point of View
 Motion
 Details
Emphasis
 Words
     Type size
     Italics
     Bold
     Underlined
     Headings
 Images
     Composition
    ...
Balance
 Words
   Presenting more
   than one position
   on the issue
   Unbiased




 Images
     Placement of obje...
Contrast
   Words
       Comparison
       Highlight differences

   Images
       Achieved by:
         •   Color
  ...
Repetition
 Words
     Repetition through style and language
     Example: if you use a heading labeled I we
      will...
Design With A Purpose

   If you do not know
    the purpose of the
    image don’t use it
   Does it illustrate a
    c...
When and How to Use Visuals
 Placement of image
     Is it placed closely to the relevant detail or
      point in writi...
Types of Visuals
 Tables              Determine which
                       visual will work best
 Bar Graphs         ...
Designing a Wiki Web Site
   Wiki software: pbwiki
       Free, easy-to-use
       What you see is what
        you get...
Designing a Wiki Web Site

Web sites are not read in order from page to
                    page.

Visitors must be able t...
Techniques for Good Design
 Give your wiki a visual theme
     Make the look and feel of your wiki consistent
     A we...
Techniques for Good Design
 Keep the visuals simple
     Uncomplicated sites are user friendly, load
      faster and, i...
Techniques for Good Design
 Make the text readable—no overly long
 sections of text
     Divide information into chunks
...
Techniques for Good Design
 Use your side bar!
     Navigation is important to the web
     Make it easy
     Provide ...
Designing Your Wiki
 Determine Your Structure
     How will you organize your writing?
     Which main points need sepa...
Think About it…
   As a group, answer the following questions. Write
    down your answers.

       What personality do ...
Upcoming SlideShare
Loading in …5
×

Designing Online

356 views

Published on

Published in: Business, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
356
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing Online

  1. 1. Designing Online November 11th 2008
  2. 2. Writing Prompt What is your favorite web site and why do you like it?
  3. 3. Why Study Visual Design? Connecting visual design to our writing  Visuals are used to support words  Magazines  Newspapers  Advertisements  Web sites
  4. 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. 5. Important Elements of Visuals  Emphasis  Balance  Contrast  Repetition  Point of View  Motion  Details
  6. 6. Emphasis  Words  Type size  Italics  Bold  Underlined  Headings  Images  Composition  Arrangement  Directs readers’ attention where the designer wants it to go
  7. 7. Balance  Words  Presenting more than one position on the issue  Unbiased  Images  Placement of objects  Harmonious image placement
  8. 8. Contrast  Words  Comparison  Highlight differences  Images  Achieved by: • Color • Size • Shape • Number and position
  9. 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. 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. 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. 12. Types of Visuals  Tables  Determine which visual will work best  Bar Graphs for your PURPOSE  Line Graphs  Pie Charts  Photographs  Video
  13. 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. 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. 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. 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. 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. 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. 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. 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?

×