Задание: Проектирование. Отрисовать ~20 HTML-макетов интерфейса b2b-платформы по готовому ТЗ (Дистанционная работа)
Разовая задача: по готовому функциональному ТЗ и референс-экранам собрать финальные макеты всех экранов веб-системы в статичном HTML/CSS/JS. Результат — комплект готовых экранов с проработанными состояниями, из которых дальше вырастет боевой UI. Дизайн + вёрстка в одном. Что за продукт Веб-платформа для проведения строительных/закупочных тендеров: тендерный специалист собирает коммерческие предложения (КП) от поставщиков в одном окне, поставщики подают КП через личный кабинет, система сводит всё в сравнительную таблицу. Внутренний b2b-инструмент, не лендинг. Объём работы (результат на выходе) Комплект из ~18–22 HTML-экранов, сгруппированных по бизнес-сценариям, с единым UI-китом (типографика, сетка, таблицы, формы, карточки, бейджи статусов, боковое меню, модалки) и с проработкой состояний каждого экрана: пусто / заполнено / загрузка / ошибка / нет доступа / ключевые статусы (черновик, отправлено, на рассмотрении, ок/не ок). Список экранов A. Каркас: вход, боковое меню, дашборд, дерево «портфель — проект — подпроекты», страница проекта. B. Тендеры: реестр тендеров с фильтрами и выгрузкой в Excel; рабочее пространство тендера (автосводка КП, сравнение поставщиков бок-о-бок, прогресс, лента изменений); сравнительная таблица (итоги по разделам, сворачивание, версии КП, подсветка мин/макс и отклонений цен); панель ИИ-подсказок поверх таблицы. C. КП: входящие «почтовый ящик» (список с выделением новых, фильтры); карточка КП (контрагент, сумма, сроки, вложения, история версий, комментарии); загрузка Excel-шаблона с превью онлайн-формы. D. Поставщики (внутренний контур): реестр контрагентов и карточка поставщика (реквизиты, анкета, участие в тендерах, лента, согласие на ПДн); экран квалификации с отметкой «ок / не ок». E. Поставщик (внешний контур): квалификационная анкета (публичная форма самозаполнения + финансовый блок + согласие на ПДн); личный кабинет поставщика (подача КП по персональной ссылке, только свои поля, автоитоги, кнопка «Подать»). F. Справочники и отчёты: справочник видов работ, аналитика с выгрузкой в Excel, админка ролей и прав. G. Информационная безопасность (второй блок, объём уточним): MFA-вход админа, журнал событий, экран инцидентов, маскирование финансового блока. Технические требования к результату - Статичный HTML/CSS/JS без сборки (без React/Vue/webpack), открывается двойным кликом по файлу. - Семантичная вёрстка, десктоп-адаптив (это рабочий инструмент), единый набор переиспользуемых компонентов. - Простой интерактив на vanilla JS для демонстрации состояний (табы, разворачивание разделов таблицы, открытие карточки). Что предоставляю для работы - Детальное функциональное ТЗ по блокам (что за экран, что на нём происходит, критерии). - 6 готовых демо-экранов как референс стиля — их приводим к единому UI. - Список экранов и состояний. Про сроки и оценку Задача под готовое детальное ТЗ и с референсами, отлично ускоряется современными AI-инструментами (Claude Code, Cursor, v0 и т.п.) — их использование приветствуется. Ориентир по сроку — 1–2 недели на весь комплект. Оценку стоимости за весь объём предложите сами, исходя из этого; бюджет как за ручную попиксельную отрисовку 20 экранов с нуля здесь не закладывается. Что приложить к отклику - 2–3 примера реальных реализованных интерфейсов (дашборды, CRM, админки, b2b-системы), не только концепты. - Срок и стоимость за весь объём. - По желанию — тестовый экран из блока B (сравнительная таблица) или E (анкета), решённый по этому описанию. Приёмка поэкранно, группами A–G.
