[Сайт с админкой + Telegram-боты]
PEACH
Сайт / Кофейня
К списку проектов[Платформа / Бар и кофе]
BARSYNERGY
[ПРОЦЕСС]
[Три роли — три пути]
BARSYNERGY — платформа для людей из кофе и бара: обучение, события, вакансии и предложения поставщиков. Дизайн платформы я тоже делал сам, от схемы разделов до экранов, вместе с разработкой.
Сначала я разобрал, кто приходит на платформу: бармен ищет работу или курс, заведение — сотрудников, поставщик — клиентов. У каждого свой путь, и главная должна сразу его показать.
[Главная и разделы]
Главная начинается с выбора: работа, специалисты, поставщики, обучение, события. Каждый пункт ведёт в свой раздел, у пользователя есть профиль, у бизнеса — кабинет со своими инструментами.
Заявки и контент команда платформы разбирает в админке.
[Жёлтый — только для действий]
Фон белый, строки и карточки светло-серые, вторичный текст серо-синий. Жёлтый — единственный яркий цвет, и он есть только у кнопок действий.
Крупные заголовки набраны Unbounded, остальной текст и формы — системным шрифтом: он не требует загрузки и привычно выглядит в полях ввода.
background#FFFFFFфон страниц
text#1C1C1Eосновной текст
surface#F7F8FAкарточки и строки
muted#555A6Aвторичный текст
accent#E8B000главные действия
accent-
border-
Unbounded
Аа Бб Вв 0123 ₽
крупные заголовки
Начертания: 600–800
системный стек
Аа Бб Вв 0123 ₽
весь текст и формы
Начертания: системный
0.55rem
поля и кнопки
0.8rem
карточки и панели
999px
круглые контролы
[Калькулятор себестоимости]
Калькулятор я делал для бармена: он вводит ингредиенты, а себестоимость и рекомендуемая цена стоят в тёмной шапке панели, отдельно от формы. Кольцо рядом показывает, из чего сложилась сумма.
Строки ингредиентов собраны из общих полей платформы. Жёлтая кнопка одна: копирует итог и показывает «Скопировано».
Итог вынесен в тёмную шапку панели, чтобы себестоимость и цена читались отдельно от плотной формы.
Разбивка показывает, из чего сложилась себестоимость: каждая категория — суммой и долей.
Строка держится на общем контракте полей, а фокус остаётся нейтральным: жёлтый прибережён для действий.
Жёлтая кнопка одна отвечает за действие — копирует итог и показывает состояние «Скопировано».
[Строки вместо карточек]
Сценарии на главной идут строками с разделителями, а не сеткой карточек: длинные названия читаются целиком, а главная похожа на оглавление журнала.
Скругления маленькие: около 9 px у полей и кнопок, 13 px у карточек, полностью круглые — только иконки.
Сценарии идут ритмом строк с разделителями, а не стопкой карточек: типографика делает главную работу.
[Одна база для всех ролей]
Платформа написана на Next.js и React, данные лежат в PostgreSQL и подключены через Prisma. Профили, кабинет бизнеса и админка работают на одной базе.
Калькулятор отдельно проверял на телефоне: бармен считает за стойкой, и итог должен быть виден без прокрутки.
[Итог]
Разные задачи индустрии собраны в общей структуре: поиск событий и знаний, работа с вакансиями и знакомство с поставщиками.
Платформа с профилями, кабинетом бизнеса, админкой и калькулятором себестоимости напитка.
Связаться со мной
Напишите, что нужно сделать, — отвечу и предложу, с чего начать.