Как делался дизайн в проекте?

Дизайн фронтенд-проектов: подход и методология

Дизайн в web-проектах — это многоуровневый процесс, который включает в себя UX/UI дизайн, дизайн-систему, и реализацию в коде. Рассмотрим полный цикл от концепции до готового продукта.

Этап 1: Research и Discovery

Исследование целевой аудитории

• Кто будет использовать приложение?
• Какие их потребности и боли?
• Какие конкуренты делают?
• Какие тренды в индустрии?

Определение бизнес-целей

• Конверсия пользователей
• Задержка на сайте
• Валовой доход
• Снижение затрат

Этап 2: Wireframing и Prototyping

Создание макетов в Figma/Adobe XD

Этапы:
1. Low-fidelity wireframes (скетчи)
2. High-fidelity mockups (цвета, типография)
3. Interactive prototypes (кликабельные макеты)
4. User testing (тестирование с пользователями)

Этап 3: Дизайн-система (Design System)

Структурированный набор компонентов и правил:

Components:
- Button (primary, secondary, large, small)
- Input (text, email, password)
- Card (default, elevated, outlined)
- Modal, Dropdown, Tooltip

Design Tokens:
- Colors (primary, secondary, neutral)
- Typography (sizes, weights, line-heights)
- Spacing (8px, 16px, 24px, 32px)
- Shadows, Borders, Border-radius

Пример структуры в Tailwind + shadcn/ui:

// globals.css - Design Tokens
@theme {
  --color-primary: #2563eb;
  --color-secondary: #64748b;
  --color-background: #ffffff;
  
  --font-size-sm: 0.875rem;    // 14px
  --font-size-base: 1rem;      // 16px
  --font-size-lg: 1.125rem;    // 18px
  
  --spacing-2: 0.5rem;          // 8px
  --spacing-4: 1rem;            // 16px
  --spacing-6: 1.5rem;          // 24px
}

Этап 4: Реализация в коде

Структура компонентов (Atomic Design)

src/components/
├── atoms/           # Базовые элементы
│   ├── Button.tsx
│   ├── Input.tsx
│   └── Typography.tsx
├── molecules/       # Комбинации атомов
│   ├── FormField.tsx
│   ├── SearchBar.tsx
│   └── Card.tsx
├── organisms/       # Сложные компоненты
│   ├── Header.tsx
│   ├── Modal.tsx
│   └── Navigation.tsx
└── templates/       # Макеты страниц
    ├── AuthLayout.tsx
    └── DashboardLayout.tsx

Этап 5: Создание компонента (пример)

// Button.tsx
import { cn } from '@/lib/utils';
import { ReactNode } from 'react';

interface ButtonProps {
  children: ReactNode;
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  className?: string;
}

export function Button({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  className
}: ButtonProps) {
  const baseStyles = 'font-medium rounded-lg transition-colors';
  
  const variantStyles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'bg-transparent text-blue-600 hover:bg-blue-50'
  };
  
  const sizeStyles = {
    sm: 'px-3 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  };
  
  return (
    <button
      className={cn(
        baseStyles,
        variantStyles[variant],
        sizeStyles[size],
        disabled && 'opacity-50 cursor-not-allowed',
        className
      )}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

Этап 6: Testing и Iteration

Unit тесты компонентов

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });
  
  it('calls onClick when clicked', () => {
    const onClick = jest.fn();
    render(<Button onClick={onClick}>Click</Button>);
    screen.getByText('Click').click();
    expect(onClick).toHaveBeenCalled();
  });
  
  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click</Button>);
    expect(screen.getByText('Click')).toBeDisabled();
  });
});

E2E тесты (Playwright)

import { test, expect } from '@playwright/test';

test('button click interaction', async ({ page }) => {
  await page.goto('http://localhost:3000');
  const button = page.locator('button:has-text("Click me")');
  
  await expect(button).toBeVisible();
  await button.click();
  
  // Проверяем результат клика
  await expect(page.locator('text=Button clicked')).toBeVisible();
});

Этап 7: Accessibility (A11y)

// Доступный button
<button
  aria-label="Close dialog"
  aria-pressed={isActive}
  type="button"
  disabled={disabled}
>
  {children}
</button>

// Контраст цветов WCAG AA
// Фокус на клавиатуре
// Семантический HTML

Инструменты дизайна

Design:

• Figma (collaborative, web-based)
• Adobe XD
• Sketch

Frontend:

• Tailwind CSS (utility-first CSS)
• shadcn/ui (headless components)
• Storybook (component documentation)
• Chromatic (visual regression testing)

Version Control:

• Git для кода
• Abstract/Figma версионирование для дизайна

Best Practices

1. Mobile-first design — начинай с мобильного, потом расширяй
2. Component reusability — переиспользуй компоненты
3. Consistency — следуй дизайн-системе
4. Performance — оптимизируй изображения, бандлы
5. Accessibility — доступно для всех пользователей
6. Documentation — документируй компоненты в Storybook

Итог

Дизайн в проектах — это циклический процесс от исследования, через макетирование, реализацию и тестирование. Используя дизайн-системы и компонентный подход, можно создавать масштабируемые и консистентные интерфейсы.