Hello! Welcome back to the second module of your graphic design course.
In our last two lessons, we explored the principles of balance and contrast. You learned how to arrange elements to create stability and dynamism, and how to use contrast to create emphasis and a clear visual hierarchy. These principles help you decide what should stand out. Today, we'll focus on how to organize all the elements on the page so they look intentional, clean, and professional.
This lesson will teach you how to apply the principles of alignment and proximity to organize and group elements. Mastering these two principles is what separates amateur design from professional work. It's the key to creating designs that are easy to read, navigate, and trust.
The Principle of Proximity: Grouping Related Items
Let's start with a simple but powerful idea: Proximity.
The principle of proximity states that items that are related to each other should be grouped close together, while items that are unrelated should be separated. When we see objects placed close to one another, our brains automatically perceive them as a single group.
This is crucial for organizing information. It reduces clutter and helps the viewer immediately understand the structure of your content without having to think about it.
To explore this concept, let's watch a short video that explains the role of proximity in design.
‘Proximity’ Design principle of Graphic Design Ep13/45 [Beginners guide to Graphic Design]
This video from Gareth David Studio, part of the same series we've used before, clearly defines proximity and its function. Pay attention to how spacing can either create or break relationships between elements.
Please watch from 01:26 to 05:44. The video first defines proximity, then shows how moving elements closer or further apart affects how we interpret them, and finally provides practical examples.
As the video highlighted, you should never make your audience work to figure out which caption belongs to which image, or which title goes with which paragraph. Proximity does that work for them.
Take a look at the image below. Notice how the 'Proximity' example on the bottom right feels much more organized than the scattered version. The heading, text, and button for each column are grouped together, creating three distinct units.
The core idea is to use space intentionally. Grouping isn't just about putting things near each other; it's also about using whitespace to separate different groups.
The Principle of Alignment: Creating Order
Once you've grouped your related items using proximity, the next step is to align them.
The principle of alignment states that nothing should be placed on the page arbitrarily. Every element should have a visual connection with another element. This creates a clean, organized, and intentional look.
There are two main types of alignment:
- Edge Alignment: Lining up elements to their left, right, top, or bottom edges.
- Center Alignment: Aligning elements to their centers.
When elements are aligned, they feel connected and cohesive, even if they aren't close to each other. This creates an invisible line on the page that our eyes can follow, making the design easier to scan.
Let's get a formal definition for both principles from Figma's own resource library.
13 core graphic design principles + how to apply them
This article from Figma provides concise definitions of key design principles. It's a great quick reference to solidify your understanding.
Read the short sections for Principle 1: Alignment and Principle 12: Proximity. Note the practical 'How to apply' tips for each.
Applying Alignment in Figma
Understanding the theory is one thing; applying it is another. Figma has a powerful and intuitive set of tools to help you achieve perfect alignment.
The following video tutorial is a fantastic guide to these tools. It will show you how to align objects to a frame, align multiple objects to each other, and distribute them evenly.
Figma Alignment UIUX Tutorial for Beginners
This tutorial by Aliena Cai is a deep dive into Figma's alignment tools. It's very practical and will form the basis for our hands-on practice.
First, watch from 00:13 to 04:16. This part covers all the fundamental alignment and distribution tools. Try to follow along in Figma, creating a few shapes and experimenting with the tools as she explains them.
You've now seen the basic tools:
- Alignment panel (top right) for aligning objects to their frame or to each other.
- Smart guides (the red lines that appear when you drag objects).
- Distribution and Tidy Up tools for creating equal spacing between multiple objects.
Now, let's put this into practice. The same video continues with a challenge: fixing a poorly aligned user interface element. Watching the presenter work through this is an excellent way to see how a professional thinks about alignment and spacing.
Figma Alignment UIUX Tutorial for Beginners
Let's continue with the video. This section is a practical walkthrough where the presenter fixes a messy design using the principles and tools we've just discussed. Pay close attention to her reasoning, especially when she talks about using multiples of 4 or 8 for spacing.
Watch from 04:16 to 09:36. You can either just watch to understand the thought process or, for better practice, try to pause the video and replicate the challenge yourself in Figma.
As the video mentions, meticulous alignment isn't just about looking good. It builds user trust. A messy, misaligned interface can feel unprofessional and even untrustworthy, which is a crucial consideration for someone aiming to do paid design work.
Test your understanding!
You are designing a simple "Contact Us" section for a website. It needs to contain the following elements:
- A heading: "Get In Touch"
- A short paragraph of text.
- An email address.
- A phone number.
- A physical address.
Describe how you would use proximity and alignment to organize these elements into a clean and readable layout.
Show answer
Here is one effective approach:
-
Proximity:
- The email, phone number, and physical address are all contact details, so they are related. I would use proximity to group these three items together, with a small, consistent space between them.
- The heading ("Get In Touch") and the introductory paragraph are also related. I would place them together, separate from the specific contact details.
- There would be a larger amount of whitespace between the paragraph and the block of contact details to show they are two distinct groups.
-
Alignment:
- I would apply a consistent left alignment to all elements: the heading, the paragraph, and the three lines of contact details. This creates a strong, clean vertical line on the left side of the composition, making it very easy to read.
- The three lines of contact details would not only be left-aligned with each other, but the spacing between them would be made equal using Figma's "Distribute vertical spacing" tool.
This approach uses proximity to create logical groups and alignment to create a neat, orderly structure within and between those groups.
Conclusion
Great job! Today you've learned two foundational principles that are all about creating structure and order. A design that uses proximity and alignment well feels intentional, is easy to understand, and looks professional.
Here are the key takeaways:
- Proximity: Group related elements together to form visual units. This helps organize information and reduce clutter.
- Alignment: Position elements along a common line or center. This creates a strong visual connection and a sense of order.
- Whitespace: Use the space between elements deliberately to separate or connect them.
- Figma Tools: The alignment and distribution tools in Figma are your best friends for applying these principles quickly and precisely.
In this lesson, we organized elements by aligning them to each other. But on a complex design, how do you maintain that alignment across the entire page? The answer is by using a grid. In our next lesson, we will learn how to use grids and columns to structure a layout in Figma, giving you a powerful framework for applying these principles at scale.