что такое кейсы в дизайне

В поисках идеального кейса или топ-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, только хардкор.

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

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

Источник

Веб-дизайнерам: с чего начать создание кейса, чтобы заинтересовать клиента

Макет в портфолио ничего не рассказывает потенциальному клиенту.

Чтобы не зависеть ни от чьих вкусовых предпочтений, дизайнеры создают кейсы. Выстраивают связную историю, объясняют свои решения текстом. Клиент понимает, как работает дизайнер и формулирует представление о нем, как о компетентном специалисте.

Эта статья о первом этапе упаковки проекта в кейс — структуре.

Зачем структура

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

Хорошая структура выглядит так:

Если сначала продумать структуру, кейс получится логичным и цельным, потому что ты смотришь на него «издалека». Ты заранее видишь, где у тебя будут смысловые проблемы. Вот в такой структуре проблемы видны сразу:

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

Польза структуры в том, что она собирает разрозненные мысли. Дизайнер заранее знает, о чем расскажет и что покажет потенциальным клиентам. Исправит все смысловые проблемы на бумаге. Готовый кейс получится в точку.

Универсальная структура

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

Показать обложку. Показать, что это за проект:

Источник

Что такое кейсы в дизайне

Кейсы — типичная проблема дизайнеров-новичков. Они знают, что портфолио должно быть, обязательно с хотя бы 2-3 работами, но как их оформить — без понятия.

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

А теперь перейдем к советам!

Обложка должна сразу объяснять, о чем кейс

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

Грамотная структура кейса — 50% успеха

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

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

Важно придерживаться такого плана:

1. Укажите цель, задачи проекта.

2. Кратко опишите свое решение-стратегию.

3. Поделитесь своими идеями-набросками и тем, как шли к поиску оптимального решения. Это лучше всего реализовать через демонстрацию прототипов, схем.

4. Перечислите названия и коды цветов, выбранные шрифты. Здесь будет уместно написать 1-2 предложения о том, почему сделали такой выбор.

5. Покажите несколько задизайненных страниц (лучших, по вашему мнению, или самых важных в конкретном дизайн-проекте).

6. Расскажите о каких-то фишках, необычных техниках или элементах проекта, покажите их. Это могут быть трендовые, небольшие детали вроде рисованных элементов или анимированных заголовков.

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

8. Поблагодарите за уделенное вам время и оставьте контакты, через которые с вами можно связаться (почту, ссылки на рабочие страницы в соцсетях, телефон).

Анимация в кейсе — это всегда плюс

Анимация — это об интерактиве, а интерактив — то, что вызывает интерес к увиденному. Это один из инструментов, который позволяет сделать так, чтобы человек досмотрел кейс до конца, впечатлился и захотел заказать у вас работу. То есть, для клиента наличие интерактивных элементов (даже если их в самом проекте не было, только в примере работы) — проявление у дизайнера креативности.

Что можно добавлять в качестве анимации:

К слову о мокапах. К ним можно привлечь внимание не только через анимацию, но и через необычный формат. Идеи можно найти на сайте Pixeden.

Добавляйте минимум текста, максимум визуала

В кейсе текст используйте только для подсказок, объяснений, разделения информации на структурные элементы. Описывать свои ощущения и рассказывать, как вы любите этот проект, сколько времени его делали, как трудно дались какие-то моменты не стоит.

Если вам кажется, что текста, наоборот, очень мало, добавьте больше макропланов и яркой типографики.

На просмотр кейса должно уходить 1-3 минуты

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

Дизайнеры считают, что оптимальный размер кейса — 16-20 тысяч пикселей. Меньше можно, больше — не желательно.

Что еще нужно знать?

С основами оформления кейсов дизайнеров ознакомились. Теперь некоторые мелкие, но важные рекомендации:

Научитесь профессионально оформлять кейсы

Станьте профессиональным веб-дизайнером с Айтилогией

Обучение веб-дизайну в Айтилогии — это 3,5 месяца интенсивных занятий с наставником, после которых вы станете сильным начинающим веб-дизайнером и сможете начать карьеру уже в процессе обучения.

На закрытой онлайн-платформе Айтилогии вас ждёт много насыщенных уроков и мощных практических заданий. А на персональных разборах домашних заданий вы будете отрабатывать ваши личные ошибки из практики.

После курса у вас в портфолио будет 7 потрясающих макетов: баннер, форма регистрации, 4 лендинга и интернет-магазин! Да-да, всё это на нашем интенсивном курсе для начинающих, всего за 3,5 месяца!

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

Источник

Как описывать кейсы в портфолио

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

О своих работах в первую очередь нужно рассказывать на личном сайте. Это площадка, которую вы полностью контролируете. Где вы можете показывать проекты так, как вам хочется. Здорово, если вы дополнительно будете оформлять кейсы на Behance и делиться частичками проектов в Dribbble — это большие и полезные площадки, которые тоже могут принести клиентов. Но концентрироваться в первую очередь рекомендуем на личном сайте.

Несколько советов о том, как веб-дизайзеру оформить хороший кейс

1. Не ограничивайтесь ссылкой на сайт клиента

Особенно когда вы сдаете проект на Тильде. Заказчик может поменять фотографии, добавить блок с акцией, и вообще — преобразить сайт до неузнаваемости. Оформляйте кейс отдельной страницей на своем сайте.

Кейс Артура Жукова

2. Опишите задачу клиента

Расскажите, с какой проблемой к вам пришел заказчик. И для какой аудитории нужно было сделать сайт. Это поможет читателю понять контекст проекта, чтобы вам проще было объяснить в кейсе решения и действия.

3. Покажите процесс

Показывайте промежуточные варианты — как вы придумывали решение задачи. С какими проблемами сталкивались и как их решали. Не нужно скрывать трения — «идеальные» кейсы не покажут, что вы погружались в бизнес клиента и смоги найти выход из сложной ситуации.

4. Говорите о проекте, а не о себе

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

5. Покажите результат с разных сторон

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

6. Попросите у клиента комментарий

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

7. Расскажите, как с вами поработать

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

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

Источник

Успешное портфолио на Behance. Подробное руководство

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

Behance — идеальная площадка, чтобы создать портфолио, заявить о себе, получить обратную связь от дизайн-сообщества и интересные предложения о работе.

Перед вами — большое руководство по этой платформе, в котором мы расскажем:

UI/UX-дизайнер, видеоблогер, предприниматель. Проектирует интерфейсы, создаёт развлекательно-образовательный контент и обучает дизайну.

Задача кейса — показать не только финальный результат, но и процесс, который за ним стоит. Это главное отличие Behance от Dribbble, где обычно представляют одну или несколько финальных картинок без контекста и подробностей. На Behance очень высоко ценится именно история создания проекта с подробностями задачи, проведённой аналитической работой, материалами и, конечно, результатом.

Хороший дизайн — это хорошо решённая задача, а не просто красивая картинка или анимация.

Пользователи Behance могут лайкать и комментировать кейсы, это влияет на популярность и потенциальный успех этих работ.

После публикации кейс оказывается на странице проектов соответствующей ему категории и постепенно смещается более свежими работами других участников.

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

Так, Behance — не просто сайт для размещения портфолио, а настоящая социальная сеть, где можно искать полезные контакты и вдохновение, набирать подписчиков и увеличивать свой профессиональный вес.

Сильный профиль на Behance — огромное профессиональное преимущество, и иногда этого достаточно, чтобы получить работу мечты.

С чего начать работу на Behance

Начать свой путь на Behance очень легко — платформа бесплатная, достаточно просто зарегистрироваться на сайте, и вы уже полноценный участник сообщества, в котором можно находить вдохновение.

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

Как оформить профиль

На странице профиля будет краткая информация о вас и все ваши работы.

Представители компаний, куда вы отправляете резюме, будут гуглить вас, и, скорее всего, им будет попадаться страница вашего профиля, так как у Behance высокий приоритет в поисковой выдаче. Хорошо оформленный профиль будет подчёркивать ваш профессиональный подход и формировать первое впечатление о вас как о потенциальном сотруднике.

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

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

Составьте одно-два коротких предложения — опишите, чем вы занимаетесь и в каком ключе. Например: «Привет, я дизайнер интерфейсов в Google» или «Привет, я начинающий UI/UX-дизайнер с большим желанием развиваться в этой сфере».

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

Со временем ваше положение и приоритеты могут меняться, в соответствии с этим обновляйте свой профиль.

Если у вас есть персональный сайт или аккаунт на фриланс-бирже — обязательно добавляйте ссылки на них в свой Behance-профиль. Также в него можно добавить ссылки на основные соцсети, где вы наиболее активны, особенно если в них вы публикуете свой профессиональный контент.

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

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

Так что стоит выделить на это достаточно времени, чтобы хорошо подумать о самом важном и чётко сформулировать суть. Зато этот же текст можно использовать и на других площадках — например, в описании своего профиля на фриланс-бирже и в соцсетях.

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

Для большинства случаев отлично будет работать дружественный и открытый стиль письма.

В верхнюю часть страницы можно добавить шапку — обложку вашего профиля. Если у вас крутые навыки в графическом дизайне или в 3D, можно сделать что-то оригинальное, но чаще лучше придерживаться принципа «Не навреди».

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

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

По этой причине во многих сильных профилях Behance можно встретить обложки со сплошным цветом, приятным ненавязчивым градиентом или чем-то абстрактным и в основном без надписей. Так обложка гарантированно не потеряет целостности, как бы ни менялся интерфейс 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. Насыщайте кейс интересными деталями и по возможности добавляйте классную анимацию и видео, чтобы разнообразить статичный контент.

Обложка: OlyaSnow для Skillbox Media

Источник