Explore Web Screen Types by Design Problem
Web design spans more surface types than mobile, and this section reflects that: dashboards with data-dense layouts, pricing pages with comparison grids, landing pages with complex hero sections, settings panels with deep nested navigation. Each screen type is populated with real examples from SaaS leaders, e-commerce platforms, and consumer web apps.
When Studying Screens by Type Helps Most
Studying screens by type is especially useful when you're working on a specific page. Redesigning a pricing page? Load that filter and see fifty variations side by side. Building an analytics dashboard? See how Stripe, Ahrefs, and Notion approach data density. Designing a blog layout? Compare the best content-heavy web experiences in one view.
Production Design, Not Concepts
Everything is shipped design from real products — not Dribbble concepts or theoretical mockups — so you can trust what you're seeing has been validated in production.
Frequently Asked Questions
What types of web screens are included?
Common categories include dashboards, landing pages, pricing, signup/login, settings, profile, onboarding, empty states, error pages, checkout, and documentation.
Are these examples from SaaS products, consumer apps, or both?
Both. The library covers SaaS, e-commerce, analytics tools, design tools, content platforms, and consumer web apps — giving you a broad cross-section of web UX.
Can I see how screens work on both desktop and responsive views?
Most screens are captured at desktop resolution, which reflects how they're designed for productive work. Mobile-first considerations are covered in the iOS and Android sections.
How quickly are new web screens added?
New screens are added continuously as we record new product flows or as companies ship significant redesigns.