Auto Layout

Course outline

6:52 min

1. Intro

What the course covers, why and why you should learn auto-layout from this unusual angle

19:29 min

2. The Red Square Method

Before diving into auto layout, let’s explore optical precision and the ability to actually SEE the layout and its precision.

19:23 min

3. Hierarchy Strips

Hierarchy includes the spacing between individual groups and how it influences everything. Use this unique method to plan, execute and better explain your decisions.

12:21 min

4. Auto-Layout Basics

What Auto Layout is at its core, how it works, based on a super simple exercise with blocks.

31:07 min

5. Simple list

Now that we already know the basics let’s use them in one of the simplest yet most common UI elements - a list view.

14:08 min

6. Masonry grid

Grids can be a fun way to play around with Auto Layout, but it’s also good to remember that while pretty visually impressive it’s not really a common UI pattern.

24:52 min

7. Form design

Forms on the other hand are usually very fitting to use Auto Layout on and allow you to create more complex form flows much faster and easier.

51:20 min

8. Complex cards

This is where Auto Layout can truly shine, but it can also completely ruin the experience. Learn how to do it right.

00:58 min

9. Outro

Wrap up and what to focus on while learning and practicing further.

Bonus Materials

Coming soon

Sketch

How Smart Layout works in Sketch and what’s different.

Coming soon

Penpot

How Flex Layout works in Penpot with Grid Layout.

What will you learn after the course?

The idea is to give you a solid foundation before you explore the automatic tools, so your use of them is perfect every time!

🟧🟧

Hierarchy Strips

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.

👁️👁️

Optical Alignment

Learn to actually SEE the design for what it is. That unique skill will allow you to spot mistakes early on and correct course. Trained designers feel like they’re superhumans at work!

📐📐

Auto Layout principles

Auto Layout is pretty easy at its core. I’ll show you exactly how it works based on extremely simple examples so you can skip thinking it’s magic and understand it completely.

🧱🧱

Nested Auto Layout

Nesting allows for more complex, multi-directional auto layouts. I’ll show you how to achieve it with forms, complex grids and robust card layouts the right way!

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.