How to Think Like a Designer

Use placement and contrast to shape flow and gain clarity. A login form redesign reveals how designers think.

Design isn’t about decoration. It’s about creating order.

There’s enough chaos out there. Adding more features or new tech doesn’t lead to clarity on its own.

Order takes discipline. Tough decisions. Design is decision-making. It’s about setting constraints.

There are two kinds of order we care about:

• Order of importance – What matters most?
• Order of execution – What comes first? What comes next?

To shape both, you only need two tools: placement and contrast.

Understand these principles and you become a better designer—or design better. No need to memorize all the UX laws or follow every guideline. Learn these foundations, and you’ll start to recognize good design.

Let’s walk through a simple example: a login form.

Make It Flow

Design helps people move—from before to after.

Logging in is a basic flow:

• You’re not logged in.
• You enter your credentials.
• You gain access.

That flow has a few key steps: provide a username, provide a password, submit with a button.

In code, that might look like this:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text" />

  <label for="password">Password</label>
  <input id="password" name="password" type="password" />

  <button type="submit">Login</button>
  <button type="signup">Sign up</button>
</form>

As you can see, it works!

But it lacks structure.

Let’s reshape the flow.

Placement

There are six elements in the form:

• Label: Username
• Input: Username
• Label: Password
• Input: Password
• Button: Login
• Button: Sign up

Only three of these are essential:

• The two inputs
• The login button

These perform the core action: logging in. The others are supportive—labels for context, a sign-up link for an alternate path.

We can improve the UI flow by adjusting the placement of elements:

1. Stack elements vertically – Easier to scan on the left
2. Center-align in the canvas – Creates focus and adds whitespace
3. Place labels above inputs – Anchors attention to essentials
4. Add spacing between elements – Improves readability

The result: a clear, top-to-bottom path.

But something’s still missing. We need hierarchy. We need contrast.

Contrast

Now that everything is in the right place, ask:

What should stand out?

We want users to focus on the input fields and the primary action: logging in. That’s where contrast comes in.

To guide attention, we:

5. Make labels lighter – So inputs draw the eye
6. Use consistent typography – Avoid unnecessary internal contrast
7. Style the login button – Give it weight, color and boldness
   De-emphasize the sign-up button – Make it quieter, secondary
8. Add color contrast to key elements – Highlight what matters most

Contrast helps establish hierarchy. It’s how we guide the eye.

Because if everything looks the same, nothing gets noticed.

Before → After

So what actually changed?

• Structure – We grouped and positioned elements with intention
• Focus – We used contrast to draw the eye to what matters most
• Flow – We created a clear path from top to bottom

We didn’t change functionality. We changed clarity.

Good design doesn’t just work. It works better.

The Takeaway

Design is about flow. It’s about guiding someone from start to finish.

When you shape both the order of execution and the order of importance, you create clarity.

To do that, use:

• Placement for structure
• Contrast for focus

You don’t have to do this manually. You could just prompt: “Fix the user experience.”

But when you understand these principles, you know why the result is better. It helps you write better prompts. Give better feedback. Design better.

You don’t have to be a designer to think like one.