With an increasing number of electronic readers on the market and a questionable future for print newspapers, many leading media outlets are turning to the web to deliver content to readers. Like newspapers, the web requires an appropriate design in order to be functional and usable for readers so they are able to digest the information. The basic rules for a successful website design include close attention to contrast, repetition, alignment, and proximity. These four, combine together to form the word, “CRAP”.
Contrast is the first element of web design in the CRAP acronym. To effectively use contrast, a reader’s eyes must be drawn to the site. Contrast aids in drawing attention and interest to elements on the page, and it also helps to organize the page in an easy-to-read fashion. A web design can use elements that are the same, but it must avoid elements that are only similar. If the goal is to have them differentiated, they must be very different. Color is one simple way to differentiate between sections and areas, but it can also unite the site as one cohesive element. Most sites utilize color themes – a few colors that vary in shades. Other forms of contrast include typeface, line thickness, colors, shapes, sizes, space, etc.
In the CRAP test, the “R” stands for repetition. Repetition strengthens the unity of all elements on a web site and directs the reader to which items go with which. Repetition helps to strengthen the overall website by tying together separate pieces. Repetition helps hone a user in on where to go next instead of becoming distracting. When the same element is repeated, the reader already knows what to expect before opening the link or even reading the words. If there is no sense of repetition, it is common for users to become confused and not know how to navigate the web site.
The “A” in CRAP represents alignment – visual connections to other elements in the page as to ensure that nothing is arbitrarily placed on the web space. Though there are tools to go beyond template, it is necessary to have reasons to place certain objects where they are. There are shapes, textures and spatial relationships to consider, and templates are often helpful when constructing basic web sites. Alignment helps maintain every visual element has a relationship with every other element on the web site. This also helps unify and organize the site.
The final portion of the anagram, “P,” stands for proximity, which relates to grouping items close to each other that are related. Also an organizational element, proximity helps the reader to acknowledge which elements are related. When all of these items are together, they become one visual unit instead of multiple individual units. The element of proximity helps to reduce clutter on the web site and gives the reader a clear structure of the content. Readers who can’t locate the proximity of the text can’t immediately locate who, what, when, and where, and are likely to move on to the next web site.
The uploaded flyer shows a good contrast. The contrast on the flyer draws the eye to it. Multiple elements that are not the same show a clear contrast. Contrast is often the most important visual attraction on any flyer. The petals of the flower and the header designs tend to have repetitions. Repetition of visual elements throughout the design unifies and strengthens it. Repetition makes it easier for the viewer; it is very useful on one-page flyers. The text and the content seems to be properly aligned, though the alignment of the text looks a little over done. Nothing should be placed on the page arbitrary. The elements should be visually connected. Consciousness can be seen in placing the elements. The flyer could have avoided using more than one text alignment on the page. The content tends to be in proximity to one another. Proximity deals with items relating to each other that should be grouped together to create one visual unit. This helps organize the information and reduces visual cutter.