Иван Данилов

Middle UX/UI Дизайнер

Редизайн маркетингового сайта

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

Website Redesign

UI Design

UX Structure

Недостатки

Неочевидные призывы к действию

Ключевые действия на некоторых страницах были оформлены как текстовые ссылки и располагались в неочевидных местах. Основные CTA-кнопки недостаточно выделялись визуально и не привлекали внимание пользователей, что затрудняло переход к следующим шагам.

Нестабильная структура контента

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

Устаревшие и несогласованные UI-компоненты

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

Несбалансированная цветовая система

Основные CTA-кнопки были недостаточно выразительными и плохо выделялись на фоне интерфейса. Тёплая серая палитра конфликтовала с основным синим цветом бренда, а сам синий оттенок выглядел слишком приглушённым. Это снижало визуальную иерархию и делало важные элементы менее заметными.

Цели

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

Решения

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

Создание новой цветовой палитры

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

HEX

F5F5F5

RGB

245, 245, 245

HEX

A6A6A6

RGB

166, 166, 166

HEX

474747

RGB

71, 71, 71

HEX

499CEE

RGB

73, 156, 238

HEX

16294F

RGB

22, 41, 79

HEX

F8FAFC

RGB

248, 250, 252

HEX

CBD5E1

RGB

203, 213, 225

HEX

465573

RGB

70, 85, 115

HEX

2563EB

RGB

37, 99, 235

HEX

1E3A8A

RGB

30, 58, 138

Введение системы размеров

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

Создание правил использования цветов

Определил правила использования цветовой палитры для различных элементов интерфейса. Светлые оттенки применялись для фонов, средние — для обводок и второстепенных элементов, а основные оттенки бренда использовались для интерактивных элементов и акцентных состояний.

Создание и улучшение компонентов

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

Примеры улучшений

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

Другие внутренние страницы

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

Результаты

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

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

25+

Страниц было переработано

30+

Новых и обновлённых компонентов создано

Единая дизайн-система внедрена

4 года

Подходы и компоненты используются до сих пор

Хотите так же?
Давайте работать вместе.

Если этот кейс близок вашему проекту, напишите мне — буду рад обсудить, чем могу помочь.

Свяжитесь со мной

Другие кеймы из этого проекта