Бонобо Канзи
Рабочее место для кота
Протесты против Маска
«Офису» — 20 лет
Ламба из картона
Дорожка для аквабега
Jaguar Type 00 в Париже
Xiaomi SU7 Ultra
Полёт над Луной
Автопилот Tesla на бездорожье
«Игровые» Google Maps

Культура кейса. Как научиться упаковывать свои проекты с иголочки

Динозавры вроде меня помнят те времена, когда для портфолио агентству хватало только картинок. Хорошо, что все течет и меняется. Сегодня у нас есть кейсы, и они сильно упрощают и украшают жизнь.

Наверное, один из самых популярных вопросов от дизайнеров, которые прилетают мне и Игорю Коропову в #Skillbox — это «как оформить свое портфолио, чтобы было прямо бомбически?». Расскажу, как сделать такой суперкейс — чтобы предложения о работе сыпались со всего мира.

И себе, и людям

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

Для кого дизайн-студия делает кейсы:

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

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

Обложка. Любовь с первого взгляда

Человек решает, будет ли он скроллить страницу дальше или закроет ее, практически моментально. Серьезно, в среднем на это уходит 5–7 секунд. Поэтому обложка должна цеплять сразу и намертво. Сочная и яркая картинка, которая говорит сама за себя, — то, что надо.

Что будет ок?

  • Однотонный яркий или контрастный с бэкграундом фон, лучше не белый.
  • Короткий читаемый заголовок плюс краткое описание по желанию.
  • Главный скрин в мокапе смартфона или монитора.

Можно включить режим автоцензуры и оценить результат с 2-3 метров. Если смотрится как постер к фильму и цепляет — значит, хорошая обложка. Оставляем.

Структура: не просто картиночки плюс текст

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

Как это сделать? Подумайте, что хотите рассказать, и набросайте ключевые моменты в блокноте: сначала из этого вырастет прототип, который потом дополнится графическими деталями.

Любую историю можно уложить в кейс с такой примерно внутренней структурой:

  • Цель проекта (после обложки) — коротко, абзаца на 3.
  • Главная страница.
  • Проектирование или поиск решений.
  • Ключевые разделы.
  • Макропланы и детали.
  • Результаты в числах и фактах.
  • Какие-то внутряки.
  • Гайдлайн.

Золотая середина. Длиннее — не значит лучше

Грань между тем, когда пользователю еще интересно и уже скучно, очень просто перейти не заметив. О своей работе можно рассказывать долго и с любовью. Поэтому не всегда получается вот так взять и вовремя остановиться — кажется, что всем так же интересно, как и вам.

Вопрос: так сколько? Ответ: исходя из личного опыта — 15–20 тысяч пикселей.

Полосатый кейс: макропланы и детали

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

Чтобы сделать кейс контрастным, выделите в нем несколько зон с изометрией, инфографикой, анимацией — всей красотой из вашего проекта.

Меньше текста, больше типографики

Много текста в кейсе убьет интерес пользователя, даже если вы будете заваливать его макропланами в перерывах. Любую простыню из буковок можно представить в виде графиков, коротких фактов и видео — так почему бы так и не сделать?

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

Какой должен быть текст в кейсе:

  • «вкусный» и по существу;
  • с краткими заголовками и раскрывающими подстрочниками;
  • в 1–3 абзаца максимум;
  • в виде мелких подсказок и примечаний.

Элементы, которых не было. Просто для красоты

Фейковые элементы или функционал, которых нет в реальном продукте, в кейсе имеют право на существование. Если есть шанс сделать визуальную отдачу круче, пусть и только здесь, — надо делать.

Берите на вооружение изометрические виды и непривычные мокапы — не прогадаете.

Как это было. Взгляд изнутри

То, как вы двигались от проблемы до продукта, показывает, как вы работаете и насколько эффективно. Это будет интересно как коллегам, так и заказчикам: какие задачи вы ставили перед собой, к каким решениям пришли — покажите это через прототипы и аналитику.

Что пригодится на этом этапе:

  • прототипы;
  • схемы;
  • промежуточные решения.

Больше жизни: добавьте анимацию

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

Однако увлекаться анимацией тоже не стоит — gif, например, много весят и жрут ресурсы процессора.

То, что оставили напоследок

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

Хотите сразить посетителей контрольным в голову? Добавьте в конце небольшой шоурил. Обычно ведь как: либо кейс, либо видео — на то и другое сразу терпения ни у кого в основном не хватает. Еще один плюсик вам в копилку.

Теперь, когда мы всё разобрали, осталось ответить себе на один вопрос.

Стоит ли вбухивать столько сил и времени в кейсы?

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

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

1111
3 комментария

"Мокапы, мокапы, больше мокапов. А теперь в перспективе мокап" – основная масса кейсов на бихе. Чушь абсолютная, особенно, когда один и тот же экран в 10 ракурсов и анимацией крутят. Искренне кайфую от ревьюшек дизеров Темы, к концу кейса ты понял о чем проект, почему именно так, а не иначе, ты увидел полноценную историю, а не бесполезные 15 000 пикселей в айпадах.

2

Хорошо и по делу, но не без рекламки себя любимого...

Минцифры предложило обязать банки выплачивать компенсацию пострадавшим от дропперов

Если обнаружатся и подтвердятся «дыры» в системе безопасности банка.

66
Госдума приняла законопроект о запрете рекламы на «нежелательных» и «запрещённых» сайтах — например, в Instagram* и Facebook*

За нарушение грозят штрафы.

2626
1212
22
"Порой даже не задумываясь, они переводят деньги тем, кто намеренно вредит нашей стране" Да вроде бы эти деньги не депутатам Госдумы уходят.
Дизайн-проект загородного дома в коттеджном поселке «Горки СПб» в ЛО: интерьер с лепниной и камином

Дизайн-проект загородного дома в коттеджном поселке «Горки СПб» в Ленинградской области разработан для семьи, которая стремилась к эстетике классики в современном исполнении. Главной задачей стало создание комфортной среды для жизни с логичной планировкой, натуральными материалами и выразительными архитектурными деталями. Интерьер подчеркивают арт-…

Дизайн-проект коттеджа в поселке  «Горки СПб», гостиная с предметами искусства от студии Artum.
VK запустит аналог китайского мессенджера WeChat — с госуслугами и платёжной системой

Эксперты оценивают инвестиции в 1-2 млрд рублей.

Фото РБК 
100
121121
1414
55
22
11
Добавьте шагомер, заказ такси, погоду, коробку для валентинок и визитку
Мой пункт выдачи заказов Ozon: Полгода с момента открытия. Показываю цифры.

Парень открыл ПВЗ Озона и делится цифрами за полгода работы. Без прикрас, всё как оно есть на самом деле.

Мой пункт выдачи заказов Ozon: Полгода с момента открытия. Показываю цифры.
3838
55
55
33
Большое помещение на 2 входные группы, мог бы и Озон и ВБ одновременно открыть, а теперь ВБ отжирает половину выручки
На Kickstarter представили ручку-трансформер Zero Mk2 — её можно носить в кошельке как банковскую карту

Состоит из 54 деталей. Собирается за 3-4 секунды.

88
77
44
33
11
О, это же легендарная финка нквд от корейских мастеров!
Как мы создали живое сообщество вокруг аниме-сериала «Санек и Борян» за 3 дня до премьеры

Всем привет, меня зовут Виталий Вебер, я лид соцсетей Учебника Т—Ж. В один прекрасный день мне выпала возможность, от которой я, как фанат аниме, не мог отказаться: создать и вести соцсети для нового аниме-сериала «Санек и Борян». Это сериал про обычного парня, который пытается решить жизненные проблемы, а умный тапир Борян всячески помогает ему со…

Как мы создали живое сообщество вокруг аниме-сериала «Санек и Борян» за 3 дня до премьеры
Дубайский YallaMarket с основателями из России решил закрыться после четырёх лет работы

Компания не смогла выстроить устойчивую бизнес-модель, а финансовые ресурсы и энергия команды «иссякли».

99
55
11
11
Петербургская полиция приступила к проверкам курьеров на электровелосипедах «на постоянной основе»

В феврале 2025 года местные депутаты предложили запретить ездить на них по тротуарам.

Источник фото: «РИА Новости»
88
33
22
11
Щемите эти электропомойки полностью. Так их!
«Что делает с данными заказчик — мы не знаем и не хотим знать»: глава NtechLab — о смене акционеров, международном бизнесе, санкциях и обработке информации

Выжимка беседы Алексея Паламарчука с РБК.

Источник: РБК
55
22
11
11
SuperJob начал тестировать «аукционы» — работодатели смогут открыто «торговаться» за соискателя

Перебивать предложения других компаний — по зарплате и условиям.

Скриншот SuperJob
3434
2727
22
11
Когда сильно увлекся клепанием фич.
Раздутые метрики, «хардкорные» условия и клиенты, которых нет: ИИ-стартап 11x столкнулся с финансовыми проблемами из-за собственных действий

История настолько «скандальная», что достойна экранизации, считает собеседник TechCrunch.

На фото команда 11x.ai
88
11
11
11
[]