Navigation patterns that drive REAL impact
Welcome back. This week, I'm writing you from northern Colorado, but that's not stopping me from identifying a new visual design trend, going live this Friday, and teaming up with Ridd to bring you Figma Academy 2.0 for free (until Friday).
As we round out the year, I'm looking for some of the best courses to recommend to designers heading into 2025.
Shoot me a message if you've got one in mind.
—Tommy (@DesignerTom)
The Wireframe:
The Truth About Navigation in 2024
Here's something controversial: Your innovative navigation pattern probably isn't that innovative. And that's okay.
I've learned that navigation isn't where you want to reinvent the wheel. Your users come with expectations built from years of using other products. Fighting those expectations is like swimming upstream—you're just making everything harder.
But that doesn't mean all navigation should look the same. Let's break down what actually works.
Four Navigation Patterns That Drive Real Results
1. Priority and Progressive Disclosure
This is my go-to pattern for complex products. Instead of overwhelming users with every possible option, show what matters most first.
How I implement it:
2. Off-Canvas Navigation
Perfect for products with extensive features but limited screen real estate. The key is knowing when to use it.
When to use it:
When to avoid it:
3. Sticky vs. Fixed Navigation
This one's simple but often misused. Here's my rule of thumb:
Use sticky navigation when:
Use fixed navigation when:
4. Bottom Navigation
Recommended by LinkedIn
Mobile designers, listen up. Bottom navigation isn't just a pattern—it's a necessity for modern mobile apps. But there's a right and wrong way to do it.
The right way:
The wrong way:
The Bottom Line
The best navigation isn't the most innovative—it's the one users don't have to think about. Before you try to reinvent navigation, ask yourself:
If you can't answer "yes" to at least two of these, stick with proven patterns.
Together with Framer
Designing a Website 🤝🏻 Building a Website
If you’re a designer tasked to create and publish visually stunning websites, there’s a tool for that. If you want to boost creativity while speeding up the overall web development process, you need Framer—no coding required.
The next best no-code website builder for designers, Framer:
Plus, you can even import designs from Figma using our Figma-to-Framer plugin so you don’t have to start from scratch.
Are you ready to learn how Framer can streamline your web development process? Learn more now.
How to make faster UI decisions in Figma
To make faster UI decisions, you need two things:
I teamed up up with Ridd (host of Dive Club) because we kept seeing the same problem: designers who can think but struggle to execute, or designers who can execute but struggle with strategy.
So we created "How to Think, How to Do", a limited-time offer that bundles our courses together for 50% off.
Get Making UX Decisions and Advanced Figma Academy 2.0 for the price of one.
We've taught designers at companies like Stripe, Microsoft, Amazon and Shopify and the list continues to grow.
This is the only time we will ever bundle these courses.
Offer ends this Friday.
See you next week,
Tommy
Thanks for reading! What's your favorite design course? Hit reply and let me know.
Enjoying this newsletter? Let us know here.