Learn to Build

Beautiful

UIs

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.

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

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.

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

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:

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!

129

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.

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!