Как упаковать 34 года опыта в понятный и убедительный B2B-сайт (часть 3)
После аналитики, работы со структурой, текстовыми прототипами и поиска визуального направления началась уже непосредственная работа над визуальной системой сайта. Одной из главных задач проекта было сохранить узнаваемость бренда, но при этом сделать сайт значительно современнее, чище и легче визуально. Это был важный баланс.
С одной стороны, у компании уже существовала сложившаяся айдентика: фирменные цвета, типографика, паттерны, логотип и визуальные ассоциации, которые уже считывались клиентами компании.
С другой — старый сайт был перегружен декоративными элементами и местами создавал ощущение визуционного шума. Некоторые графические решения начинали конкурировать с контентом за внимание пользователя, а сама композиция выглядела слишком тяжёлой для большого объёма информации.
Поэтому в новом визуальном подходе основной акцент делался не на декоративность, а на управляемость восприятия.
Во время работы постепенно упрощалась визуальная система:
уменьшалось количество лишних акцентов,
появлялось больше воздуха,
усиливалась визуальная иерархия,
контент становился чище и легче для восприятия.
Отдельное внимание уделялось ритму интерфейса. Важно было сделать так, чтобы пользователь не уставал от количества информации и мог быстро считывать структуру страниц.
При этом проект не уходил в «стерильный минимализм». Для B2B-сайта в выставочной индустрии это тоже риск: слишком нейтральный интерфейс начинает выглядеть безликим и теряет ощущение характера бренда.
Поэтому визуальное направление выстраивалось на балансе:
между строгостью и современностью,
между чистотой интерфейса и визуальной выразительностью,
между минимализмом и живым ощущением бренда.
Дополнительно в проекте использовались современные анимационные решения, но достаточно аккуратно. Анимация не должна была отвлекать пользователя или создавать визуальную перегрузку. Её задача состояла скорее в поддержке интерфейса: делать взаимодействие плавнее, усиливать акценты и помогать восприятию структуры страниц.
В итоге визуальная система стала заметно спокойнее, чище и современнее, сохранив при этом узнаваемость бренда и ощущение серьёзной B2B-компании.
Проектирование и отрисовка макетов
Когда была завершена работа над аналитикой, структурой, текстовыми прототипами и визуальным направлением, проект перешёл в один из самых объёмных этапов — проектирование и отрисовку макетов. Именно здесь особенно хорошо видно, насколько сильно реальный digital-проект отличается от представления «дизайнер просто рисует страницы».
На практике работа над макетами — это огромное количество решений, которые принимаются одновременно на разных уровнях:
UX,
структуры,
контента,
композиции,
адаптивности,
логики взаимодействия,
визуальной иерархии
и восприятия информации.
Причём большая часть этой работы остаётся незаметной для пользователя, хотя именно она в итоге определяет, насколько сайт будет восприниматься цельным, удобным и профессиональным.
Почему макеты — это отдельный большой этап В крупных B2B-проектах макеты — это уже не «визуализация идеи», а полноценная система проектирования. Особенно в проекте, где: — большое количество страниц; — сложная структура; — разные типы контента; — объёмные кейсы; — множество внутренних сценариев; — адаптация под разные устройства; — требования SEO и маркетинга. Каждая страница требовала отдельной логики подачи информации. Например, страница услуги и страница кейса решают совершенно разные задачи. В одном случае важно постепенно объяснить услугу и снять вопросы пользователя. В другом — показать уровень проектов, детали реализации и масштаб работы компании.
Из-за этого проектирование превращается не в «отрисовку одинаковых экранов», а в постоянную работу с:
композицией,
ритмом,
иерархией,
структурой контента
и поведением пользователя внутри страницы.
При этом все страницы всё равно должны ощущаться частью одной системы. Именно поэтому большая часть времени в таких проектах уходит не на декоративную часть, а на постоянную настройку взаимосвязей между: контентом, структурой, UX и визуальным восприятием.
Что входило в работу над макетами Во время проектирования приходилось одновременно учитывать сразу несколько уровней работы. С одной стороны — структура страниц:
как распределяется информация,
в каком порядке пользователь её считывает,
где возникают акценты,
как выстраивается ритм взаимодействия.
С другой — сама визуальная система:
сетка,
типографика,
размеры блоков,
отступы,
визуальная плотность,
поведение интерфейсных элементов.
Параллельно постепенно формировалась и внутренняя дизайн-система проекта. В подобных проектах это особенно важно, потому что без системности интерфейс очень быстро начинает распадаться на набор отдельных страниц.
Работа с внутренними страницами Отдельный большой объём работы пришёлся именно на внутренние страницы сайта. В B2B-проектах они часто оказываются даже важнее главной страницы, потому что именно туда пользователь попадает из поиска, рекламы или внутренних переходов.
Для проекта EXPONIC отдельно прорабатывались:
страницы услуг,
кейсы,
портфолио,
блог,
контакты,
и другие внутренние разделы.
Работа с адаптивами
Отдельным большим этапом стала адаптация проекта под разные разрешения. Для сайта прорабатывалось шесть разрешений, и это была не механическая «подгонка» интерфейса под размеры экрана.
Итерации и согласования Работа над макетами шла итерационно. Часть решений дорабатывалась уже после обсуждений с заказчиком, часть — после дополнительных внутренних проверок.
Отдельно приходилось учитывать и техническую сторону проекта. Некоторые решения требовали уточнения с точки зрения реализации, адаптивности и дальнейшей поддержки сайта.