URL Emailed to me

DUE: Friday, April 16

Weekly SyllabusWeekly_Syllabus.htmlshapeimage_1_link_0
Media PageMedia_Page.htmlshapeimage_2_link_0
AssignmentsAssignments.htmlshapeimage_3_link_0
Student Centershapeimage_4_link_0
Course Bloghttp://grandcentralblog.wordpress.com/http://grandcentralblog.wordpress.com/shapeimage_5_link_0
Supplemental TextsSupplemental_Texts.htmlshapeimage_6_link_0

Spring 2010

Website EvaluationWebsite_Evaluation.htmlshapeimage_8_link_0

WRRH205:  Rhetorical Bytes

Digital Rhetorics & Writing With New Technologies

Web Design Tips


THE PAGE

Layout: traditional design works within a vertical format.  For web pages, a horizontal format works best as pages are viewed in a horizontally constructed computer monitor.

Size:  a standard page size that will comfortably sit inside even the largest monitors is 800 pixels wide by 600 pixels high

Page space: keep in mind that a browser window includes space for software toolbars at the top and scroll bars on either the side or bottom, or both.  Do not place your important elements too close to edges as it will require too much scrolling for the page to be seen.

Home page:  while the home page is not necessarily a table of contents, it is the first page a viewer sees and should contain a basic idea of what might be in your site.

Scrolling:  it may be unavoidable for a viewer to avoid scrolling to see a page.  Make sure that the important information in your screen can be viewed without scrolling.


NAVIGATION

Design:  how a user navigates your site is as important a design element as the graphics you choose to feature.  Keep a consistent navigation pattern on each page.  Any deviation in appearance and function will affect not only how the page loads but how your user reads the page.

Home page:  as your home page is the first page your user sees, consider this page as your site identity, the page that will establish the patterns that repeat throughout.

Interior pages:  these are the pages users go to for content so make sure the page stays simple and focused.

Hierarchy: use sub-categories for linking interior page.  Done effectively, this helps keep your pages structure and simple.


BACKGROUND

Visual impact: every web page has a background, even if it’s white.  Your background will work best if it is not trying to be the foreground.  Keep it simple.

Size: should you decide to use an image for your background, careful of the image size.  If the image is too large, your foreground will load before your background.

Color: choosing a dark background (with reverse text) can be an effective design choice.  Consider limiting a dark background to pages that will not need to be printed.  If users choose to set their printer to “ignore background,” a lighter color or white text will not show up on the printed page.

Contrast:  consider using a strong color for the homepage and “swatches” of the color on interior pages.  This will create a strong site identity.

Graphic elements:  borders, buttons and color bars can create a strong visual division between navigation and content areas.

Patterns: tiled images that repeat endlessly can be an effective background as long as the image is not too large.  Textured backgrounds include images that fit together seamlessly to create the impression of a single image.  Wallpaper involves images that float in their own space creating a background of multiple images.


BUTTONS

Usage: remember that buttons are a way for users to access information.  Be careful not to showcase buttons in a way that dominate your page.

Repetition: stay consistent with button placement throughout your site.  This will help create site identity and give the impression of a cohesively designed site.


IMAGES

Sizing:  images should be reasonably small, as they will take time to load.  Too many large images and your user will lose patience while the page loads.  A good image size to prevent excessive page loading time is 400 pixels in width.

Placement:  don’t be afraid to move away from the standard design grid.  A tilted image if placed well can be highly effective.  Also, consider drop shadows and repeated patterns of images.

Cropping:  don’t hesitate to crop out unnecessary content.  Choose the focus of your photo and crop into it.  (Remember that cropping an image in a web design program will still leave the original image size.  Best to do your cropping in a photo manipulation program.)

Usage: consider using images for buttons or to line up with text to keep both image and text from “floating” on your page.


Categories adapted from:  Williams, Robin.  Web Design Workshop.  Berkeley:  Peachpit Press, 2002.