UI Design Foundations

Start learning
All categoriesDesignUI Design

Learn UI design

You can describe what looks good and you cannot quite produce it. Learn type, color, grid, and hierarchy from scratch, so the screens you ship match the taste in your head.

Start learningSee the chapters

Overview

You can describe what looks good and you cannot quite produce it. Learn type, color, grid, and hierarchy from scratch, so the screens you ship match the taste in your head. Octo builds this course around your role, your experience, and what you already know, so the version you get isn't the same one a beginner across the hall is reading.

What you'll learn

By the end, you'll be able to do these, not just have read about them.

  • Apply type, color, grid, and hierarchy with intention

  • Move from "clean" to expensive, the small craft choices that matter

  • Build pages with rhythm and visual ownership

  • Bridge UI craft to your design system

Who this is for

  • You're a designer leveling beyond visual polish into product judgment.

  • You're a PM or engineer who designs as part of your job.

  • You're a self-taught designer filling in formal craft gaps.

Prerequisites

  • No prior background needed, curiosity and time.

  • A laptop and the willingness to do small hands-on exercises.

Suggested chapters

This is the typical chapter list. Your version is generated against your background and adapts as you go. It may compress, expand, or reorder these.

  1. 01

    Foundations of UI Design Foundations

    The mental model and shared vocabulary you'll lean on for the rest of the course.

  2. 02

    Core building blocks

    The handful of moves that show up everywhere, drilled until they feel obvious.

  3. 03

    Working through real examples

    Applied patterns on examples close to the kind of work you actually do.

  4. 04

    Edge cases & failure modes

    Where the simple version breaks, and how to recognize it before it bites you.

  5. 05

    Putting it together

    Combining what you've learned into something end-to-end and defensible.

  6. 06

    Capstone

    A small project tied to your real work that proves you can use the material, not just recall it.

Real-world projects

  • 01Apply ui design foundations to a small problem from your actual work or studies.
  • 02Produce one written or built artifact you can put on your resume, portfolio, or in a review packet.
  • 03Run a self-graded capstone against an Octo-provided rubric.

Tools & concepts

Real tools and ideas covered. Octo brings them in when they fit your stack.

  • Figma
  • Design systems
  • Wireframing
  • Prototyping
  • Critique
  • User research

Where this leads

  • 01

    Stronger design portfolio with shippable artifacts

  • 02

    Promotion conversations backed by craft

  • 03

    Cross-functional credibility with engineers and PMs

Common questions

  • Is this a fixed course, or is it built for me?

    Built for you. The chapter list below is a typical outline. Your actual course is generated against your role, experience, and what you already know, then adapts as you go.

  • How long does it take?

    Most learners finish in 2–6 weeks at a normal pace, depending on the topic. Octo compresses where you're strong and slows down where you're weak.

  • Is there a fixed schedule or cohort?

    No. You start when you start. There's no live session, no calendar, no deadline.

  • Can I ask questions while I'm learning?

    Yes, every module has an AI Sidekick in the margin. Ask for a different example, push back, or get a clarifying analogy without leaving the page.

  • What do I get at the end?

    A verifiable, HMAC-signed certificate with a public verify page. It records the modules passed, scores, and capstone, not just attendance.

  • How much does it cost?

    Octo is in research preview, courses are open. We'll be transparent before pricing changes.

More in UI Design

Start learning