DSGN-110

Design Fundamentals

Credits: 3 Hours: 45 Semester: 1 Corequisite: GRPH-109 Methods: Lab, Theory

Design isn't decoration. It's communication. Every thumbnail, every profile banner, every brand asset you create is sending a message โ€” and if you don't understand the fundamentals, that message is "I don't know what I'm doing."

This course teaches you the building blocks of visual design: the elements you work with, how color actually works, why some fonts feel professional and others feel like a ransom note, and how to arrange everything on a page so it looks intentional. You don't need to be an artist. You need to understand the rules.

1
Elements of Design
โ–ถ

Every visual you've ever seen โ€” every logo, every poster, every Instagram story โ€” is built from the same basic elements. Learning to see them is the first step to controlling them.

Line

Lines direct the eye. A horizontal line feels stable and calm. A vertical line feels strong and formal. Diagonal lines create energy and movement. Curved lines feel organic and approachable.

When you look at a YouTube thumbnail that "feels dynamic," it's often because the composition uses diagonal lines โ€” tilted text, angled shapes, subjects leaning into the frame. When a brand feels "clean and minimal," it's usually built on straight horizontal and vertical lines with plenty of whitespace.

Pay attention to lines in content you admire. They're doing more work than you think.

Shape

Shapes carry meaning. Geometric shapes (circles, squares, triangles) feel structured and intentional. Organic shapes (blobs, natural curves) feel human and approachable. Abstract shapes can feel artistic or edgy depending on context.

Circles suggest community, wholeness, and softness โ€” that's why so many profile pictures are circular. Squares and rectangles suggest stability and order โ€” that's why grid layouts feel professional. Triangles suggest direction and power โ€” that's why "play" buttons are triangles.

When you're designing a thumbnail or a logo, ask yourself: what shapes am I using, and what are they communicating?

Form & Texture

Form is shape with depth โ€” it's what makes flat design feel three-dimensional. Drop shadows, gradients, and layering all create the illusion of form. Modern design trends swing between flat (no shadows, clean edges) and skeuomorphic (realistic textures and depth). Right now, we're in a "soft 3D" era โ€” subtle shadows, gentle gradients, light glassmorphism effects.

Texture adds tactile quality to visuals. A grainy overlay makes something feel vintage. A smooth gradient feels modern and polished. Paper textures feel handmade and personal. Noise textures feel gritty and underground.

You don't need to create textures from scratch. Free texture overlays are everywhere โ€” Transparent Textures and Unsplash are good starting points. Layer them over your designs at low opacity to add depth without overwhelming the content.

Putting It Together

These elements don't work in isolation. A well-designed content thumbnail might use: a diagonal line to create energy, a circular shape to frame a face, a subtle shadow for depth, and a noise texture for mood. You're composing with these elements whether you realize it or not โ€” the goal is to do it intentionally.

๐Ÿ’ก Key Takeaway

Design elements are a vocabulary. Line, shape, form, and texture are the words. The more fluently you use them, the clearer your visual communication becomes.

๐Ÿ”จ Exercise 2.1: Create a Mood Board

Build a mood board for your creator brand (or a fictional brand if you haven't defined yours yet):

  1. Collect 15-20 images that represent the vibe you want: screenshots, photos, textures, color swatches, typography examples
  2. Use Canva (free account) or a simple document to arrange them
  3. For each image, write one sentence about why it fits: what element draws you to it? The lines? The shapes? The texture?
  4. Identify 3 recurring themes in your selections (e.g., "dark tones, organic shapes, minimal text")

Deliverable: A completed mood board with annotations. This becomes your visual reference for the rest of the program.

2
Color Theory & the Color Wheel
โ–ถ

Color is the fastest way to communicate mood, genre, and professionalism. Get it right and your content feels polished before anyone reads a word. Get it wrong and everything looks like a school project from 2004.

The Color Wheel

The color wheel organizes colors by their relationships. You don't need to memorize it โ€” you need to understand three things:

  • Primary colors (red, blue, yellow) โ€” can't be mixed from other colors
  • Secondary colors (green, orange, purple) โ€” made by mixing two primaries
  • Tertiary colors โ€” made by mixing a primary and a secondary (red-orange, blue-green, etc.)

Color Relationships That Work

Here's where the wheel becomes useful. These are proven combinations:

  • Complementary โ€” colors opposite each other on the wheel (blue + orange, red + green). High contrast, high energy. Great for thumbnails that need to pop.
  • Analogous โ€” colors next to each other (blue, blue-green, green). Harmonious and cohesive. Great for brand palettes that feel unified.
  • Triadic โ€” three colors evenly spaced on the wheel. Vibrant but balanced. Harder to pull off but visually striking.
  • Monochromatic โ€” one hue in different shades and tints. Elegant and sophisticated. The easiest palette to get right.

Color Psychology for Creators

Colors trigger associations. These aren't universal laws, but they're strong patterns in Western audiences:

  • Red โ€” urgency, passion, excitement. NiteFlirt sellers use it for a reason.
  • Blue โ€” trust, calm, professionalism. Safe choice for educational content.
  • Purple โ€” luxury, creativity, mystery. Popular in the audio/ASMR space.
  • Black โ€” sophistication, power, edge. Dominant in adult content branding.
  • Yellow/Gold โ€” optimism, energy, premium feel. Good accent color, terrible as a background.
  • Green โ€” growth, money, nature. Works well for finance or wellness niches.

Building a Palette

A functional brand palette has 3-5 colors:

  1. Primary color โ€” your main brand color. This appears most often.
  2. Secondary color โ€” supports the primary. Usually complementary or analogous.
  3. Accent color โ€” used sparingly for buttons, highlights, calls to action.
  4. Background color โ€” usually very dark or very light. Not distracting.
  5. Text color โ€” must be readable against your background. Test contrast.

Use Coolors.co to generate palettes quickly. Press spacebar to randomize. Lock colors you like. It's addictive and useful.

๐Ÿ’ก Key Takeaway

You don't need to "have an eye for color." You need to understand relationships and use a tool. Coolors + the complementary/analogous rules will get you 90% of the way there.

๐Ÿ”จ Exercise 2.2: Design 3 Color Palettes

Create three distinct 5-color palettes for three different brand vibes:

  1. Brand A: A sultry, premium adult audio brand (think dark, luxurious, intimate)
  2. Brand B: A bright, energetic YouTube tutorial channel (think approachable, fun, professional)
  3. Brand C: A mysterious, atmospheric creative writing brand (think moody, artistic, literary)

For each palette:

  1. Use Coolors.co to generate and refine your palette
  2. Label each color's role (primary, secondary, accent, background, text)
  3. Write 1-2 sentences explaining why this palette works for the brand
  4. Test: put light text on your dark background and dark text on your light background. Can you read it comfortably?

Deliverable: Three labeled color palettes with hex codes and rationale.

3
Typography Fundamentals
โ–ถ

Typography is the difference between "this looks professional" and "this looks like someone's first Canva project." Fonts carry personality, and understanding how to choose and pair them is one of the highest-leverage design skills you can learn.

Font Categories

  • Serif โ€” fonts with small "feet" on the letters (Times New Roman, Georgia, Playfair Display). Feel traditional, elegant, trustworthy. Good for long-form reading, luxury brands, and editorial content.
  • Sans-serif โ€” fonts without the feet (Helvetica, Inter, Montserrat). Feel modern, clean, accessible. The default choice for digital content and most creator brands.
  • Display/Decorative โ€” fonts with strong personality (Lobster, Bebas Neue, Impact). Use only for headlines, never for body text. A little goes a long way.
  • Monospace โ€” every character is the same width (Courier, JetBrains Mono). Feel technical, typewriter-esque. Good for code, data, or a retro vibe.
  • Script/Handwritten โ€” mimic cursive or handwriting (Pacifico, Dancing Script). Feel personal and casual. Use very sparingly โ€” they're hard to read at small sizes.

Font Pairing Rules

The safest approach: two fonts maximum. One for headings, one for body text. Here's how to pair them:

  • Contrast is key. Pair a serif heading with a sans-serif body (or vice versa). Two similar fonts fight each other.
  • Match the mood. A playful display font with a serious serif body looks confused. Both fonts should agree on the overall vibe.
  • Weight creates hierarchy. Your heading font should be bold or heavy. Your body font should be regular weight. This tells the reader what to look at first.

Proven pairings that work for most creator brands:

  • Montserrat + Open Sans โ€” clean, modern, versatile
  • Playfair Display + Lato โ€” elegant heading, readable body
  • Bebas Neue + Roboto โ€” bold and impactful, great for thumbnails
  • Oswald + Source Sans Pro โ€” strong personality, very readable

All of these are free on Google Fonts and available in Canva.

Typography in Practice

Beyond font choice, how you set type matters:

  • Line height (leading) โ€” for body text, use 1.5-1.8x the font size. Too tight and it's claustrophobic; too loose and it falls apart.
  • Letter spacing (tracking) โ€” tighten for large headings, leave default for body text. Never tighten body text.
  • Line length โ€” aim for 50-75 characters per line. Too wide and the eye gets lost; too narrow and it feels choppy.
  • Alignment โ€” left-aligned for body text (always). Center-aligned for short headlines. Never justify text on the web โ€” it creates ugly gaps.
  • Hierarchy โ€” if everything is bold, nothing is bold. Use size, weight, and color to create clear levels: title โ†’ subtitle โ†’ body โ†’ caption.
Good typography is invisible. The reader absorbs the content without ever noticing the font. Bad typography is the first thing you see.

๐Ÿ’ก Key Takeaway

Pick two fonts. One serif or display for headings, one sans-serif for body. Use weight and size for hierarchy. Done. Don't overthink it โ€” just avoid Comic Sans and Papyrus and you're already ahead of half the internet.

๐Ÿ”จ Exercise 2.3: Typeset a Blog Post

Take any blog post (yours, or grab one from Medium) and redesign its typography:

  1. Choose a heading font and a body font from Google Fonts
  2. In Canva or a Google Doc, set up the post with proper hierarchy: title (large, bold heading font), subtitle (medium, heading font), body (regular, body font), pull quote (italic, accent)
  3. Apply proper line height (1.6-1.8 for body), reasonable line length, and left alignment
  4. Export as a PDF or screenshot

Deliverable: A typeset blog post with your font choices labeled and a brief note on why you paired them.

4
Layout Grids & Composition
โ–ถ

Layout is where all the elements come together. It's the difference between a professional-looking thumbnail and one that feels like someone threw text and images at a wall. The secret that professional designers use? Grids.

Why Grids Work

A grid is an invisible structure that aligns your content. It creates consistency, balance, and visual rhythm. Every magazine, every well-designed website, and every effective social media post uses some form of grid โ€” even if you can't see it.

You don't need complex 12-column layouts. For content creation, three grid concepts cover 90% of what you'll need:

  • Rule of Thirds โ€” divide your canvas into a 3ร—3 grid. Place key elements along the lines or at intersections. This is why most camera apps show a grid overlay โ€” it works for photos, thumbnails, and any visual composition.
  • Center-weighted โ€” place the main subject or text dead center with even padding on all sides. Simple, bold, effective. Good for announcements, quotes, and audio cover art.
  • Z-pattern / F-pattern โ€” the eye naturally scans in these patterns. Place your most important element top-left, supporting content follows the reading path. Critical for listings and web pages.

Composition Principles

Beyond grids, a few principles make any layout better:

  • Whitespace is not wasted space. Breathing room around elements makes everything feel more premium. Cramming every pixel full of content is the hallmark of amateur design. When in doubt, add more space.
  • Proximity = relationship. Elements that are close together are perceived as related. Group your heading with its subheading. Keep your CTA button near the offer it relates to. Don't scatter related content across the canvas.
  • Alignment creates order. Even if you're going for a "creative" or "chaotic" look, anchor elements to a common edge or center line. One misaligned element makes the whole thing look accidental.
  • Contrast creates focus. The biggest, boldest, most colorful element gets seen first. Make sure that element is the one you want seen first โ€” your headline, your face, your CTA. Not your watermark.
  • Repetition creates cohesion. Repeat colors, fonts, shapes, and spacing patterns across your designs. This is what makes a brand look like a brand instead of a random collection of graphics.

Platform-Specific Layouts

Different platforms need different compositions:

  • YouTube thumbnails (1280ร—720) โ€” rule of thirds, face on one side, bold text on the other. High contrast. The thumbnail has to work at 160ร—90 pixels in a sidebar, so simplicity wins.
  • NiteFlirt listing images โ€” center-weighted works well. Clear, readable text. Don't cram in too much โ€” the image is small in search results.
  • Instagram/social posts (1080ร—1080) โ€” center-weighted or grid-based. Text must be readable on mobile. Keep the most important content in the center 80% (edges get cropped in some views).
  • Reddit post graphics โ€” keep it simple. Reddit users scroll fast and thumbnails are tiny. One clear image, minimal text, high contrast.
  • Audio cover art (3000ร—3000 for Patreon/Gumroad, 1400ร—1400 for podcast) โ€” center-weighted, bold typography. Must be legible at small sizes. Treat it like a book cover.

๐Ÿ’ก Course Complete

You now have the visual design vocabulary: elements, color, typography, and layout. These fundamentals apply to every graphic you'll ever create. Next up: GRPH-109 Image Editing, where you'll learn the tools to actually build and manipulate visuals.

๐Ÿ”จ Exercise 2.4: Design a Content Thumbnail

Design a thumbnail or cover graphic for a piece of content (real or hypothetical):

  1. Choose your platform and canvas size (YouTube 1280ร—720, Instagram 1080ร—1080, or audio cover art 3000ร—3000)
  2. Apply a grid: use rule of thirds or center-weighted composition
  3. Use your color palette from Exercise 2.2 (pick the most relevant one)
  4. Use your font pairing from Exercise 2.3
  5. Include: a headline, a supporting image or graphic element, and your brand colors
  6. Export at full resolution

Deliverable: A finished thumbnail/cover graphic plus a brief annotation explaining your grid choice, color reasoning, and font pairing. This is your course capstone โ€” it should demonstrate everything from Modules 1-4.

Next Course โ†’
GRPH-109: Image Editing
โ†’