When you’re building products, there are two types of posts you find online:
- Generic “Top 10 UI tips” that feel like filler.
- Reference posts that you save, bookmark, and come back to every week.
This one is the second type. I’ve pulled together 25 high-value references across UI/UX design, web patterns, and SaaS best practices. The goal? To give you a single post you’ll revisit again and again whenever you’re stuck, need inspiration, or want to see how the pros do it.
Let’s dive in.
🎨 Color & Typography References
- Color Contrast Checker → Test if your text is accessible.
- Google Fonts Pairings → Ready-made font combos.
- Accessible Palette Generator → Build palettes that meet WCAG.
📱 Responsive & Layout References
- Screen Sizes Cheat Sheet → Viewport widths for all devices.
- CSS Grid Examples → 50+ real-world grid layouts.
- Flexbox Patterns → Common UI layouts solved with Flexbox.
🧭 Navigation & Interaction References
- Mega Menu Inspiration → Best SaaS mega menus, sidebars, and navbars.
- Mobile Nav Gallery → How top sites handle responsive menus.
- Interaction Patterns → Hover states, dropdowns, micro-interactions.
💳 Pricing & Conversion References
- Pricing Page Teardowns → How SaaS companies structure pricing tiers.
- Checkout UX Patterns → Smoothest flows from onboarding → purchase.
- Call-to-Action Gallery → Real CTAs that drive conversions.
📂 Dashboard & App UI References
- Onboarding Flows → SaaS onboarding screenshots.
- Settings Pages Gallery → Account, billing, and preferences done right.
- Data Visualization References → How to handle charts, tables, KPIs.
🖼️ Hero Section References
- Landing Page Headline Gallery → Real-world SaaS headlines.
- Hero Layout Collection → Variations of hero images, mockups, and CTAs.
- Above-the-Fold Teardowns → What users see in the first 5 seconds.
⚡ Speed & Accessibility References
- PageSpeed Insights Benchmarks → How SaaS leaders score.
- Accessibility Checklist → Essential do’s before launch.
- Loading State Inspiration → Skeletons, spinners, progress indicators.
Why Bookmark This?
Instead of hopping around 10+ blogs, Pinterest boards, or Dribbble hunts, you now have a single reference post. Come back to it whenever you:
- Need a fresh layout idea
- Want to study how SaaS leaders solve UX problems
- Have to show a client “what good looks like”
A Personal Resource You’ll Love 📂
All of the references above are great, but when I wanted something more systematic, I built my own reference library.
That became this:
👉 Ultimate SaaS UI/UX Screenshot Library (2900+ images across 10 device types)
- $59 early access (limited 300 units, price rising to $199)
- 300 SaaS websites
- 2900+ device-size screenshots (desktop, tablet, mobile)
- Organized in clean folders with names + devices
It’s not a random Pinterest board—it’s a 4GB research asset I built for myself, and now it’s available to you.
If this article felt worth bookmarking, you’ll love this library even more.
Top comments (0)