Дизайн-ремонт №2: чиним UI, не ломая UX

Мы в Purrweb продолжаем «ремонтировать» сайты. Расклад такой: берем 5 работающих дизайнов и думаем, что можно улучшить в визуальной части. UX не трогаем — мы тратим на макет 1 час, а для качественных изменений пользовательского опыта нужно больше времени. Сегодня экспериментируем с сайтом телеканала, замахиваемся на Xbox и улучшаем сервис для отправки открыток.

Мы попросили наших дизайнеров за 1 час улучшить UI главных страниц 5 реальных сайтов. Они не переделывали логику и не трогали пользовательский опыт. Цель Дизайн-ремонта — обновить пользовательский интерфейс и сделать его визуально интереснее. Погнали!

Что хорошо: разнообразная верстка за счет карточек статей разного размера.

Что не так: проблема в акцентах — большой и яркий хедер берет на себя слишком много внимания, а карточки статей, наоборот, недостаточно его притягивают.

Что улучшить: добавить акцент на контент, ради которого пользователи и заходят на сайт — на статьи. Для этого поработать с типографикой, сильнее выделить заголовки, чтобы они сразу заинтересовали пользователя. Разгрузить и визуально облегчить хедер. Красный цвет можно заменить на менее агрессивный, чтобы он не перетягивал слишком много внимания на себя. Использовать меньше эффектов — вместо теней выделить карточки статей цветом и обводкой.

Что изменили: уменьшили хедер, сделали акцент на контенте.

Что хорошо: первое, что видим на главной, — баннер с актуальным предложением и заметным СТА.

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

Что улучшить: выделить текст и добавить контраста между элементами, чтобы привлечь больше внимания к главному баннеру. Так как это сайт игровой консоли, можно сделать все более ярким — использовать декоративные элементы, сделать интересный СТА.

Что изменили: увеличили кнопку СТА и расставили акценты в банере, сделали визуал последовательным.

Что хорошо: за счет темного фона хорошо выделятся заголовок. Заметная кнопка СТА, указаны важные детали.

Что не так: сайт выглядит достаточно скучно из-за превалирующего серого цвета и отсутствия контрастов. В элементах не хватает выстроенной иерархии. В качестве основного цвета подобран грязный оттенок. Логотипы компаний искажены, сильно вытянуты.

Что улучшить: поработать с версткой — добавить иерархию в текст и создать более интересную, цепляющую внимание композицию. Подобрать чистый и более насыщенный праймари цвет. Не растягивать и не искажать логотипы компаний, сделать дизайн более чистым.

Что изменили: расставили акценты с помощью иерархии контента, заменили основной цвет.

Что хорошо: есть крупная иллюстрация — карточка-открытка, сразу становится понятно, что можно сделать на этом сайте.

Что не так: несмотря на яркий желтый цвет, интерфейс не цепляет глаз и выглядит скучно. В тексте и элементах слева не хватает четко выстроенной иерархии в отступах.

Что улучшить: добавить интерактивности и яркости, обыграть стандартный формат «текст + изображение + СТА». Чтобы больше мотивировать пользователя использовать сервис, можно сделать больший акцент на открытку. Например, перенести интерфейс прямо в карточку, подчеркнуть легкость использования и то, что сделать все можно буквально в один клик.

Что изменили: поместили контент в иллюстрацию, сделали типографику легче.

Что хорошо: крупное изображение притягивает внимание и сразу знакомит с интерфейсом приложения. Заметный блок с СТА.

Что не так: текст слева не выровнен с изображением. Градиент на фоне выглядит тускло и темно. Так как контента в целом мало, хочется сделать его крупнее и ярче, привлечь больше внимания, чтобы пользователь сразу заинтересовался.

Что улучшить: поработать с фоном, добавить контраста в цвета. Сделать кнопку СТА еще заметнее, так как это главное целевое действие на этой странице. Небольшое количество контента можно сбалансировать, добавив яркие декоративные элементы, в идеале – анимированные, чтобы страница произвела впечатление и вызвала интерес пользователя.

Что изменили: заменили иллюстрацию на декоративные элементы и выделили главное предложение.

Нет гарантии, что наш редизайн понравился бы владельцам сайтов, которые мы разобрали. Их продукты работают и привлекают пользователей, а это — главное. Но всегда можно что-то улучшить.