Pt = point - Deepstash
Pt  = point

Pt = point

We use small artboards while the devices we design for are huge. For example:

  • The iPhone XR has a Retina display that has twice as many pixels per inch (ppi) as a regular screen, meaning the artboard is rendered at twice as many pixels.
  • On the iPhone X, the artboard is rendered at 3 times as much, since it has a Super Retina display and 3 times as much ppi.

Designing for the smallest size allows scaling assets into the various sizes the different devices require while maintaining pixel-perfect rendering. 1 pt can be translated into 1,4 or 9 pixels at the @1x, @2x, and @3x sizes.

STASHED IN:

6

MORE IDEAS FROM The comprehensive 8pt Grid Guide

Why the 8pt grid
  • It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).
  • Apple and Google advise so.
  • It's a good basic unit to work with. 4 and 8 are easily multiplied, are flexible and consistent. 

STASHED IN:

6

Iconography

Icons designed on an 8pt based grid will scale perfectly.

If you want to use icons in a different size, one recommendation is to design on a 16 x 16 pixel grid or a 20 x 20 grid. This way, you're covered for any size:16, 20, 24, 32, 40 etc.

STASHED IN:

6

Start your UI project right

... using the extended framework for the 8pt grid: Typography, Icons and Layout.

The 8 point grid is the best go-to grid and can be applied to most digital design projects, especially product design.

STASHED IN:

5

The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column, resulting in a 30px gutter between columns plus 15px to the left and right of the grid. 

The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the whole available width.

  • Customising for a desktop: Each column should be 72px wide, with a gutter of 24px or 32px.
  • Designing for mobile is up to you: Not all mobile devices' width dimension is divisible by 8. 12 columns aren't practical for narrow screens. 

STASHED IN:

6

While the font sizes can vary and move away from the 8 multiplication, the line height will not. 

For example, the Paragraph font size can be 15 pixels, but the line height should be a multiplication of 8, so 24px is an acceptable value. 

1

STASHED IN:

6

Vertical Rhythm

Rows should be 8px tall. 

Maintaining a vertical rhythm when designing for mobile (web or apps) is vital since there isn’t much horizontal rhythm to work with.

A typographic system that is designed based on the 8pt grid will sit wonderfully on an 8pt vertical grid. 

STASHED IN:

7

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA

Denying Your Own Creativity

That’s a self-imposed and self-limiting belief. Stop that.

Creativity is a requirement for problem-solving and we all problem-solve. Acknowledge that you're inherently creative, and then start tearing down the other barriers in your mind.

2

STASHED IN:

548

STASHED IN:

0 Comments

“Maximizing optionality” - the state of enjoying possibilities without being on the hook to do anything - is a key reason young people give when going for big school or employer.

  • working at a consulting firm creates optionality because of the broad exposures & skills
  • going to graduate school creates optionality by enabling more opportunities than a narrow professional trajectory can provide.
  • working at prestigious firms and developing social networks are similarly viewed as enabling more choices and more optionality

4

STASHED IN:

11

STASHED IN:

0 Comments

Start with habits you can't say no to

Start extremely simple and work your way up. There's always room to increase the difficulty later.

If you want to build an exercise habit commit to 1 minute per day instead of an hour per day. If you want to build a writing habit start with 3 sentences per day instead of an entire page.

STASHED IN:

368