My summary of design system

The grid system is a strict guideline that is created on a blank page with a certain unit as its gap unit, such as the normal text font size, so that your design content can display in an organized and aesthetically appealing pattern; thus, your audience can read and understand your message naturally and smoothly.

However, when I tried to apply it in practice, the result didn’t always come out as I wanted. This indicates that although a beautiful grid system for your design is a wonderful cheat code for a so-so design, the final result still depends on the designer’s meticulousness.

Also, you cannot generate a great design for your 1st draft. Before you do any design, your initial step is usually to gather enough high-quality inspiration; therefore, you define your direction (moodboard phrase). Then, your draft may be visually appealing at first glance, but not unique enough to represent yourself or your brand due to your unintentional tendency to imitate or copy others’ great designs.

After you build a grid system, the next few things that will affect its aesthetics and readability are the layout, typography, color, and negative space. I won’t summarize them in a formula, so I can cheat in the future, since every design has a different purpose depending on the subject you're designing for. For example, when you design yourself, such as a portfolio or personal site, you want to be innovative to create a design that is unique and represents your characteristics; however, if you design for a brand, the design should shift from rule-breaker to a more strict pattern that focuses on usability and readability, so your audience can understand it easily.

Contrast

When you design on paper or any digital medium, the way to create a surprising reaction is by using contrast. Contrast, as the surface meaning, is a difference between grouped objects. The higher the difference, the higher the contrast, resulting in a higher probability of catching the attention. Although it doesn’t mean more contrast is better, it’s a way to convey aesthetics. Back to the practical perspective, what is contrast? A large font size, 92px, combined with a small font size, 16px, is a high contrast. A neutral white color adjacent to a pure red color, RGB(255,0,0), is a high contrast. Proper use of contrast creates a perfect aesthetic and catches people's attention. We use the contrast between different font sizes and colors to create a visually appealing result.

Notes: I will put images into the combination of font, layout, and colors. One carefully selected image has colors with shadow and objects, which brings a high contrast.

Negative space

However, overuse of contrast creates a heavy visual load, leading to heavy cognitive load, which lowers the usability and readability. This is where the negative space plays its magic. When we use high contrast to create an amazing result, we leave more negative space for users to breathe, so they can enjoy the aesthetics and reading experience. Usually, we don’t want 2 high-contrast groups squeezed together, unless you have another aesthetic purpose. The breath space is where the users enjoy your brand and feel your design and taste. The Awwwards-winning site, as a website design example, is both terrific and terrible. They are great at aesthetics without a doubt, but they also try too hard to fill up every single frame with animation, effects, colors, or images, which overwhelms the audience. Though it can make a strong first impression, they will lose the revisit since the site is so hard to read and use.

To be continue...