AffArts 
Тендеры и лиды
Информация
Можно сделать крутой проект и запороть всё впечатление от него плохим кейсом. Если структура непонятная, подача скучная, а визуальные решения неаккуратные, зритель не поймёт, в чём сложность и ценность вашей работы.
Сегодня кейс — это самостоятельный формат, который очень сильно влияет на мнение о самом проекте. В статье разбираем, как сделать сильный кейс: от сбора материалов и поиска референсов до публикации, работы с текстом и анимацией.
Привет, меня зовут Артемий Скуратов, я арт-директор AffArts, где отвечаю за всё направление UX/UI-дизайна.
AffArts — это дизайн-центричное агентство. Мы проектируем и разрабатываем сайты, сервисы и цифровые продукты, создаём айдентику, бренд-системы и коммуникационный дизайн.
Для нас публикация кейсов — логичное продолжение работы над коммерческими проектами. Поэтому мы регулярно их выпускаем и знаем, как упаковать проект так, чтобы он был одновременно красивым, понятным и убедительным для профессионального сообщества и жюри дизайн-премий.
За последние полгода мы получили 11 наград на Dprofile и взяли 4 награды на Workspace Digital Awards.
А ещё — по версии Рейтинга Рунета мы занимаем:
— 14 место среди дизайн-студий России;
— 19 место среди креативных агентств;
— 17 место среди студий в продуктовом дизайне;
— 15 место среди студий по веб-дизайну.
Начать карьеру в дизайне сегодня довольно легко. Чтобы стать дизайнером, достаточно научиться работать в Figma и освоить графические нейросети. Поэтому специалистов на рынке становится всё больше, и конкуренция между ними растёт с каждым годом.
Сильное портфолио при этом остаётся редкостью. Большинство кандидатов наспех собирают слабые кейсы или не делают этого вовсе. Тот, кто регулярно качественно упаковывает и публикует свои работы, получает заметное преимущество перед остальными.
Хороший кейс помогает показать себя ещё до первого разговора с работодателем или клиентом. По нему можно понять, с какими задачами работал дизайнер, как рассуждал, какие решения принимал и к какому результату пришёл. Чем понятнее дизайнер демонстрирует свою работу, тем проще оценить его уровень и решить, хочется ли с ним работать.
Есть и ещё одна польза: кейсы помогают самому дизайнеру развиваться. Пока собираешь проект в полноценную историю, приходится заново разбирать свою работу, объяснять решения, думать над подачей и визуальным стилем.
Если реального проекта для портфолио пока нет, кейс можно превратить в самостоятельную тренировку: придумать себе задачу, найти для неё решение и разработать концепцию, которую захочется показать другим.
Проекты с сильным визуалом. Это работы, где дизайнер хорошо поработал с композицией, типографикой, цветом и другими элементами. Такие проекты показывают уровень визуальной культуры специалиста и демонстрируют качество его работы.
Проекты полного цикла. Это работы, в которых дизайнер участвовал на всех этапах. Такие кейсы помогают увидеть, как специалист работает с пониманием задачи, поиском и реализацией решений, как выстраивает процессы и как готовит проект к этапу разработки.
Все клиентские проекты. Показывают опыт работы с реальными заказчиками, их требованиями и ограничениями.
Креативные решения и необычные идеи. В такие проекты можно включить концепты, эксперименты и самостоятельные работы, в которых дизайнер пробовал новые приёмы и подходы. Они помогают показать собственный стиль, разносторонность, уровень насмотренности и способность искать нестандартные решения.
Есть два формата кейсов, которые можно добавлять в портфолио: большие и короткие. Большие кейсы публикуют на Dprofile и Behance, короткие — на Dribbble, Pinterest и в социальных сетях.
Большой кейс — это подробный разбор проекта. На такой кейс обычно уходит около трёх недель чистого времени, поэтому к нему стоит относиться как к полноценному проекту. За это время дизайнер успевает продумать структуру, собрать материалы, визуализировать ход работы и подробно раскрыть свои решения.
Короткий кейс — это подборка самых сильных и показательных деталей проекта. Обычно он состоит из 9–10 слайдов. Такой формат позволяет регулярно публиковать работы и обновлять портфолио.
Мы подготовили два чек-листа — для обоих форматов кейсов. В них расписаны основные этапы работы и примерное время, которое стоит закладывать на каждый из них.
Соберите в одном месте всё, что относится к проекту: бриф, переписку с клиентом, планирование, этапы работы, промежуточные материалы, финальный результат и другие артефакты.
Затем выпишите основные факты о проекте: какую задачу поставил клиент, какой контекст у проекта, какие цели вы определили, как выстраивали рабочий процесс, какие решения вы приняли и к какому результату пришли.
Пока не нужно всё это подробно расписывать в лонгрид. Ваша задача на этом этапе — собрать исходные материалы и разложить информацию по смысловым блокам, чтобы потом выбрать из неё самое важное для кейса.
Перед оформлением кейса посмотрите, как другие дизайнеры подают похожие проекты. Референсы помогают найти композиционные решения, способы оформления контента, визуализации процесса и других элементов кейса.
Ищите примеры на Dprofile, Behance, Pinterest и Dribbble — это база, которой чаще всего достаточно. Смотрите работы авторов и студий, которые вам нравятся, а также подборки по нужным темам и приёмам. Соберите несколько примеров, которые можно использовать как ориентир при оформлении собственного кейса.
Большинство кейсов строится по типовой структуре. Обычно в неё входят:
Титульный экран.
Информация о проекте.
Задача.
Структура проекта.
Концепция.
Визуальная система.
Гант проекта.
Процесс работы и фичи (обычно самый объёмный блок).
Результаты.
Выводы.
Финальный экран.
Призыв к действию — заказать проект.
Информация о команде.
Для каждого блока определите, какую информацию и какие материалы вы хотите показать. Так будет проще понять, чего уже хватает для кейса, а что ещё нужно подготовить.
Если времени мало, можно быстро собрать структуру из готовых блоков и референсов. Получится своеобразный «франкенштейн», который поможет сориентироваться.
На этом этапе важно получить общий каркас кейса, который потом можно наполнить содержанием и визуально оформить.
Дизайн-концепция — это обобщённый образ будущего кейса. Она объединяет визуальные и стилистические решения, которые лягут в основу презентации проекта.
Дизайн-концепция задаёт тон всему кейсу, определяет, как будут сочетаться контент, изображения, и другие элементы, помогая сформировать визуальную подачу проекта.
Чтобы разработать концепцию, определите, как будут выглядеть основные элементы кейса: заголовки, текстовые блоки, изображения, графика, фон, композиция и переходы между разделами. Затем соберите несколько ключевых экранов, чтобы проверить, как эти решения работают вместе.
Для концепции обычно достаточно продумать титульный экран и ещё 2–3 ключевых блока. Этого хватает, чтобы задать визуальное направление и расширять на этой основе остальные экраны по тем же принципам.
Дизайн-концепция нашего кейса Paytool на Dprofile:
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13733 тендера
проведено за восемь лет работы нашего сайта.
На этапе драфта «широкими мазками» соберите примерный дизайн всех блоков по собранной структуре. Здесь важно быстро набросать общую композицию кейса: расставить блоки, определить их размеры и расположение, добавить изображения и примерный текст.
Не тратьте время на детали, отступы и мелкие правки — сейчас важнее увидеть кейс целиком и понять, как экраны работают вместе. Если готовых текстов ещё нет, можно использовать нейронки, чтобы быстро их написать. Так вы сможете оценить объём контента и его место в композиции.
Уже на этом этапе определите основные композиционные решения: порядок и соотношение блоков, чередование визуала и текста, ритм кейса. Если какая-то часть выглядит слишком пустой или перегруженной, её проще перестроить сейчас, пока дизайн ещё находится в черновом виде.
Драфт нашего кейса «Клиника медицины кожи» на Dprofile:
На чистовом этапе выберите самые удачные решения из драфта и проработайте их до финального вида. Проверьте, как экраны идут друг за другом, уберите слабые или перегруженные текстом страницы проекта, доработайте композицию и приведите все блоки к единому визуальному стилю.
Если в проекте есть важные или сложные пользовательские сценарии, выделите их и акцентируйте на них внимание с помощью графических приёмов или анимации.
Затем проверьте сетку и систему отступов и с любовью займитесь деталями: типографикой, небольшими текстовыми подписями, линиями и другими декоративными элементами. Следите за количеством визуального шума и оставляйте достаточно воздуха между блоками. Именно такая аккуратная проработка поможет кейсу выглядеть цельным и профессиональным.
Наш кейс «Мир квестов» на на Dprofile:
Обложка — первое, что видит человек, когда открывает ваш профиль на Dprofile или Behance. На знакомство с ней уходят доли секунды. Работодатель или клиент смотрит на превью и по нему решает, стоит ли открывать кейс и смотреть его дальше. Поэтому обложка должна сразу привлекать внимание, передавать стиль проекта и «предвкушать» его.
Чтобы собрать выразительную обложку, выберите один сильный визуальный акцент, сделайте его главным элементом композиции и уберите всё, что отвлекает от него. Проверьте, как она выглядит в уменьшенной версии — превью должно быстро считываться и выделяться в сетке ваших работ даже в таком виде.
При этом обложка и первый экран кейса должны отличаться друг от друга, поскольку решают разные задачи. Первая привлекает внимание и вызывает интерес, второй начинает раскрывать проект.
Мокапы могут заметно усилить кейс, если использовать их для конкретной задачи. Например, показать, как дизайн выглядит на устройстве, в интерьере или в реальной среде. При этом, если их будет слишком много, это перегрузит кейс. Зритель потеряет ощущение презентации реального продукта и может почувствовать, будто попал на сток с мокапами.
Слишком узнаваемые, низкокачественные или устаревшие мокапы тоже могут испортить впечатление. Часто бывает так: листаешь кейсы разных команд и в каждом третьем проекте видишь знакомые фотографии телефонов, ноутбуков, футболок или упаковки. Поэтому лучше подобрать качественный исходник и адаптировать его под свою работу либо создать собственный мокап с нуля.
Вот несколько качественных источников — проверенные сайты с мокапами:
LS Graphics — мокапы и другие ресурсы для дизайнеров.
UI8 — библиотека дизайн-ресурсов, включая мокапы.
Freepik — на сайте есть отдельный раздел с мокапами.
Проверенные Telegram-каналы:
Адаптируйте готовые мокапы. Найдите подходящий исходник, вставьте в него свой дизайн и загрузите получившуюся сцену в Nano Banana. Затем попросите нейросеть изменить нужные детали: например, ракурс объекта, окружение или освещение.
Так вы получите мокап, который будет соответствовать визуальному стилю вашего кейса и при этом не вызовет ощущения, что его уже видели в десятке других проектов.
Кейс «Мир квестов» на нашем сайте:
Создавайте мокапы с нуля. Если подходящего исходника нет, нужный объект можно сначала сгенерировать в Nano Banana, а затем превратить изображение в мокап в Recraft. Например, если вы создали изображение с футболкой, сервис определит область одежды и позволит наложить на неё ваш дизайн с учётом формы и изгибов ткани.
Кейс «Мир квестов» на Dprofile:
Для гаджетов вроде смартфонов, планшетов и ноутбуков лучше использовать способ адаптации готового мокапа. Потому что при генерации с нуля нейросеть может исказить реальные пропорции и форму устройства. Для одежды, визиток, упаковки и других объектов, размеры и форма которых могут меняться, смело создавайте мокапы с нуля.
Кейсы на Behance и Dprofile — визуалоцентричные. Основную историю здесь рассказывают картинки, макеты, интерфейсы, анимация и другие элементы. Текст играет вспомогательную роль. Он объясняет то, что визуал не может передать, и помогает зрителю лучше понять проект.
У текста в визуалоцентричных кейсах есть две основные задачи:
1. Рассказать о самом проекте. Такой текст помогает объяснить, кто клиент, какую задачу решала команда, какой был контекст, как строился процесс работы и какого результата удалось добиться. Он позволяет глубже погрузиться в проект, понять, какие были сложности и ограничения и почему принимали именно такие решения.
Кейс «Мир квестов» на Dprofile:
2. Помочь зрителю разобраться в визуальной подаче. Сюда относятся короткие заголовки, подписи к экранам, пояснения рядом с макетами и другие небольшие текстовые подсказки. Они помогают быстро понять, что именно показано на экране и зачем этот фрагмент появился в кейсе.
Кейс World Escapes на Dprofile
Подпись должна объяснять конкретный экран, решение или этап работы, а рассказ о проекте — двигать историю вперёд. Тогда текст будет работать вместе с визуалом и поможет последовательно раскрыть проект.
Как писать текст:
Пишите лаконично. Оставляйте только ту информацию, которая помогает понять проект или конкретный визуальный элемент. Длинное описание задачи или очевидного экрана только замедляет просмотр кейса. Поэтому сначала подумайте, что читатель уже может понять из изображения, а затем добавьте текстом то, чего ему не хватает для понимания.
Пишите простым и понятным языком. Избегайте канцелярита, сложных профессиональных терминов, абстрактных формулировок и лишних обобщений. Каждая фраза должна быстро отвечать на свой вопрос: что произошло, какую задачу решали, что сделали, почему приняли такое решение или что получили в результате.
Когда рассказываете о своей работе, используйте активные глаголы и конкретно описывайте действия: что сделали, для чего и к чему это привело. При описании задачи, контекста или результата, также прописывайте конкретные факты и не заменяйте их общими оценками вроде «сложная задача», «современный дизайн» или «удобный интерфейс».
Плохой пример:
Был разработан современный и удобный интерфейс.Здесь непонятно, что именно сделала команда и почему интерфейс стал удобнее. Кроме того, формулировка «был разработан» скрывает действие за пассивной конструкцией.
Лучше:
Вынесли поиск и основные действия на первый экран, чтобы пользователь сразу мог найти нужный товар и добавить его в корзину.Во втором варианте понятно, какое решение приняли и как оно помогает пользователю.
Анимация помогает сделать кейс динамичнее и привлечь внимание к важным блокам и элементам. При этом она должна дополнять подачу проекта и поддерживать его визуальный стиль.
Как понять, что анимировать. Анимируйте элементы, которые по своей природе предполагают движение или изменение состояния. Сначала посмотрите на сам проект: что в нём может двигаться, меняться или взаимодействовать с чем-то ещё? От этого и выбирайте, какие элементы стоит «оживить» в кейсе.
Также выбор того, что анимировать, зависит от контекста самого проекта. Если рядом много статичных и скучных блоков, анимация может понадобиться просто для того, чтобы удержать внимание и разбавить последовательность.Люди и персонажи. Если в айдентике есть люди, персонажи или другие одушевлённые, покажите, как они двигаются. Например, человек может улыбаться, поворачивать голову, бежать или взаимодействовать с другими людьми. Так анимация помогает показать характер айдентики и сделать её визуальный язык более выразительным.
Предметы и носители. Анимация может нагляднее продемонстрировать функцию предмета. Например, показать, как в бутылке плещется вода или открывается упаковка с обувью.
Ещё анимация помогает компактно показать несколько вариантов оформления для одного носителя. Допустим, у вас есть десять разных дизайнов стаканчиков для кофе. Вместо десяти отдельных изображений можно сделать одну анимацию, в которой эти варианты последовательно меняются. Так вы покажете всю серию, заняв в кейсе место одного экрана.
Кейс World Escapes на Dprofile:
Интерфейсы. Показывайте взаимодействие пользователя с продуктом. Это могут быть скролл страницы, нажатие кнопки, переход между экранами и изменение состояния элементов. Если в проекте есть важный, сложный или необычный пользовательский сценарий, его тоже стоит показать целиком — например, как пользователь проходит процесс оплаты. Так зритель увидит, как интерфейс работает в деле.
Кейс «Мир квестов» на Dprofile:
Советы по работе с анимациями:
Переносите характер кейса в движение. Если визуальный стиль мягкий и воздушный, используйте плавные и спокойные анимации. Для строгого и промышленного проекта подойдут чёткие и сдержанные движения. Так анимация будет поддерживать стиль кейса и выглядеть его естественной частью.
Не перегружайте кейс. Если поставить рядом несколько сложных роликов, зрителю будет трудно понять, на что обращать внимание. Чередуйте их со статичными блоками и простыми сценами, чтобы сохранить понятный ритм подачи.
Не делайте из анимации шоу-рил. Когда зритель смотрит кейс, моушн должен сопровождать его подачу и восприниматься фоном: привлекать внимание к отдельным элементам или помогать раскрыть идею проекта. Слишком сложная и эффектная анимация начинает перетягивать внимание на себя и выбивается из общей стилистики кейса. В результате она перестаёт выполнять свою задачу и нарушает целостность подачи проекта.
Перед загрузкой кейса в портфолио подготовьте все файлы. Фреймы разрежьте и пронумеруйте, чтобы каждый экспортировался по клику и сохранялся в нужном порядке. Для моушен-блоков добавьте сноски с пояснениями и подготовьте исходники с видео. Все файлы называйте понятно и единообразно, чтобы при загрузке ничего не перепутать.
После загрузки проверьте каждый экран и сравните его с макетом: совпадает ли расположение элементов, нет ли белых полос на стыках изображений. Отдельно проверьте цветопередачу видео: она должна совпадать с цветами статичных изображений в кейсе. Иногда при загрузке видео кодек меняет его цветопередачу, поэтому этот момент важно проверить до публикации.
Если хотите разместить кейс и на Behance, и на Dprofile, сначала загрузите его на Behance. Оттуда проект можно за несколько кликов экспортировать на Dprofile.
После этого публикуйте работу и расскажите о новом кейсе друзьям, коллегам и подписчикам — пусть все увидят, что у вас получилось!
Соцсети живут по правилу постоянного присутствия — аудитория забывает автора так же быстро, как и впечатляется им. Один удачный кейс может привлечь внимание, а регулярная публикация кейсов помогает формировать репутацию, находить клиентов и двигаться по карьерной лестнице.
Поэтому закладывайте работу над кейсами в свой рабочий график и регулярно публикуйте новые проекты.
Эту статью мы написали по мотивам моего выступления.
Смотреть доклад в «ВК» I Смотреть на Youtube
С этим докладом я выступил на прошлогоднем «Дизайн-джеме» в Оренбурге — первой конференции для дизайнеров, которую организовала наша команда AffArts.
В ноябре мы планируем провести второй «Дизайн-джем». Если вы из Оренбурга или хотите посетить наш славный город — приходите, будет интересно. Все подробности и анонс нового мероприятия будут в Telegram-чате «Дизайн-джема».
Следите за нами и в других каналах — там мы делимся кейсами, разборами и закулисьем работы агентства: Telegram-канал AffArts, инст*, страница агентства на Workspace.
А оценить наши работы можно на Dprofile.
*Meta признана экстремистской организацией и запрещена в РФ.
