Good Design
Design features:
Text: Summarize the qualities of the use of type that make a website successful.
Text is successful when it is not interrupted by the background color or images and is large enough to read without being obnoxiously large. The hierarchy of information must be perfectly clear. Also, the columns of text should be narrower than in a book to make reading easier on the screen.
Navigation: Summarize the qualities of the navigation that make a website successful.
The navigation buttons and bars should be easy to use and consistent through the website. They should provide the visitor with clues as to where they are and what page of the site they are on. If used, frames should not be obtrusive and a large site must have an index or some sort of site map.
Links: Summarize the qualities of the links, and their behavior that make a website successful.
The link colors should coordinate with page colors as well as be underlined so they are instantly clear to the visitor.
Graphics: Summarize the use of Graphics, vector and raster, that make a website successful.
With graphics, buttons should not be big and dorky. Every graphic has to have an alt label and every graphic link has to have a matching text link. Graphics as well as backgrounds must use browser-safe colors and animated graphics turn off by themselves.
General Design: Summarize the aspects of the overall design that make a website successful.
Pages must download quickly. The first page and home page should fit into an 800 x 600 pixel space and all other pages must have an immediate visual impact withing 800 x 600 pixels. There should be a good use of graphic elements to break up large area of text. Every web page in the site has to look like it belongs to the same site - there should be repetitive elements that carry throughout the pages.
Bad Design
Design features:
Text: Summarize the qualities of the use of type that make a website unsuccessful.
Text that is too small to read, is crowded against the left edge or that stretches all the way across the page is unsuccessful. Centered type over flush left body copy is unsuccessful. Paragraphs of type in all caps, paragraphs of type in bold, paragraphs of type in italic, or paragraphs of type in all caps, bold, and italic all at once is unsuccessful. Underlined text that is not a link is not successful.
Navigation: Summarize the qualities of the navigation that make a website unsuccessful.
Links: Summarize the qualities of the links, and their behavior that make a website unsuccessful.
Graphics: Summarize the use of Graphics, vector and raster, that make a website unsuccessful.
Large graphic files that take forever to load are just plain annoying. Meaningless or useless graphics, thumbnail images that are nearly as large as the full-sized images they link to, graphics without alt labels, missing graphics (especially ones without alt labels), and graphics that don't fit on a 800 x 600 pixel screen are all unsuccessful.
General Design: Summarize the aspects of the overall design that make a website unsuccessful.
Example of a Poorly Designed Site
URL of a Poorly Designed Site:
Design features:
Text: Summarize the qualities of the use of type that make this site unsuccessful.
It's taking all I have in me to just get past the pea greenness of this page. But to the text. The body text is blindingly white against that god-awful background color (but only on the "Youth Sports" and "Contact Us" pages), and the two or three different typefaces he chose do not compliment each other well, really at all. He has text that is not a link underlined and the coloring makes me think that some of the underlined areas are links I have already visited.
Navigation: Summarize the qualities of the navigation that make this site unsuccessful.
Navigation was going fairly successfully until I realized I had no idea how to get back to the homepage. It took me a little while to find it at the very bottom of the scroll down page, not on the left hand list of "Scheduling" or "Contact Us" or "Links" links.
Links: Summarize the qualities of the links, and their behavior that make this site unsuccessful.
Graphics: Summarize the use of Graphics, both vector and raster, which make this site unsuccessful.
The one picture present constantly is the picture above the left hand links that is actually touching the top link. And it is driving me crazy. The layout of the images representative of his different areas of expertise are collaged together and overlaid in odd ways that do not flatter his imagery. Other than that, the 3-D-ish rendering of his name as his logo is pretty cheesy, as is the ghost of a camera (clearly a stock image) to the right of his logo.
General Design: Summarize the aspects of the overall design that make this site unsuccessful.
Large boxes of information with clutter and dead space within each box, large black bars on each side of the page, no real home page or opening page (at least not one that doesn't scroll), and, like I think I've mentioned, really awful color.
Notes:
It was pretty easy to gather the concept that Anita Schindler is a photographer of non-professional sporting events, with all of the links to and pictures of youth and adult sports. However, from the layout I was definitely not expecting a woman to be its principle photographer. It distinctly lacks any sort of feminine qualities (ie color combinations, patterns, softness of any kind).
Examples of a Well Designed Site #1
URL of site #1:
Design features:
Text: Summarize the qualities of the use of type that make this site successful.
Joey's text is beautiful - classic yet subtle font is starkly contrasted against his black background. His colors are coordinated between white, gray, and blue depending on if it's a title, a link, or another album. The text is a little small, and I could see that being problematic for some people, but I think it's great.
Navigation: Summarize the qualities of the navigation that make this site successful.
Navigation is a dream. The home page gives the viewer options between his commercial, personal, or video work, each with drop down subcategories showing what is in each section (but it's much more creative and less obtrusive than actual drop boxes). On the other side you find options for contacts and other information and resources. When you enter one of his portfolios, all of the categories and subcategories for the album the viewer is in appear along the top of the page. The images for the currently viewed album are displayed in a sideways running bar underside a large version of the currently selected image. It's beautiful.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
Links work. They are quick and you always know where they are taking you. They are color coordinated so you know exactly where you are and if for some random reason the viewer ever gets lost, clicking on the large logo for JOEY L. at the top of the page takes you back to home.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
Graphics are minimal, reserved only for his images, a GPS generated map of where he is in the world, and a picture of his tutorial CDs. This minimalism draws all of the viewers attention to the quality of his work.
General Design: Summarize the aspects of the overall design that make this site successful.
The key word is minimalism. He really only uses the middle part of the viewers screen, with no scrolling at all. His home page has large black areas of negative space on all four sides and every other page has the same negative space on the left and the right of his work. Everything about it is gorgeous. And I'm not just saying that because he's my favorite artist.
The key word is minimalism. He really only uses the middle part of the viewers screen, with no scrolling at all. His home page has large black areas of negative space on all four sides and every other page has the same negative space on the left and the right of his work. Everything about it is gorgeous. And I'm not just saying that because he's my favorite artist.
Notes: Joey Lawrence is clearly a photographer. A professional, highly sought after photographer. His site oozes style and class and an attention to detail that most people don't even understand.
Examples of a Well Designed Site #2
URL of site #2:
Design features:
Text: Summarize the qualities of the use of type that make this site successful.
Dean's typeface is very modern and energetic in either white or lime green to offset the gray background. There are no large areas of text, except for on his bio.
Navigation: Summarize the qualities of the navigation that make this site successful.
Navigation is quick and simple, with nothing except for the pictures in the middle of the page changing. The layout remains the same and navigation is done through drop boxes and a sidebar of images.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
Every link except for one works beautifully. That one confuses me. My guess is you have to be logged in to view it, since there is apparently password protected information, or it's under construction. So despite that one link, everything else works smoothly and takes the viewer where they are expecting to go.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
There are no graphics apart from the artist's work, except for one poster style picture from the AIS alumni association on his bio page. This distinct lack of graphics draws all the viewers attention to Deans images and does not distract from their detail. Very effective.
General Design: Summarize the aspects of the overall design that make this site successful.
Aside from generally hating pages with music, I love Dean's site. Even the music is representative of his personality, and not over done or cheesy. I'm a big fan of the fact that the layout never changes and all of the viewers attention is drawn to the images they pull up. I am also a big fan of the color combinations.
Notes: It is very easy to determine that Dean is a professional photographer, based on the emphasis put on his images throughout the site.
No comments:
Post a Comment