Design Instruction

Marietta College Graphic Design

Graphic design lessons, step by step

Each lesson stands on its own, so start with whichever one you need. Pick a lesson below to open it.

Design foundations

  • Color Theory

    How colors work together, and how to combine them to create specific feelings, moods and reactions.

    6 pagesPractice quiz

  • Visual Hierarchy

    Use color, contrast, type and spacing to organize content and guide the viewer’s eye to what matters most.

    6 pages

  • Choosing Fonts

    Match a typeface to the topic and the artwork, then pair two fonts that build clear visual hierarchy.

    6 pagesPractice quiz

  • File Types & Color Models

    Choose the right color model, file type and compression so your work looks its best at a sensible file size.

    6 pagesPractice quiz

Professional practice

  • Business Forms

    Write clear proposals and contracts that set expectations, protect your time and make sure you get paid.

    9 pagesSample text to copy

Interaction Design

  • Figma Workflow

    Design for screens in Figma: style guides, Auto Layout, components, responsive frames and prototypes.

    8 pagesPractice quiz

  • VS Code Warm-Up

    Open a folder in VS Code, create your first HTML file, add an image and style it with CSS.

    1 class period

  • Dog Website

    Write a one-page website about dogs from scratch, one line of HTML and CSS at a time.

    2 class periods

  • Triad Website

    Design a four-page gallery site in Figma, then build it with HTML, CSS and JavaScript and publish it live.

    Multi-week project