Section 1 · Foundations
How UI Design Decisions Get Made
14 min3 min read
Lesson at a glance
Understand how product designers turn a user’s goal into screen decisions, meet Steady, the habit tracker you will design, and set up Figma for the course.
No video here — just the real thing: a written lesson, runnable examples, a quiz and practice.
Open almost any habit-tracker app and you will find the same thing near the top of the screen: a list of today’s habits with a big, obvious way to mark each one done. That is not because designers copy each other. It is because they all asked the same question first: what does someone opening this app need to do in the next five seconds?
That question is the heart of UI design. A screen is not a picture; it is a chain of decisions, and each decision should have a reason you can say out loud. Sofia Reyes, a principal product designer at Northwind who teaches this course, puts it bluntly in every critique: “Tell me the because.” The heading is bigger because it is the first thing you should read. The check button sits on the right because that is where a right thumb rests.
Meet Steady
Throughout this course you design Steady, a small habit-tracker app for phones. It has three core screens and a mini component kit:
- Today: the list of habits due today, each with a checkbox and a streak count, plus a progress summary.
- Habit detail: a calendar of past check-ins, the current streak and an edit button.
- New habit: a bottom sheet with a name field, an icon picker, frequency chips and a reminder toggle.
- The kit: button, checkbox, habit row, chip, text field and tab bar, themed for light and dark mode.
The user’s job on the Today screen is simple to state: check off a habit in a few seconds, then put the phone away. Keep that sentence nearby. When you argue with yourself about whether a quote banner, a big chart or a fancy header belongs at the top, that sentence settles it.
How designers actually work
Real design work is a loop, not a straight line. You will move through it many times in this course, and you will often step back a stage when something you learn later changes an earlier choice.
Understand means writing down who uses the screen and what they came to do. Structure means deciding what goes on the screen and in what order, usually as grey boxes. Style adds type, color and detail. Test means putting it in front of people and checking accessibility. Hand off means making it buildable for developers. Section 1 covers the principles behind structure and style; Section 2 is layout; Section 3 turns repeated pieces into a system; Section 4 covers testing and handoff.
Setting up
You need a Figma account and the desktop app or a current browser. Create a new design file called Steady with three pages: Screens, Kit and Scratch. Pages are tabs inside one file; keeping experiments on Scratch stops them leaking into the work you will hand off.
Figma ships changes often. Menu names in this course were checked against Figma’s help centre at the time of writing; if a label has moved, the help centre’s search finds the new home quickly.
Next, you learn the three principles that decide whether a screen is readable before any color touches it: hierarchy, alignment and spacing.
Key takeaways
- A UI design is a chain of decisions, and every decision should have a reason you can say out loud.
- Start from the user’s job and the screen’s single most important action, not from colors or fonts.
- Designers work in a loop of understand, structure, style, test and hand off, revisiting earlier steps as they learn.
- Steady’s Today screen exists so someone can check off a habit in a few seconds, and that goal settles most layout arguments.