Page 6 of 6
/ / Information Sciences and TechnologiesGolisano College of Computing and Information Sciences
ICE 08: Analyzing Web Sites with CRAP
Your Name: Alex Hedges
Overview
So, you've been web surfing for quite some time now, and you've undoubtedly found some pages that you like and others that you don't like. Sometimes, it's not so easy to really explain why. You now have a new vocabulary with which to describe your thoughts. Note: When this document has been completed, upload it to the CRAP dropbox. Use filename: Your_Last_Name.CRAP.docx.
Part 1: Group Evaluations
1. Follow this link using any browser:
http://rochesterhomepage.net/
2. Examine this site; at least the first page and a couple of links to sub-pages (pages that are part of the same site).
3. Summarize your opinions and the reasoning behind them:
a. Alignment:
All text is left aligned, including headings and the sidebar. The only exceptions are menu items, which are center aligned.
b. Proximity:
Captions for images and videos are close to the media. There is enough space in most areas to easily be able to tell which captions go with what media. The contest page makes some entities too close to each other, but it still is possible to tell what captions go with what images.
c. Repetition:
Navigation is consistent across pages, but the sidebar’s contents differ. The pages looked at have four different sidebars. Some make sense, like not including the weather portion of the sidebar on the weather page, but other differences seem arbitrary. Lists, such as articles, sidebars, and menus, have internal consistency stylistically.
d. Contrast:
Links do not contrast with the text of the page. Links to articles are black like the rest of the text, but they turn blue when hovered over. This lacks unity with the links on the header, sidebar, and footer, which are either blue or white. The dark text is on a white background, and all white text is on a blue background, creating contrast to increase readability.
e. Use of color
The page is almost entirely white, gray, blue, and black. Most headings and body text are in black. The background is gray, but some areas have a white background. The header, footer, and buttons are blue with white text. These colors fit well together, and they are mellow enough to not be a nuisance.
f. Use of typography
The entire website uses a single font, Helvetica. It looks professional and is easily readable.
4. In myCourses/Discussions is a Design Principles topic. Tell the class your opinions on the design of http:// rochesterhomepage.com/. (HINT: You just wrote them in step 3). Each of you should post your thoughts individually – not as a group.
5. After you post your review, read the other student comments about this site. Choose one other student’s review and reply to his/her comments as summarized below. When replying, do so politely while discuss your agreements and disagreements
a. Author of message you’re summarizing: Alex Kohl
b. Do you agree or disagree with him/her about the page’s design elements (Why?)
I agree with many of Kohl’s points, but I still have some disagreements. They noticed many things that I did not, and it was intriguing to see their different viewpoint about the same website.
c. Alignment:
Kohl talks much about the two-column layout, which I failed to truly mention. It seems that I talk more about the alignment of text within blocks, while Kohl focuses on the alignment into blocks. However, I agree with their statements about this columnar layout.
d. Proximity:
I agree with much of what Kohl says about spacing, but I disagree on one point. I find some spacing to be awkward, with headings too close to text or pictures from a previous item in the list. Kohl found no problem with this, but I found it confusing at worst and unattractive at best. Most of the site’s spacing was designed well, though.
e. Repetition:
Both Kohl and I talked about the same exact features and found them to be consistent across pages. However, they did not mention any sidebar inconsistency, which appears to break repetition.
f. Contrast:
We both talked about the color contrast involved in menus and links, and it appears we agree about those parts. We find the strong color contrast makes the links more effective and that the color change of links when hovered over helps, too.
g. Use of color:
Kohl seems to only talk about gray and black. I included them alongside blue and white. One major point of disagreement is that Kohl finds the background of some areas a light grey while it appears to me a white. I honestly do not know who is correct.
h. Typography
We both find the font increases readability. Neither of us discussed any specific styles involving the typeface.
Part 2: Design Critiques
Pick a web site you don’t like (in terms of design), and a web site you do. Describe/critique each using the forms attached to this handout. If you are having trouble finding a bad site, try using a random link generator such as:
http://www.uroulette.com/ or
http://www.randomwebsite.com/
Part 3: Individual Critiques
Pick a color scheme for your own class page and describe it below. Describe your color scheme in terms of what color(s) you will use for each element. Feel free to make these determinations as a team.
I used Paletton to create a color scheme with a base color, its two adjacent colors, and the base color’s complement. The base color, a light tan, will be the background color. Links will be a pale royal blue, and their hover state will be lavender. All other text will be black.
Now, use the space below to sketch an improved layout for your page. Again, you may optionally work with your neighbors to come up with something really great! Don’t go crazy here. You’re just beginners. Ideas for wire frame design tools can be found at: http://designscrazed.org/best-free-wireframe-tools/
Alignment: How many different styles of alignment can you see on this page? Describe them:
All pages have both their body and headings be left-justified. However, some have main headings that are centered on the page. There is not any consistency about when the heading is centered or not.
Where is the strongest alignment line on this page? Why?
The left edge is the strongest alignment line because that is where the text on most lines begins.
Proximity: Identify two elements of this site that, due to their proximity, appear to have a relationship.
The common element shared by every single page is a horizontal rule at the bottom of each page and a last modified date right beneath it.
Identify information at this site that "hangs" alone.
The most “distant” part of the site is the menu on the left side of the page. It is in a separate frame, so it is truly divorced from the rest of the site.
Repetition: Does the repetition on this page draw attention to anything particular? What?
The only repetition on individual pages is that all have headings with text beneath them. Beyond that, there is no consistent pattern except for the menu sidebar.
Describe the repetitive element(s) used to the best advantage on this site.
There are so few repetitive elements on the site that none is used for an advantage.
Contrast: Identify the strongest area of contrast at this site.
The strongest contrast is between pages. Some pages have centered headings, but others do not. Some pages use different color schemes or fonts from the rest of the site without any obvious reason.
Are there areas of this site that seem "muddy" or run together because of a
lack of contrast? What are they?
There is no lack of contrast within pages because a majority of them is just black text on a white background with headings and paragraphing used.
Color & Type: Does the use of color and type on this page enhance or detract from
the content? How?
The pages with a different color scheme from the rest distract from the content, and the two pages that use a sans-serif typeface instead of a serif one do not fit in as well with the rest of the site.
good site: Facebook
Alignment: How many different styles of alignment can you see on this page? Describe them:
There are five main regions on the page: a header and four columns. The header’s text is centered. Each column has left-justified text, and the rightmost column has right-justified text.
Where is the strongest alignment line on this page? Why?
The strongest alignment is in the sidebar on the left because all lines start at the same distance from the left edge of the page, and there are no large images to make the alignment look awkward.
Proximity: Identify two elements of this site that, due to their proximity, appear to have a relationship.
The right column and chat windows have a close proximity. The right former stays in place and lists people to chat with. Chat windows are as placed as far to the right as possible without overlapping with the right column. This helps give a visual component that unifies the chat system.
Identify information at this site that "hangs" alone.
The page’s footer does not really fit anywhere. It is located in the third column. However, most of the items in this column are in bordered boxes. The footer sits beneath these items but is not in a box. This separates everything in the column from the footer.
Repetition: Does the repetition on this page draw attention to anything particular? What?
The repetition gives consistent patterns. The first column has a list of groups and lists. The second column contains all actual content. The third column contains trending stories, recommended people and groups, and advertisements. The fourth column contains a list of people to chat with. This repetition of items within a column helps give each one a unifying purpose.
Describe the repetitive element(s) used to the best advantage on this site.
The repetitive elements used best are the updates in the second column. They have slightly different layouts between them, but they manage to maintain a similar style. They are the center of the site’s content, and their repetitive layout makes browsing smoother.
Contrast: Identify the strongest area of contrast at this site.
The most contrast is between the blue of the menu and the white and gray of the rest of the site.
Are there areas of this site that seem "muddy" or run together because of a
lack of contrast? What are they?
No. All areas are distinct due to contrast created by colors and borders.
Color & Type: Does the use of color and type on this page enhance or detract from
the content?
The simply blue, black, gray, and white color scheme is simple yet pleasing, and the consistent sans-serif typeface makes reading easy.
ICE 08: CRAP
Name: Alex Hedges
Criteria / Weight / Your ScorePart 1, q 3; CRAP Analysis – rochesterhomepage.net / 18
Part 1, q 4; Discussion of site analysis posted to discussion / 4
Part 1, q 5; CRAP analysis of a classmate’s posting to discussion / 18
Part 1, 6 3; Agree or disagree with classmate’s CRAP analysis / 5
Part 1, 7 3; Polite reply to classmate on points of (dis)agreement / 5
Part 2; Site design captured in “Bad Form” / 12
Part 2; Site design captured in “Good Form” / 12
Part 3; Color Scheme for student’s own site / 12
Part 3: Improved Layout for student’s own site / 12
Total Points / 100