Школа
Вёрстка

Как сделать карточки кейсов наглядными?

Сайт revanta.ru.

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

Понимания, как сделать карточки наглядными и попасть в стиль сайта, нет. Помогите пожалуйста.

Евгений Неустроев
22 фев 2023
👁 5057  
Вёрстка

Как сделать карточки кейсов наглядными?

Сайт revanta.ru.

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

Понимания, как сделать карточки наглядными и попасть в стиль сайта, нет. Помогите пожалуйста.

Евгений Неустроев
22 фев 2023
👁 5057  
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Евгений!

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

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

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

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

В компактной версии карточек всё тоже работает:

Итого, формула: стиль вашего сайта × максимально упрощённые образы × предметная область клиента.

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

Ну, а обо всём проекте можно ещё в портфолио почитать.

Типографика в вебеНоситель: сайтПортфолио
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы