How to Spot Bad Design

    | |

    If you have a feeling something is off with a design and you don’t quite know why, you might want to check the fundamentals. The CRAP acronym, coined by Robin Patricia Williams, represents four essential graphic design principles: Contrast, Repetition, Alignment, and Proximity. Think of this system as a way to identify what is wrong with a design and conversely a way to clean things up and get your media product to have greater impact. These principles serve as the building blocks for creating visually appealing, effective, and user-friendly designs. Whether you’re designing a website, a banner, a social media ad, an eBook, or even a poster, understanding CRAP can elevate your work to new heights.

    Contrast

    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

    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 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

    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.

    Spaciousness Creates Clarity

    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.

    Design Review Cheat Sheet:

    ElementsBenefits
    ContrastElements of design like lines, shapes, use of color, textures, sizes, spaces, types, can be changed to deliver Contrast.
    RepetitionStrengthen visuals with patterns and connections
    AlignmentOrganize information to make it clear and intentional.
    ProximityUse Space or Groupings to provide instant context between the relationship of elements

    Still, need help with your designs?

    Our team of UI experts can help you achieve more impactful results. Consider us for a UI/UX audit or brand redesign, and do let us know if you have any further questions.

    "*" indicates required fields

    This field is for validation purposes and should be left unchanged.