UI Foundations
Go to Course

Learn to Build

Beautiful

UIs

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
Logo
Logo
Logo
Logo
Logo
Logo
Logo

These are

awesome.

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

Featured
  • 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?

By
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.

Mobile Friendly

Learn from your phone and on the go.

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

Go to CourseFollow on Twitter

Or skip the course, and get the toolkit

As well as a course, UI Foundations 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, and are available for purchase.

Get updates

Follow on Twitter to get updates about newly released sections, and collections of frontend design tips.

© 2024 UI Foundations · All rights reserved.