Cover Image

Typography: Spacing

June 17, 2021 - Reading time: 5 minutes

Learn how to create and use vertical rhythm in UI design.

I'm starting a new series of designer tips to cover edge-cutting web design topics, such as typography, colors, layout, components, and design systems.

The first volume is fully dedicated to UI typography.  Here you will find all the knowledge to create strong typography for your projects.

Designers use typography as a tool to deliver information pleasantly. Spacing, font size, width, color, and line heights — all elements work together to achieve a better user experience.

In this episode, we'll discuss Spacing. Spacing helps to establish a vertical rhythm and define the relationship in which your typography elements are present. 

A good vertical rhythm is like a good song. It's made with thoughtful pauses and rhythm change to create an interesting flow a user is happy to follow.

Tip 1—Use more space for
 larger titles

More space will help to create a better contrast between the headline and a tinted text. This results in better visual balance and readability of your main CTA's.

Use more space for larger titles

Tip 2—Use less space for
 smaller titles

Smaller headlines should be closer to the paragraph text. You'll need this type of spacing to highlight an important part of the text without breaking the reading flow.

Use less space for smaller titles

Tip 3—Use more space 
above the titles

The extra space above the heading will create a pause to separate one piece of text from another. In addition, more space makes the topic transition more clear.

Use more space 
above the titles

Tip 4—Spacing between paragraphs

To make your typography look consistent in any scenario, set up a universal spacing, you'll use as a default one. Use your primary font line-height to define it.

For example, if your font line height is 24pt, take 40%-75% from that number, and use it as your spacing. (e.g., 8/10/12pt).

This method is proven good because:
1. The spacing will always match your font choice.
2. You can multiply this number and create a spacing system for every typography need.

Spacing between paragraphs

Tip 5—Cut horizontal space
 for long titles

Our eyes are scanning the text in a Z-way pattern. That's why long headlines are so hard to follow until the last word.

Use less horizontal space, and seek symmetry through logical line breaks to achieve 
eye-catching CTA’s.

Cut horizontal space

Tip 6—Space between 
text and image

Put image higher above the title. This will help the text not to be obscured by visually heavy images or graphics.

Space between 
text and image

Tip 7—Space inside
 the paragraph

Keep a consistent spacing inside your paragraph and between its elements. Use your universal spacing for all elements inside the paragraph, such as lists, quotes, tables, or any decorative elements.

Space inside
 the paragraph

Tip 8—Vertical rythm vs. 
layout grid

When using a grid, it's easy to fall into a trap a solely rely on it to align your text. This will make your text uniformed but not visually appealing.

Instead, work with contrast and stay consistent with spacings to create a memorable rythm that will guide your reader.

Vertical rythm vs. 
layout grid

Useful resources


Cover Image

UI Grid Best Practices

May 20, 2021 - Reading time: 6 minutes

Make better designs with layout grid tips & tricks.

Space and grid make the foundation of any design. Once mastered and used correctly, the grid helps you to create solid and visually appealing solutions for your designs.

Therefore, I would like to share my tips for mastering the grid in UI design. In this episode, we talk about layout grids. Let's start ✌️

What is a Grid?

The grid helps establish the foundation of any interface. You can think of it as a framework for your layout. The framework helps to organize your UI elements, guide the reader and identify individual parts of your design.

Terminology

The grid consists of grid units. The layout is placed upon the grid and has a certain amount of columns. Columns have margins on the left and right, as well as paddings between each column.

UI Grid Best Practices — Terminology

Tip 1—Choose numbers wisely

While the 12-column Bootstrap like-grid is the most popular choice, it's not mandatory. When choosing a grid, select the one with a number of columns your design truly needs, no less, no more.

Choose layout numbers wisely

Tip 2—Know your constraints

Always consider the screen you are designing for. Know how it is handled and operated by others. Use these limitations to your advantage and learn to design with them.

Know your constraints

Most common screen resolutions (px)

  • Desktop: 1440x1024
  • Tablet: 768x1024
  • Mobile: 320x640

Tip 3— Horizontal and vertical spacing

Consider both vertical and horizontal spacing to make your layout more appealing and consistent.

Horizontal and vertical spacing

Tip 4—Shape vertical rhythm

Use the baseline grid to arrange the content and bring visual consistency to your text and layout elements.

Shape vertical rhythm

Bonus tip—Adjust font line height to match the baseline grid.

For example: If you choose 4px as a baseline/grid unit, to align text, you will need to set the line height of the font to a multiple of the unit, which means the line height should be 4, 12, 32, 64, etc.

Tip 5—Use power of the frame & color

Use framing as a tool to focus your user's attention on a certain layout part. Add additional visual weight in the place where it is needed.

Use power of the frame & color

Tip 6—Step out of the grid

Put certain elements off the grid. Use this breakdown trick to add value and make certain parts of your design stand out.

Step out of the grid

Tip 7—Adapt your grid

Ensure your layout is adaptable to common screen sizes, breakpoints and provides a good mobile user experience. Make sure to always check your designs on different screens.

Adapt your grid

Tip 8—Learn to design without a grid

Designing without the grid is okay for a small project indeed, but for scaling projects, it's mandatory.

Learn to design with a grid and without actually bringing it to your canvas. Observe your layout without the "grid glasses" from time to time to find the most creative solutions for your tasks.

Useful resources

Resources

Plugins


Cover Image

How to Be a Better Designer

April 16, 2021 - Reading time: 8 minutes

Mindful tips for a creative job.

How to be a good designer? It's hard to say. Probably one should be able to code, know Photoshop, be a good architect or manager + designer + unicorn, or smth. This is not an article about that.

Here I collected tips/perks I discovered on my journey into calling myself a designer.

Consider these be are summarized concepts rather than serious ass advice. Have fun.

Tip 1 — Work a lot

Work a lot, do design consistently.

Practice makes perfect, so learn to have fun in the process. Instead of dreaming about the outcome, enjoy the small details of your daily routine and learn to be happy while you in these waters.

Tip 2 — Take a break

learn to take a break.

Learn to distract yourself from cluttered thoughts and calm your mind. 💭

Instead of staring at the screen, relaxing and conducting inner research will bring the best ideas when stuck.

Consider meditation as one of your tools you should apply to progress from time to time.

Tip 3—Master your tool

focus on one thing

Any tool. Just focus on one at a time and achieve results with it.

Once you master one, you will be able to do crazy shit, even if it photoshop. And, the next tool will be much easier to get into.

At least because learning is — also an interface you recognize with time.

Tip 4 — Steal like an artist

Steal like an artist

It’s hard to come up with original ideas at the start.

So no need to shame. Find someone else’s design you really like, and copy it while constantly making it better.

Count that process being rethinking of a problem solution rather than stealing the idea.

Tip 5 — Learn to listen

Learn to listen

Use listening as a tool to establish trust, learn others' viewpoints, and collect valuable intel to make your design better.

Tip 6 — Articulate your design

Articulate your design

Know how to present your work and articulate your decisions. Put ego far away when reviewing and getting feedback also.

Tip 7 —  Learn to lose

Learn to lose

Sometimes your design won't work, and it's okay.

Please don't focus on the loss and consider it as a defeat. Use it as a valuable experience to get ready for the next battle.

Tip 8  —  Optimize your process

Optimize your process

Plan your way smartly - use best practices and guides to shorten the distance. Skip designing everything from scratch and pre-made assets to speed up the process.

Always strive to re-use and power up your toolkit.

Useful resources

References

Tools