Kelci Henson-Forslund 18. January. 2017

1

Module 2: CARP Exercise Contrast, Alignment, Repetition, Proximity

THE ASSIGNMENT:

1.   Identify all four CRAP principles within the site. (Are they there or not? Elaborate.) 2.   Choose one aspect of the site's graphic design that you find visually appealing. Analyze this using CRAP

- why is it pleasing? What choices did the designer make that make it pleasing? 3.   Repeat step 2, but identify the feature you find least appealing, and discuss how the designer could use

CRAP principles to improve it. 4.   If you were to mimic or replicate one aspect of your alum's design on your own portfolio, what would it be

and why? 5.   Remember: be constructive in your criticism. Respond as if the subject will see your report (which they

should!) WHAT ARE THE CARP PRINCIPLES? Contrast, alignment, repetition and proximity are all key components to creating an easy-to-understand presentation of information.

•   Contrast refers to anything that catches the attention of a reader. For example, this could include design aspects such as font types, size, and color.

•   Alignment, or the organization and creation of invisible lines, is also important. Without alignment, sometimes readers may have distinguishing what elements are most important, and what details are most worthy of note. Further, without alignment, organization is less clear and causes confusion in the reader. A reader should be able to look at a webpage, for example, and be directed where to look.

•   Repetition describes a common theme, or themes. Repetition creates a “flow” of information, a sense that everything belongs in the document is not only necessary, but provides visual interest as well.

•   Proximity directs the eye where to look. For example, a title could be larger and perhaps put in bold face. In this case, the size and thickness of the font would show readers which information is most important and should be read first. The header may be larger in font than the text, as well. The header could be higher on the page, and would be farther to the left, so that it would be read before the actual body of a paper.

CARP IN OLIVIA ASIALA’S WEBPAGE: Olivia’s homepage is clean and easy to navigate. The contrast between the dark background and white text is bold, but not irritating, to the eye (and thus demonstrates contrast). Further, a simple black background could be slightly boring, visually; in contrast, Olivia chose a background with glitter, so a slight contrast in color is present. The hints of color are visually interesting, but do not distract. She chose to make her name in a large font size and bold, so it would be the first thing noticed by readers (and thus illustrates proximity). Olivia’s name is centered, and the buttons are centered (but smaller) under her name (demonstrating alignment). The homepage looks organized and simplistic. Specifically, under the buttons, there are links to her social media accounts. Her homepage is a great example of using proximity well. Specifically, the eye is directed to her name, then pages on her

Kelci Henson-Forslund 18. January. 2017

2

website, then to social media links. Notably, the different sizing of font (or buttons/links) ranks the information by importance. See Figure 1: Homepage.

Figure 1: Homepage

The contact page is easy to understand. Alignment is present, and the page only uses black and white. See Figure 2: Contact Information.

Figure 2: Contact Information

Name is in large font, and is bold. It stands out more than the buttons.

The buttons are centered, and spaced apart. All fonts are in white (contrast)

The social media links are smaller than her name, but centered and easy to find.

I might have chosen to make contact larger, and perhaps bolder or in a different font. To contact Olivia is the main purpose of this page, so the header could be emphasized.

Olivia capitalized the first letter of “name” to distinguish it from “contact” since they are separate ideas. You should fill out our name, email address (and so on), but contact is the main idea of the page.

Kelci Henson-Forslund 18. January. 2017

3

The menu bar on the webpage is simplistic, and uses contrast to show readers which page they are viewing. For example, in Figure 3: Menu Bar, the webpage open would be work since it is in black, rather than grey.

Figure 3: Menu Bar

Olivia uses repetition and alignment on her “work” page very well. Specifically, each task she completes is displayed in the same size box with a short well-formatted description under it. Olivia’s work page is my favorite aspect of her webpage: It is simple and visually appealing. I plan on similarly? using the idea of well-formatted, easily scrollable images. It is a more engaging version of a portfolio. Although the work page is my favorite aspect of her website, my least favorite aspects of her website also exist on this page. Specifically, she lists the company with which the images correspond above, rather than above and to the left, of the photos. This is proximity. Had the “Uncubed.com” been listed to the left and above, the reader would have had an easier time scrolling through the portfolio and quickly identifying which company Olivia had worked for during that specific time. My second issue of the “work” page is that all of the images (or boxes) are aligned too far left: When the webpage is open on a full screen, the whole right side of the page is empty (proximity). My third issue with this page are the social media icons. That is, they are small and difficult to find (contrast and proximity). This is frustrating in that, in order to find them, you must scroll to the bottom of her page. The links would be easier to find if they followed the screen as it moved down (with the use of floating icons) or simply were listed at the top of the page as well as the bottom. See Figure 4 and 5.

Kelci Henson-Forslund 18. January. 2017

4