Designing CRAP with Jo
This week I sat down with Jo Burrows, one of our very talented designers at Orange Digital, to learn about some of the basics of design principles. I learnt a lot from our discussion, but in particular just how intricate design work can be. I also found out that Jo has a special talent in identifying books by their smell — interesting right? Whenever Jo picks up a book she smells the pages… to the point where she can identify the book (title and author) by its scent. She even shares this talent with her Dad — super unique!
Jo has a background in web and graphic design and now specialises in User Interface and User Experience design at Orange Digital. Using her previous design knowledge and principles, Jo is able to create an enjoyable experience for users on websites and other digital platforms.
Jo started off by explaining that she bases all her work on CRAP. As someone who is new to fundamental design principles, I was slightly concerned as to what work Jo may have been providing clients. However, after seeing my puzzled look, she quickly informed me that CRAP was an acronym for Contrast, Repetition, Alignment, and Proximity.
The CRAP concept was first coined in 1994 by Robin Williams, author of Non-Designers Design Book. She is also a well known graphic designer, typographer, and lecturer from the United States. While the CRAP concept captured Jo’s attention back when she first started developing her design skills in high school, she still bases all her work on this fundamental approach — so it must be pretty significant.
Here is what I could gather in my quick 101 lesson on CRAP’s influence on user experience in design…
C — Contrast
To keep things simple, contrast means difference, which is used in web design to create eye-catching juxtapositions. This distinguishes elements of the design from one another.
While we might not be aware of it, our brains continuously subconsciously scan and look for similarities and differences in objects and scenes every day. Juxtapositions and other contrasting features are often the most important element users notice within a design. This feature is also what gives the design its energy.
Using contrasts successfully requires creating elements which are clearly different, not just slightly different. Often weak contrast has no clear direction for the eye, these designs are boring which makes it difficult for the user to know where to begin.
Jo considers contrast in her web design projects in every single element of the design — such as line, shape, colour, texture, size, space, text and so forth. All of these elements can be used to manipulate and create contrast to best engage and direct the user.
Here is what Jo recommends:
- If the design is primarily black or white, add a block of accented colour or a vibrant image.
- Add image treatments to help overlaying text stand out and assist in readability.
- If the page has a lot of text, break it up with bold headings, icons, and defined sections.
Using contrasts well can enhance the user experience of platforms by ensuring all important elements remain clear and prominent. Clear call to actions will result in an increase in conversions. Simple and effective navigation tools assist with user flow and eliminate any confusion on how to find information. Finally, blocks of colour create a visual hierarchy and ease of readability on the page.
R — Repetition
Repetition is reusing the same or similar elements within a design. This principle is used to bring a clear sense of unity, consistency, and cohesiveness to a design. While contrast focuses on highlighting the differences within a design, repetition focuses on the subtle use of the same elements. This is done to ensure the design is viewed as being part of a larger whole.
Jo often utilises repetition in her designs by simply identifying things that can be duplicated easily to give the design visual continuity:
- Image proportion and placement,
- Using only one or two fonts throughout the site,
- Recognisable call-to-action and accents to highlight important details, and
- Utilise common elements throughout the site (unique elements of the logo, platform theme, etc).
Successful repetition by creating consistency and reusing important elements in a design can optimize the user’s experience. Repeated grids of content blocks provide users with familiarity when interacting with the platform. Finally, recognisable elements simplify user flow between pages.
A — Alignment
While alignment may seem the most self-explanatory of the CRAP principles, Jo assures me that she takes this practice the most seriously, even militantly when it comes to designing. She explains that careful and successful alignment within the design should ensure no element looks as if it were placed there randomly. It may not seem to have great importance but bad alignment can make a design look less sophisticated and unprofessional.
Similar to repetition, alignment assists in visually connecting design elements with something else the user is looking at. Within a design, every component is visually connected through invisible lines and these lines assist in creating order and harmony. For example, paragraph blocks should be aligned and harmonised with headings and subheadings.
Jo also notes that centre alignment should be used sparingly; a centred heading can work well, but centred body text can often look messy. Strong alignment on the left side of the page is particularly helpful, as our eyes are trained to read from left to right.
Alignment is a bit of a quiet achiever amongst the other CRAP principles, as the user isn’t necessarily going to notice the obsessive one-pixel measuring and nudging, but well-executed alignment can mean the difference between a clean and messy design.
With regards to creating a positive user experience, alignment assists with creating a clear visual hierarchy, therefore making it easier for users to read and comprehend content quickly. This aspect of a design creates clear relationships between content ultimately leading to better user flow on the page. Finally, successful alignment reduces visual clutter that can lead to a confusing user experience.
P — Proximity
This final principle is focused on moving design elements closer or further apart from one another to achieve a more organised layout. Items that are not related should be kept visually separate from those that are. This enables the user to glance at a page and immediately identify which elements are grouped together and which are separate.
Here, whitespace (empty space around elements to create breathing room) is a designer’s best friend and can be used effectively to separate key elements of the design and reduce visual clutter. Our eye will naturally group similar items together, therefore users will make the assumption that elements which are not near each other in the design aren’t closely related.
Users should never be made to “work” when looking at a design. To create the best user experience, the design needs to be easy to understand and engage with. This is especially important when it comes to a website with an average viewing time of around 10 to 20 seconds per page.
Robin Williams claims that designers must be conscious of where their eye goes first when stepping back and looking at a project. Jo is firm about taking this step very seriously, as she sees it as one of the most important aspects of review. There is a particularly strong emphasis on viewing the design as a whole, from the perspective of the average user (not just the eyes of a designer).
Proximity creates a visual hierarchy making it easier for users to read content quickly. Designers can also help create a better user flow on the page by creating clear relationships between content. Finally, the successful use of proximity within a design reduces unnecessary clutter which avoids confusion for the user.
The takeaway message
While I definitely cannot see myself becoming an expert designer after my chat with Jo, I can see just how much thought and planning goes into creating both simple and complex designs. Ultimately I have a much higher appreciation of her work and time knowing just how much thought goes into each step of the project. It is also interesting to note just how fundamental and timeless these CRAP principles are. As well as how their prevalence is still strongly seen even with the industry moving into a strong user focussed space.
If you’d like to understand more about how CRAP design can benefit your business, our friendly team (especially Jo) is always up for a coffee and chat to better understand your business needs.
This piece was written in collaboration with Jo Burrows, a talented UI/UX Designer and beloved team member at Orange Digital.
Originally published at www.orangedigital.com.au.
