designing online
DESCRIPTION
TRANSCRIPT
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
Techniques for Good DesignTechniques for Good Design
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
Techniques for Good DesignTechniques for Good Design
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
Techniques for Good DesignTechniques for Good Design
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?