Alignments & Spacing
Bring order, harmony and also help in utilizing real estate effectively
Alignment ensures logical order and organization among different elements on a canvas. Spacing when utilized appropriately gives the page a united harmonic appearance. Both Alignment & Spacing together help in creating a convenient, usable, and aesthetic representation of information.
When you are reading newspapers/magazines, have you ever observed that they don’t create any confusion while reading though they have a huge variety of content? Well… there is an effective way of organizing content by following a basic principle of design called Alignments & Spacing.
Free & Discounted Udemy Courses — Explore Now
By understanding and practicing different types of Alignments & Spacing, one can improve in doing design and other fields also.
The text should be aligned to the left side in most of the cases, right alignment is mostly followed for numerical and center alignment is followed to highlight a text or for titles, etc. In order to understand the importance of alignment, let us go through one real incident which created a huge impact due to a small misalignment
In the United States Presidential Election of 2000, a voting ballot in the state of Florida featured a poorly aligned interface that led to many voters voting for the wrong candidate.
Multiple border lines and a lack of proper alignments between names and vote markings led to confusion among voters.
When you need to make the path clear to information, you can use alignment. This redesigned ballot might have made it more obvious and easy for the voters to easily identify where to mark for their preferred candidate.
This example shows how alignments play a major role in the design.
Whitespace is the element of design that enables the objects on the page to exist. You don’t need to create a layout overcrowded with text and images to deliver a clear message. Active whitespace is left out intentionally to give more focus to the content whereas passive whitespace occurs naturally. The following example talks about the importance of white space/negative space in design
Google's homepage is filled with whitespace, so we can focus on what is important: search.
The image on the left side is the balanced use of white space between elements present in it and it looks organized whereas on the right side image Illustration is big, content is not associated together and the page has no visual hierarchy and the use of white space is not appropriate
As you now know the important aspects and practices of Alignments and Spacing, you will surely notice and inspect the nature and feasibility of Alignments and Spacing in things around you. Go through the following videos to understand alignments & spacing
Example
An Example of Alignments
An Example of spacing
The para on the left side is very congested and hard to read due to lack of line spacing whereas the para on the right side is easy compared to the left para, it allows the user to focus on key elements
Tips / Best Practices
- Don’t overload your page with all the content, provide breathing space to it
- Negative space and line spacing are a key for good design
- Prefer left alignment for text, use right alignment for numerical values, there might be some edge cases also
- Utilize white space/negative space to show hierarchy in the design
- Ensure that actions are always in context to your content
- Define what type of alignments you will be using throughout the product before starting it
Checklist
- Use third-party tools to check the spacing by adding extensions like ruler, dimensions, etc
- Maintain consistency between the similar types of elements
- Take self-reviews/reviews for your designs
- Stand back and check the sections relatability with their content
- Check if the section division is evident
- Maintain the same top, bottom, right, and left spacing throughout the product
Quick Question
Select the best practices and applications of spacing?
1. Space refers to the area within, around, above, or below elements
2. Space can be used to separate and connect elements in a design
3. Space helps in enhancing visual aesthetics
4. Space doesn’t create much impact on the information hierarchy
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
