Designing Online

Designing OnlineDesigning Online

November 11th 2008November 11th 2008

Writing PromptWriting Prompt

What is your favorite web site and why do What is your favorite web site and why do you like it? you like it?

Why Study Visual Design?Why Study Visual Design?Connecting visual design to our writingConnecting visual design to our writing

Visuals are used to support wordsVisuals are used to support words MagazinesMagazines NewspapersNewspapers AdvertisementsAdvertisements Web sitesWeb sites

The Purpose of VisualsThe Purpose of Visuals

To say what words may not be able toTo say what words may not be able to Deliver spatial information through Deliver spatial information through

representations of space (i.e. floor plans, representations of space (i.e. floor plans, maps, etc.)maps, etc.)

Represent statistical relationshipsRepresent statistical relationships Immediate impact—shock valueImmediate impact—shock value Emphasize our wordsEmphasize our words

Important Elements of VisualsImportant Elements of Visuals

EmphasisEmphasis BalanceBalance ContrastContrast RepetitionRepetition Point of ViewPoint of View MotionMotion DetailsDetails

EmphasisEmphasis WordsWords

Type sizeType size Italics Italics Bold Bold UnderlinedUnderlined HeadingsHeadings

ImagesImages CompositionComposition ArrangementArrangement Directs readers’ Directs readers’

attention where attention where

the designer wants it to gothe designer wants it to go

BalanceBalance

WordsWords Presenting more Presenting more than one positionthan one position on the issueon the issue UnbiasedUnbiased

ImagesImages Placement of objectsPlacement of objects Harmonious image placementHarmonious image placement

ContrastContrast

WordsWords ComparisonComparison Highlight differencesHighlight differences

ImagesImages Achieved by:Achieved by:

• Color Color • SizeSize• ShapeShape• Number and positionNumber and position

RepetitionRepetition

WordsWords Repetition through style and languageRepetition through style and language Example: if you use a heading labeled I we Example: if you use a heading labeled I we

will expect to see a heading II and III and so will expect to see a heading II and III and so onon

ImagesImages Visual patterns Visual patterns

Increases emphasisIncreases emphasis

Design With A PurposeDesign With A Purpose

If you do not know If you do not know the purpose of the the purpose of the image don’t use itimage don’t use it

Does it illustrate a Does it illustrate a concept? concept?

Highlight an important Highlight an important point? point?

Show something that Show something that is hard to explain in is hard to explain in words alone? words alone?

example example

When and How to Use VisualsWhen and How to Use Visuals

Placement of imagePlacement of image Is it placed closely to the relevant detail or Is it placed closely to the relevant detail or

point in writing?point in writing? Does it capture the readers’ attention in the Does it capture the readers’ attention in the

way that you want it to?way that you want it to? Are the important parts clearly visible?Are the important parts clearly visible?

Provide informative captions for the Provide informative captions for the images and graphics you use and refer to images and graphics you use and refer to them in your textthem in your text

Types of VisualsTypes of Visuals

TablesTables Bar GraphsBar Graphs Line GraphsLine Graphs Pie ChartsPie Charts PhotographsPhotographs VideoVideo

Determine which Determine which visual will work best visual will work best for your for your PURPOSEPURPOSE

Designing a Wiki Web SiteDesigning a Wiki Web Site

Wiki software: pbwikiWiki software: pbwiki Free, easy-to-useFree, easy-to-use What you see is what What you see is what

you getyou get Though pbwiki is an Though pbwiki is an

easy software, it does easy software, it does notnot teach you how to teach you how to create an effective create an effective web siteweb site

That is your job as the That is your job as the writer!writer!

Designing a Wiki Web SiteDesigning a Wiki Web Site

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

Visitors must be able to move through your Visitors must be able to move through your wiki according to their own interestswiki according to their own interests

Techniques for Good DesignTechniques for Good Design

Give your wiki a visual themeGive your wiki a visual theme Make the look and feel of your wiki consistentMake the look and feel of your wiki consistent A web site does not need loud background or A web site does not need loud background or

flashy animations to achieve a visual themeflashy animations to achieve a visual theme Use colors for the text, headings, links, and Use colors for the text, headings, links, and

background to create a consistent visual background to create a consistent visual themetheme


Keep the visuals simpleKeep the visuals simple Uncomplicated sites are user friendly, load Uncomplicated sites are user friendly, load

faster and, if designed well, more elegant than faster and, if designed well, more elegant than image-overloaded sitesimage-overloaded sites

Too many icons, bullets, and other Too many icons, bullets, and other embellishments may make the wiki appear embellishments may make the wiki appear clutteredcluttered

Strike a balance with your visuals!Strike a balance with your visuals! ExampleExample


Make the text readable—no overly long Make the text readable—no overly long sections of textsections of text Divide information into chunksDivide information into chunks Use short paragraphs when possibleUse short paragraphs when possible Use white space to separate elements and to Use white space to separate elements and to

give a visual reliefgive a visual relief Avoid dark backgrounds—makes text hard to Avoid dark backgrounds—makes text hard to

readread ExampleExample


Use your side bar!Use your side bar! Navigation is important to the webNavigation is important to the web Make it easyMake it easy Provide links in your side bar Provide links in your side bar Make sure each wiki page can take the visitor Make sure each wiki page can take the visitor

back homeback home

http://www.english131-12.pbwiki.com/http://www.english131-12.pbwiki.com/

Designing Your WikiDesigning Your Wiki

Determine Your StructureDetermine Your Structure How will you organize your writing?How will you organize your writing? Which main points need separate wiki pages?Which main points need separate wiki pages? How many links will you need and where will How many links will you need and where will

these links go?these links go? What information will you put in the sidebar?What information will you put in the sidebar? What is your navigational scheme?What is your navigational scheme?

• In other words, how will readers get from page In other words, how will readers get from page to page and back again to the home page?to page and back again to the home page?

Think About it…Think About it… As a group, answer the following questions. Write As a group, answer the following questions. Write

down your answers.down your answers.

What personality do you want your wiki to What personality do you want your wiki to project?project?

What look or feel do you want your wiki to What look or feel do you want your wiki to possess?possess?

What elements of design will you use?What elements of design will you use? Who is your intended audience? How can you Who is your intended audience? How can you

reach them through the visual design of the wiki?reach them through the visual design of the wiki? What is your central purpose on the wiki? How What is your central purpose on the wiki? How

can you enhance your purpose through visuals?can you enhance your purpose through visuals?

Business

Designing Online