Good and Bad Assignment
Good Design
Design features:
According to the article “Biggest Mistakes in Web Design 1995-2005,” a good website has “Heroin Content” or content that makes people want to comeback. These websites have frequently updated content.
Text: Summarize the qualities of the use of type that make a website successful.
A website is successful with its use of text in many ways. According to Robin Williams, the text shouldn’t be interrupted by the background. In addition, the text should be big enough for people to read, but not too big that it takes up the whole page. Also, the text should be arranged according to the hierarchy of the information with the text being in columns that are smaller in width than what is seen in a book to make the text easier to read. According to Jakob Nielsen, text is good if it uses “subheads, bulleted lists, highlighted keywords, short paragraphs, the inverted pyramid, a simple writing style, and de-fluffed language devoid of marketese” (Nielsen). Along with that, font sizes should be changeable to enable readers to see the text in different sizes for their viewing preference. According to the article “Biggest Mistakes in Web Design 1995-2005,” text is good if it doesn’t use graphics or Flash.
Navigation: Summarize the qualities of the navigation that make a website successful.
Navigation is important when it comes to websites. The navigation should have straight forward, easy-to-use buttons and bars according to Robin Williams. Along with that, it should be consistent from page to page and tell what page the person is on in regards to the website. Plus, the frames that are used should not be overly obvious. In addition, a site map or index should be available for the webpage viewer. According to the article “Biggest Mistakes in Web Design 1995-2005,” navigation is good if it answers these questions: “Where am I?, Where have I been?, Where can I go next?, Where’s the Home Page?, and Where’s the Home Home Page?” (“Biggest Mistakes in Web Design 1995-2005”).
Links: Summarize the qualities of the links, and their behavior that make a website successful.
Careful attention should be paid to links. According to Robin Williams, the links should coordinate with the webpage in color and should be underlined to be easily visible to the user. According to Jakob Nielsen, links are good if they change color because it gives users an idea of where they are and what pages they have visited.
Graphics: Summarize the use of Graphics, vector and raster, that make a website successful.
Graphics should be carefully used. According to Robin Williams, the buttons on a webpage shouldn’t be too big and the graphics should have an alternate label. In addition, the graphic links should have a text link to match it. Browser safe colors should be used on the backgrounds and graphics. When it comes to animated graphics, they should turn off by themselves.
General Design: Summarize the aspects of the overall design that make a website successful.
In regards to general design, it pulls the webpage together into a cohesive piece. The page should load quickly according to Robin Williams. Along with that, the page should fit into the standard 800 x 600 pixel window space for the first page and homepage. The visual impact of images large than the window space should be seeable in the 800 x 600 pixel window space. Photos, subheads, pull quotes, and other graphic elements should be used in a way that breaks up large areas of text efficiently. Repetitive elements should be seen throughout the webpage to make sure that every webpage of the website looks like they belong together. According to Jakob Nielsen, websites are good if they follow design conventions and are consistent because it makes the user feel like they are in control of the site. According to the article “Biggest Mistakes in Web Design 1995-2005,” the site uses contrast effectively.
Notes:
According to the Noupe Editorial Team and Cameron Chapman, a portfolio site is the best when it emphasizes your best work, is easy to navigate, easy to find the contact information, provides information about you, the designer, shows some of your personality, makes people feel comfortable, is easy to update, contains references or testimonials from happy clients, includes professional social networking profiles, provides a downloadable resume, categorizes and tags your work, and differentiates yourself from your competitors.
Bad Design
Design features:
Backgrounds are bad if they are set to the default gray color, use color combinations that make the text difficult to read, and are busy or distracting that also make the text hard to read according to Robin Williams. Along with that, tables are bad if the borders are distracting or the tables are being used as design elements with large borders. In addition, blinking and animations are fairly bad. It’s bad if multiple things blink, rainbow lines are used and/or animated or blinking, have under construction signs that are or aren’t animated, emails use animated images, and one or more animations never stop. Junk like counters, junky advertising, scrolling sideways, little pictures of awards on the first page or homepage, and having one or more frame scroll bars in the center of a page. According to Jakob Nielsen, websites are bad if they have PDF files for online reading because it is difficult to navigate and view in tiny front. Also, pages with titles that are not easily found in search engines are bad. Anything that looks like an advertisement for a website is bad like banners, animations, and pop-ups. Along with that, opening new browser windows are bad because the users are not able to easily navigate the website and cannot return to past pages if they don’t realize anew window has opened up. It also causes cluttering. In addition, not answering a user’s question is bad for a website since the users came to the website looking for an answer to their question. According to the article “Biggest Mistakes in Web Design 1995-2005,” Splash Pages, and FlashSplash Pages, animations, no focal point, too much or too little text, and too many pictures are bad design features. Also, JavaScript is used which bloats up the page, makes the page take longer to load, wants to be the last item before the BODY tag, and widgets are used which delay the loading of webpages.
Text: Summarize the qualities of the use of type that make a website unsuccessful.
Text can be bad on a website in many ways. According to Robin Williams, text is bad if it’s really small, crowds against the left edge of the webpage, stretches across the entire webpage, is “centered over flush left body copy,” is in all caps, bold, or italic, or all three at once, and is underlined when it is not a link. According to Jakob Nielsen, text is bad if there is a wall of it and are set to a fixed font size.
Navigation: Summarize the qualities of the navigation that make a website unsuccessful.
Navigation can also make a webpage undesirable. According to Robin Williams, navigation is bad when it’s unclear or complex, contains complicated frames, uses too many frames, uses unneeded scroll bars inside of frames, contains pages with no links back to the original pages and no identification, and pages that have useless titles that don’t talk about what the webpage is even about. According to Jakob Nielsen, websites are bad if they have bad search that is too literal, can’t handle typos, plurals, and other punctuation, and prioritizes the search based on query terms instead of importance. According to the article “Biggest Mistakes in Web Design 1995-2005,” sites that use “Mystery Meat Navigation (MMN)” are bad. This term is defined as navigation in which “…the user must mouse over unmarked navigational "buttons" — graphics that are usually blank or don't describe their function. JavaScript code then reveals what the real purpose of the button is and where it leads” (“Biggest Mistakes in Web Design 1995-2005”). Along with that, sites that use icons to navigate in which the user has to memorize what the icon stands for is bad.
Links: Summarize the qualities of the links, and their behavior that make a website unsuccessful.
Link can be bad in many ways. According to Robin Williams, bad links are in the default blue color, show up in a blue border around graphics, do not state where the lead to, are in the same color are the body copy which leads readers off to random pages, aren’t underlined to clearly identify that they are links, and dead links. According to Jakob Nielsen, links are bad if they do not change color after being visited.
Graphics: Summarize the use of Graphics, vector and raster that make a website unsuccessful.
Graphics are bad if they take a long time to load because they are too large, are meaningless or useless, are missing, are larger than the screen, contain thumbnail images that are basically as big as the full-sized images they open into, and do not contain alternate labels for the image, according to Robin Williams.
General Design: Summarize the aspects of the overall design that make a website unsuccessful.
The general design of a webpage is bad if the homepage doesn’t fit in the browser window, has frames that scroll from side to side, do not have a focal point, have too many focal points, have navigation buttons that are the only visual interest, bad alignment of different elements, are cluttered, lack contrast in any way, and pages that look ok in only one browser, but do not look good in other browsers according to Robin Williams. According to Jakob Nielsen, violating the design conventions is bad for a website’s design. According to the article “Biggest Mistakes in Web Design 1995-2005,” websites are bad if they don’t solve your customer’s problems and a person cannot figure out what your site is in less than four seconds. Along with that, the site uses gray, light, and bad type or “GLBT,” which does not provide good contrast.
Notes:
A bad portfolio website doesn't label your work or show off your work to the fullest.
Works Cited
"Biggest Mistakes in Web Design 1995-2015." Biggest Mistakes in Web Design 1995-2015. Flanders Enterprises, n.d. Web. 12 July 2013. <http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html>.
Nielsen, Jakob. "Top 10 Mistakes in Web Design." Top 10 Mistakes in Web Design. Nielsen Norman Group, 01 Jan. 2011. Web. 12 July 2013. <http://www.nngroup.com/articles/top-10-mistakes-web-design/>.
Noupe Editorial Team. "12 Tips for Creating a Great Portfolio Site." Noupe. Noupe, 15 Sept. 2009. Web. 12 July 2013. <http://www.noupe.com/design/12-tips-for-creating-a-great-portfolio-site.html>.
Williams, Robin. "Web Design Features." Good and Bad Web Design Features. N.p., n.d. Web. 12 July 2013. <http://www.ratz.com/features.html>.
Example of a Poorly Designed Site
Text: Summarize the qualities of the use of type that make this site unsuccessful.
The text contrasts with the background, however, the text goes across the entire webpage. The width of the text is just too long and it does not re-size to fit the webpage. The text should have been condensed into a smaller width with the graphics offset to the side of it. In addition, some text is underlined but it is not an actually link to go anywhere. This can confuse some people who want to see more of the designs that correlate to that underlined title.
Navigation: Summarize the qualities of the navigation that make this site unsuccessful.
The website does not have a link back to the homepage. In addition, the webpages do not have any navigation indicators to direct you back to the homepage. You either have to use the keyboard back space or the browser’s back button. Also, there is not a site map to help you navigate the website. On the webpages connected to the website, the designer’s name is in a different color (blue) to indicate that it is a link. Once you click on the link, it takes you to the homepage of a portfolio website to look up designers.
Links: Summarize the qualities of the links, and their behavior that make this site unsuccessful.
The links are not very successful when it comes to text links. For one, the underlining of the text makes it seem like it is a link, but it isn’t a link. Secondly, the differently colored text that tells you that it is a link, doesn’t change color after you have visited it. Also, the graphic links take you to another page that doesn’t link back to the previous page. Plus, the graphics that are links do not have labels or anything to tell us that it is a link to another page.
Graphics: Summarize the use of Graphics, both vector and raster, which make this site unsuccessful.
The thumbnail graphics are large enough to see and open up into larger images when they are clicked on. However, the graphics are arranged in a line across the length of the page, when they could be arranged in a more appealing way. The graphics themselves are actually well done.
General Design: Summarize the aspects of the overall design that make this site unsuccessful.
The overall design of the website is not very appealing. There is direct contrast between the background and text with white and black respectively, however, it doesn’t seem very eye-catching. The layout is extremely straight forward with everything on the front page. The text could have been put into columns with the corresponding graphics in a column next to it. It would have offset the text better and created a more harmonized layout. In addition, the text itself could have been more visually appealing with a different font or color. Also, the resume is centered directly in the middle of the page with lots of empty space around the text. That seems very distracting when the background seems to overpower the text. Also, the title of the webpage is very straight forward and uncreative.
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
The purpose of the website is to show the designer’s work. It was easy to determine the purpose because the front page shows images of the designer’s fashion collections. However, there really isn’t any information about the designer except her resume. In addition, there is not an introduction to help you determine what the site is about.
Examples of a Well Designed Site #1
Text: Summarize the qualities of the use of type that make this site successful.
The text is in direct contrast to the background with the black and white color scheme. Also, the font size is large enough to read. The font is cohesive from page to page. In addition, the font is easy to read. Plus, the font doesn’t stretch across the entire webpage. It is condensed in a nice width that is easy to read and follow. Plus, paragraphs are easily identified. However, the gray text on white is a little hard to read on the some of the designer’s portfolio work.
Navigation: Summarize the qualities of the navigation that make this site successful.
The website has an easy to navigate menu on the right side of the page. In addition, there is a link back to the homepage on every page. The graphic links are easy to navigate to and get out of. Also, the links take you to where they say they will take you. Plus, the links are not dead.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
The links are underlined and change to a gray color or black color respectively. Along with that, it’s easy to differentiate between text and a link. However, the links do not change color to show the pages you have visited. Along with that, all of the links take you to where you say they will and are all working properly.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
The graphics are nice. They open up into larger graphics that are easy to see. In addition, the graphics are arranged to the side of the text for an attractive layout. Also, there are no useless graphics that blink or animate for no reason. All of the images are meaningful to the webpage.
General Design: Summarize the aspects of the overall design that make this site successful.
The overall design of the site is well done. There is contrast for easy viewing. In addition, the text is easy to read. Also, the graphics open up larger for viewing purposes. Along with that, the navigation takes you to the right places.
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
It was easy to determine the purpose of the website. The purpose of the website is to display the designer’s work and for people to contact the designer for employment opportunities and questions.
Examples of a Well Designed Site #2
Text: Summarize the qualities of the use of type that make this site successful.
The text is contrasted in color to the background. It does not overpower or take away from the background. In addition, the text is in a readable and larger enough font. Along with that, the text clearly differentiates between texts and links with different colors. Also, different fonts are used for titles and text to make it clear to the reader.
Navigation: Summarize the qualities of the navigation that make this site successful.
The homepage of the site has a site map to guide the user. In addition, it has a menu banner at the top to help people navigate from page to page. This means that each page will always be able to go back to the homepage. However, the links do not change color to indicate the links that you have already visited. On the other hand, the links do lead you to where they say they will.
Links: Summarize the qualities of the links, and their behavior that make this site successful.
The links are colored in a different color to indicate that they are a link. In addition, the links change color and underline themselves when the cursor hovers over the link. On the other hand the links do not change color to indicate that you have already visited that link. Along with that, none of the links are dead; they all work and lead you to the right places.
Graphics: Summarize the use of Graphics, vector and raster, which make this site successful.
The thumbnails of the graphics show the most important parts of the image. Once you click on the graphic, the image enlarges to show the full image. Along with that, the graphics are clear and easy to see. Also, the graphic banners do not overpower or detract from the information on the page.
General Design: Summarize the aspects of the overall design that make this site successful.
The overall design of the site is successful. It chooses a flattering color combination of red, pink, and black for the webpage. In addition, the website has clear images that even have different views. Along with that, the page is easy to understand and navigate through. Along with that, the homepage even tells the user what pages were updated and when they were.
Describe the purpose of this site in the notes. (Include whether it was easy to determine the purpose – why or why not?)
Notes:
The purpose of this site is to display the designer’s work. Along with that, it shows the designer’s skills, other websites, and her resume to gain employment. It was easy to determine the purpose because the site is straight forward with its layout and design. In addition, it only shows content that is related to the designer and her work.
