20 Graphic Design Hacks You Need To Know

Summary

This video script offers 20 design hacks to elevate amateur designs to a professional level, covering typography, layout, spacing, and color. It addresses common beginner mistakes and provides solutions like using a single versatile typeface, adhering to a typographical system, and setting appropriate line heights and kerning. The script also emphasizes the importance of using a 12-column grid for layouts, responsive design, and choosing harmonious colors. These hacks aim to streamline the design process, allowing creators to focus on high-level design work.

Takeaways

• 🔧 Amateur designs often use conflicting typefaces and lack a typographical system, while professional designs choose one versatile typeface and use size, weight, and spacing for contrast.
• 📐 Professional designs utilize a typographical scale system like the minor third, major second, or four pixel system for consistent sizing across various elements.
• 📚 Beginners should limit text width for better readability, with a recommended max width between 600 and 800 pixels depending on the text type.
• 📏 Adjusting line height is crucial for better text readability; larger headings should have a lower line height, while paragraphs should have a higher line height.
• 🌼 The 'bloom technique' for kerning adjusts the spacing between letters based on size, with headings closer together and smaller text spaced further apart.
• 📝 Beginners often misuse weights, but a simple rule is to make large text bold and small text thin to enhance visual weight and contrast.
• 🎨 Avoid designing on a free-form canvas; instead, use a consistent layout grid with an even number of columns, preferably 12 for maximum flexibility.
• 📏 Column widths and gutters should be divisible by four or eight pixels for easy scaling and design consistency.
• 📊 Responsive design is essential; adjust the number of columns based on device breakpoints to ensure the layout adapts smoothly from desktop to mobile.
• 📐 Consistent section padding, often set to the gutter width, helps in maintaining a sleek, grid-like pattern across the website.
• 🌈 Choosing colors for design involves softening pure colors by adjusting saturation or lightness, and using harmonious color systems like monochromatic or analogous instead of harsh complementary contrasts.
• ⚪️ On colors, or text colors, should be carefully chosen based on the background color's lightness, with adjustments to saturation and lightness to ensure readability and professionalism.

Q & A

What is the main purpose of the video?

The main purpose of the video is to teach viewers how to enhance their designs to look professional by covering 20 design hacks related to typography, layout, spacing, and color.

How many design hacks does the video cover, and what are the four main categories they are divided into?

The video covers 20 design hacks, which are divided into four main categories: typography, layout, spacing, and color.

What is the first typography mistake discussed in the video, and how can it be corrected?

The first typography mistake discussed is the use of conflicting typefaces. It can be corrected by choosing one versatile typeface and using size, weight, or spacing to create contrast instead.

What is a typographical system, and why is it important for beginners?

A typographical system is a mathematical rule for selecting type sizes that ensures consistency and ease of scaling within a design. It is important for beginners because it helps avoid random size choices and makes it easier to create new sections without starting from scratch each time.

What is the recommended line width for readability in design?

The recommended line width for readability is between 600 and 800 pixels, depending on the type of text being used, with headings closer to 800 pixels and paragraphs closer to 600 pixels.

Why is it a mistake to use 'Auto line height' in design, and how can it be improved?

Using 'Auto line height' can make text look jumbled, with headings too far apart and paragraphs too close together. It can be improved by manually decreasing the line height as the text size increases, typically setting paragraphs between 125 to 150% of the font size and largest headings around 80 to 90%.

What is the 'bloom technique' for kerning, and how does it work?

The 'bloom technique' is a method for adjusting the spacing between letters (kerning) based on the size of the text. It works by having smaller text 'open up' more, meaning more spacing, and larger text be closer together, resulting in better readability and visual appeal.

What is the recommended approach to using weights in typography for beginners?

For beginners, the recommended approach is to make large text bold and small text thin. This helps headings grab more attention and adds visual weight to the design, enhancing contrast and readability.

Why should beginners avoid designing on a free-form canvas, and what is the suggested fix?

Designing on a free-form canvas can lead to inconsistent spacing and a disjointed look across a website. The suggested fix is to use a layout grid with a set number of columns to maintain consistency.

What is the recommended number of columns for a layout grid, and why?

The recommended number of columns is 12 because it is highly divisible, allowing for easy division of the design into halves, thirds, fourths, and sixths, which is ideal for maintaining consistency and flexibility in design.

What are some common mistakes made by beginners when setting gutter widths, and how can they be corrected?

Common mistakes include having no gutters at all or setting gutters to the same size as the columns. They can be corrected by setting gutter widths to 50% or less of the column width, using numbers divisible by four or eight pixels for consistency and a balanced look.

How can beginners ensure their designs are responsive?

Beginners can ensure their designs are responsive by setting breakpoints for laptop, tablet, and phone sizes and adjusting the number of columns based on these breakpoints, allowing for a reshuffle of the design rather than a complete remake for different devices.

What is the recommended approach to setting section padding for consistency in layout?

The recommended approach is to set section padding to the same value as the gutter width, which creates a sleek look as everything fits together in a grid pattern. If more visual separation is desired, the padding can be increased while following the same rules used for columns and gutters.

What is the common mistake made by beginners regarding spacing between items in a section, and how can it be fixed?

The common mistake is using linear spacing, which is the same amount of space between every item. It can be fixed by using a height equal to or greater than the gutter width between containers and half of that width for components within the same container.

How can beginners create a visual hierarchy in their sections?

Beginners can create a visual hierarchy by using size and position to draw the eyes towards primary elements in the design. Important elements should take up more visual weight, and the general rule is that elements you want to notice first should be larger or more prominent.

What is the issue with treating dynamic components as static when it comes to spacing, and how can it be resolved?

Treating dynamic components as static can lead to poor clipping or wrapping because they have fixed widths. The issue can be resolved by setting static spacing around elements in a dynamic area, using specific pixel values for the spacing between objects.

How can beginners handle spacing in static areas with dynamic content?

In static areas with dynamic content, beginners can use dynamic spacing, which fills the space depending on the number of items in the container. This can be achieved by using auto layout options in design tools like Figma to update spacing based on the number of items.

What is the common mistake made by beginners when choosing colors, and how can it be avoided?

The common mistake is choosing pure colors (e.g., pure white, pure black, pure red) which can be visually jarring. It can be avoided by 'knocking back' colors, softening them by adjusting saturation or lightness towards the center, making them easier on the eye and more harmonious.

Why should beginners avoid designing their color system around complementary colors?

Complementary colors, while they can work, are the hardest to match and can overwhelm the eye if not used sparingly. Beginners should instead use monochromatic or analogous color systems, which are less harsh and more likely to produce harmonious results.

What is a simple hack for choosing accent colors in a design?

A simple hack for choosing accent colors is to take the main color and adjust the hue while keeping the same lightness and saturation values. This can create a cohesive color system that works well together.

How can beginners ensure their on colors are professional and not cheap-looking?

Beginners can ensure their on colors are professional by following the Material Design three hack, which involves keeping the hue but changing the saturation and lightness depending on the background's lightness. For light backgrounds, increase saturation and remove lightness; for dark backgrounds, add lightness and decrease saturation.