Simple UX - Gestalt Principles Educational Resource

A comprehensive interactive guide to Gestalt Principles in UI Design, built with React, Material-UI, and Storybook. This educational resource demonstrates how psychological principles of visual perception can be applied to create intuitive and effective user interfaces.

🎯 Project Overview

Simple UX serves as a complete knowledge hub for UX/UI practitioners, developers, and stakeholders involved in digital product creation. The project emphasizes practical application of design principles through interactive, side-by-side comparisons that clearly demonstrate good vs. poor implementation.

Core Mission

Transform complex design theory into actionable insights through hands-on examples that designers can immediately understand and apply to their own projects.

✨ Features

• 16 Interactive Components demonstrating real-world applications of Gestalt principles
• Side-by-side comparisons showing effective vs. ineffective design implementations
• Professional navy and gold theme providing a clean, educational aesthetic
• Fully responsive design that works across all device sizes
• Practical examples using real-world UI patterns (e-commerce, forms, navigation, etc.)
• Comprehensive documentation with clear explanations and key takeaways

🛠 Technology Stack

• React - Component framework
• Material-UI (MUI) - Component library and theming
• Storybook - Documentation and component showcase
• React Icons - Consistent iconography
• TypeScript - Type safety (inferred from modern React patterns)
• Emotion - CSS-in-JS styling (MUI dependency)

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• pnpm (recommended) or npm

Installation

1. Clone the repository:

   git clone <repository-url>
   cd SimpleUX

2. Install dependencies:

   pnpm install
   # or
   npm install

3. Start Storybook development server:

   pnpm storybook
   # or
   npm run storybook

4. Open your browser: Navigate to http://localhost:6006 to view the interactive documentation.

Build for Production

pnpm build-storybook
# or
npm run build-storybook

The built files will be generated in the storybook-static directory.

📁 Project Structure

SimpleUX/
├── .storybook/                 # Storybook configuration
│   ├── main.ts                # Main Storybook config
│   ├── preview.ts             # Global story settings
│   ├── theme.ts               # Custom MUI theme (Navy & Gold)
│   └── MuiDecorator.tsx       # Theme provider wrapper
├── stories/
│   ├── Introduction.mdx       # Project overview
│   ├── HowToUse.mdx          # Usage instructions
│   ├── UI Design/
│   │   └── 0.GestaltPrinciples.mdx  # Main educational content
│   └── components/gestalt/    # Interactive components
│       ├── proximity/         # Law of Proximity components
│       ├── similarity/        # Law of Similarity components
│       ├── continuity/        # Law of Continuity components
│       ├── closure/           # Law of Closure components
│       ├── figureground/      # Law of Figure-Ground components
│       └── commonfate/        # Law of Common Fate components
├── package.json
└── README.md

🎨 Design System

Color Palette

• Primary: Deep Navy Blue (#1565c0) - Professional, trustworthy
• Secondary: Warm Gold (#ff8f00) - Engaging, highlighting
• Background: Clean whites and light grays
• Text: High contrast grays for optimal readability

Typography

• Font Family: 'Nunito Sans' - Clean, readable sans-serif
• Hierarchy: 6 heading levels with consistent weight and sizing
• Body Text: Optimized line height (1.5) for readability

🧩 Component Usage

Each Gestalt component is designed to be:

• Self-contained - No external dependencies beyond MUI
• Educational - Clear visual comparisons with minimal cognitive load
• Responsive - Adapts to different screen sizes
• Accessible - Follows WCAG guidelines for contrast and interaction

Example Component Structure

import React from "react";
import { Container, Grid, Typography } from "@mui/material";

export const ExampleComponent = () => {
  return (
    <Container sx={{ pb: 6 }}>
      <Grid container spacing={4}>
        <Grid item xs={12} md={6}>
          <Typography variant="h6" sx={{ mb: 2 }}>
            Poor Implementation
          </Typography>
          {/* Bad example */}
        </Grid>
        <Grid item xs={12} md={6}>
          <Typography variant="h6" sx={{ mb: 2 }}>
            Good Implementation
          </Typography>
          {/* Good example */}
        </Grid>
      </Grid>
    </Container>
  );
};

📚 Educational Approach

Learning Philosophy

• Show, Don't Tell: Visual demonstrations over lengthy explanations
• Practical Examples: Real-world UI patterns rather than abstract concepts
• Immediate Application: Examples that designers can directly implement
• Progressive Complexity: Simple concepts building to more nuanced applications

Key Features

• Bold formatting for important tips to improve discoverability
• Consistent spacing (pb: 6) across all components for visual harmony
• Realistic scenarios (e-commerce, messaging, forms) for practical relevance
• Professional color scheme avoiding semantic confusion (no green that looks like success states)

🤝 Contributing

This project serves as an educational resource. Contributions that enhance the learning experience are welcome:

1. Improve existing examples with more realistic or clearer demonstrations
2. Add new components that illustrate additional applications of Gestalt principles
3. Enhance accessibility features for broader audience reach
4. Update documentation to clarify complex concepts

📄 License

ISC License - See package.json for details.

---

Transform complexity into clarity. By integrating Gestalt principles into your design process, you align with how users naturally see and interact with the world.