UI Foundations
LoginPreview Course

Learn to Build



Prerelease access to the premiere, interactive learning platform to help you level up your UI skills with to-the-point content

Join 300+ subscribers
Discount codes and pre-release access
Free design tips
Trusted by top notch engineers and designers

These are


Joel Hooks

Founder egghead.io

Great apps are well-designed.

From SaaS apps to marketing sites, some things just look and work better. What makes Stripe so good at creating pages people want to share?

You may think of visual design, UI, and UX as hand-wavy art forms, but there is a lot that can be distilled into very specific strategies that you can learn.

Get bite sized examples and in depth explanations

Interactive examples (like the one below) are all throughout the platform to give moments to reflect on explanations and clearly visualize what is shared.

Assigning Visual Importance

Cozy Studio

Wifi · Free parking · Air conditioning

$98 / night

  • Similar sized title and text
  • Non-obvious button
  • Cramped spacing
  • Clear title
  • Obvious floating button
  • More breathing room
  • Splash of color
Preview this module

"I'm just not good at design."

What it takes to build good UIs often boils down to knowledge of a few key design principles and a careful eye.

You can learn design principles, and you can train your eye.

demo stat
demo trend line
demo money stat
demo pie chart
demo bar chart
Analytics Dashboard

Put everything in its place.

Somewhat counterintuitively you can usually build UIs that look better just by simplifying your options.

There are a few hard and fast rules you can apply to every UI, things like consistent spacing between elements, no more than 1 or 2 fonts, a limited set of colors, and so on that will virtually guarantee your UI turns out looking clean.

I turned those rules into interactive visuals and lessons that demonstrate exactly what it is you need to watch out for to keep you from squinting at your design until you give up.

This is next level Refactoring UI

Aleksander Sarentorbic

Frontend Engineer

Interactive education helps make things stick.

After working full-time on open-source documentation at Gatsby I found that the pieces of the educational content that resonated most with users were the ones that were both visual and interactive.

I later built one of the top rated animation courses on Egghead, and have found that the content in it really resonates because the before and after of each lesson is so obvious.

I turned rules of design and UI into very obvious before and after states, and explain the UI/UX principles at work that make them visually pleasing.

Who's teaching?

portrait of Kyle Gill
Kyle Gill

I have been building for the frontend in various disciplines at startups and on my own since I first touched a computer. I started as a graphic designer and found out I enjoyed the problem solving of engineering more, but kept a foot in the design world.

I spent a year as a core maintainer of the Gatsby docs building out new content, demos, and examples to try and explain some of the most complicated pieces of the frontend landscape to beginners.

Lots of feedback on my side projects over the years has led me to build out something unique that bridges what I know about educational content with design and the frontend, all in a platform that is engaging and values your time.

What's it Made of?

This course teaches design strategies, rules, and principles, more than specific implementation or explanation of specific CSS properties.

Rather than explain the CSS Grid properties to make a column layout, this course explains the foundational principles about how spacing in a grid layout could help or hurt a design with visualizations and explanations.

The course platform provides the following features and tools:

Animated Examples

Custom components built to teach every example.

Organized Modules

Comprehensive coverage of common UI patterns.

Progress Tracker

Progress tracked for you, automatically.

Completion Certificate

Get proof of completion after finishing the course.

Mobile Friendly

Learn from your phone and on the go.

Community Help

Support from me and a community of builders.

Get Better at Design

This course is available as it's developed. The earlier you purchase, the more discounted the price. As new sections become available existing users receive lifetime free updates and access to new content.

UI Foundations is a great purchase for an education budget!

UI Foundations avatar
Yours Forever

Build Beautiful UIs

Includes 3 modules (+ access to future modules as they are released):
  • Visual Importance
  • Design Systems
  • Color
  • Space & Size (in progress)
  • Data (in progress)
  • Typography
  • Details
  • Animations
As well as...
  • Access to UI Foundations Kit

Who's it for?

This course is suitable for anyone working on user interfaces. No programming or specific web development skills are required, though some understanding of HTML elements, CSS, and web design are helpful.

Preview the first module

To see what the platform is like, check out this work in progress page for module 1 on visual importance. Or follow on Twitter where daily UI tips are shared.

Preview CourseFollow on Twitter

Or skip the course, and get the toolkit

As well as a course, UI Foundations also offers a comprehensive UI Kit built on top of MUI. The UI Kit takes principles from the course and applies them to real life components. These copmonents are a great source of inspiration or can be used directly in your own projects.

Get updates

Subscribe to the newsletter and get updates about newly released sections, and collections of frontend design tips.

Subscribe and be the first to know!

© 2022 UI Foundations · All rights reserved.