В поисках идеального кейса или топ-10 советов как это сделать

В один осенний день Анатолий Денисов озадачил меня просьбой провести первую глобальную ревизию раздела «Кейсы» на CMSMagazine. С момента старта накопилось без малого 193 проекта. Все еще усугубилось тем, что надо не просто посмотреть и закрыть, но и выбрать несколько лучших. И все это под соусом UX/UI.

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

А если нужно, то как сделать из этого действительно красивую и увлекательную историю. От бессмысленных текстов и непонятных картинок до, как это модно говорить, Вижуал Сторителлинга :). Поехали!

Зачем вообще нужен кейс?

В сфере веб-разработки были разные попытки подойти к этому формату. Помните, что когда-то для портфолио было достаточно просто картинок? Но, так или иначе, эволюция взяла свое. Теперь у вас может быть не только Портфолио, но и Кейсы. Причем последние могут быть фантастически разными. Поскольку мы можем использовать для этого всевозможные цифровые примочки.

Порой достаточно сделать 5–7 сочных и актуальных кейсов, чтобы обеспечить стабильный трафик на ваш сайт и какую-то ауру обсуждений в соцсетях.

http://www.aic.ru/work/site/
http://www.aic.ru/work/site/

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

  1. Дизайнеров. Хотите, чтобы к вам приходили за вдохновением.
  2. Клиентов. Чтобы, приходя, долго смаковали и, наконец, жали на кнопку «Заказать».
  3. Потенциальных сотрудников. Скорее всего, они будут и вдохновляться и смаковать. Но, не имея таких навыков, попросятся к вам в компанию.

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

1. Встречают по обложке

https://www.behance.net/gallery/33912080/Rostelecom
https://www.behance.net/gallery/33912080/Rostelecom

Для старта кейса критически важна обложка. Обычно это яркая, сочная, (порой не имеющая связи с реальностью) обложка, в который вы говорите, о чем это вообще.

https://www.behance.net/gallery/23718699/MTS-Bank-Online
https://www.behance.net/gallery/23718699/MTS-Bank-Online

Ключевые приметы:

Задний фон в большинстве случаев должен отличаться от белого. Либо однотонный яркий, либо с контекстным бэкграундом. Короткий и доступный для чтения заголовок. Главный скриншот вашего проекта может быть в мокапе устройства. Интересная геометрия или композиция. Простой способ проверить результат самому — посмотреть на обложку с расстояния 2–3 метров. Должно цеплять, работать как постер к фильму.

https://www.behance.net/gallery/34555939/SHARP
https://www.behance.net/gallery/34555939/SHARP

2. Заранее продумайте структуру рассказа

Начните кейс с внутренней структуры. Зафиксируйте ключевые моменты рассказа в блокноте и потом потихоньку разматывайте ее в прототип и в графические детали.

https://www.behance.net/gallery/33912080/Rostelecom
https://www.behance.net/gallery/33912080/Rostelecom

Ключевые приметы:

  • Обложка
  • Цель проекта, коротко на 3–4 абзаца.
  • Главная страница
  • Проектирование или процесс поиска
  • Ключевые разделы
  • Макропланы
  • Результаты. Цифры и факты
  • Закадровое, режиссерское
  • Гайдлайн

3. Оптимальная длина кейса

https://www.behance.net/gallery/38477227/Tour-portal-Open-bank
https://www.behance.net/gallery/38477227/Tour-portal-Open-bank

Читатель готов воспринимать красивую и логичную историю, но в рамках разумного. Почему длина хорошего художественного фильма — 1:30м, серии в сериале — 45м, музыкального клипа — 3м? Так же и с вашим кейсом.

Ключевые приметы: от 15 000 до 20 000 пикселей.

4. Макропланы и детальки

https://www.behance.net/gallery/38170861/Kukuruza
https://www.behance.net/gallery/38170861/Kukuruza

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

5. Текст необходим, но настолько же бесполезен

https://www.behance.net/gallery/43239455/Wondercom
https://www.behance.net/gallery/43239455/Wondercom

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

https://www.behance.net/gallery/43239455/Wondercom
https://www.behance.net/gallery/43239455/Wondercom

Ключевые приметы: Вдумчивый и вкусный копирайтинг. Короткие и крупные заголовки. Раскрывающие подстрочники. Местами 1–2 абзаца текста. Мелкие подсказки и примечания.

6. Реалистичнее и вкуснее

https://www.behance.net/gallery/33912080/Rostelecom
https://www.behance.net/gallery/33912080/Rostelecom

Ключевые приметы: Использование необычных мокапов. Изометрический вид.
Этот ресурс может немного вам в этом помочь: http://www.pixeden.com/
Если хотите играть по-крупному, посмотрите еще здесь: www.creativemarket.com

7. Как вы это делаете? Расскажите про процесс

Ключевые приметы: Прототипы, схемы, промежуточные решения.

8. Без анимации не едят

https://www.behance.net/gallery/34555939/SHARP
https://www.behance.net/gallery/34555939/SHARP

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

Но не перестарайтесь. GIF-анимация много весит и требовательна к загрузке процессора. Идеально использовать 2–3 гифки, каждая из которых не больше 5–7 секунд по времени.

https://www.behance.net/gallery/24199683/ActivityStream-Dashboard
https://www.behance.net/gallery/24199683/ActivityStream-Dashboard
https://www.behance.net/gallery/24199683/ActivityStream-Dashboard
https://www.behance.net/gallery/24199683/ActivityStream-Dashboard

Ключевые приметы: GIF-анимация, где начало ролика мастерски совпадает с его концом, образуя loop-секвенцию.

9. Мы молодцы, но об этом коротко

https://www.behance.net/gallery/43239455/Wondercom
https://www.behance.net/gallery/43239455/Wondercom

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

https://www.behance.net/gallery/42834421/NTV-Plus
https://www.behance.net/gallery/42834421/NTV-Plus

Ключевые приметы: 160 макетов, 3 убитых мышки, 6 бессоных ночей Васи верстальщика. И обязательно заверните эти шоколадные кнопки в UI Kit на десерт.

10. Финишируйте по-голливудски

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

Ключевые приметы: Шоурил проекта. Продолжительность 1–1,5 минуты.
Только AfterEffects, только хардкор.

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

В остальном, следите за трендами, подписывайтесь на нас.

Behance: http://be.net/aic
Vimeo: https://vimeo.com/aicru
Facebook: https://www.facebook.com/aic.ru/

Автор: Сергей Попков, AIC (Owner/Partner)
Оригинал: cmsmagazine.ru

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/