Using the 8pt system - Deepstash
Using the 8pt system

Using the 8pt system

We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids to describe how strictly we adhere to them.

Reaching an aesthetically pleasing composition to the overall page is difficult to consistently create. Without a system to define the spacing relationships of my elements, it’s difficult to create consistency. 

STASHED IN:

2

STASHED IN:

0 Comments

MORE IDEAS FROM Intro to The 8-Point Grid System

The variety of screen sizes and pixel densities has continued to increase making the work of asset generation more complicated for designers. Utilizing an even number like 8 to size and space elements makes scaling for a wide variety of devices easy and consistent.

Use increments of 8 to size and space out the elements on a page. This means that any defined height or width, margin or padding will be an increment of 8. 

STASHED IN:

2

The majority of popular screen sizes are divisible by 8 which makes for an easy fit. Scaling by increments of 8 offers a good amount of options without overloading you with variables like a 6 point system, or limiting you like a 10 point system. 

Ultimately you have to decide what size is right for your audience. The “system” is only good if it is easy to follow and repeat. 

STASHED IN:

2

  • For Designers: Efficiency, less decisions to make while maintaining a quality rhythm between your elements.
  • For Teams: An easy system of communication between designers and developers (no fussing over pixels). A developer can easily eyeball an 8pt increment instead of having to measure each time.
  • For Users: Consistent aesthetic to the brand they trust. No blurry half-pixel offsets on their preferred device

STASHED IN:

2

It doesn’t. However, if you want to have a professional and trustworthy appearance it should. 

If you’ve ever shopped online, you’ve experienced hesitation when you click to purchase and the credit card entry form looks different from the rest of the site. A little consistency goes a long way.

STASHED IN:

2

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

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify all graphic and technical components display and function properly.

As the design gets passed from design teams to product owners and development teams, they each make changes due to temporal or business issues, which can mean the final product doesn't correspond with the design team’s vision.

1

STASHED IN:

4

What is Atomic Design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

9

STASHED IN:

80

STASHED IN:

0 Comments

Low code and no code are widely defined as visual approaches to web development.

With low code and no code, website building platforms can automate nearly every step of the development process and streamline builds, drastically increasing development speed for web professionals.

There are two main areas of low-code and no-code development:

  • One type is design-first platforms, which allow web professionals to build visually engaging web applications.
  • The other type is functionality-first platforms. These were built around providing functionality and are best used as internal tools to automate IT processes swiftly.

2

STASHED IN:

7