Designer's best-kept secret.
It's a headline for a popular image website. Or a UI kit for designers.
Using pre-made website or app templates might seem easy. But for a good layout, you must understand design decisions. Let me share the basics.
After all, pre-processed food is always worse than a home-cooked meal.
Alignment
You can't throw things at a page and hope they will arrange themselves. One basic principle you can use is alignment.
Alignment helps organize and unify content. Alignment creates a visual connection. It's also easier on your user's brain if used properly.
There are 3 basic alignment types. Left-aligned, Centered, and Right-aligned.
Centered is the most boring one. It is also overused by new and non-designers. It's easy and cheap. Try to avoid it if possible.
Left-aligned is arguably the most popular one. And for good reason.
Most people read left to right. Left alignment helps them follow straight lines to the next section below.
Adding other elements aligned to the left, like forms, images, and buttons, is also a good idea. Not only blocks of text.
That's not to say you can't have 2 or more left-aligned blocks.
But be conscious that people will scan the first one and then switch to the second one on the right. That's how reading habits work.
To keep things simple: use one left-aligned block. Imagine an invisible line.
Use the ruler feature of your design tools like Figma or Sketch and snap elements to it precisely.
Avoid right-aligned text for the time being. If you still have to, use short text. People will have to find the anchor point with their eyes while moving to the next line, and it's worse when you have long text.
Grouping
The most powerful thing you can do to create a good design is to group elements that are related. It seems common sense but is often forgotten.
Not the fancy animations, the parallax effects, and blurry backgrounds. Grouping is more impactful.
Navigation links, feature lists, social proof cards, and so on — are grouped. It works.
Humans have evolved to identify patterns. It gives us comfort and less cognitive load when getting new information.
Grouping is done by: closeness and similarity.
Closeness is self-explanatory: organizing common elements together spatially. You can also group smaller groups.
For example, a social card has an image of the person, the name and title, and a short blurb about your product.
Many cards can be grouped in one social proof section. Use a maximum of 7 elements in a group.
The similarity is grouping by the same visual aesthetic.
All headlines or sub-headlines should have the same font size and weight. H1 and H2. Or images should have the same corner radius.
All this creates a sense of unity on your page. People need to learn how your sub-headline looks. Don't make them think more than they need.
Repetition
Repetition is grouping's older brother.
It's applying the same perspective of defining a thing once. Then duplicate it on different pages.
Not only people don't have to learn what is the purpose of this element or text again. It also makes it easier to design or build pages. You need to design it once.
Once you designed your layout and style. Use the same one for other pages. Same spacing, same alignment (left one I hope), same size, and font-weight.
If you're worried about being boring, the next point handles it.
Contrast
Now that you learned all the rules. It's time to break them. You can only break the rules once you know them though.
Design's goal is to grab someone's attention and contrast is our best friend for that.
When you want to bring focus to something. Make it stand out. And I mean by a lot. Be bold.
Create contrast by
-
Position
Make it not aligned to other elements. But make sure it's obvious and not a rookie mistake. Miss-align by a lot. -
Color
Make it truly distinct and vibrant. Different than other elements on your page. -
Size
This is my favorite one. Make something 2 or 3 times the size that it should be. Or even more.
You can use all these methods combined once you get more experience.
Here's an example of contrast usage by the team at MakeRoom. Notice the difference between the Headline and body text. The difference in alignment and color of buttons.
🐟 Just give me the fish
Left-align your element on the page. Especially text.
Group things that belong together logically like navigation buttons.
Create one style for your elements: Headline has the same size, color, and style.
Grab attention by making one element stand out by breaking all these rules. Don't be timid about it.