Level Up Your Design With The Great Eight Design System

This design system gives you a level up in three distinct areas:

Consistency.
By implementing and learning how to use this system, you will be able to quickly figure out and implement design patterns for your designs. You will never be steeped in the mystery of what your paddings and margins are. Instead, you can quickly develop design rules and implement them easily across your design. No more guessing games.

Longevity.
You will be able to use this system for the rest of your life. It's that good, as you will see. It's the closest to actual magic that I have encountered in life. David Blaine is pretty awesome, but his magic is still not real.

Design Harmonies.
The Great Eight really shines within two Gestalt Principles: Proximity + Similarity. Gestalt was created by a bunch of German psychologists to explain how human minds perceive visual information. In my mind, these two principles are a core component of design harmony. Using the Great Eight achieves an easy way to implement design harmony.

The Great Eight is not a new concept. Designers have been using this concept for a long time, and this methodology has stood the test of time.

The simple elegance

The concept is simple. For your paddings, margins, and distances between elements, use multiples of 8px. The genius is in the simple rule of working within multiples of 8. There are so many different configurations you can implement. I will show you how to implement this simplicity, some good guidelines to follow, and when to break this rule and work within The Granular Four (I can't help coming up with all of these names.) to further refine your designs.

Utilizing The Great Eight is like a fun game that you can play to create rad designs. So let's get to using this design system.

* A note regarding the unit you work with. I call out using pixels in this article. I have also used points, which are a touch bigger than pixels. So, if you are a point head, expect your design to be a bit more open than working in pixels. However, you can work in pixels on any project in design programs. 

When it comes to the web, we do like to work in fluid units. Converting pixels to REMS is extremely easy, and you need to consider your design's margins and paddings as an accurate approximation on the web. I use the Great Eight on every web project we do. It works its magic just like when working in Figma.

How To Use The Great Eight System 

The best way to explain using this system is to provide some use cases. We will start with a web design, as it can be one of the most complex use cases showing off the power of The Great Eight. 

Let's start big

For our first use case, we will start by using a homepage design at a large desktop size. I might choose a nice amount of white space for the outer margins. I will choose 160px. 160px is 20 units of 8px. 

If there is too much or too little white space, I will work within units of 8px to refine the spacing. I have decided to be ultra-white spacey and set my outer margins to 240px. Yummy. Let's pause as we have identified our first pattern that you can start documenting.

You like ample white space in this large design use case. You have chosen 240px as the outer margins; you can now decide to work with units of 80px for larger margins and paddings. 

Example of what I mean:
240px for outer margins.
160px vertical spacing between content sections.
80px indentation padding, margins between inner content elements

Those three rules above will drive a large portion of your design. No more guesswork; you now have the start of a solid framework to work with and refine.

Once I have the basics of my framework figured out, I will work on a content block to get smaller margins + paddings. Usually, I will start with a Headline, subhead, body copy, and a call to action button. I will start with this type of content block because the design you come up with here will drive a considerable portion of smaller content blocks throughout your overall design.

Here is an example:
I will put the subhead as a small, uppercase above the Headline. I will set the distance between the subhead and Headline as 40px. I made this decision as it is half of the 80px system we figured out above. Remember, this is a starting point; you can refine everything once you get everything laid out.

I will then set 40px between the headline and body copy and 80px between the body copy and call to action button. I made these decisions to implement the proximity principle. First, I grouped the different contents together to see their relationship in how I perceive them. Then set a little more spacing between the call to action button and contents to calibrate my eyes. Does it look right? Not quite, to me. Not to fear, working within The Great Eight makes refining easy.

I will do a few more layouts and create different relationships to see how the design feels. You will notice I am working in multiples of eight to refine my layouts.

Many aspects can affect the decisions you make: type, color, and size of type used. Don't be afraid to do multiple layouts and explore different units of eight variations you might use.

Once I finalize the layout design I want to use, I document the rules I used. Here is an example:

Global Spacing:
240px for outside margins
160px vertical spacing between content sections.

Content Block Spacing:
56px inner padding
40px spacing between subhead and Headline
24px spacing between headline and body copy
48px spacing between body copy and call to action button

You are starting to develop design rules that you can follow to achieve consistency in your design. This will help you make decisions quicker, create visually impacting designs, and not feel stressed out. 

Take the above workflow and lay out the rest of your design. As you uncover more design rules, keep jotting them down. Before you know it, you will have created a robust design system for your margins and paddings.‍

Using The Great Eight system, you take the guesswork out of designing. If you looking at the screen wondering what a margin should be between two elements, either re-use one of your established design rules or think in multiples of eight. You can't go wrong. Well, you can, but not as bad.

Rolling Out

With UI/UX projects, you will have multiple screens and states to design. As a result, the work can pile up and might feel overwhelming. Usually, the initial page you design will establish many design rules you will want to follow for the other screens and states. 

We have used the homepage at the desktop size to help establish your base margins and padding system using The Great Eight. Congrats, you rock.

Now it's time to roll out your design to the other pages. You will find that you may need to refine your established rules a bit more in some cases. That is perfectly fine. Make sure you stay within The Great Eight, and you are golden.

Speaking of further refinement. Let's introduce another aspect of this system that may help you further. The Granular Four. 

The Fine Four

This system provides another level to The Great Eight. It allows you to refine your designs further and really put a polish on them. The approach is straightforward. Work in multiples of 4px based on the multiples of 8px. 

Here is an example:
From our exercise above, I feel the subhead and Headline could have a tightened spacing. Working in multiples of 8px does not give me the exact desired results. So, halve the 8px unit, and work in multiples of 4px. I change my spacing to 52px, and it feels much nicer. 

You can do this with any of your layouts for further refinement. The key is that you should work in The Fine Four after setting the layout in The Great Eight (call me the name king). Using The Fine Four as your base is another approach, so I am calling this out to make sure you understand the difference. 

Small Screen Use case

Our next use case will be to take the above Desktop design and create a mobile or a smaller screen design. Again, the same principles that we have worked through above apply here. However, they will most likely be in smaller increments. I usually try to halve my desktop rules to jump into the smaller design as a starting point.

Here is an example:
24px (8x3) for outer margins (240px for desktop, more than half)
80px vertical spacing between content sections (160px for desktop)
40px - 56px for indentation or inner paddings.

Above is a good starting point for some general rules you can apply and start laying out your smaller design. You will likely find that you will refine and choose much smaller increments. Document your new set of units to further develop your design rules. You will now have design rules for large and small sizes. Making your design life a lot easier.

As you can see in my small screen design examples, I have made some different layout choices in different increments. You may work in multiples of 24px instead of 80px like on larger screens. Find what works within The Great Eight system for your design and content.

Important Guidelines

• Type size and font used will affect your design further on smaller screens. Don't be alarmed if things are incredibly different for smaller sizes. That is the point of using this system.
• Try to test your design on the actual medium it is intended for. For example, you may need to adjust based on holding a screen closer to your face.
• For these use cases, we are doing UI/UX. Pixels are used but will be approximated as fluid units that should be used in the live build. The margins and spacing should still be the same; they will be slightly different in different sizes. We are talking proportion here. Your base sizing is still relevant and should be used as a golden rule to QA against.
• Work that Granular Four to really give a polish. Don't be afraid to jump into the deep waters of fine-tuning a design.
• Always work in chunks of time, step away and give yourself fresh eyes. I like to work in chunks of 60-90mins then move on for a bit. Give the project some space. Find what is most effective for you.

Can I break the rules?

You ask excellent questions! Yes. With anything in life, it is good to have a mastery of fundamentals to know what rules to break and how best to break them. 

Here are a few ways I will break the rules of this system to create some exceptional harmonies and rhythms:‍

• I will use multiples of 4px for really fine-tuning! FineFour!
• I will even work in multiples of 2px for crazy fine-tuning.
• I will take my vertical section spacing for white space-heavy designs and halve it for the outer margins. So if I have 144px vertical spacing, I will use 72px outside margins. Or, just use the same 144px for outer margins to make it extra puffy.
• I will use this system as a base for an initial margin, and then if something doesn't feel right, I will optically adjust to create harmony. Most likely working in 2px increments.
• Depending on many aspects of your design, you may need to eyeball to create magic. Don't forget to document your design implementation and add it to your design system rules as an exception!

Can this be used on any type of project?

Absolutely. I have used this method in print, logo, advertising, and billboards. You name it, these principles can be applied. That is why I love it so much. You can use this methodology for the rest of your design life on any project. Sometimes you will need to hop between pixels and inches, but the extra work is worth it as you will have some sweet designs to show for it.

The Great Eight can be used for website development. As a developer, if you don't have a design to work with or the design you received is poorly done, you can implement this system and make straightforward decisions for spacing and margins. Of course, knowing basic design principles helps immensely coupled with The Great Eight. However, using the system will eliminate guessing games and make life palatable for that project.

Final Considerations

You may have many factors to consider when working with this system and your design. Here are some considerations rattling around in my brain:

• Your typography may be chunky and need a little more spacing. That's cool; give it more spacing.
• You may have graphic elements that bleed into other sections vertically. That's cool; you can have two sections colliding with each other. Use the Great Eight to space the section's content from each other, or wing it and move your sections apart 8px at a time. Eyeball it, then document. 
• Try not to be so strict. This system is an excellent baseline for creating consistency and harmony. You can also break the rules here and there. It's cool. Be a rebel. Just document it!

I hope this methodology has been inspiring and immensely benefits your designs. I will provide a video version of the Great Eight on a design to understand and see this system in action. 

As always, keep it spicy and have fun. Your clients will love you for it!