Контекст

Bitarmor — компания, которая предлагает услуги корпоративной кибербезопасности. Разработал этот пет-проект пока находился в дизайн-студии UPROCK: все исследования и макеты реализовал лично я, а коллеги из студии контролировали процесс и указывали на ошибки.

Основные задачи

• Понять, с какой целью пользователи будут заходить на сайт

• Проанализировать конкурентов в том же сегменте. Выявить сильные и слабые стороны

• Присвоить визуальный характер сайту, на основе трендов, целевой аудитории и конкурентов

• Отрисовать все страницы, чтобы пользователи могли закрывать свои главные запросы: узнавать информацию о компании, оставить заявку на консультацию

Аналитика

Первым делом я, конечно, пошел проводить исследования.

Конкурентный анализ

Имея вводные данные, я приступаю к аналитике. Вначале стараюсь ответить на самые важные вопросы, чтобы «не уплыть» не туда уже в процессе отрисовки:

Зачем клиенту нужен сайт?:

Убедить в опыте и надежности компании, рассказать о услугах

Почему пользователи выберут именно его?:

• Работали с известными корпорациями

• Огромный перечень уникальных услуг, департаментов для поддержки кибербезопасности компании клиента

• Многолетний опыт, долго на рынке, репутация

И уже после приступаю к конкурентному анализу:

Также параллельно собирал скриншоты ключевых страниц с сайтов конкурентов, чтобы понять, насколько эстетичен типичный сайт в этой области, и учесть их ошибки.

Функциональный прототип

На этом этапе я фиксирую содержание каждого блока на всех страница: объем текста, количество медиа-контента и так далее.

Отрисовка экранов

Закончив с аналитикой, начинаю готовиться к созданию визуальной концепции. Чтобы лучше понять, какой стилистики референсы выбирать, я выписываю все свои эмоции и ассоциации по отношению к проекту.

Весь список эмоций и ассоциаций которые связаны с проектом:

Безопасность, Контроль, Защита, Доверие, Стратегия, Конфиденциальность, Надежность, Шифрование, Аналитика, Технологичность, Профилактика, Реакция на угрозы, Искусственный интеллект, Стабильность, Скорость, Прозрачность, Архитектура системы, Цифровая среда, Уверенность, Предсказуемость, Невидимость, Мониторинг, Интеллектуальность, Компетентность, Законность.

До 3-х, на которых будет завязан проект:

Безопасность, Технологичность, Уверенность

Референсы

Сначала я собираю страницы сайтов подходящей по стилистике тематики, а далее разбиваю на френки, то есть вытаскиваю из каждого сайта нужные блоки, собирая десятки вариантов:

Визуальная концепция

Собрав френки, я начинаю отрисовку главной страницы для десктопа. Здесь я перебираю как можно больше вариантов, ведь на этом этапе присваевается визуальный характер будущему сайту.

Отрисовка всех экранов

Имея утвержденную главную страницу, начинаю отрисовку всех страниц с адаптивами. Выделю ключевые страницы:

Результат, вывод

В итоге мной был реализован дизайн сайта, который соответствует своему сегменту. Для данного проекта я также создал анимацию в After Effects.