Design & Architecture Frameworks
A comprehensive guide to building modern solutions, from UX design styles to frontend and backend practices and cross-cutting architecture patterns.
UX Design Styles
Explore popular design languages and visual frameworks that define the look and feel of modern interfaces.
UX Design Styles
Material Design
Google, 2014
A design language inspired by paper and ink, emphasizing grid-based layouts, responsive animations, and depth effects.
Key Highlights
- Elevation and shadow system
- Bold color and typography
- Motion design principles
- Component-based architecture
Goals
- Create a unified experience across platforms and device sizes
- Bold, graphic, intentional design decisions
- Motion provides meaning and feedback
Visual Markers
- Floating Action Buttons (FAB)
- Card-based layouts
- Ripple effects on interaction
- Elevation shadows
Fluent Design
Microsoft, 2017
Microsoft's design system focused on light, depth, motion, material, and scale to create intuitive, harmonious experiences.
Key Highlights
- Acrylic material (translucent textures)
- Reveal highlight effects
- Depth and layering
- Responsive and adaptive layouts
Goals
- Create emotional connection through design
- Enable seamless cross-platform experiences
- Leverage natural motion and physics
Visual Markers
- Frosted glass backgrounds
- Subtle animations on hover
- Contextual command bars
- Depth through parallax
Apple Human Interface Guidelines
Apple, 1987 (continually updated)
Apple's design principles emphasizing clarity, deference, and depth with a focus on content and user control.
Key Highlights
- Content-first approach
- Clarity through typography and whitespace
- Depth through layering and motion
- Consistent UI patterns across platforms
Goals
- Aesthetic integrity: appearance aligns with function
- Consistency: familiar standards and paradigms
- Direct manipulation: immediate visible results
Visual Markers
- Generous whitespace
- SF Pro system font
- Translucent toolbars and backgrounds
- Subtle depth and shadows
Neo-Brutalism
Web design trend, ~2020
A bold, unapologetic design style featuring thick borders, clashing colors, raw typography, and intentional 'rawness'.
Key Highlights
- Thick black borders and outlines
- High contrast color schemes
- Flat, non-gradient aesthetics
- Asymmetric layouts
Goals
- Reject over-polished, corporate design
- Emphasize authenticity and directness
- Stand out through bold visual choices
Visual Markers
- Heavy black strokes
- Bright, clashing colors
- Hard shadows (no blur)
- Monospace or grotesque fonts
Glassmorphism
Web/UI design trend, ~2020
A modern aesthetic featuring frosted-glass effects, transparency, and layered backgrounds with vibrant gradients.
Key Highlights
- Frosted glass blur effects
- Transparency and layering
- Subtle borders and highlights
- Colorful gradient backgrounds
Goals
- Create depth through translucency
- Modern, sleek visual hierarchy
- Balance minimalism with visual interest
Visual Markers
- backdrop-filter blur
- Semi-transparent backgrounds
- Light border highlights
- Vibrant gradient overlays
IBM Carbon Design System
IBM, 2015
An open-source design system for products and digital experiences, built on IBM Design Language principles with a focus on clarity and efficiency.
Key Highlights
- Grid-based layouts with 2x Grid system
- Carbon tokens for design consistency
- Comprehensive component library
- Accessibility-first approach
Goals
- Enable teams to design and build consistent experiences
- Promote accessibility and inclusivity
- Support multiple frameworks (React, Vue, Angular, etc.)
Visual Markers
- IBM Plex typeface
- 2x Grid layout system
- Consistent spacing tokens
- Distinctive color palette
Salesforce Lightning Design System
Salesforce, 2015
A comprehensive design system providing guidelines, components, and tokens for building enterprise applications on the Salesforce platform.
Key Highlights
- Enterprise-focused component patterns
- Design tokens for theming
- Responsive grid system
- Extensive documentation and blueprints
Goals
- Deliver consistent Salesforce user experiences
- Enable rapid development of enterprise apps
- Maintain accessibility standards (WCAG 2.1)
Visual Markers
- Salesforce Sans typeface
- Distinctive blue brand color
- Card-based information architecture
- Consistent iconography
Atlassian Design System
Atlassian, 2017
A design system built for collaboration tools like Jira and Confluence, emphasizing clarity, productivity, and team-centric workflows.
Key Highlights
- Component library optimized for productivity tools
- Design tokens for consistent theming
- Focus on information density
- Clear visual hierarchy
Goals
- Create coherent experiences across Atlassian products
- Support collaboration and productivity
- Enable third-party integrations and apps
Visual Markers
- Charlie Sans typeface
- Balanced information density
- Recognizable blue accent color
- Clear, functional icons
SAP Fiori
SAP, 2013
An enterprise design system delivering a consistent, role-based user experience across SAP applications with a focus on simplicity and coherence.
Key Highlights
- Five core design principles: Role-based, Adaptive, Simple, Coherent, Delightful
- Three UX paradigms: Transactional, Analytical, and Factsheet apps
- Comprehensive Fiori Elements framework
- Built-in accessibility and responsiveness
Goals
- Provide a consumer-grade user experience for enterprise software
- Enable consistent experiences across SAP's product portfolio
- Reduce training time and improve productivity
Visual Markers
- 72 font for headlines
- Clean, structured layouts with clear hierarchy
- SAP blue brand color (#0a6ed1)
- Card-based and list-based patterns
Ant Design
Ant Financial (Alibaba), 2015
A design system for enterprise-level products with a focus on natural, deterministic, and meaningful design values.
Key Highlights
- Comprehensive React component library
- Design values: Natural, Certain, Meaningful, Growing
- Internationalization support
- Rich ecosystem of extensions
Goals
- Provide unified UI standards for enterprise applications
- Improve user and developer experience
- Support rapid prototyping and development
Visual Markers
- Clean, professional aesthetic
- Consistent 8px grid system
- Distinctive primary blue color
- Well-defined component states
Bootstrap
Twitter (now independent), 2011
The world's most popular front-end framework for building responsive, mobile-first sites with a comprehensive component library.
Key Highlights
- 12-column responsive grid system
- Extensive pre-built components
- Customizable with Sass variables
- Mobile-first responsive design
Goals
- Enable rapid development of responsive websites
- Provide cross-browser compatibility
- Offer flexibility through customization
Visual Markers
- Recognizable button and form styles
- Grid-based responsive layouts
- Utility-first CSS classes
- Consistent component design language
Frontend Practices
Architecture patterns and best practices for building scalable, maintainable frontend applications.
Frontend Practices
Component-Driven Development
Build UIs as isolated, reusable components that can be composed into larger interfaces.
Key Practices
- Design components to be self-contained and reusable
- Use component libraries like Storybook for isolated development
- Apply composition over inheritance patterns
- Document component props and usage
Tradeoffs
- Initial setup overhead for component infrastructure
- Can lead to over-abstraction if taken too far
- Requires discipline to maintain consistency
Best Fit Use Cases
- Design systems and component libraries
- Large-scale applications with many UI patterns
- Teams working on different features simultaneously
Progressive Enhancement
Start with a baseline experience that works everywhere, then add enhancements for capable browsers.
Key Practices
- Ensure core functionality works without JavaScript
- Layer on advanced features for modern browsers
- Test in diverse environments and devices
- Use feature detection rather than browser detection
Tradeoffs
- Requires more planning and testing effort
- Can be complex to maintain dual code paths
- May limit use of cutting-edge features
Best Fit Use Cases
- Public-facing websites with diverse audiences
- Accessibility-critical applications
- Content-heavy sites (blogs, news, documentation)
State Management Patterns
Centralize and structure application state to make data flow predictable and debuggable.
Key Practices
- Keep state normalized and avoid duplication
- Use unidirectional data flow
- Separate UI state from domain state
- Implement predictable state updates (immutability)
Tradeoffs
- Adds complexity and boilerplate code
- Learning curve for state management libraries
- Can be overkill for simple applications
Best Fit Use Cases
- Complex applications with lots of shared state
- Real-time collaborative features
- Apps requiring time-travel debugging or state persistence
CSS-in-JS
Write CSS directly in JavaScript to co-locate styles with components and enable dynamic styling.
Key Practices
- Scope styles to components automatically
- Use dynamic theming and runtime style generation
- Leverage type-safety for style properties
- Optimize for production with critical CSS extraction
Tradeoffs
- Runtime performance cost for style injection
- Larger JavaScript bundle sizes
- Limited browser dev tool support compared to plain CSS
Best Fit Use Cases
- Component libraries requiring theme customization
- Applications with highly dynamic styling needs
- Teams preferring JavaScript-centric workflows
Server-Side Rendering (SSR)
Render pages on the server to improve initial load performance and SEO.
Key Practices
- Generate HTML on the server for each request
- Hydrate on the client to enable interactivity
- Cache rendered pages when possible
- Handle data fetching server-side
Tradeoffs
- Increased server complexity and resource usage
- Longer time-to-first-byte compared to static sites
- Requires Node.js or compatible runtime on server
Best Fit Use Cases
- SEO-critical applications (e.g., e-commerce, blogs)
- Personalized content requiring server data
- Apps needing fast perceived performance
Static Site Generation (SSG)
Pre-render pages at build time for maximum performance and reliability.
Key Practices
- Generate HTML files during build process
- Serve pre-rendered pages from CDN
- Use incremental static regeneration for updates
- Combine with client-side fetching for dynamic data
Tradeoffs
- Long build times for sites with many pages
- Content updates require rebuilding and redeploying
- Not suitable for highly dynamic or personalized content
Best Fit Use Cases
- Marketing sites and landing pages
- Documentation and blogs
- Content that changes infrequently
Micro-Frontends
Split frontend monoliths into smaller, independently deployable applications.
Key Practices
- Define clear boundaries between frontend modules
- Use framework-agnostic integration approaches
- Share dependencies carefully to avoid conflicts
- Implement consistent routing and navigation
Tradeoffs
- Increased deployment and infrastructure complexity
- Potential for code duplication across modules
- Challenges with shared state and cross-module communication
Best Fit Use Cases
- Large teams working on different product areas
- Legacy migration scenarios
- Multi-brand or white-label applications
Performance Budgets
Set measurable limits on bundle size, load time, and runtime metrics to enforce performance standards.
Key Practices
- Define budgets for JavaScript, CSS, and image sizes
- Measure Core Web Vitals (LCP, FID, CLS)
- Automate budget checks in CI/CD pipeline
- Monitor performance in production
Tradeoffs
- Requires tooling and monitoring infrastructure
- May slow down feature development
- Can be challenging to balance with feature demands
Best Fit Use Cases
- User-facing applications where performance impacts conversion
- Mobile-first applications
- Apps targeting users on slower networks or devices
Backend Practices
Server-side architecture patterns for building robust, scalable backend systems and APIs.
Backend Practices
RESTful API Design
Design HTTP APIs following REST principles for predictable, scalable web services.
Key Practices
- Use standard HTTP methods (GET, POST, PUT, DELETE)
- Structure URLs as resource hierarchies
- Return appropriate status codes (200, 404, 500, etc.)
- Version APIs to manage breaking changes
Tradeoffs
- Can be verbose for complex operations
- Not ideal for real-time or graph-based queries
- Over-fetching or under-fetching data issues
Best Fit Use Cases
- Public APIs consumed by third parties
- CRUD-heavy applications
- Services requiring broad client compatibility
GraphQL
Use a query language that lets clients request exactly the data they need.
Key Practices
- Define a strongly-typed schema
- Allow clients to specify fields and relationships
- Implement efficient resolvers with DataLoader for batching
- Use subscriptions for real-time updates
Tradeoffs
- Complexity in server implementation and caching
- Learning curve for clients and developers
- Potential for inefficient queries without safeguards
Best Fit Use Cases
- Applications with complex, nested data requirements
- Mobile apps needing flexible, efficient queries
- Rapidly evolving products with changing data needs
Event-Driven Architecture
Build loosely coupled systems where components communicate via asynchronous events.
Key Practices
- Use message queues or event buses for decoupling
- Design events as immutable facts about what happened
- Implement event handlers to react to state changes
- Ensure idempotency in event consumers
Tradeoffs
- Complexity in debugging and tracing event flows
- Eventual consistency challenges
- Requires infrastructure for message brokers
Best Fit Use Cases
- Microservices architectures
- Systems requiring high scalability and resilience
- Workflows with asynchronous processing needs
Database Per Service
Give each microservice its own database to ensure loose coupling and independent scaling.
Key Practices
- Avoid sharing databases across services
- Use APIs or events for cross-service data access
- Choose the right database type per service (SQL, NoSQL, etc.)
- Implement eventual consistency patterns where needed
Tradeoffs
- Increased operational complexity (multiple databases)
- Difficult to enforce referential integrity across services
- Data duplication and synchronization challenges
Best Fit Use Cases
- Microservices with distinct data models
- Teams needing independent deployment cycles
- Services requiring different database technologies
API Gateway Pattern
Use a single entry point to route requests to appropriate backend services.
Key Practices
- Centralize cross-cutting concerns (auth, rate limiting, logging)
- Route requests based on path, headers, or other criteria
- Aggregate responses from multiple services when needed
- Cache responses at the gateway layer
Tradeoffs
- Single point of failure if not properly resilient
- Can become a bottleneck under high load
- Additional latency from routing layer
Best Fit Use Cases
- Microservices architectures with many backend services
- Mobile or web clients needing a unified API
- Systems requiring centralized security or monitoring
CQRS (Command Query Responsibility Segregation)
Separate read and write operations to optimize for different access patterns.
Key Practices
- Use separate models for commands (writes) and queries (reads)
- Optimize read models for query performance
- Keep write models focused on business logic
- Sync read models asynchronously via events
Tradeoffs
- Increased system complexity with dual models
- Eventual consistency between read and write sides
- More code and infrastructure to maintain
Best Fit Use Cases
- Systems with vastly different read and write patterns
- High-traffic applications needing read scalability
- Event-sourced systems
Circuit Breaker Pattern
Prevent cascading failures by stopping requests to failing services temporarily.
Key Practices
- Monitor failure rates for downstream dependencies
- Open the circuit after threshold failures
- Provide fallback responses during outages
- Automatically retry and close circuit when service recovers
Tradeoffs
- Added complexity in service communication logic
- Requires tuning thresholds for different scenarios
- Can mask underlying issues if not monitored properly
Best Fit Use Cases
- Distributed systems with external dependencies
- Services calling unreliable third-party APIs
- Applications requiring high availability
Serverless Functions
Run code in response to events without managing servers, paying only for execution time.
Key Practices
- Design functions to be stateless and idempotent
- Keep function code small and focused (single responsibility)
- Use managed services for state, queues, and databases
- Optimize cold start times with proper configuration
Tradeoffs
- Vendor lock-in to cloud provider platforms
- Cold start latency for infrequently called functions
- Challenges with local development and debugging
Best Fit Use Cases
- Event-driven workloads (file uploads, webhooks)
- Infrequent or unpredictable traffic patterns
- Rapid prototyping and MVP development
Cross-Cutting Practices
Solution-wide practices that span frontend, backend, and operations for building complete systems.
Cross-Cutting Practices
Domain-Driven Design (DDD)
Align software structure with business domains to manage complexity in large systems.
Key Practices
- Model core business concepts as domain entities
- Use ubiquitous language shared by developers and domain experts
- Define bounded contexts to separate different subdomains
- Focus on the core domain and delegate generic subdomains
Tradeoffs
- Steep learning curve and requires domain expertise
- Can lead to over-engineering in simple domains
- Requires ongoing collaboration with business stakeholders
Best Fit Use Cases
- Complex business domains with rich logic
- Long-term projects requiring maintainability
- Large teams working on different business areas
Test-Driven Development (TDD)
Write tests before code to drive design and ensure correctness.
Key Practices
- Write a failing test for each new feature
- Implement minimal code to make the test pass
- Refactor while keeping tests green
- Use tests as living documentation
Tradeoffs
- Slower initial development pace
- Requires discipline and practice to master
- Can lead to over-testing trivial code
Best Fit Use Cases
- Critical business logic requiring high confidence
- Libraries and frameworks used by others
- Refactoring legacy code safely
Continuous Integration / Continuous Deployment (CI/CD)
Automate build, test, and deployment processes to ship code rapidly and reliably.
Key Practices
- Commit code to mainline frequently (at least daily)
- Run automated tests on every commit
- Automate deployment to staging and production
- Monitor deployments and rollback on failures
Tradeoffs
- Upfront investment in automation infrastructure
- Requires comprehensive test coverage
- Cultural shift toward continuous delivery
Best Fit Use Cases
- Teams shipping features frequently
- SaaS products requiring rapid iteration
- Projects with strong automated test suites
Infrastructure as Code (IaC)
Manage infrastructure using version-controlled configuration files instead of manual processes.
Key Practices
- Define infrastructure in declarative configuration files
- Version control infrastructure definitions
- Use automation tools (Terraform, CloudFormation, etc.)
- Test infrastructure changes before applying
Tradeoffs
- Learning curve for IaC tools and syntax
- Requires coordination between dev and ops teams
- State management complexity in distributed systems
Best Fit Use Cases
- Cloud-native applications
- Multi-environment setups (dev, staging, prod)
- Disaster recovery and environment replication
Observability (Logging, Metrics, Tracing)
Instrument systems to understand their behavior in production through data.
Key Practices
- Collect structured logs for debugging
- Track metrics (latency, error rates, throughput)
- Implement distributed tracing for request flows
- Set up alerts and dashboards for monitoring
Tradeoffs
- Overhead from instrumentation and data collection
- Cost of storing and processing observability data
- Risk of information overload without proper organization
Best Fit Use Cases
- Distributed systems and microservices
- Production systems requiring high reliability
- Systems with complex failure modes
Security by Design
Integrate security practices throughout the development lifecycle rather than as an afterthought.
Key Practices
- Threat model during design phase
- Apply principle of least privilege
- Use security scanning tools in CI/CD pipeline
- Conduct regular security audits and penetration testing
Tradeoffs
- Additional development time for security considerations
- Requires security expertise on the team
- Can slow down feature velocity if not balanced
Best Fit Use Cases
- Applications handling sensitive user data
- Financial services and healthcare systems
- Public-facing APIs and services
Quick Comparison: UX Design Styles
Quick Comparison: UX Design Styles
Hierarchy & Structure
- Material Design: Structured layers with elevation
- Fluent Design: Adaptive layers with depth
- Apple HIG: Content-first minimal chrome
- Neo-Brutalism: Flat, intentionally raw
- Glassmorphism: Layered translucent planes
- IBM Carbon: Grid-based systematic layouts
- Lightning: Enterprise card-based structure
- Atlassian: Information-dense hierarchy
- SAP Fiori: Role-based structured layouts
- Ant Design: Consistent 8px grid system
- Bootstrap: 12-column responsive grid
Visual Tone
- Material Design: Bold, colorful, paper-inspired
- Fluent Design: Light, airy, modern
- Apple HIG: Clean, elegant, refined
- Neo-Brutalism: Loud, rebellious, unpolished
- Glassmorphism: Sleek, contemporary, vibrant
- IBM Carbon: Professional, clear, efficient
- Lightning: Enterprise-ready, blue-focused
- Atlassian: Balanced, productive, functional
- SAP Fiori: Simple, coherent, enterprise-focused
- Ant Design: Clean, natural, professional
- Bootstrap: Familiar, flexible, accessible
Best-Fit Use Cases
- Material Design: Cross-platform apps, productivity
- Fluent Design: Microsoft ecosystem, enterprise
- Apple HIG: iOS/macOS native apps
- Neo-Brutalism: Creative portfolios, bold brands
- Glassmorphism: Modern web apps, dashboards
- IBM Carbon: Enterprise products, data tools
- Lightning: Salesforce platform apps
- Atlassian: Collaboration tools, project management
- SAP Fiori: SAP enterprise applications
- Ant Design: Enterprise React applications
- Bootstrap: Rapid prototyping, websites