{"id":4410,"date":"2020-07-21T12:00:00","date_gmt":"2020-07-21T10:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/what-are-gestalt-principles\/"},"modified":"2023-05-11T07:29:24","modified_gmt":"2023-05-11T05:29:24","slug":"what-are-gestalt-principles","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/what-are-gestalt-principles\/","title":{"rendered":"What Are The 5 Gestalt Principles?"},"content":{"rendered":"

Communication plays a central role in both user interface (UI) and user experience (UX) design<\/a>. Understanding how your users perceive and interpret your work is key. The Gestalt Principles can help you do so.<\/p>\n

Developed by Gestalt psychologists<\/a>, the Gestalt Principles describe how we interpret and process complex stimuli around us. They state that our minds have a tendency to group and organize elements and do so in predictable ways. The ways in which our mind does so are summarized in the Gestalt Principles.<\/p>\n

In this guide, I\u2019ll introduce you to the five Gestalt Principles and how they contribute to user-friendly design.<\/p>\n

A Brief History Of The Gestalt Principles<\/h3>\n

During the 1920s, German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler studied human perception and chaos. They were invested in understanding how our mind goes about making sense of our chaotic surroundings.<\/p>\n

Through observation, Wertheimer, Koffka and Kohler theorized that we tend to group elements, recognize patterns, and simplify complex imagery. But we don\u2019t do so randomly\u2014our efforts tend to fall under certain principles<\/a>. They called these principles the Gestalt Principles.<\/p>\n

Since their conception, the Gestalt Principles have been adopted by designers of all disciplines. UI and UX are no exception.<\/p>\n

The 5 Gestalt Principles<\/h3>\n

If you\u2019re here, chances are that you\u2019re working to build a career in tech. Whether you\u2019re an aspiring UX designer or a budding UI professional, the Gestalt Principles can help you to understand how the end user will interpret and navigate your work. Now let\u2019s explore each of these principles in detail. To illustrate each Gestalt Principle, we\u2019ve selected a great Dribbble shot. The 5 Gestalt Principles we\u2019ll take a look at are:<\/p>\n

    \n
  1. Proximity<\/a><\/li>\n
  2. Similarity<\/a><\/li>\n
  3. Continuity<\/a><\/li>\n
  4. Closure<\/a><\/li>\n
  5. Connectedness<\/a><\/li>\n<\/ol>\n

    Feel free to use the clickable menu to skip to a Gestalt Principle that piques your interest. Now, let\u2019s begin.<\/p>\n

    1. Proximity<\/h2>\n

    The principle of proximity states that we tend to perceive elements as a group when they are close to each other. To better understand it, consider the cool checkout form by Mattias Johansson<\/a> below. Pretty neat, huh?<\/p>\n

    \"An
    \nSource:     Dribbble<\/a><\/p>\n

    In it, we see four main groups of elements, marked and numbered below.<\/p>\n

    \"A<\/p>\n

    These groups don\u2019t sit inside boxes or have clearly delineated borders around them. Yet we perceive them as separate clusters of content. We do so because the elements in each section sit close to each other.<\/p>\n

    If you look a little closer, you\u2019ll notice subgroups in each group. In group 3, each input field and label are perceived as a separate group. In group 4, each list item is perceived as another. This is the principle of proximity in action.<\/p>\n

    2. Similarity<\/h2>\n

    Throw a bag of M&Ms on a table and your mind will immediately start to group them by color. Red will be one group, green another, and yellow a third. We\u2019re inclined to group elements that look like each other.<\/p>\n

    In the Dribbble shot below by Sherzod Mirzaakhmedov<\/a>, size is used to communicate relationships. Theaters and movies that have the same characteristics are set on tiles that are the same size. By quickly skimming the page, we\u2019re able to tell which theaters and movies belong to the same groups. \u00a0Informative and visually appealing!<\/p>\n

    \"A<\/p>\n

    3. Continuity<\/h2>\n

    Ever notice how your eyes like to travel along lines, following and flowing with them? Our mind has a tendency to follow paths and group elements that are aligned with each other. This is the principle of continuity.<\/p>\n

    We can use lines to capture and guide users towards important elements within an interface. Devin Jacoviello<\/a> creatively uses a series of platforms to engulf and guide users to Asana’s tool Timeline\u2019s value proposition on his landing page.<\/p>\n

    \"A<\/p>\n

    4. Closure<\/h2>\n

    Given the chance, our mind will opt for simplicity<\/a>. Since a whole is easier to process than multiple parts, we\u2019ll fill in the gaps or connect the dots to complete implied shapes or images.<\/p>\n

    Loaders are a common element in user interfaces today. Whenever a product needs a little more time to complete a task, like refreshing or processing a payment, loaders will let us know the product is still working in the background.<\/p>\n

    Khrystyna<\/a> illustrates the principle of closure in her loader below. The moving, developing lines in the animation never really touch each other and yet we see a circle.<\/p>\n

    \"A<\/p>\n

    5. Connectedness<\/h2>\n

    Out of all five Gestalt Principles, connectedness is arguably the easiest to grasp. Connectedness states that we tend to group elements when they are connected to each other. That\u2019s it!<\/p>\n

    Many apps<\/a> feature onboardings these days. These are the first few screens you see when you pop open a new app. Often, they\u2019ll feature stunning animations and graphics and will share the best parts of your newly-downloaded app with you.<\/p>\n

    We\u2019ve shared an onboarding by Paperpillar<\/a> below. In it, the lovely couple lives inside a pink bubble. It houses the characters and elements around them, grouping them visually.<\/p>\n

    \"An<\/p>\n

    Gestalt Principles: Over to You!<\/h3>\n

    Once you\u2019ve got a solid grasp on them, it is easy to see the Gestalt Principles everywhere you look in UI and UX design. The next time you pop open your favorite app<\/a> or find yourself enjoying a website, ask yourself: are any of the Gestalt Principles being applied here? Do they work alone or are they being used in combination?<\/p>\n

    To help train your brain, make it a point to analyze every great app you come across, make notes and draw inspiration from it. Then, practice! Soon enough, you\u2019ll be building your first great product with the help of Wertheimer, Koffka and Kohler.<\/p>\n

    It may also help you to build up a list of design resources to bolster up your knowledge, skills, and provide inspiration\u2014we’ve provided six free resources in this video, presented by UX designer Dee Scarano:<\/p>\n