Here’s What You Should Learn
- Demonstrate the Theory of Proximity
- Show the iterative process of a design project
Theory of Proximity
The Theory of Proximity is the relationship one makes when objects are close together. When presented with a set of elements on a screen, on paper, or even in the sky, our brains want to make a structure or meaning out of them. This need to find that structure is described in a set of theories called Gestalt Principles. The principle of proximity describes the relative distance between objects that helps us either group or not group those objects together.
Ideation
When working through ideas on how to demonstrate the proximity theory, I started with an exercise called Crazy Eights. This is a fast sketching exercise that produces eight distinct ideas in eight minutes. Above you can see how grouping different design elements together helps people see patterns. They in turn translate those patterns by associating them with related content.
From testing and feedback the fourth, or top right-hand corner sketch, was the design I felt best demonstrates the theory of proximity the best. The separation of two a two-column layout for a web page or app easily helps the mind make connections to groups.
Refined Sketch
I took the design from the crazy eights exercise and moved from sketches to Adobe Illustrator. Using a design program will help me precisely group objects to ensure distances and spacing.
I am using outlined boxes to give multiple areas of similarity or grouping. We see three main sections outlined in boxes. The first is a column where the user will assume that all content within the column is related. The second section would be grouped by proximity relating the 4 lines to the box beneath it.
With more feedback and testing, I know that I will need to also group with content and not just spacing. For the final design concept, the content will be copy or text, a call to action button, headlines, and images. This will further enforce the proximity design theory.
Conclusion
Below is the final concept shown as a web page. I refined the layout design with headlines and images to ensure content grouping along with proximity spacing.
The Theory Of Proximity
H4 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H4 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H4 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H1 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H1 Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.