Контекст

Научно-исследовательский институт функционального питания — образовательная организация в сфере здорового и медицинского питания. Данный коммерческий проект выполнялся пока я был в ExtentLab: я самостоятельно реализовал дизайн сайта с нуля.

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

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

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

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

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

Аналитика

К сожалению, не могу продемонстрировать данный этап. Зато могу вкратце рассказать о процессах:

• Вводные данные (провел бриф с клиентом, забрал все материалы которые имеются)

• Конкурентный анализ, чтобы понять стилистическое направление в сфере и учесть чужие ошибки

• Функциональный прототип, чтобы зафиксировать контент по объемам и функционал сайта

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

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

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

Наука, Здоровье, Питание, Инновации, Эффективность, Надежность, Безопасность, Современность, Польза, Поддержка иммунитета, Образование, Экспертиза, Биохимия, Человеческий организм, Рациональность, Лаборатория, Исследования, Натуральность, Технологии, Актуальность, Академичность, Глубина знаний, Качество жизни, Профилактика, Осознанность.

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

Эффективность, Надежность, Актуальность.

Референсы

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

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

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

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

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

Также поработал с рекламными материалами:

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

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