CheatSheetsHero

Catalog / Design Principles Cheatsheet

Design Principles Cheatsheet

A quick reference guide to fundamental design principles, covering visual hierarchy, balance, contrast, and other key elements for effective and aesthetically pleasing designs.

Core Design Principles

Visual Hierarchy

Arranging elements to show their order of importance. Directs the viewer’s eye through the design.

Techniques:

  • Size: Larger elements attract more attention.
  • Color: Use contrasting colors to highlight important elements.
  • Placement: Top-left is generally the starting point for viewers (F-pattern or Z-pattern layouts).

Example: A website using a large headline, followed by smaller subheadings, and then body text to guide the user through the content.

Balance

Creating a sense of equilibrium in a design. Can be symmetrical or asymmetrical.

Symmetrical Balance: Mirroring elements on either side of a central axis. Creates a formal, stable feel.

Asymmetrical Balance: Achieving balance with different elements of varying visual weight. Feels modern and dynamic.

Example:

Symmetrical: A poster with text centered and images balanced on either side.

Asymmetrical: A webpage with a large image on one side and a block of text on the other, balanced by color and spacing.

Contrast

The difference in visual properties that makes an object distinguishable. Creates emphasis and visual interest.

Key Elements:

  • Color: Using complementary colors or varying shades.
  • Size: Contrasting large and small elements.
  • Shape: Combining different geometric forms.

Example: A dark background with bright text, or a large, bold heading next to smaller, lighter body text.

Advanced Principles

Proportion

The relationship between the sizes of different elements in a design. Often uses the Golden Ratio.

Golden Ratio (1:1.618): A mathematical ratio that creates visually pleasing compositions.

Example: Using the Golden Ratio to determine the size and placement of images and text blocks in a layout.

Importance:

Ensures harmony and visual appeal by creating a sense of order and balance.

Repetition

Repeating elements like colors, shapes, or typography throughout a design. Creates unity and consistency.

Benefits:

  • Reinforces the design’s message.
  • Creates a cohesive look and feel.

Example: Using the same font and color scheme across all pages of a website, or repeating a specific shape or pattern in a branding campaign.

Movement

Creating a sense of action or direction in a design. Guides the viewer’s eye and creates interest.

Techniques:

  • Lines: Using lines to direct the eye.
  • Shapes: Arranging shapes to suggest movement.
  • Images: Using images of moving objects.

Example: A website using a slider or carousel to showcase different products, or a poster with arrows pointing to key information.

Color Theory Basics

Color Harmonies

Creating visually pleasing color combinations using relationships on the color wheel.

Types:

  • Complementary: Colors opposite each other (e.g., red and green).
  • Analogous: Colors next to each other (e.g., blue, blue-green, green).
  • Triadic: Three colors equally spaced (e.g., red, blue, yellow).

Example: A website using a complementary color scheme to create a bold and energetic feel, or an analogous color scheme to create a calm and harmonious feel.

Color Psychology

Understanding how different colors evoke specific emotions and associations.

Examples:

  • Red: Excitement, energy, passion
  • Blue: Trust, security, calmness
  • Yellow: Happiness, optimism, warmth
  • Green: Nature, growth, harmony

Importance:

Choosing colors that align with the brand’s message and target audience.

Accessibility

Ensuring that designs are usable by people with disabilities, including color blindness.

Best Practices:

  • Use sufficient contrast between text and background.
  • Avoid relying solely on color to convey information.
  • Provide alternative text for images.

Example: Using a color contrast checker to ensure that text is readable, or providing icons and labels in addition to color to indicate different states or categories.

Typography Tips

Font Pairing

Combining different fonts to create visual interest and hierarchy.

Guidelines:

  • Pair a serif font with a sans-serif font.
  • Use fonts with different weights and styles.
  • Limit the number of fonts used to 2-3.

Example: Pairing a bold sans-serif font for headings with a classic serif font for body text, or using different weights of the same font family to create hierarchy.

Readability

Ensuring that text is easy to read and understand.

Best Practices:

  • Use appropriate font sizes (16px+ for body text).
  • Maintain sufficient line height (1.5x font size).
  • Use proper letter spacing and word spacing.
  • Avoid overly decorative or script fonts for large blocks of text.

Importance:

Improves user experience and ensures that the message is effectively communicated.

Hierarchy

Using typography to create a visual hierarchy and guide the reader’s eye.

Techniques:

  • Use different font sizes for headings, subheadings, and body text.
  • Use bold or italicized text to emphasize important words or phrases.
  • Use different colors to highlight key information.

Example: Using a large, bold heading to introduce a topic, followed by smaller subheadings to break down the content, and then body text to provide details.
Download PDF