Задание: Дизайнер сайтов. Web дизайнер ( для создания карты продукта, инфраструктуры) (Дистанционная работа)
Техническое задание для дизайнера
________________________________________
Формат итогового блока:
Интерактивная карта должна быть выполнена в Figma в трёх версиях:
1. Статичная (основной слой)
2. Интерактивная (с прототипированием взаимодействия)
3. Экспортируемая версия для вэба
________________________________________
Требования к стилю и графике
• Использовать фирменный стиль iQoko (цвета, линии, иконки).
• Карта — минималистичная, технологичная, с акцентом на данные.
• Иконки оборудования — простые, в едином стиле.
• Локации должны быть аккуратно размещены, масштаб карты — Россия / СНГ / Мир.
• Все всплывающие карточки должны быть унифицированных размеров.
________________________________________
Требования к интерактивности (обязательно)
1) Ховеры
При наведении: подсветка города, тень, подсказка операции.
2) Клик на город
Открывает карточку:
• Название города
• Направление деятельности
• Фото оборудования (если есть)
• Перечень оборудования
• Вклад в продуктовую цепочку
• CTA: «Узнать больше о продукте»
3) Переключатели слоёв
В виде:
• вкладок (tabs)
• бокового меню
• переключателей (toggle buttons)
4) Динамические линии и связи
Отображают взаимодействие инфраструктуры.
5) Анимация
Лёгкая:
• плавное появление объектов
• линии связей
• перелистывание слоёв
________________________________________
4. Структура итогового файла для дизайнера
Дизайнер должен подготовить:
________________________________________
1. В Figma:
Страница 1 — Общая карта
• Base Map
• Points (cities)
• Hover states
• Popup cards
Страница 2 — Слой продуктов
• Product overlays
• Product paths
• Product–city connections
Страница 3 — Слой партнёров
• Partner icons
• Partner cluster regions
• Problem → Solution mapping
Страница 4 — UI Components
• Иконки
• Цвета
• Карточки
• Линии
• Стили анимаций
________________________________________
2. Для фронтенда (как передать разработчику)
• SVG-карта (слои разделены на группы)
• SVG-иконки инфраструктуры
• JSON-файл с координатами городов
• JSON-файл с контентом карточек
• GIF/MP4 — примерная анимация слоёв
• Figma prototype link
________________________________________
5. Пример сценария использования карты
Пользователь открывает страницу «Инфраструктура»:
1️⃣ Видит карту России с точками городов
Ховеры подсказывают: «Москва — центр разработки».
2️⃣ Нажимает «Продукты»
Карта меняется:
Модуль «ИИ» подсвечивает города, где обучаются модели.
3️⃣ Нажимает «Партнёры»
Появляются иконки:
«Стройка», «Карьер», «Перевалка».
4️⃣ Кликая по отрасли
Открывается объяснение:
«Какие боли есть» → «Что даёт iQoko» → «Какие модули используются».
________________________________________
6. Итог
Это ТЗ даёт дизайнеру:
чёткое понимание структуры проекта
требования по стилю и интерактивности
уровни слоёв и связи между ними
готовую структуру Figma-файла
что именно визуализировать в каждом слое
________________________________________
