Normal UI

Introducing Normal UI: A Framework That Actually Works

Normal UI is a practical, learnable system that helps developers and designers make better usability decisions without requiring deep UX expertise.

The core concept is simple: Think of your user workflows like database normalization.

• Normalized workflows spread tasks across multiple focused screens, reducing cognitive load
• Denormalized workflows keep users on fewer screens for efficiency with familiar tasks

The benefits appear when you know which approach to use when.

Why Normal UI Works

• It's concrete, not subjective - Instead of debating whether something "feels right," you have a framework for making usability decisions.
• It's AI-teachable - You can guide AI code generation with specific workflow concepts, preventing the "fast code, bad UX" trap.
• It improves code quality - Normalized workflows often lead to cleaner architecture, better accessibility, and improved performance.
• It's battle-tested - Proven across hundreds of real-world usability tests over two decades.

Perfect for the AI Development Era

Normal UI isn't just another design methodology—it's specifically powerful for AI-assisted development:

• Guide AI with precision: Instead of asking for "a user dashboard," specify "a normalized checkout workflow" or "a denormalized filtering interface" and get consistent, usable results.
• Prevent AI usability pitfalls: AI excels at generating functional components but doesn't understand when dangerous workflows (like sending mass emails) need to be slowed down across multiple confirmation steps.
• Scale your UX impact: Teach AI the Normal UI framework once, then apply it consistently across all your projects.

What You'll Learn

Core Framework

• How to identify when workflows should be normalized vs. denormalized
• The "dangerous workflow" principle and why it matters
• How to draw simple workflow diagrams that guide better decisions
• Concrete rules for common interface patterns

AI Integration

• How to prompt AI tools using Normal UI concepts
• Specific techniques for generating usable AI interfaces
• Templates and examples for AI-assisted development
• Future-proofing your skills for AI-driven workflows

Technical Benefits

• How Normal UI improves code architecture and component structure
• Accessibility improvements through better workflow design
• Performance optimization through strategic lazy loading
• Better communication between developers and designers

Real-World Application

• Practical examples like normalizing dangerous workflows (mass email sending)
• When to denormalize for efficiency (filtering interfaces)
• How workflow diagrams translate directly to app architecture
• Technical benefits including improved accessibility and performance

Who This Book Is For

• Developers who want to build apps that users actually enjoy using, whether you're working solo or on a team.
• Designers whose strengths lie in visual design but want to enhance your usability skills with a concrete framework.
• AI-assisted developers who need to ensure their rapidly-generated code creates genuinely usable experiences.
• Startup teams who need to maximize usability without dedicated UX resources.
• Anyone frustrated by the gap between beautiful code and usable software.

Why "Normal" UI?

The name comes from database normalization—a concept most developers already understand. Just as you can normalize or denormalize data structures, you can normalize or denormalize user interfaces.

This familiar metaphor makes the framework immediately accessible to developers while providing a shared language for discussing usability decisions with designers and stakeholders.

A Quick Read with Immediate Impact

This isn't a 400-page academic tome. Normal UI is designed to be read fast and implemented immediately. The concise format and actionable examples mean you can start improving your web apps right away.

Every concept is backed by real-world testing and proven results, not theoretical frameworks that sound good but don't work in practice.

AI-Generation Super Power

Normal UI isn't just for human users—it's designed to work seamlessly with AI tools. Whether you're using AI to assist in app creation, generate prototypes, or test usability, this framework ensures your designs are easy for AI to understand and implement.

With Normal UI, you'll learn how to craft clear, structured UIs that make it simple to guide AI in building normalized or denormalized workflows.

Future-proof your web apps with a system that pairs perfectly with modern AI-driven development workflows.