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