Wolf X Machina

Back to blog

A Micro-lesson: Spacing and Alignment

Posted in How To on April 17, 2020

One of the first things I notice on a poorly designed website is the lack of consistent spacing and alignment. In this article I want to show you, in the fastest way possible, how to drastically improve your interfaces.

Spacing and alignment is crucial for usability as it's easy on the eye and improves legibility. Making your interface's spacing and alignment consistent is one of the simplest things you can do to improve the user experience and make your website look so much better.

Let me show you some examples from my recent work: 

  1. Spacing: Notice how the margins on the bottom of the heading is equal to the margin on the bottom of the paragraph. 
    Spacing
  2. Alignment: In this example, not only is there consistent spacing, but the alignment of the headings is the same even though some headings take 2 lines and other take only 1 line.  Card alignment

Here are the important takeaways I would suggest:

  1. Spacing: if you have a heading, paragraph, and a numbered list all stacked on top of eachother, make the space between elements equal. So if you have a bottom margin of 30px on the top heading, make the bottom margin on the paragraph also 30px. If you have a "card" style, make the padding 30px all around the content. And don't forget to remove the bottom margin from the last element.
  2. Alignment: Align elements that should be logically grouped. If you have 3 columns across with cards, make sure to align the headings of each column, align the text, and align the buttons. This not only looks really smart but it tells your users that the content is the same.
  3. Whitespace: don't be afraid to let your elements breathe. Ample space makes an interface feel fresh and easy to read.
  4. Consistency: Whatever you do, be consistent. If you're using 90 pixels of padding between sections, use that regularly. If there is 30px of gutter between columns, then it should always be 30px.

It's that simple! If I can help you improve your website's user interface, please reach out: https://wolfxmachina.com/ui-design-and-development-for-programmers

Aaron Lopez

Aaron Lopez

Founder & Lead Developer at Wolf X Machina

Theme picker

Wolf X Machina

Next Level Interface Development for the DNN CMS

DNN themes, module design, and more from Wolf X Machina.

Learn More