C.R.A.P.

Design principals worth learning

During the course of this analysis, I will be using “The Dot People” company website as reference in accordance to C.R.A.P design principles discussed in previous classes of Digital Graphics Techniques I (WEBD1108) and Digital Graphics Techniques II (WEBD 1109).

C.R.A.P.

C.R.A.P. is an acronym which stands for contrast, repetition, alignment and proximity, the foundation or cornerstones, if you will, of “good” design principles. Now, the definition of good design is relative. The definition may vary from designer to designer and even exist beyond the scope of designers as a whole. It applies to all people who have an opinion and choose to voice that opinion of theirs we always trust. But that’s a topic for another day.

C.R.A.P. is only one of many standardized, universal design systems used when creating or critiquing any kind of design whether it be a desktop application, mobile device application (tablet, cellphone PDA, GPS, etc.), a website’s User Interface (UI) for desktop or mobile, and even print design such as (billboards, a logo , street signs, etc.) Now that we have a little understanding of what C.R.A.P. is, lets dive into C.R.A.P. head-first and see what it can teach us!

Contrast

Contrast can refer to more than one area of design. It can refer to elements of an interface for example, when referring to contrast in relation to a website on a desktop, it could refer to the contrast between elements on the same page such as, the navigation and the header, the difference in size between two elements and how it may place more emphasis on one element than the other possibly to focus your attention to a certain area of the page. Whether it’s objective is to force you to pay closer attention to the small details of the design or to just enjoy the simplicity in the design and allow a better User Experience (UX). Another aspect of design that contrast can refer to is the difference of colour. Psychology tells us that color can affect our us on the physiological level. The power of color can change mood in a heartbeat. When referring to contrast on the color medium. it will refer to color between 2 elements. The font color of a paragraph versus the background colour of the element it resides on. The criteria that it follows to be defined as “good” is for the two elements to compliment each other (refer the color wheel).

A good example of contrast is: http://css-tricks.com/

It shows great contrast with the typography on the dark grey over the logo as well as the font colour of the navigation versus the background colour of the navigation.

Repetition

Repetition can be explained by an element or section of a design that repeats 2 or more times to give a feeling of consistency and balance, sound familiar? We see them often in patterns. If you haven’t yet, check out http://subtlepatterns.com for great resources for subtle backgrounds. Repetition can be useful in enhancing user experience, by creating a continuous and uniform design that a user can anticipate the flow of the design, and where things are going to go. It can also boost productivity for select products.

A good example for use of repetition in design is: http://wunderlist.com/

The app Wunderlist uses repetition in its product design when displaying to-do lists and categories, creating the columns with equal width and height show/produce/creates a sense of uniformity.

Alignment

Alignment can be the catalysis, moving your website from basic and mundane to sleek and professional. Alignment is often used in tandem with a grid system/ guides. Depending on whether you’re using an adobe application or the web, the only difference between the two is that they use slightly different terminology, guides can be clicked, dragged, and moved with your mouse whenever you want. A grid is a set of lines (columns and rows) that assist you in creating a fully functional properly aligned design.

There are three types of alignment when speaking of text, left right and justify. Left will align text or an element to the left of the parent element. Right will align text or an element to the right of the parent element .Justify stretches the (usual) text from one side of the element (width) to the other in respect to the font size, letter spacing, and word spacing.

A great example of this is: the http://adobe.com/ suit, and http://zurb.foundation.com/ .

Proximity

Proximity is the amount of space from one element to the other. When used correctly, proximity will give you breathing room. It provides the proper amount of space between elements for legibility, understanding (if 2 elements are too close together it can confuse a visitor or client the main objective for the project) , and it also provides less clutter on the page/design.

A great example of this is: http://feedly.com/#discover

Areas of Improvement

Colours

Typography

Amount of text

Color

The colours on the dot people website isn't necessarily the largest problem but it is the area which would benefit the most from a re-design. There are only really 2 elements on the website that have color, the body and the content. With today’s modern web design trends, it would be most beneficial to spice up the colors, either use slight differences (since the branding is red, charcoal grey and off white), and add more elements with those colors, and vary the placement, in accordance with the wire frame.

Typography

The typography is all over the place. From serif, to sans serif, there’s really not uniformity and it doesn't look like it fits at all, unfortunately this is what the client wanted, and was difficult to emphasize the importance of catering to the client.

I would recommend a nice Roboto font face for headers and Open Sans for the body. A variation of italics, bold and font weights for the respective text.

Amount of Text

In the wire frame provided, I have added an area for inner page sidebar which links to children pages from the corresponding parent page. Currently the amount of text is daunting and can be reduced greatly!