For the next four weeks or so...

1
For the next four weeks or so...

• You will have to make a professional-looking
  multi-page (at least three) web site for some
  company, school organization or team, small
  business, teacher, or similar group. It CANNOT be
  a personal site with random information...it has
  to be a "professional" type site for someone
  else
• There will be a whole list of requirements, and
  the site will end up counting for TWO major
  grades. We will be learning stuff throughout the
  six weeks that we will be incorporating into the
  site, but for now just be thinking of something
  you might want to make a site for.
• Next class we will begin working on the sites by
  submitting a "proposal sheet" saying what your
  site will be about, what might be on it, and how
  it might look.
• Be thinking about what you will want to do.

2
"Design Elements for Great Web Pages"

• from http//www.infomotions.com/musings/design/

3
Readability and Page Design Rules

• Use a consistent layout
• White space is good
• Visually organize the page
• Keep text short
• Include elements of contrast
• Use all stylistic elements in moderation

4
1. Use a consistent layout

• All your pages need to have a consistent look to
  them, so that as you go from page to page it
  doesn't seem like you are completely switching
  sites
• It is especially important to keep navigation the
  same throughout the sitedon't have your links be
  on the side of the page at first, then at top on
  another, then at the bottom of the page on yet
  another. This confuses and annoys users.
• For businesses or organizations, having a slogan
  or logo appear on every page can help give
  consistency. If your project site will be a
  teacher's, perhaps you can have a common
  graphical theme throughout the site that will
  link everything together.
• This can very easily be done by using external
  style sheets...we'll do this for a lab assignment
  next class.

5
2. White space is good

• White space is the empty areas of a page
  (obviously it doesn't have to be whitejust any
  empty area). It adds contrast and provides a
  place for you eyes to rest.
• "White space is not wasted space."
• You can use white space to separate one type of
  information from another and to focus the
  viewer's attention where you want it most.
  
• When you use white space, though, be careful not
  to trap it between two design elements. This can
  interrupt the flow of the design. Instead, keep
  white space around the borders and along the
  edges (unless site design requires otherwise).

6
2. White space is good

• You can gain white space by increasing the
  padding and/or margins of your html elements.
  
• In print media, people usually say you should
  have 60 text/images on a page and 40 white
  space.
  
• For web sites, it probably isn't a bad idea to
  stay around that number.
  
• It is far worse to have too little white space
  than too much
  
• Examples of the effectiveness of white space
• www.google.com vs www.yahoo.com

7
3. Visually organize your pages

• In other words, group similar concepts on your
  page together (contact info together, content of
  the page together, links together, etc).
  
• It is helpful to use divs (like we have been
  doing) to help you separate the different
  sections of the page and make sure you have
  everything in its right spot.
• When there is more than one type of information
  on a page, break up the page with white space or
  the CSS borders, margins, and padding we have
  been using.
• Your project site design MUST include at least a
  div for navigation and a div for content.
  

8
4. Keep your text and pages short

• In general, people do not like reading text from
  a computer screen. If a page has text that
  stretches the entire length of the screen, it can
  be a pain to wade through.
• Keeping the text areas smaller in width can make
  them more manageable for users, so they aren't
  instantly scared away by a ton of boring-looking
  text.
• Similarly, try to keep you pages shorter than two
  or three screens in length to keep your readers'
  attentions.
  
• If you have a lot of information, split it up
  into shorter pages, and use a navigation bar to
  allow the user to go through it at their own pace
  without overwhelming them
• Obviously, there is exceptions to this. But in
  general, make sure your text is to-the-point and
  not overly wordy (like this slide)

9
5. Include elements of contrast

• Too much text is boring, too many pictures or
  other visual elements can be confusing if not
  used correctly.
  
• Mixing them up, and including elements of
  contrast (like div boxes whose color is different
  than the background) help break up the monotony
  and make your page more dynamic.
• One common complain for my current MISD site is
  that their aren't enough elements of
  contrast...everything is too white. I think my
  Web and CS sites do a better job with this.

10
5. Include elements of contrast

• As far as colors go, using too many colors can be
  ugly and distracting, while using two few colors
  can be boring. Although the intended audience of
  your site and its content will definitely
  influence how you use color, most web pages tend
  to use at least three main colors
• Primary color This is the main color of the
  page. It occupies the most space and sets the
  tone for the design as a whole.
  
• Secondary color This is the second color on the
  page, and it is usually there to "back up" the
  primary color. It is usually a color that is
  pretty close to the primary color.
• Highlight color This is a color that is used to
  emphasize certain parts of the page (side divs,
  navigation bars, etc). It is usually a color
  which contrasts more with the primary and
  secondary colors, and as such, it should be used
  with moderation.

11
Color Stuff

• http//wellstyled.com/tools/colorscheme2/index-en.
  html
  
• Color calculators for coming up with
  complimentary color schemes.
  
• http//www.tigercolor.com/color-lab/color-theory/c
  olor-theory-intro.htm
  
• Unfortunately, I don't know much about the color
  wheel, but this page gives you a good quick
  explanation that might be helpful for you
  
• http//www.degraeve.com/color-palette/
• A lot of times, if you are making a site for
  someone, they will give you a logo or photo to
  use as a focal point on the page. This site lets
  you put in the address of an image, and get color
  suggestions that work with it.

12
6. Use all stylistic elements in moderation

• "All things in moderation."
• Don't use too much of anything
• too much bold, underline, italics, etc makes the
  text loose emphasis and effect
  
• too much upper case can be ugly and annoying if
  not used correctly as a design element
  
• too many images can make things too busy

13
Bad things to Avoid

• from http//www.ratz.com/featuresbad.html

14
For backgrounds avoid

• Color combinations of text and background that
  make the text hard to read
  
• Busy, distracting backgrounds that make the text
  hard to read. If you must have a busy background
  image, use background-color for your paragraphs
  or divs, so that you can still clearly
  distinguish the text.

15
For text avoid

• Text that is too small to read
• Text crowding against the left edge (use
  padding!)
  
• Text that stretches all the way across the page
  (use margins for the div the text is in.)
  
• PARAGRAPHS OF TYPE IN ALL CAPS!!!! (DON'T YELL)
• Paragraphs of type in bold
• Paragraphs of type in italic
• Underlined text that is not a link

16
For hyperlinks avoid

• Mystery Meat Navigation (a term coined by Vincent
  Flanders, author of Web Pages that Suckwhen you
  don't know where they go until you click the
  link)
• Using graphics as links (unless it works
  specifically as an intentional design element)
  
• Links that are not clear about where they will
  take you
  
• Links in body copy that distract readers and lead
  them off to remote, useless pages
  
• Text links that don't look different from the
  surrounding text (so you don't know they are
  links)
  
• Dead links (links that don't work anymore)
• Some people say to avoid default blue hyperlinks
  and purple visited links others say it is a good
  idea to use blue because some people expect those
  to be links
• Some people say you should always have different
  styles defined for alink and avisited (so you
  can tell which links you have been to already)
  
• My pet peeve is having LINKS WITH NO ahover
  STYLE DEFINED! ALWAYS DEFINE STYLE FOR
  ahover!!!
  

17
For hyperlinks DO

• ALWAYS DEFINE A STYLE FOR A AHOVER (and
  possiblely alink and avisited)!!!!
  
• It is easy to do, and makes a very noticeable
  difference in the look and usability of your
  page
  
• Make sure the style you define is distinct enough
  from the regular text to make it stand out, and
  make sure none of your other styles have similar
  definitions that may confuse readers

18
When using graphics avoid

• Large graphic files that take forever to load (DO
  NOT USE LARGE BMP MADE IN PAINT AS BACKGROUND
  IMAGES! THEY ARE HUGE!)
  
• Meaningless or useless graphics (design elements
  are okay)
  
• Thumbnail images that are nearly as large as the
  full-sized images they link to
  
• Graphics with no alt labels (PLEASE avoid this)
• Graphics that don't fit on the screen (assume a
  minimum screen size of 800x600 pixels, check it
  at 1024x768 and again at as high of a resolution
  as your monitor can go to make sure look of site
  holds up on larger screens)

19
For page navigation avoid

• Unclear navigation
• Over complex navigation
• Complicated frames, too many frames, unnecessary
  scroll bars in frames (we will talk about frames
  later) and divs (don't overuse overflowautokeep
  it for those rare times when you have to keep a
  div a certain size or the look of your page will
  break)
• Orphan pages (dead-end links that have nothing
  linking them back to where they came from, and no
  identification). Always have nav bar to get back
  to where you came from.
• Useless page titles that don't explain what the
  page is about. But still, always have something
  between the title tags!

20
In general design avoid

• Entry page or home page that does not fit within
  standard browser window (try to make it work okay
  in at least 800x600 pixels and 1024x768 pixels)
  
• No focal point on the page
• Too many focal points on the page
• Non-text Navigation buttons (use CSS a and
  ahover instead, inside of unordered lists with
  CSS styles defined for them). Having graphics as
  navigation elements can be confusing if not done
  right.
• Cluttered design, or lack element alignment
• Lack of contrast (in color, text, to create
  hierarchy of information, etc.)
  
• Pages that look okay in one browser but not in
  another (test in at least current version of IE
  and current version of Firefox)

21
Other BAD things to avoid

• Anything that blinks, especially text.
• Multiple things that blink.
• Little low-quality animations (GIFs) that don't
  serve a design purpose and make the page look
  amateurish or 90's-ish
  
• "Under construction" signs or messages,
  especially with animations of little men working.
  99 of the time, these "under construction"
  messages will NEVER get changed, and continue to
  annoy users until the end of time
• Animated pictures for e-mail.
• Animations that never stop. If you use Flash or
  gifs, run them once, then make them stop.
  

22
Other BAD things to avoid

• Counters on pages most visitors won't care how
  many time your page has been loaded. However,
  since it may be useful for you to know, if you
  include a counter try to make it small and
  unnoticeable so it does not distract users.
• Typically, the scrolling marquee thing is
  considered a poor design choice, but some people
  love them and insist that they be included, so do
  what you must. See the SCE site.
• Too many little meaningless pictures that do not
  contribute to an overall "theme" or look to the
  page. Everything on your page should serve a
  purpose.

23
Final things to keep in mind
24
Design for your audience

• If the target audience is ages is younger or the
  site is for entertainment purposes, make sure the
  sight is visually appealing.
  
• If the audience is older or the site is for
  professional purposes, you are going to want to
  make the page more reserved and simple.
  

25
Keep page small and quick

• High speed Internet is much more prevalent now
  than it was 10 years ago, but there are still
  users out there with slow connections, so make
  sure you keep your site a manageable,
  downloadable size.
• When we work with Fireworks and Photoshop, we
  will learn how to optimize images for the web
  while keeping file sizes relatively small, but
  for now just try not to make unnecessary graphics
  too large. DO NOT USE .BMP FILES FOR IMAGES!

26
Map out your site

• If a site is complex and contains many pages, you
  might want to consider making a simple-looking,
  plain-text site map that provides a quick and
  easy look at what is offered by the site without
  having to go to each page to see what links are
  available

27
The "Three-Clicks" Rule

• The "Three-Clicks" Rule says that everything on
  your site should be accessible in no more than
  three clicks (with important info needing even
  less clicks)
• Why make your users wade through a whole bunch of
  pages just to get to where they want to go?
  
• One thing that helps is always having a
  navigation bar in a consistent spot for all of
  your pages that way, users will always know
  where to find the links and get to where they
  want to go

28
KISSKeep It Simple, Stupid

• Don't make your users think to use your site
  they should be able to get around without having
  to figure out what is a clickable hyperlink, what
  isn't, and what is on the page that is being
  linked to.
• Sometimes overly complex designs look great, but
  they should never get in the way of usability
  
• If your computer illiterate parent or grandparent
  couldn't find their way around your site, it is
  probably not well designed.

29
"Web Pages That Suck" AssignmentDue at end of
class for Daily Grade