1. Сбор и анализ требований
На стартовом этапе были проведены встречи с представителями заказчика для выявления ключевых целей проекта:
презентация услуг и компетенций агентства;
демонстрация реализованных проектов;
возможность обратной связи и запроса консультации;
обеспечение доверия через экспертизу и авторитетность.
На основе анализа целевой аудитории (представители бизнеса, государственные структуры, девелоперы), был определён стиль подачи информации и формат взаимодействия с пользователем.
2. Создание карты сайта (sitemap)
Первым шагом в проектировании стал анализ информационной архитектуры — составление карты сайта , которая стала основой для всей дальнейшей работы. Карта включала в себя:
Главная страница
О компании
Услуги
Проекты
Новости / Блог
Контакты
Для каждой страницы были определены ключевые блоки и типы контента: текстовые описания, изображения, таблицы, формы, фильтры и др.
3. Разработка интерактивного прототипа
На основе карты сайта был создан интерактивный прототип в Figma, который позволял команде наглядно увидеть структуру навигации и логику взаимодействия. Прототип включал:
переходы между страницами;
кликабельные элементы;
пользовательские сценарии (например, выбор услуги, заполнение формы, переход к проекту).
Этап прототипирования позволил заранее согласовать UX-решения и минимизировать количество изменений на этапе макетирования и верстки.
4. Создание UI-kit
После утверждения прототипа был разработан единый UI-kit , который стал основой для всех макетов. В него вошли:
Цветовая палитра (основные, акцентные и вспомогательные цвета);
Шрифтовые стили (заголовки, абзацы, кнопки, подписи);
Интерфейсные элементы (кнопки, поля ввода, чекбоксы, табы, карточки и т.д.);
Компоненты для повторяющихся блоков (навигационное меню, футер, слайдеры);
Анимационные эффекты и микровзаимодействия.
Все элементы были задокументированы и систематизированы для удобства использования как дизайнерами, так и разработчиками.
5. Макетирование страниц
Были разработаны готовые макеты всех страниц сайта в соответствии с требованиями адаптивности и отзывчивого дизайна. Макеты включали:
Десктопную, планшетную и мобильную версии;
Все состояния интерфейсных элементов (активные, неактивные, при наведении);
Правила расположения контента и отступов;
Аннотации и комментарии для разработчиков;
Export-assets для графических элементов, иконок и логотипов.
Каждая страница была проработана до мелочей: от главной страницы с визуальным привлечением внимания до детальных страниц проектов с аналитическими таблицами и описаниями.
6. Анимация интерактивных элементов
Для повышения вовлеченности и улучшения пользовательского опыта были добавлены анимационные эффекты :
Плавные появления блоков при скролле;
Анимация кнопок и элементов при наведении;
Эффекты загрузки данных;
Микровзаимодействия в формах и модальных окнах.
Анимации были реализованы в Figma и переданы в виде коротких видео или Lottie-файлов для последующей реализации.
7. Передача макетов разработчикам
Завершающим этапом стало оформление и передача макетов команде разработки. Для этого были подготовлены:
Полный набор макетов в Figma с подробными аннотациями;
Гайд по цветам, шрифтам, размерам и отступам;
Компоненты и стили, готовые к экспорту;
Assets (SVG, PNG, иконки, логотипы) в нужных форматах и размерах;
Технические комментарии по особенностям верстки.
Такой подход обеспечил минимальные трудозатраты на стороне разработчиков и позволил точно воспроизвести дизайн в коде.
