---

Да, это продолжение задания. На этом фото уже Этап 3 и Этап 4. Распишу так, чтобы можно было сделать работу.
Этап 3. Сбор референсов и мудборд
Цель: собрать визуальный образ будущего сайта.
Шаг 1. Поиск референсов
Нужно найти примеры сайтов/приложений, которые подходят по стилю.
Для нашей кофейни можно взять:
сайты современных кофеен;
примеры меню;
фотографии кофе и десертов;
варианты оформления кнопок;
примеры главной страницы;
примеры карточек товаров.
Что искать: тёплые цвета, уют, минимализм, фотографии кофе, простая навигация.
Можно подобрать примерно 5–7 референсов.
Шаг 2. Цветовая палитра
Для кофейни подойдёт такая палитра:
Бежевый — фон.
Кремовый — дополнительные блоки.
Коричневый — основной цвет текста.
Тёмно-коричневый — заголовки.
Оливковый — дополнительный акцент.
Тёмно-синий можно использовать для отдельных кнопок, если нужен контраст.
Пример:
Фон: #F5EBDD
Основной: #6B4226
Светлый: #FFF8EF
Акцент: #7A8060
Шаг 3. Типографика
Нужно выбрать 2 шрифта:
1. Для заголовков:
Playfair Display — крупный, хорошо подходит для названий.
2. Для основного текста:
Montserrat — простой и хорошо читаемый.
Например:
КОФЕЙНЯ — Playfair Display
Меню, цены, описание — Montserrat
Результат этапа 3
Нужно создать графический или текстовый документ, где будут:
выбранные фотографии;
цветовая палитра;
примеры шрифтов;
примеры кнопок;
примеры карточек;
элементы будущего сайта.
То есть получится примерно такая доска:
┌─────────────────────────────────────┐
│         МУДБОРД КОФЕЙНИ             │
│                                     │
│  [фото кофе]   [фото интерьера]     │
│                                     │
│  БЕЖЕВЫЙ  КОРИЧНЕВЫЙ  КРЕМОВЫЙ      │
│                                     │
│  Playfair Display                   │
│  Montserrat                         │
│                                     │
│  [ ЗАКАЗАТЬ ]  [ МЕНЮ ]             │
└─────────────────────────────────────┘
Этап 4. Создание бумажных скетчей (Wireframes)
Цель: быстро нарисовать расположение элементов сайта без красивого дизайна.
Нужно сделать 5–7 основных экранов.
Экран 1. Главная
┌─────────────────────────┐
│ ЛОГО     Меню Контакты  │
├─────────────────────────┤
│                         │
│      КОФЕЙНЯ            │
│  Кофе и десерты         │
│                         │
│     [ ЗАКАЗАТЬ ]        │
│                         │
├─────────────────────────┤
│ Популярные товары       │
│ [кофе] [десерт] [чай]   │
└─────────────────────────┘
Экран 2. Меню
┌─────────────────────────┐
│ ЛОГО        МЕНЮ        │
├─────────────────────────┤
│ Кофе | Чай | Десерты    │
├─────────────────────────┤
│ [Фото]  Капучино       │
│         250 ₽ [Заказать]│
│                         │
│ [Фото]  Латте           │
│         280 ₽ [Заказать]│
└─────────────────────────┘
Экран 3. Страница товара
┌─────────────────────────┐
│ ← Назад                │
├─────────────────────────┤
│                         │
│       [ ФОТО ]          │
│                         │
│       Капучино          │
│       250 ₽             │
│                         │
│ Описание напитка...     │
│                         │
│      [ ДОБАВИТЬ ]       │
└─────────────────────────┘
Экран 4. Корзина / оформление
┌─────────────────────────┐
│       КОРЗИНА           │
├─────────────────────────┤
│ Капучино       250 ₽    │
│ Чизкейк        300 ₽    │
├─────────────────────────┤
│ Итого:         550 ₽    │
│                         │
│ [ ОФОРМИТЬ ЗАКАЗ ]      │
└─────────────────────────┘
Экран 5. Контакты
┌─────────────────────────┐
│       КОНТАКТЫ          │
├─────────────────────────┤
│ Адрес: ул. ...         │
│ Телефон: ...            │
│ Время: 08:00–22:00     │
│                         │
│       [ КАРТА ]         │
└─────────────────────────┘
Экран 6. О кофейне
┌─────────────────────────┐
│       О НАС             │
├─────────────────────────┤
│       [ ФОТО ]          │
│                         │
│ Наша кофейня — это...   │
│                         │
│ Наша команда...         │
└─────────────────────────┘
Что в итоге нужно сдать
Этап 3: мудборд с референсами + цветами + шрифтами.
Этап 4: 5–7 простых wireframe-эскизов основных страниц.
На этапе 4 не надо рисовать красивый дизайн — только прямоугольники, блоки, заголовки и кнопки, как в примерах выше.