10 Essential Skills for the Modern UI & UX Designer

A how-to for fundamental skills every designer should hone.

Danny Sapio
UX Collective
Published in
13 min readNov 16, 2020

--

A Swiss army knife illustration

Designers are often eager to jump straight into UI animations, trendy UIs, and high performing roles before really honing the basics.

Well, I’m here today to take a step back and explain topics like creating a usability test or the perfect color palette as simply as I can.

1. How to space objects properly

Following a convention for spacing brings uniformity to our designs and ensures that we create consistent designs while collaborating with other designers.

There are two methods that designers frequently rely on to accurately space elements on the page. The most common spacing systems are the Hard grid (also called baseline grid) or Soft grid.

Hard grids align content to a fixed vertical grid, and Soft grids define the space between items on the page.

Why use a Hard grid? The argument for using a Hard Grid (8px or 4px) is that by utilizing transparent background boxes, then grouping them with foreground elements; it’s easier to keep track of margin and padding on a per-element basis. We can then snap these containers to the grid like puzzle pieces.

Why use a Soft grid? The argument for using a Soft Grid is that when an interface is developed, programming languages don’t use that kind of grid structure, so the grid is irrelevant. A soft grid is also less constraining for designers and requires less tedium.

I prefer a soft grid because I can adjust the spacing to fit content rather than adjust content to fit spacing guidelines. It’s also a quicker design process and invokes *less* perfectionistic tendencies.

Why design with spacing in increments of 8? Whether it’s a soft grid or a hard grid, it’s standard that designers space elements using 4 or 8 px.

--

--