Site Map

Logo

Good and Bad part 2

URL of a Poorly Designed Site: http://www.katesphotography.net/#

Design features:

Text: Summarize the qualities of the use of type that make this site unsuccessful.           

1. The light brown on brown type is hard to read
2. The font is childish

Navigation: Summarize the qualities of the navigation that make this site unsuccessful.

1.  When you click to enter the page it opens up a new page that automatically takes up the entire screen and has no navigation
2. Useless pages

Links: Summarize the qualities of the links, and their behavior that make this site unsuccessful.

1.  "Undefined" link takes you to a page with nothing other than the title undefined.
2. Obnoxious circles around link

Graphics: Summarize the use of Graphics, both vector and raster, which make this site unsuccessful.

1.  No issues with the graphics other than the bad photography

General Design: Summarize the aspects of the overall design that make this site unsuccessful.

1. The background of the page is a weird ration and then turns solid brown to outside of the design.

           

Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)

Notes:

Good and Bad part 1

Good Design

Design features:

Text: Summarize the qualities of the use of type that make a website successful.           

1. Background does not interrupt the text
2. Text is big enough to read, but not too big
3. The hierarchy of information is perfectly clear
4. Columns of text are narrower than in a book to make reading easier on the screen

Navigation: Summarize the qualities of the navigation that make a website successful.

1. Navigation buttons and bars are easy to understand and use
2. Navigation is consistent throughout web site
3. Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
4. Frames, if used, are not obtrusive
5. A large site has an index or site map

Links: Summarize the qualities of the links, and their behavior that make a website successful.

1. Link colors coordinate with page colors
2. Links are underlined so they are instantly clear to the visitor 

Graphics: Summarize the use of Graphics, vector and raster, that make a website successful.

1.  Buttons are not big and dorky
2. Every graphic has an alt label
3. Every graphic link has a matching text link
4. Graphics and backgrounds use browser-safe colors
5. Animated graphics turn off by themselves

General Design: Summarize the aspects of the overall design that make a website successful.

1. Pages download quickly
2. First page and home page fit into 800 x 600 pixel space
3. All of the other pages have the immediate visual impact within 800 x 600 pixels
4. Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
5. Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages 

Notes:

One of the elements of good web design is a lack of the elements that make bad web design. If you stay away from everything listed on the page about dorky web pages, you've probably got a pretty nice web site.

Bad Design>>>

Design features:

Text: Summarize the qualities of the use of type that make a website unsuccessful.           

1. 
   
   Text that is too small to read
2. Text crowding against the left edge
3. Text that stretches all the way across the page
4. Centered type over flush left body copy
5. Paragraphs of type in all caps
6. Paragraphs of type in bold
7. Paragraphs of type in italic
8. Paragraphs of type in all caps, bold, and italic all at once
9. Underlined text that is not a link

Navigation: Summarize the qualities of the navigation that make a website unsuccessful.

1. 
   
2. 
   
   Unclear navigation; over complex navigation
3. Complicated frames, too many frames, unnecessary scroll bars in frames
4. Orphan pages (no links back to where they came from, no identification)
5. Useless page titles that don't explain what the page is about

Links: Summarize the qualities of the links, and their behavior that make a website unsuccessful.

1. 
   
   Default blue links
2. Blue link borders around graphics
3. Links that are not clear about where they will take you
4. Links in body copy that distract readers and lead them off to remote, useless pages
5. Text links that are not underlined so you don't know they are links 
6. ..(If you're not going to underline your links, please make darned sure 
7. ..that each link is perfectly clearly a link! Don't make me wander around 
8. ..with my mouse checking to see if randomly colored text is a link!)
9. Dead links (links that don't work anymore)

Graphics: Summarize the use of Graphics, vector and raster, that make a website unsuccessful.

1.    
   Large graphic files that take forever to load
2. Meaningless or useless graphics
3. Thumbnail images that are nearly as large as the full-sized images they link to
4. Graphics with no alt labels
5. Missing graphics, especially missing graphics with no alt labels
6. Graphics that don't fit on the screen (assuming a screen of 800 x 600 pixels)

         

General Design: Summarize the aspects of the overall design that make a website unsuccessful.

1. 
   
   Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
2. Frames that make you scroll sideways
3. No focal point on the page
4. Too many focal points on the page
5. Navigation buttons as the only visual interest, especially when they're large (and dorky)
6. Cluttered, not enough alignment of elements
7. Lack of contrast (in color, text, to create hierarchy of information, etc.)
8. Pages that look okay in one browser but not in another

 

Notes:

1. Anything that blinks, especially text
2. Multiple things that blink
3. Rainbow rules (lines)
4. Rainbow rules that blink or animate
5. "Under construction" signs, especially of little men working
6. Animated "under construction" signs
7. Animated pictures for email
8. Animations that never stop
9. Multiple animations that never stop
10. Counters on pages -- who cares
11. Junky advertising
12. Having to scroll sideways (800 x 600 pixels)
13. Too many little pictures of meaningless awards on the first page
14. Frame scroll bars in the middle of a page
15. Multiple frame scroll bars in the middle of a page

Skills Inventory

Name: Brittany Weeks

Department: Photography

Are you Graduating this Quarter? No

If not, current graduation date by Quarter/Year: Spring 2011

Online Social and Professional networks: Facebook

Website URL (if already developed): N/A

What software experience do you have? (explain all that apply)

Photoshop: Yes

Fireworks: No

Illustrator: No

Flash: No

Dreamweaver: No

HTML: No

InDesign: No

Other: N/A

Tell what is your objective for the class to the best of your knowledge:

Learn iWeb? Yes

Publish web site? Yes

Revise and update current site? No

Begin the process of a professional web presence? Yes