How to be a better designer
Fundamentals of basic design principles
What makes a design good or bad? Are there basic design principles one can follow?
Welcome to the Design CRAP Universe, not to be confused with the actual waste byproducts.
As a Visual Designer, I didn’t realize that I’ve been practicing the basic principles of CRAP since infancy.
Hopefully, by now you realize this is an acronym for something.
As a youngin’ I was abstract with my art and writing, bedazzling objects with sharpies and glitter to create Contrast. The older I got my book reports and projects all started to look the same as our education system is founded in Repetition and patterns. Then my first real adult job as an accountant deemed that all my debits and credits were in Alignment, it had to be obvious if my General Ledger accounts were balanced. Now, I design products and services where I need to be cognizant of Proximity and spacing to make everything you see make sense.
I hope my little journey has shown you that this funny little acronym is not only just for Design and Developers but is used by all walks of life to organize and communicate.
Advertisers use all parts of CRAP to grab our attention. Musicians use Repetition to get us hooked on their songs. Books and letters need to be aligned, otherwise, how do we know where the words begin or start? And can you imagine if symbols and signs weren’t grouped or spaced out properly? I could only imagine the confusion!
So let me help you break down the CRAP even further, specifically in what I do with Visual Design.
Everything around us is CRAP, Can you see it?
Contrast in CRAP
Our brains and eyes naturally look for differences and what we notice energizes the design or message before us. Of all the design principles, Contrast is one of the most powerful. Any design element can be contrasted with another.
Contrast can be achieved in many ways like:
- Manipulating space (near & far, empty & filled)
- Using color choices (dark & light, cool & warm)
- Text selection (serif & sans serif, bold & narrow)
- The positioning of elements (top & bottom, isolated & grouped)
Making use of Contrast helps to create a design in which certain elements are clearly dominant or stand out. We want our audience to grasp what they are seeing quickly.
Good Contrast Designs:
Have strong and clear focal points with a clear contrast among elements. If all items in a design are of equal or similar weight with weak contrast and with nothing being clearly dominant, it is difficult to know where to begin.
Strong Contrast is interesting and attractive – usually visibly easy to understand.
Low or Weak Contrast Designs:
When there is Poor Contrast, users strain to see words or content. If something is hard to read, users don’t trust it and won’t understand how to use it. Designers use Contrast to instill confidence, as we want users to feel like they can accomplish tasks presented to them free of any type of impairments or accessibility.
Repetition in CRAP
Repetition simply means the reusing of the same or similar elements throughout your design. Repetition brings a clear sense of unity, consistency, and cohesiveness.
With contrast we look for differences, Repetition we use elements to make sure the design is viewed as being part of a larger whole.
Slide Show Presentations or Reports, for example, have a consistent background and consistent use of type to add unity to the presentation. The consistent use of elements to create patterns gives visuals a specific style and unified look.
The Repetition of design elements like titles, layout, color schemes becomes visual cues so people are able to follow and understand what is being displayed to them.
We all online shop, and really appreciate when a shopping cart is neatly displayed. Each item is sorted row by row showing the same properties in the same places; product, detail, cost, and it repeats again and again.
Alignment in CRAP
In Art, Design, Science, Finance even, there isn’t’ a layout decision is done at random.
Alignment ensures each element is connected visually almost in a line.
With repetition elements unified by a consistent pattern, Alignment focuses on unity among elements of a single visual flow.
Designers use grids and flexboxes to align and visually connect elements. We place elements on a grid to try to align them with another element.
So is Alignment the best-kept secret in Design?
No, but the goal is to create a clean, clear, and sophisticated look and feel to organize information.
Alignment helps to create order, organize elements, create visual connections, and improve the readability of your design.
It’s incredible how a clean and harmonious website or mobile layout looks and how that can sway an audience’s understanding or preference to use that product or service.
We use alignment to organize elements, group elements, create balance, create structure, create connections between elements, to create a sharp, and clear outcome.
Questions to think about:
- Does everything line up?
- Are things centered, left-aligned, or out of place?
- Is it obvious how I want others to view what is shown to them?
- Did I group elements together? Is it structural
- Were connections made between the elements for easy digestion?
- What am I using to help me create balance? Grids? Spacing?
- Is the Alignment sharp and clear for the outcome we want for our audience?
Ultimately, We don’t want to distract our audience, unless it’s done on purpose.
Proximity in CRAP
With Proximity, the main design focus is moving elements closer or farther apart to achieve a more organized look.
We want related items that should be together, be put together so that they will be viewed as a group, rather than as several unrelated elements.
That way it can be assumed things that are not near each other in a design are not closely related and naturally opposite if things are grouped together.
Our audience should never have to “try” to figure things out, like if a picture goes with the text and does it match the title.
*****Although you could argue your eye starts top left and goes down? An even trickier spot would be in the footer text!
Here’s an example of Proximity an online magazine. All the content and control blocks are arranged on a broken grid and without any frames separating them from each other. The Proximity of the elements allows users to quickly define the content zones:
- the set of links in the header,
- the list of the latest publications on the left,
- the field of the preview for the fresh article
- and the block of social network links in the footer of the page.
You could also web into this that proximity can help you to convey meanings in the patterns and create more minimalism. If you group information together, you don’t need to tell people what each field or label is.
Proximity makes it easier to find things. Keeping things grouped helps to speed up people’s ability to learn how to use the site.
Proximity Lesson: Don’t make people think!
We run the risk of them “thinking” about the wrong things. Using Proximity creates a hierarchy for your content and elements. It compels your audience to focus on what you want them to.
Whether it’s the use of spacing, borders, using boxes, practicing hierarchy with under common headings all accomplish the purpose for your audience to scan and find information quickly and with ease.
Just think, when you look at your designs, notice what you are drawn to first, then second, and so on. See what path your eye takes you.
Still, need help with your CRAP💩?
Design is about making communication as easy and clear as possible for our intended viewers. Thus It is imperative to structure and create visuals for them to understand something that is balanced and scannable.
Why?
Because the Universal Elements of CRAP allow our brains to embrace all the benefits from the instant connection we make when things are communicated succinctly.
The CRAP Summary:
| CRAP Elements | CRAP Benefits |
| Contrast | Elements of design like lines, shapes, use of color, textures, sizes, spaces, types, can be changed to deliver Contrast. |
| Repetition | Strengthen visuals with patterns and connections |
| Alignment | Organize information to make it clear and intentional. |
| Proximity | Use Space or Groupings to provide instant context between the relationship of elements |
Fountain City… Pros at using CRAP 💩
