Bioha

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

Конкретных пожеланий к дизайну у заказчика не было. От себя мы выделили следующие приемы, которые будут актуальны в этом проекте:

• градиент
• прозрачность
• чистота
• светлая гамма сайта
• простая читабельная типографика

Проанализировали последовательность блоков – это путь, по которому посетитель сайта будет знакомиться с экспертом и его услугами. С последовательностью все в порядке, но мы все равно нашли пару проблем:

1. Блоки «Программы» и «Услуги и цены» расположены в разных местах. Пользователю приходится сопоставлять название программы и ее состав в одном блоке со стоимостью в другом блоке, приходится скроллить 3 экрана... это плохо( Решаем объединить эти два блока в один блок и скрыть подробную информацию о программе в отдельную страницу.
2. Форма призыва к действию (записи на консультацию) у нас располагается в середине сайта – это хорошо. Но сайт достаточно объемный по количеству информации, и можно сделать пару таких блоков, один примерно чуть выше середины, второй чуть ближе к футеру. А еще в меню закрепим кнопку – так она всегда будет в поле видимости. Так и делаем.

Перед тем как разработать дизайн-концепцию мы подобрали референсы и с заказчиком обсудили приемы, которые хотим использовать в будущем дизайне

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

Концепт заказчику понравился. Был один комментарий – не использовать градиентные шары на фоне, а заменить из изображениями ДНК, молекул и чего-то подобного в медицинской тематике. Мы учли это и разработали макет всей страницы.

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

Формы призыва к целевому действию (СТА) акцентируем фоновым цветом, который контрастен к фону сайта.

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

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

//Разрабатываем также мобильную версию, чтобы заказчик мог предварительно перед версткой оценить удобство сайта с обоих устройств.

Оцените каждый из блоков в отдельности. Наглядно показали как структурно можно поработать с блоками информации, добавив немного визуальных решений

Figma, Tilda