A Micro-lesson: Spacing and Alignment

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. 
   
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.  

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.