Why it’s good that most of UI design is boring.
2. Grid, Colors, Type
It all starts with setting up the colors, grid and picking fonts.
3. All you need to know about making buttons and more.
Build inputs, dropdowns, multi-select boxes, calendars…
5. Small stuff
Radios, Checkboxes, Sliders, Toggles, Tags and more.
6. List items
Lists are a very popular design pattern. Let’s explore them!
Greatly reusable components for multiple purposes.
8. Tabs and Navs
Universal mobile navigation patterns starting point.
9. Detail Pages
Showcase a service or a product in a reusable way.
Learn how to define hierarchy in early stages of design.
11. Present like a pro!
Show your design library and components in a beautiful way.
Components - Figma
The complete basics of using Components in Figma.
Symbols - Sketch
The complete basics of using Symbols in Sketch.
How to design with this unique annotation method.
Complete basics of Figma - start here if you’re new!
Get Designing User Interfaces 20% cheaper using the code: boringUI20 ☝️
What will you learn after the course?
After the course you’ll have a good understanding of the fundamental elements of UI design and UI components.
Learn this unique method that shows you understand the design decisions behind your projects and know how to guide the user to the desired action.
Red Square Method
We will be using the Red Square Method to learn alignment by hand - it’s really important to train your eye first before you jump into auto-layouting tools.
Fonts, colors, spacings
How many fonts to pick? How to choose the right colors? How to space it all out? All of these questions and more are answered within the course with direct examples.
It all starts with a grid
I’ll show you which grid works the best for most UI design and why. Then we’ll apply that grid to all of our elements for maximum design consistency and an easy way to expand it.
We’ll explore the basics of Components (Figma) and Symbols (Sketch), how to annotate a design for developers and for your portfolio, beautiful presentation and more!
What is SquarePlanet?
What is SquarePlanet?
It`s an educational platform with both paid and free content for designers and developers. We will be adding new featured, articles and materials in the coming weeks.