Become a UI designer in 6 mins!

Ultimate UI cheatsheet and industry practices to get you up and running!

I’ll start off assuming you’re an absolute beginner, and even if you’re not these tips might come in handy :

Down to the (Design) Basics:

Visual Hierarchy

The easiest way to explain to someone the concept of visual hierarchy :

How to achieve visual hierarchy?

  • Use the biggest font coupled with the largest weight to direct the user’s attention to the most important thing e.g the Heading/Topic/Caption
  • Keep reducing the size and/or font-weight for less important information.
  • A cool thing you’ll later notice is that you need to put the text in ascending or descending hierarchy. Provided the contrast between your different levels of hierarchy is massive you’ll easily obtain the desired result of eye movement.

Composition:

The single most important thing that spreads across all fields and the nature of designs is the composition. In literal terms, it means how something is “put together”. In design, it refers to how you use the visual design principles in a way that looks pleasing to the eye and conveys what they are supposed to.

Common units:

Pixels (px): A picture element: a single dot of color on a screen

Screen sizes: Diagonal length of the screen In inches

Resolutions: A width and height of pixels in a screen — e.g. 320wx480h

Pixel density / Dots per inch (DPI): The number of pixels that fit into an inch is referred to as pixel density.

Points (pt): A similarly abstract measurement for iOS

Density-independent pixels (dp): (pronounced “dips”) are flexible units that scale to have uniform dimensions on any screen. (for Android)

Screen Resolutions:

  • There’s no one size fits all resolution. Need to know what your customers are going to be using (by google analytics etc).
  • Industry-standard is to design for lower resolutions
  • Web: Safe to use 1280*768
  • 1200px wide design is the topple point: anything below it is usually for tablets etc, and anything above is aimed for web browsers for pc/laptop.
  • Mobile: Design for mobile displays from 360×640 (android) through 414×896 (iOS)

Layout Grids:

Breakpoints: “You’ve probably seen how the content on a website will rearrange itself at certain widths of your browser window. These are the breakpoints.”

A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. (In simpler words we design differently for the different range of sizes)

  1. Columns: Content is placed in the areas of the screen that contain columns.
  • Column width is defined using percentages, rather than fixed pixel values, this makes the content flexible and responsive.
  • The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size.
  • Standard Guide:
  • 360 dp = 4 column grid — 16px margins/gutters (for mobile devices)
  • 600 dp = 8 column grid — 16px margins/gutters (for tablets)
  • 1200 dp = 12 column grid — 24px margins/gutters (for web)

2. Gutters: Gutters are the spaces between columns. They help separate content.

  • Gutter widths are fixed values at each breakpoint range.
  • Used to create whitespace between text, larger the screen larger should be the gutters.
  • For responsive design we use different gutter sizes for different breakpoints.

3. Margins: Margins are the space between the left and right edges of the screen.

  • Margin widths are defined as fixed values at each breakpoint range.
  • Used to create whitespace at the sides of the text, larger the screen larger should be the gutters.
  • For responsive design, we use different gutter sizes for different breakpoints.
  • There are two types of grid behaviors:

Types of Images: PNG vs SVG vs JPEG vs GIF

Vector Graphics (SVG):

  • An SVG image remains crisp and clear at any resolution or size.
  • Supports transparency + animation + gradients
  • Uses mathematic formulas to make shapes as opposed to pixels (Explained below)

Raster Graphics (JPG, GIF, and PNG):

  • This is made up of a bunch of individually colored pixels, instead of mathematical calculations.
  • JPG/JPEG doesn’t support transparency, quick to load (smaller in size)
  • PNG supports transparency, larger in size.

If you really need to know the full forms (literally makes no difference tbvh):

JPG (Joint Photographic Experts Group)

GIF (Graphics Interchange Format)

PNG (Portable Network Graphics)

SVG (Scalable Vector Graphics)

Leading vs Kerning vs Tracking

Leading: Adjusts how the text is vertically spaced.

Kerning: Adjusts space between two letters.

Tracking: Adjusts spacing throughout the entire word.

Line Spacing

Get it right and no one apart from typographers and UX designers will notice. Get it wrong and your users will immediately notice that there’s something wrong with your text, even if they can’t put their finger on what it is.

Line spacing is commonly measured as a percentage of the font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable, but 140% tends to be the most quoted sweet spot. You should experiment to see what looks best with your text.

5 Golden Rules

  1. Aim for about 120%-140% (i.e 1.2x-1.4x of your font size) for optimal readability and accessibility.
  2. Limit line length to 70–80 characters.
  3. Small fonts (under 18pts) need more spacing (For Font size 18, choose a line height around 24–26).
  4. Experiment with tighter spacing on pull quotes or other short texts like headings (You can use 100–110% of your heading size as your line height).
  5. Rule of thumb: larger the font size -> smaller the line height (and vice versa)

Hey I won’t leave you with just this, here are some Important Links for further study:

Article Credit

Pin It on Pinterest