Кейсы дизайнера что это
Веб-дизайнерам: с чего начать создание кейса, чтобы заинтересовать клиента
Макет в портфолио ничего не рассказывает потенциальному клиенту.
Чтобы не зависеть ни от чьих вкусовых предпочтений, дизайнеры создают кейсы. Выстраивают связную историю, объясняют свои решения текстом. Клиент понимает, как работает дизайнер и формулирует представление о нем, как о компетентном специалисте.
Эта статья о первом этапе упаковки проекта в кейс — структуре.
Зачем структура
Кейс — история проделанной работы, от интервью до сдачи макета в верстку. Если какой-то этап пропущен, история получается нелогичной и выстраданной. Чтобы этого не случилось, нужно сначала прописать структуру на бумаге.
Хорошая структура выглядит так:
Если сначала продумать структуру, кейс получится логичным и цельным, потому что ты смотришь на него «издалека». Ты заранее видишь, где у тебя будут смысловые проблемы. Вот в такой структуре проблемы видны сразу:
Видно, что это несвязная структура. Логичными получились только начало и конец. Все остальные мысли вразнобой.
Польза структуры в том, что она собирает разрозненные мысли. Дизайнер заранее знает, о чем расскажет и что покажет потенциальным клиентам. Исправит все смысловые проблемы на бумаге. Готовый кейс получится в точку.
Универсальная структура
Универсальная структура кейса простая и пуленепробиваемая. Пользуйся ей, она работает всегда: обложка проекта, задача, варианты решения, дизайн-макет, блок благодарности.
Показать обложку. Показать, что это за проект:
В поисках идеального кейса или топ-10 советов как это сделать
В один осенний день Анатолий Денисов озадачил меня просьбой провести первую глобальную ревизию раздела «Кейсы» на CMSMagazine. С момента старта накопилось без малого 193 проекта. Все еще усугубилось тем, что надо не просто посмотреть и закрыть, но и выбрать несколько лучших. И все это под соусом UX/UI.
Вообще, суть этого материала чуть более широкая. Смакуя лучшие примеры, параллельно, мы будем разбираться, что такое кейс и зачем это вообще нужно.
А если нужно, то как сделать из этого действительно красивую и увлекательную историю. От бессмысленных текстов и непонятных картинок до, как это модно говорить, Вижуал Сторителлинга :). Поехали!
Зачем вообще нужен кейс?
Кейс — это универсальный и простой способ рассказать про свой проект. Такой формат существует на Западе довольно давно и пришел к нам из сферы айтишников-рекламщиков-консультантов.
В сфере веб-разработки были разные попытки подойти к этому формату. Помните, что когда-то для портфолио было достаточно просто картинок? Но, так или иначе, эволюция взяла свое. Теперь у вас может быть не только Портфолио, но и Кейсы. Причем последние могут быть фантастически разными. Поскольку мы можем использовать для этого всевозможные цифровые примочки.
Порой достаточно сделать 5-7 сочных и актуальных кейсов, чтобы обеспечить стабильный трафик на ваш сайт и какую-то ауру обсуждений в соцсетях.
Кейсы могут быть разными. На старте создания вам нужно понять, кого вы собираетесь цеплять этими историями:
Безусловно, есть какие-то отдельные уловки для каждой из этих групп по отдельности. Но сегодня мы рассмотрим советы, как сделать так, чтобы угодить всем сразу.
1. Встречают по обложке
Мы живем в эпоху информационного ожирения из-за чего читатель стал безумно ленивым. Поэтому наша главная задача — попасть в область внимания и вызвать интерес в первые 5-7 секунд. Именно столько времени в среднем нужно пользователю для принятия решения: скроллить дальше или закрыть сразу.
Для старта кейса критически важна обложка. Обычно это яркая, сочная, (порой не имеющая связи с реальностью) обложка, в который вы говорите, о чем это вообще.
Задний фон в большинстве случаев должен отличаться от белого. Либо однотонный яркий, либо с контекстным бэкграундом. Короткий и доступный для чтения заголовок. Главный скриншот вашего проекта может быть в мокапе устройства. Интересная геометрия или композиция. Простой способ проверить результат самому — посмотреть на обложку с расстояния 2-3 метров. Должно цеплять, работать как постер к фильму.
2. Заранее продумайте структуру рассказа
Помните, что кейс — это не просто куча разбросанных картинок. С кусками рассказа, как же вам было хорошо вместе с заказчиком на даче или в фотошопе. Ваша цель — зацепить взгляд пользователя и держать его в тонусе на протяжении всего скролла (а это, поверьте, не просто).
https://www.behance.net/gallery/38586573/ROSATOM
Начните кейс с внутренней структуры. Зафиксируйте ключевые моменты рассказа в блокноте и потом потихоньку разматывайте ее в прототип и в графические детали.
https://www.behance.net/gallery/33912080/Rostelecom
3. Оптимальная длина кейса
Как насытить пользователя и не дать ему уснуть? Довольно важный момент.
Я верю, что бывают такие истории, которые не могут закончиться просто. Такие они красивые и сладкие для вас, что хочется продолжать бесконечно. Но именно здесь кроется подвох.
Читатель готов воспринимать красивую и логичную историю, но в рамках разумного. Почему длина хорошего художественного фильма — 1:30м, серии в сериале — 45м, музыкального клипа — 3м? Так же и с вашим кейсом.
Ключевые приметы: от 15 000 до 20 000 пикселей.
4. Макропланы и детальки
Кейс живет ритмом. И наша задача, задав хороший тон на обложке, время от времени этот ритм поддерживать. Делается это прежде всего для того, чтобы взгляд читателя не залипал. Не стоит частить с превью макетов. Время от времени вам надо приближать на контрасте самые сочные моменты: виджеты, графики, показывать особенности стиля иллюстраций.
Ключевые приметы: Эффект зебры. На протяжении всего кейса, выделите несколько контрастных зон, где вы покажете максимум вкуснятины. Для этого хорошо подойдет: изометрия, крупные иконки, инфографика, анимационные элементы и т. д.
5. Текст необходим, но настолько же бесполезен
Я часто сталкиваюсь с большим контентным материалом. Верю, что это критически важно. Что только так вы можете рассказать, в чем же, и где был ваш УТП. Но, поверьте мне, читать много текста, да еще в кейсе — это глупость. Мы живем в цифровой среде, где вы можете рассказать о вашем проекте на абсолютно новых языках: графика, факты, видео, интерактив. И даже когда ваш проект совсем не про визуальный дизайн, поверьте, — есть масса классных вариантов сделать это незабываемо. Но не текстом.
Совсем отказываться от текста, безусловно, нельзя, но всегда проверяйте, чтобы его количество было минимально.
Ключевые приметы: Вдумчивый и вкусный копирайтинг. Короткие и крупные заголовки. Раскрывающие подстрочники. Местами 1-2 абзаца текста. Мелкие подсказки и примечания.
6. Реалистичнее и вкуснее
Кейс — это особенный жанр. Вы просто обязаны упаковать свой проект максимально эффектно. Не важно, что в реальной жизни так не бывает. Это должно быть сногсшибательно. Чтобы читатель поверил, хотя бы в рамках этого кейса.
Ключевые приметы: Использование необычных мокапов. Изометрический вид.
Этот ресурс может немного вам в этом помочь: http://www.pixeden.com/
Если хотите играть по-крупному, посмотрите еще здесь: www.creativemarket.com
7. Как вы это делаете? Расскажите про процесс
Последнее, что чаще всего остается отличительной и не избитой чертой, — это ваш личный процесс поиска решений. Как вы пришли к результату? Расскажите об этом. Можно даже немного его приукрасить. Прототипы, аналитика. Все имеет значение.
Покажите больше вариантов, можете что-нибудь еще подрисовать для эффектности. Мы часто так делаем.
Ключевые приметы: Прототипы, схемы, промежуточные решения.
8. Без анимации не едят
Еще одна успешная механика для того чтобы удержать читателя в тонусе на протяжении всего рассказа — анимация элементов. Формат GIF получил вторую жизнь. Возьмите яркие отрывки вашего интерфейса, где вы хотите показать необычные микро взаимодействия. Покажите, как это будет работать, даже если это невозможно. Это ваша сказка, ваш концепт!
https://www.behance.net/gallery/34555939/SHARP
Самый писк, когда анимационные элементы идеально вживлены в структуру кейса, и кажется, что элементы буквально оживают в нужном месте.
Но не перестарайтесь. GIF-анимация много весит и требовательна к загрузке процессора. Идеально использовать 2-3 гифки, каждая из которых не больше 5-7 секунд по времени.
Ключевые приметы: GIF-анимация, где начало ролика мастерски совпадает с его концом, образуя loop-секвенцию.
9. Мы молодцы, но об этом коротко
Не забывайте рассказать ключевые факты проекта, желательно, в измеримых показателях. Это по-прежнему может привлекать внимание и отличать вас среди остальных. Но будьте аккуратны. Это контент-задача, поэтому старайтесь придумать что-то необычное.
И второе, о чем также стоит рассказать в конце,— это основные гайдлайн, элементы UI Kit. Технические детали работы кнопок, хитрые дропдауны и т.д. Все эти мелочи, особенно в конце, подтверждают серьезность и внимание к деталям в вашей работы.
https://www.behance.net/gallery/42834421/NTV-Plus
Ключевые приметы: 160 макетов, 3 убитых мышки, 6 бессоных ночей Васи верстальщика. И обязательно заверните эти шоколадные кнопки в UI Kit на десерт.
10. Финишируйте по-голливудски
Ну чем еще его убедить, что ваш проект действительно особенный?
Напоследок остается только одно. Цельный видеоролик про проект вживую. Музыка и качество анимации ставит в его сердце жирную точку: либо вы, либо никто.
Ключевые приметы: Шоурил проекта. Продолжительность 1-1,5 минуты.
Только AfterEffects, только хардкор.
Вот, пожалуй, основные и эффективные советы, которые должны сделать ваш кейс особенным. Надеюсь, эта статья была полезной для вас.
В остальном, следите за трендами, подписывайтесь на нас.
Как оформлять кейс на Behance: 8 практических советов новичкам
Перевод статьи «How To Build a Better Behance Case Study ?» о том, как правильно оформить кейс на Behance: от продумывания структуры до дизайна обложки.
После 3 лет участия в чудесном медиа-сообществе Behance я чувствую необходимость дать определенный фидбек и хочу поделиться своим опытом, чтобы помочь другим дизайнерам улучшить свои знания по созданию кейсов для Behance.
Следующие советы основаны на моем личном опыте и наблюдениях. Будучи частью сообщества, я опубликовал более 15 проектов. Давайте перейдем к ним.
1. Для хорошего проекта необходимо время
Не думайте, что сможете выполнить большой проект за одну ночь. Я проходил через это и облажался. И не один раз. Обычно я терялся в содержании, потому что хотел попробовать несколько идей сразу, но они никогда не смотрелись хорошо вместе. Я заканчивал бессонными ночами думая о том, что я должен сделать в первую очередь и как будет выглядеть финальная версия. Вместо этого делайте небольшие шаги, и в дальнейшем вас уже не будут страшить большие.
Если вы хотите сделать работу должным образом, вам необходимо более ответственно подойти к вашему проекту. Не делайте что-то, торопясь сделать быстрее. Вы многое упустите. Я часто сравниваю построение проекта с его разработкой. Вот, что я имею ввиду:
2. Комбинируйте несколько медиа-форматов
Вам необязательно показывать только финальную работу, то есть финальные скрины из вашего приложения или второстепенные страницы. Вы можете объединить все вместе и показать, как создавался ваш проект. Использовать начальные эскизы, видеообзор самого проектирования, GIF анимации, неиспользованные попытки, даже внутренние документы, отчеты, исследовательские данные, бекстейдж (закулисные фотографии) и так далее. Все то, что может показать ваш процесс другим дизайнерам.
Мне нравится комбинировать различные медиа-форматы, потому что это разбивает мой проект на блоки. Я могу быть более изобретательным с макетом, направлять аудиторию через процесс и сделать акцент на наиболее важных частях, которые, по моему мнению, могли бы вдохновлять других.
“Все очень любопытны и хотят знать, как, черт возьми, ты создал эту штуку. Дай им то, что они хотят. Вдохнови их на следующий проект.”
3. Выделите наиболее интересные части
Не надоедайте людям обычными видами экрана, которые есть в каждом проекте (например, экран входа в систему, настройки, сетка фотографий). На самом деле там показывать нечего. Вместо этого постарайтесь выделить что-то уникальное, на что вы потратили большую часть своего времени, решая проблему или разрабатывая специальный макет. Сосредоточьтесь на том, что может понравиться вашим посетителям, о чем они смогут рассказать другим и поделиться в соцсетях.
Мне всегда печально наблюдать одни и те же мокапы в каждом втором проекте. Это всегда признак того, что дизайнер не приложил достаточно усилий, чтобы создать что-то хорошее. Если у вас есть ресурсы и оборудование, просто создайте свой собственный контент, уникальный для данного проекта. Я могу гарантировать, что он окажет действительно большое влияние в целом и может стать одной из самых интересных частей вашего кейса на Behance.
“Выделите что-нибудь интересное, чего нет в 10 других проектах Behance в вашей ленте”
4. Не ждите, что люди будут читать
Задача Behance — показать вас как дизайнера, а не писателя длинных абзацев. Я вполне понимаю, что вы можете почувствовать необходимость описать некоторые из принятых вами решений или объяснить некоторые процессы, но не думаю, что Behance подходящее место для этого. Если вы хотите что-то описать, попробуйте это сделать на Medium или на вашем личном/корпоративном блоге, а затем свяжите его с вашим проектом ссылкой.
Вы можете показать визуальную часть проекта на Behance и затем описать, как вы сделали его на другой платформе. Воспользуйтесь обоими площадками.
Мой личный опыт: Я показывал некоторые из своих работ другим дизайнерам на встречах и мероприятиях и смотрел, как они просматривают мой проект. Заголовки и 2 строки текста — это хорошо, но все прокручивали их почти сразу же, как только достигали секции с более чем 3 строками. Они просто хотели пропустить его и вместо этого больше сосредоточиться на дизайнерских работах.
Маленький совет: если вы хотите перейти на другой уровень, вы можете делать короткие обзорные видеоролики и рассказывать о некоторых деталях и прикрепить их в конце проекта. Это то, что мне лично очень нравится делать, и это полезно для более опытных людей, которые хотят понять детали.
5. Постарайтесь отличаться
Почти все макеты уже использованы и переиспользованы много раз и люди просто повторяются. На самом деле мне потребовалось много времени, чтобы осознать, что я могу сделать по-другому, по-особенному, чтобы моя работа выделялась среди других, имела свой уникальный почерк. Это одна из самых сложных частей каждого моего проекта, но это не невозможно.
В настоящее время я экспериментирую с другим подходом к этой части:
Когда я работаю над проектом мобильного приложения, я пытаюсь получить вдохновение от всего, кроме проектов мобильного приложения. Я хочу избежать повторения себя или кого-то другого, и я ищу другие виды проектов, работ. Удивительно видеть, как ведущие графические дизайнеры представляют свои проекты.
Да, я знаю, что это другой тип содержания (контента), но я фокусируюсь на форме/макете и на том, как он представлен. До сих пор это работает отлично, и я не могу дождаться, чтобы показать вам первые результаты!
6. Создайте лучшую в мире обложку
Если у вас еще нет подписчиков, будет немного сложнее привлечь больше внимания сообщества. Поэтому, я рекомендую вам уделить большое внимание обложке для вашего проекта. То, что люди просто не смогут пропустить, просматривая ленту.
Посмотрите на свою страницу работ и страницу с лучшими проектами. Какие проекты вы замечаете с первого взгляда? Почему? Что в них особенного? Ваша обложка должна также выделяться!
Небольшой совет: вам не обязательно использовать только одну обложку за раз. Вы можете экспериментировать и отследить, какая обложка привлечет больше внимания. Вы можете менять обложку со временем, чтобы увидеть, когда ваш трафик увеличится и появится больше просмотров.
С другой стороны, также здорово разместить остальные обложки на странице вашего профиля, чтобы сохранить определенную последовательность вашего портфолио (если вы такой же перфекционист, как я). Таким образом, вы можете комбинировать и то, и другое: используйте супер-цепляющую обложку в течение первой или двух недель, а затем измените ее, чтобы она соответствовала стилю общему оформления ленты в вашем профиле.
7. Привлекайте внимание
Мой подход прост: попробуйте создать что-то такое, чего люди никогда раньше не видели, какой-нибудь интересный макет или дизайн, который еще не был опубликован на Behance или где-то еще. Я считаю, что кураторы выделяют в рекомендации только то, что может вдохновить других. Что-то особенное, что может долго иметь ценность в массах.
На самом деле, привлечение внимания не должно быть вашей самой главной целью и стоять на первом месте. Если вы создаете что-то хорошее и должным образом распространяете это среди своих друзей и подписчиков, то уже есть большая вероятность того, что вас заметят и потом где-нибудь упомянут.
Я никогда не пытался подходить к кураторам и просить их посмотреть мои работы. Я даже не знаю никого из них. Но я стараюсь сделать проект таким образом, чтобы его увидело большее количество людей, потому что никогда не знаешь, кто его увидит (и поделится им).
Больше просмотров = больше шансов быть замеченным нужными людьми
«Я не думаю, что участие в Behance или подобных сайтах — это настоящая «награда», но это хорошая возможность быть замеченным в сообществе, и это помогает вам распространить свою работу среди еще большего числа людей».
8. Разбейте большой проект на небольшие посты
Успешная публикация нового проекта также связана с правильным продвижением. Мы уже говорили о построении проекта с использованием «блоков» и объединении различных медиа-форматов вместе в начале этой статьи. Когда необходимо опубликовать проект, я обычно разбиваю большой проект на мелкие части, чтобы можно было поделиться ими постепенно. Основная цель — воспользоваться преимуществами каждой платформы и увеличить просмотры вашего проекта.
Мы можем назвать весь процесс чем-то вроде «многоплатформенного продвижения» и, по сути, связать все вместе, чтобы он распространялся повсюду и поддерживал себя. Я использую следующие основные платформы:
А затем регулярно делитесь всем тем, что упомянуто выше в Twitter, Facebook, LinkedIn или отправляйте друзьям напрямую.
Успешное портфолио на Behance. Подробное руководство
Как оформить профиль, чтобы получить работу мечты, найти крутые кейсы для вдохновения и избежать ошибок, которые погубят даже качественный проект.
OlyaSnow для Skillbox Media
Behance — идеальная площадка, чтобы создать портфолио, заявить о себе, получить обратную связь от дизайн-сообщества и интересные предложения о работе.
Перед вами — большое руководство по этой платформе, в котором мы расскажем:
UI/UX-дизайнер, видеоблогер, предприниматель. Проектирует интерфейсы, создаёт развлекательно-образовательный контент и обучает дизайну.
Задача кейса — показать не только финальный результат, но и процесс, который за ним стоит. Это главное отличие Behance от Dribbble, где обычно представляют одну или несколько финальных картинок без контекста и подробностей. На Behance очень высоко ценится именно история создания проекта с подробностями задачи, проведённой аналитической работой, материалами и, конечно, результатом.
Хороший дизайн — это хорошо решённая задача, а не просто красивая картинка или анимация.
Пользователи Behance могут лайкать и комментировать кейсы, это влияет на популярность и потенциальный успех этих работ.
После публикации кейс оказывается на странице проектов соответствующей ему категории и постепенно смещается более свежими работами других участников.
Проекты, высоко оценённые сообществом, могут попасть в рекомендации на главной странице и в курируемые галереи — это гарантирует волну популярности кейса и самого дизайнера. Также в рекомендации пользователю попадают работы авторов, за которыми он следит, и кейсы, которые те лайкают.
Так, Behance — не просто сайт для размещения портфолио, а настоящая социальная сеть, где можно искать полезные контакты и вдохновение, набирать подписчиков и увеличивать свой профессиональный вес.
Сильный профиль на Behance — огромное профессиональное преимущество, и иногда этого достаточно, чтобы получить работу мечты.
С чего начать работу на Behance
Начать свой путь на Behance очень легко — платформа бесплатная, достаточно просто зарегистрироваться на сайте, и вы уже полноценный участник сообщества, в котором можно находить вдохновение.
Однако если ваша цель — развить свой личный бренд и получить максимальную отдачу от площадки, нужно правильно оформить свой профиль.
Как оформить профиль
На странице профиля будет краткая информация о вас и все ваши работы.
Представители компаний, куда вы отправляете резюме, будут гуглить вас, и, скорее всего, им будет попадаться страница вашего профиля, так как у Behance высокий приоритет в поисковой выдаче. Хорошо оформленный профиль будет подчёркивать ваш профессиональный подход и формировать первое впечатление о вас как о потенциальном сотруднике.
Начните с фотографии профиля, на которой желательно показать лицо и позитивный настрой — это повысит шансы на то, что с вами захотят сотрудничать. Работодатель хочет лучше узнать человека, а не смотреть на логотипы и картинки, за которыми он скрывается. Хотя в некоторых случаях можно подчеркнуть свои навыки, сделав в качестве аватара иллюстрированный автопортрет, по которому вас можно легко узнать.
Можно использовать полное имя или псевдоним — главное, чтобы во всех публичных сетях, включая Behance, имя совпадало, иначе будет нарушена целостность вашего личного бренда.
Составьте одно-два коротких предложения — опишите, чем вы занимаетесь и в каком ключе. Например: «Привет, я дизайнер интерфейсов в Google» или «Привет, я начинающий UI/UX-дизайнер с большим желанием развиваться в этой сфере».
Если вам сложно составить позиционирование для своего профиля, нужно определиться, на каком профессиональном этапе вы находитесь сейчас и к чему стремитесь в ближайшем будущем. Исходя из этого, сможете придумать одно-два лаконичных предложения.
Со временем ваше положение и приоритеты могут меняться, в соответствии с этим обновляйте свой профиль.
Если у вас есть персональный сайт или аккаунт на фриланс-бирже — обязательно добавляйте ссылки на них в свой Behance-профиль. Также в него можно добавить ссылки на основные соцсети, где вы наиболее активны, особенно если в них вы публикуете свой профессиональный контент.
Старайтесь, чтобы профили всех ваших публично доступных социальных сетей были оформлены в едином стиле — так ваш образ в глазах работодателей будет целостным.
Как и в случае с кратким описанием, старайтесь выражать мысли лаконично и по существу. Можно рассказать о своих навыках, опыте, индивидуальном видении дизайн-процесса. Главное — краткость: в большой текст профиля мало кто станет вчитываться.
Так что стоит выделить на это достаточно времени, чтобы хорошо подумать о самом важном и чётко сформулировать суть. Зато этот же текст можно использовать и на других площадках — например, в описании своего профиля на фриланс-бирже и в соцсетях.
Старайтесь придерживаться единого стиля общения в тексте. Не стоит писать слишком формально, но и совсем в казуальщину тоже лучше не пускаться. Чётко определитесь с позиционированием своего бренда и пишите текст именно в этом образе от первого лица.
Для большинства случаев отлично будет работать дружественный и открытый стиль письма.
В верхнюю часть страницы можно добавить шапку — обложку вашего профиля. Если у вас крутые навыки в графическом дизайне или в 3D, можно сделать что-то оригинальное, но чаще лучше придерживаться принципа «Не навреди».
Кроме того, интерфейс Behance адаптируется под разные размеры экранов, перекрывая части обложки. Если там есть надписи или важные графические элементы, у многих пользователей они могут некрасиво обрезаться и потерять смысл.
Стоит как можно раньше определиться, на какой рынок вы работаете или планируете работать в ближайшем будущем. Если вы ориентируетесь на международные компании и западных клиентов, стоит заполнять свой профиль на английском. Важно понимать, что уровень целевого языка должен позволять проходить собеседования и работать с носителями — иначе в этом нет смысла.
Если вы ориентируетесь на Запад, кейсы тоже стоит оформлять на английском, даже несмотря на то, что сам дизайн сайта или приложения, которые вы презентуете, на русском языке.
Доски настроения и насмотренность
Улучшать уровень своего дизайна помогут доски настроения. Можно создавать их самим или подписываться на уже созданные другими пользователями.
Доска настроения — это коллекция кейсов, которые вам понравились. Можно добавлять на одну доску всё подряд, но лучше создать отдельную доску с подходящим названием под каждую интересующую вас категорию.
Например, вы хотите научиться делать проекты с классной типографикой. Находите такие кейсы и сохраняйте их на доску настроения «Типографика».
Можно создать неограниченное количество подобных коллекций и добавлять туда неограниченное количество работ.
Через какое-то время у вас сформируется большая и качественная база для тренировки насмотренности, в которой можно легко найти именно то, что поможет при работе над любым проектом. Всё это будет доступно в вашем Behance-профиле.
Как искать хорошие кейсы и крутых дизайнеров
Так как на Behance каждый может публиковать свои проекты, поначалу бывает сложно отличить хорошую работу от плохой. Чтобы тренировать насмотренность на основе качественных работ, можно опираться на мнение кураторов, которые ведут тематические галереи на Behance.
Что такое курируемые галереи Behance
На Behance большое количество разных курируемых галерей, куда стремятся попасть все, но попадают единицы. Ежедневно в каждую из галерей кураторы платформы отбирают по четыре работы. Их авторы получают специальные ленточки с аббревиатурами галерей, куда их кейсы отобрали.
Это очень ценное пополнение для профиля — ленточка означает, что работу дизайнера признали на высоком уровне.
С полным списком курируемых галерей можно ознакомиться здесь. Среди них есть, к примеру, три самых актуальных для веб- и UI/UX-дизайнеров галереи. Если это ваше направление, рекомендуем подписаться на них.
В этой галерее собраны лучшие, по мнению кураторов, проекты, причём вне зависимости от категории. Там можно найти работы из сферы UI/UX-дизайна, а также из любых других сфер. Стоит развивать свою насмотренность не только в конкретной специализации, но и в целом, ведь часто вдохновение или интересные решения можно отыскать там, где их не ждёшь.
Это основная галерея из темы пользовательских интерфейсов, где можно найти лучшие кейсы дизайна сайтов и приложений, а также иллюстрации.
Галерея, посвящённая программе для дизайна интерфейсов Adobe XD. Сюда попадают работы по дизайну приложений и сайтов, в которых автор указал Adobe XD как рабочий инструмент.
Любопытный факт — многие пользователи указывают в своих кейсах программу XD как инструмент, даже если не использовали её. Они делают это, чтобы повысить свои шансы оказаться в XD-галерее и получить ленточку.
Дизайнеры на Behance
Можно подписываться не только на галереи, но и на конкретных авторов, чьи работы вам понравились. Чтобы не следить за теми, кто может научить плохому дизайну, на начальных этапах тоже лучше опираться на работы из галерей. Это гарантирует, что вам попадутся дизайнеры высокого уровня.
Для лёгкого старта можем порекомендовать десять интересных профилей:
Рецепт успешного кейса
Когда у вас грамотно оформлен профиль, пора готовить и публиковать свои кейсы.
В этой части материала мы расскажем:
Общие принципы
Основатель Behance Скотт Бельски создавал эту платформу, чтобы дизайнеры могли показать процесс решения задач и проблем. Не зная этого, многие допускают главную ошибку — демонстрируют только финальный результат.
Кейс можно считать целой историей выполнения работы, и если всё сделать грамотно, эту историю будет интересно изучать, а результат будет вызывать доверие потенциальных работодателей и уважение коллег.
Иногда создание кейса может занимать не меньше времени, чем работа над самим проектом. Вот простой лайфхак, который поможет упростить и ускорить процесс:
К примеру, если ваша работа связана с UX, можно сохранять в процессе такие составляющие:
Этот список может отличаться в зависимости от того, в каком направлении вы работаете и какие практики есть в вашем рабочем процессе.
После того как проект будет готов, самые значимые из этих материалов можно добавить в ваш кейс, чтобы продемонстрировать ключевые моменты работы.
Вместе с тем большое количество подобной информации может выглядеть скучно, поэтому старайтесь фокусироваться на главном и не расписывайте каждый этап слишком подробно. А чтобы кейс получился ещё более увлекательным, рекомендуем разбавлять такие блоки анимацией, иллюстрациями и видео.
Какие проекты стоит оформлять в кейсы?
Может показаться, что чем больше работ в портфолио, тем лучше, но суть не в количестве, а в качестве этих работ. Если кейсов много, потенциальный работодатель всё равно не станет заглядывать в каждый, а откроет два-три и на их основе составит впечатление о дизайнере. Повезёт, если этими случайными работами окажутся лучшие.
Хорошо, когда в профиле доступно всего несколько работ, но они лучшие из тех, что вы когда-либо делали.
Каждая работа, которую вы презентуете на Behance, должна привносить что-то новое как минимум в ваше портфолио.
Если вы в основном работаете над однотипными проектами, в которых нет ничего запоминающегося, вряд ли из этого получатся кейсы, которые могут впечатлить. А если вы соберёте целое портфолио из десятков подобных проектов, вряд ли получите хорошее предложение о работе.
Что же тогда делать? Без портфолио работу не получить, а без работы портфолио не собрать. Бывает и наоборот: дизайнер работает в крутой компании, но контракт запрещает ему публиковать какие-либо материалы или подробности проектов. В итоге годы идут, а портфолио остаётся пустым.
Именно поэтому значительная часть кейсов на Behance — концепции, придуманные исключительно для портфолио, и это нормальная практика.
Не обязательно, чтобы у проекта был реальный заказчик, главное, чтобы работа выглядела реалистично и решала конкретную бизнес-задачу.
Как придумать идею для портфолио?
Если вы умеете решать дизайн-задачи, значит, можете разглядеть и дизайн-проблемы, которые есть в любом продукте.
Чтобы собрать портфолио, можно генерировать идеи для реальных проектов и решать реальные задачи, но при этом не зависеть от реального заказчика. Например:
Работайте над такими проектами в свободное время, сохраняйте материалы, и в итоге вы сможете сделать интересный кейс, который будет хорошо смотреться в портфолио.
За год можно выполнить пять-шесть подобных кейсов. Для портфолио этого достаточно. Главное — в каждом новом проекте стремиться выйти на более высокий уровень, чем в предыдущем, как с точки зрения самого проекта, так и с точки зрения кейса.
Так вы можете собрать портфолио, с которым попасть в топовую компанию или получить более качественные заказы на фрилансе станет намного реальнее.
Ключевые блоки Behance-кейса
В начале определите темы блоков и их последовательность, после этого можно приступать к дизайну. В результате должна получиться цельная история, у которой есть завязка, развитие сюжета и эпичный финал, а в конце могут идти «титры» и благодарности.
В большинстве кейсов дизайнеры используют похожие тематические блоки, но оформляют их в стилистике конкретного проекта. Последовательность блоков может варьироваться в зависимости от видения автора.
Вот список самых универсальных блоков, которые можно найти практически в каждом кейсе:
1. Первый экран кейса
Отсюда пользователь начинает знакомство с вашим проектом, поэтому лучше сразу привлечь его внимание чем-то интересным — обычно это иллюстрация, анимация, фото, видео или просто впечатляющая типографика и композиция. Пользователю нужно сразу понимать, о чём ваш кейс, хотя бы в общих чертах, так что не стоит держать интригу до следующего экрана.
2. Описание проекта
Здесь всё просто. Например, если вы сделали редизайн банковского приложения, расскажите об этом одним-двумя абзацами. Часто описание проекта совмещают с первым экраном, чтобы пользователю сразу было понятно, о чём в кейсе пойдёт речь.
3. Описание задачи и цели
Во многих случаях в этом блоке размещают два небольших абзаца. Первый описывает основную задачу, второй — чётко сформулированную цель.
4. Блоки подготовительной работы
В эту категорию входят анализ рынка, описание пользователей, различные карты взаимодействия с продуктом, прототипы и так далее. Можно показать только часть или всё — главное, чтобы это дополняло презентацию и было интересно оформлено визуально.
5. Разные визуальные решения
В блоках визуальных решений можно встретить наборы UI-элементов проекта, сетки композиции, выбор шрифтовых и цветовых сочетаний и тому подобное. Стоит дополнять такие блоки кратким объяснением показанных решений.
6. Видео и GIF-анимации
Видео и гифки бывают двух типов — развлекательные и демонстрационные.
Развлекательными можно разбавлять визуально похожие блоки кейса, чтобы он выглядел более динамично. Для этого подойдут проморолики вашего продукта или бизнеса, для которого этот продукт создавался.
Демонстрационные анимации и видео нужны, чтобы, например, показать, как при взаимодействии с пользователем будет вести себя тот или иной экран приложения, страница сайта или любые другие элементы вашего проекта.
Пример видеопрезентации взаимодействия пользователя с сайтом
7. Результаты работы
Рассказав о проекте, о его сложностях и обо всех самых интересных и важных этапах работы, покажите финальный результат. Например, если кейс на тему пользовательских интерфейсов или веб-дизайна, это должны быть макеты: десктопные и мобильные версии сайтов или экраны приложения.
В зависимости от стилистики проекта и самого кейса можно презентовать результаты работы в мокапах соответствующих устройств.
Демонстрационные видео и GIF-анимация также помогут презентовать результат работы.
8. Техническая информация
Этот блок — подобие финальных титров фильма. Обычно в нём пишут имена людей, которые работали над проектом, его направление, год создания и другие общие сведения.
9. Благодарность за просмотр
Блок благодарности обычно находится в самом конце кейса. Как правило, это большая надпись: «Спасибо за просмотр» или что-то похожее. Часто этот и предыдущий блок объединяют в один.
Не стоит делать этот блок слишком простым и скучным, потому что прямо под ним будет находиться большая синяя кнопка, с помощью которой пользователи могут поставить лайк вашему кейсу. Если вы добавите им приятных впечатлений последним блоком, вероятность получения лайка увеличится.
Но писать «Ставьте лайк, подписывайтесь на меня» не стоит, на Behance это считают дурным тоном.
Советы и технические нюансы
Интерфейс создания кейсов на Behance интуитивно понятный, но есть нюансы, которые могут вызывать вопросы и сложности — о них и поговорим.
Формат кейса
Максимальная ширина кейса — 1400 пикселей. То есть даже если вы загрузите макет шириной 1920 пикселей, Behance всё равно будет отображать его в 1400. При этом внутри кейса на изображение можно нажать, и оно откроется в максимально доступном разрешении. Так что в некоторых случаях есть смысл экспортировать изображения из графического редактора в полуторном или двойном размере.
Высота кейса может быть какой угодно. Но ни в коем случае не загружайте весь кейс одной картинкой — любой Behance-кейс строится из отдельных смысловых блоков.
Каждый такой блок экспортируйте отдельным изображением и уже эти небольшие изображения вставляйте в свой кейс. Благодаря этому ваш кейс будет загружаться у пользователей гораздо быстрее.
Длина кейса
Количество блоков в кейсе обычно зависит от размера проекта. Среднее их число — от пяти до 15. Меньше пяти точно делать не стоит — это уже сложно будет назвать полноценным кейсом. А вот больше 15 блоков — распространённая практика, особенно когда речь идет о UI/UX-презентациях.
Хорошая длина совокупности всех блоков — около 20 000 пикселей. Если получается значительно больше, вы должны быть уверены, что оно того стоит.
Не нужно раздувать свои кейсы, чтобы создать ощущение большой проделанной работы — больше не значит лучше.
С чего начать дизайн Behance-кейса
Стилистику кейса лучше выстраивать в стиле самого проекта, но должно быть понятно, где «обёртка», а где проект. Для этого старайтесь разграничивать фон кейса и контент. Например, не растягивайте дизайн-макеты на всю ширину кейса — оставляйте поля по бокам. Также добавляйте заголовки смысловым блокам презентации.
Форматы изображений
Каждый статичный блок стоит загружать на Behance как отдельную картинку в формате PNG или JPG.
Иногда изображение в одном из этих форматов выглядит лучше, чем в другом. Если после сохранения или публикации кейса какие-то из добавленных картинок потеряли в качестве, можно попробовать загрузить их в PNG вместо JPG или наоборот.
Кроме того, если картинка сильно портится при сохранении или при публикации кейса, есть вероятность, что она слишком большая или сложная в цветовом плане. Из-за этого не справляются алгоритмы оптимизации. Иногда удаётся решить эту проблему, если разрезать изображение на несколько частей, — так вес файла уменьшится, на обработку потребуется меньше ресурсов и итоговое качество станет лучше.
Видео или GIF?
Гифки в Behance-кейсах получаются заметно более низкого качества, чем видео, но у GIF-изображений есть пара плюсов:
Если же для вашего кейса принципиальны высокое качество и плавная анимация, вам больше подойдёт видеоформат. При этом видео лучше встраивать. У многих возникают трудности, потому что не совсем очевидно, как это делать, учитывая все нюансы.
Как встроить видео?
Для того чтобы добавить видео в кейс, его лучше всего предварительно загрузить на видеохостинг Vimeo. Это даёт дополнительные возможности настройки.
Конечно, можно воспользоваться и YouTube или даже просто загрузить видео прямо на Behance, но тогда не получится гибко настроить внешний вид видеопроигрывателя — к примеру, полностью отключить его интерфейс, чтобы видео бесшовно воспроизводилось в кейсе и вызывало вау-эффект.
Чтобы встроить ролик со стороннего ресурса, нужно:
Эти ключи у разных видеосервисов могут отличаться. В этом материале мы рассматриваем встраивание видео из Vimeo.
Ключ autoplay=0 поможет сделать так, чтобы видео воспроизводилось автоматически. Важно, что в некоторых веб-браузерах оно все равно не будет автоматически запускаться, если только в плеере не отключен звук. Эту задачу решит ключ muted=1.
Во многих кейсах бывает несколько встроенных видео, и чаще всего хочется, чтобы они проигрывались одновременно и были зациклены. В некоторых браузерах запуск одного проигрывателя прерывает работу другого. С помощью ключа autopause=0 можно отключить это ограничение.
Ключей существует очень много, но некоторые из них будут работать только при использовании платных тарифов Vimeo. Например, полное отключение интерфейса видеопроигрывателя можно активировать лишь на платном тарифе, причём только в настройках вашего видео в самом Vimeo.
Ключи можно добавлять друг за другом подряд, но чтобы они работали, необходимо проставлять между ними символ амперсанд — вставляйте его как запятую между ключами без пробелов.
В теме встраивания видео на Behance есть множество нюансов — о некоторых можно узнать из этого ролика.
Тестирование адаптивности кейса
Конечно, смартфон не идеальное место, чтобы полноценно насладиться классным кейсом, но многих пользователей это не останавливает, поэтому стоит проверять, как ваша работа выглядит на мобильном устройстве.
Это особенно критично, если в вашем проекте есть блоки с сеткой изображений, потому что в адаптивной версии изображения переносятся на следующую строку и вид вашего проекта может получиться не таким, как вы ожидаете.
Обязательно проверяйте свои кейсы в браузере на мобильном устройстве или в мобильном приложении Behance.
Выводы
1. Используйте Behance для вдохновения и развития:
2. Презентуйте на Behance только лучшие кейсы:
3. Не забывайте, что Behance-кейс — это презентация процесса работы над проектом с демонстрацией финального результата:
4. Помните о важных технических нюансах:
5. Насыщайте кейс интересными деталями и по возможности добавляйте классную анимацию и видео, чтобы разнообразить статичный контент.