Веб-дизайн и UI/UX
Лендинги и многостраничные сайты: структура, композиция, типографика, адаптив. Pixel-perfect макеты в Figma, готовые к разработке.
Кейс проекта
StarBarista — крупным планом
Идея выросла из наблюдения за работой у барной стойки: во время смены бариста постоянно нужна точная справка — состав, дозировки, порядок приготовления, сроки. Держать это в памяти тяжело, а искать по ходу смены — медленно. Хотелось собрать всё в одном быстром мобильном инструменте: одной рукой, за пару секунд, прямо на месте.
- СкоростьНужный напиток и его параметры — в пару касаний вместо перелистывания разрозненных материалов.
- КачествоЕдиные дозировки и шаги снижают количество ошибок и разброс между сотрудниками.
- ОбучениеВстроенный тренажёр для подготовки к аттестации — новички быстрее выходят на уверенную работу.
- АвтономностьВсё работает без интернета и не зависит от связи в зале.
PWA · Рабочий инструмент бариста
StarBarista
Прогрессивное веб-приложение с рецептурными картами кофейни: напиток, объём, дозировки, сборка, КБЖУ и сроки годности — под рукой у бариста, даже офлайн.
- 85напитков
- 11сезонов
- 10мануалов
- ∞офлайн-first
Светлая + тёмная тема
Карточка напитка
Дозировки, что пересчитываются
Горячий или холодный, объём 350 / 450 / 550 мл — и все дозировки, шоты и КБЖУ пересчитываются автоматически. Экран не гаснет, пока готовишь.
- Переключатель «горячий / холодный»
- Объёмы 350 / 450 / 550 мл с пересчётом
- Дозировки, шоты и КБЖУ в реальном времени
- Wake Lock — экран не гаснет
350 · 450 · 550 мл
Сроки годности
Калькулятор «годен до»
Дата вскрытия плюс срок хранения — и приложение само считает дату списания. Плюс поисковая таблица сроков всех ингредиентов.
- Дата вскрытия + срок → дата списания
- Таблица сроков по всем ингредиентам
- Поиск по названию
+30 дней → годен до
Мануалы и заваривание
10 мануалов под рукой
Базы и соусы, фасовка чая, воронка V60, френч-пресс, Колд Брю, фильтр-кофе — пошагово. Риски питчера и справка по дозировкам.
- Базы и соусы, фасовка чая
- V60, френч-пресс, Колд Брю, фильтр-кофе
- Риски питчера и справка по дозировкам
10 мануалов
Сертификация бариста
Геймифицированный тест
Конспект из 6 блоков и банк на 49 вопросов пяти типов. Режимы самопроверки и сертификации, разбор и «отработать ошибки».
- Конспект из 6 блоков
- 49 вопросов пяти типов
- Режимы самопроверки и сертификации
- Разбор и «отработать ошибки»
49 вопросов
Дизайн и PWA
Liquid Glass, тёмная тема, офлайн
Интерфейс в духе iOS: стеклянный таб-бар, тёмная / светлая / авто тема, тактильный отклик. Ставится на экран как нативное приложение.
- Стеклянный таб-бар в духе iOS
- Тёмная / светлая / авто тема
- Тактильный отклик
- Работает офлайн, ставится на экран
iOS · Liquid Glass
Установка
«На экран Домой» за пару касаний
Это PWA — открывается в браузере и ставится на домашний экран как обычное приложение. Запуск на весь экран, работа офлайн, иконка рядом с остальными.
- Устанавливается без стора
- Полноэкранный запуск, свой значок
- Кеш и работа офлайн
Progressive Web App
Живое демо
Открыть демо ↗
Попробуйте сами
Откройте ссылку или отсканируйте QR — лучше со смартфона. Установите приложение на экран «Домой» и войдите по пин-коду.
Ссылкаstar-barista.vercel.app
Пин15208
Наведите камеру
Листайте стрелками или свайпом
