Содержание
- Структура портфолио
- Создаем сказку
- Брэдли Хейнс: привлеките внимание анимацией
- Портфолио UX-дизайнера Эми Ву: покажите измеримый эффект
- Где взять примеры работ новичку
- Оформление портфолио дизайнера: какой способ выбрать?
- Стефан Хийенурм: расскажите, чем полезны и расчехлите ваши лучшие работы
- Рекомендации по созданию портфолио
- Как сделать сайт-портфолио
- Откуда брать проекты, если их нет
- Ключевые моменты портфолио
- Где опубликовать и кому показывать
- Где можно размещать
- Портфолио в формате pdf
- Сайт и портфолио UX-дизайнера Элизабет Лин: визуализируй каждый шаг
- Как попасть в топ на Behance
- Ключевые блоки Behance-кейса
- Экономьте время заказчика — создавайте портфолио в формате showreel
- Том Паркс: добавьте стильный и смелый ход в каждом проекте
Структура портфолио
Описание структуры сразу решит вопрос, как сделать портфолио.
Страница 1. Первое, с чего нужно начать составление портфолио, – это обложка. Достаточно написать имя, фамилию и специальность.
Страница 2. Короткий рассказ о себе. Как зовут, сколько занимаетесь дизайном, как пришли к этому и т. п. Можно разместить контакты здесь или в конце. Возраст лучше не указывать, если вы моложе 24 лет. Многие заказчики избегают юных специалистов.
Страница 3 и все до последней. Черновики, чертежи, наброски, готовый дизайн – все входит сюда. Попытайтесь уложиться в 6 – 9 страниц. Обязательно оставляйте свободное пространство между картинками и текстом, чтобы портфолио было приятно просматривать.
Последняя страница. Благодарность, контакты.
Создаем сказку
Слова про сказку следует понимать не только в переносном смысле. Около 30% работ в портфолио дизайнеров — несуществующие работы. Это наброски, макеты, фейки и так далее. Наша задача — показать себя с выгодной стороны, собрать лайки и комментарии.
Tim Tadder on Behance
Зачем нужны фейки? Часто дизайнеры задают на семинарах такой вопрос: «Как выкладывать в портфолио сайты, за которые платят реальные клиенты вроде магазина запчастей или товаров для рыбалки?» Действительно, это проблема, потому что на таких проектах обычно много скучных страниц. Эти сайты не для Behance.
Делайте фейки. Возьмите продукт, который вам нравится, который вы любите. Например, фотоаппараты Leica. Сделайте фейковый лендинг фотоаппаратов. Возьмите новую коллекцию купальников Victoria’s Secret. Сделайте лендинг для нее. Сделайте новую концепцию сайта Nike
И не важно, что Nike наплевать на вашу концепцию, а Victoria’s Secret, может быть, никогда не узнает о вашем существовании. Главное, что это один из лучших способов разгона своего портфолио.
Брэдли Хейнс: привлеките внимание анимацией
Кто такой Брэдли Хейнс?
Брэдли Хейнс — Продуктовый стратег и продуктовый дизайнер (UI/UX).
Почему портфолио Брэдли клевое?
У Брэдли небольшое количество выверенных проектов и каждый из них хорошо продуман.
Портфолио UI-дизайнера Брэдли Хейнс
Чему стоит поучиться у Брэдли Хейнса?
Помимо захватывающей дух эстетики, Брэдли включает в себя идеальный уровень детализации, необходимый для оценки роли, которую он сыграл в своих проектах. Это ясно из его множества высокопоставленных клиентов (Lonely Planet и Airbnb, чтобы назвать некоторых).
Что запомнить и взять на вооружение?
Анимация нюансов имеет большое значение!
Посмотреть пример портфолио →
Портфолио UX-дизайнера Эми Ву: покажите измеримый эффект
Кто такая Эми Ву?Эми Ву — дизайнер UX/product из Сан-Франциско и опытный оратор. А еще на ее счету несколько впечатляющих наград, в том числе премия Паулы Родс за исключительные достижения в области дизайна взаимодействия (Interaction Design).
Почему портфолио Эми клевое?Одним из самых больших вызовов, с которым вы столкнетесь как UX-дизайнер, станет измерение и демонстрация эффекта от вашей работы. Вы знаете, что улучшили пользовательский опыт, но как вы это обоснуете?
Портфолио UX-дизайнера Эми Ву.
Загляните в портфолио Эми Ву. Эми делает чрезвычайно важную (но невероятно редкую) вещь: она помещает свою дизайнерскую работу по улучшению UX в контекст бизнеса.
Возьмем , к примеру, ее кейс-стади Citi Bike Onboarding. Эми ставит четкую бизнес-цель — «увеличить пассажиропоток среди начинающих пользователей, особенно туристов», — за которой следует конкретный показатель успеха. Эми также указывает сроки реализации проекта, подчеркивая значимость своей работы: «В течение 6 месяцев Citi Bike раскатила новый онбординг-сценарий на 330+ киосковых станций. Август 2014 года».”
Эми завершает свой кейс анализом после запуска нового онбординга с опорой на конкретные данные и демонстрирует, как редизайн Citi Bike повлиял на пользовательский опыт (UX): «Мы обнаружили, что через месяц после запуска число единоразовых пользователей увеличилось на 14»”.
Чему стоит поучиться у Эми Ву?Эми наглядно демонстрирует, как работает в бизнес-среде
Это очень важно, если вы хотите практиковать UX для жизни, но это нюанс, который многие дизайнеры склонны упускать. Конечно, вы пришли в бизнес, чтобы заботиться о пользователях, но также важно признать, что у компаний есть и свои собственные цели и планы по достижениям
Поэтому вам нужно показать, как UX способствует достижению этих целей.
Если вы, как Эми, продемонстрируете влияние результатов вашей работы на бизнес, вы получите дополнительные бонусные баллы. Если у вас есть данные, связанные с проектом, это будет легко — но что делать, если нет никаких конкретных показателей? Даже без данных вы можете построить свою работу в бизнес-контексте. Следуйте примеру Эми и опишите в начале кейса цель для бизнеса или продукта. Чего вы надеетесь добиться своей работой? Как планируете улучшить показатели бизнеса и счастье клиентов? Например, создание более приятного для пользователя приложения должно помочь повысить ретеншн (уровень удержания).
Прежде чем начать, установите несколько критериев успеха. Как вы будете оценивать результаты своей работы? Какие сигнальные огни вы будете искать после запуска или перезапуска продукта? Лучшие UX-дизайнеры — это те, кто может защищать интересы пользователя, удовлетворяя потребности бизнеса, поэтому постарайтесь продемонстрировать это в своем портфолио.
Что запомнить и взять на вооружение?Добавьте в свое портфолио факты о влиянии на бизнес-метрики. Опишите поставленные бизнес-цели и критерии успеха для каждого кейса, опишите по возможности значимый прирост в цифрах.
Посмотреть пример портфолио →
Где взять примеры работ новичку
Если вы обучаетесь на веб-дизайнера самостоятельно, то наверняка у вас ещё нет примеров. Да и где им взяться, если вы только начинаете пробовать себя в этой сфере? В предыдущей статье о самостоятельном развитии, мы обсудили наличие качественного портфолио.
Теперь мы подготовили для вас несколько проверенных идей, где взять первые примеры:
Придумайте себе заказчика.
Определите его род деятельности, разработайте ТЗ (техническое задание), нарисуйте логотип. Например, это может быть лендинг по продаже одежды или услуг массажиста. Создаём под эти параметры сайт и первый образец готов. Теперь можете смело размещать работу в своём портфолио.
Сделайте дизайн популярного бренда.
Выберите любой проект, который вам нравится, и сделайте концепцию сайта на свой вкус. Проявите по максимуму свой творческий потенциал. Многих начинающих дизайнеров такой подход сделал известными.
Пробуйте свои силы в конкурсах.
Если вы любите ощущать дух соперничества и становиться победителем, то этот метод вам подойдёт. Существуют различные сервисы, на которых проводят конкурсы для начинающих веб-дизайнеров и профессионалов.
Один из таких – 99designs.
Здесь нужно зарегистрироваться и подать заявку. Далее разрабатываете сайт или логотип для проекта, который вам понравился больше всего. Работают над заданием множество фрилансеров, но побеждает та работа, которая больше всего понравится заказчику. Конечно же, она будет вознаграждена хорошим гонораром.
Ведите свои социальные сети.
Чаще всего первые заказчики приходят именно через них. Бонусом станет ведение своей стены, размещение интересных постов по данной тематике. Регулярно добавляйте новых друзей из соответствующих групп и публичных страниц. Это намного увеличит шансы найти первые проекты и начать их реализовывать. Чуть позже я расскажу вам более подробно о том, насколько важны соц. сети для фрилансеров и удалёнщиков.
Оформление портфолио дизайнера: какой способ выбрать?
Существует несколько путей оформления портфолио. Конечно, работодателю будет гораздо удобнее просматривать работы потенциального сотрудника в электронном виде. К тому же современные технологии позволяют реализовать свои задумки по поводу того, как сделать портфолио дизайнера необычно и оригинально. Многие до сих пор ориентируются на печатный вариант. Для дизайнера в сфере полиграфии такой способ тоже может быть неплохим, поскольку он может показать свои настоящие работы вживую. Например, предоставить работодателю визитки, буклеты, книги, которые специалист разработал.
Создать портфолио дизайнера в электронном виде возможно несколькими способами. Можно создать сайт, видеоролик, презентацию или просто сделать pdf-файл, который легко отправить по электронной почте.
Теперь стоит подробнее рассмотреть все достоинства и недостатки перечисленных методов.
Стефан Хийенурм: расскажите, чем полезны и расчехлите ваши лучшие работы
Кто такой Стефан Хийенурм?
Стефан Хийенурм — UI-дизайнер и дизайнер интерфейсов. Помогает по проектам Mastercard, American Express, Airbnb.
Почему портфолио Стефана клевое?
У Стефана небольшое количество выверенных проектов и каждый из них хорошо продуман.
Пример подачи портфолио от UI-дизайнера Стефана Хийенурма
Чему стоит поучиться у Стефана Хийенурма?
Стефан смело работает с цветовыми схемами. Акценты расставлены очень грамотно, дополнительные цвета подобраны гармонично
Рекомендую расслабиться и изучить каждую работу и обратить пристальное внимание на логику работы с цветом
Что запомнить и взять на вооружение?
Лучше показать несколько потрясающих проектов, чем 20 некачественных. Качество всегда важнее количества.
Посмотреть пример портфолио →
Рекомендации по созданию портфолио
— Не переусердствуйте
Переизбыток креатива — это плохо. Лучше расскажите о задаче клиента, как вы ее решили: покажите прототип, взаимодействие с клиентом (скриншоты писем), финальный результат. Прикрепите фотографию и отзыв клиента. Если он не против, укажите стоимость проекта, чтобы новые клиенты понимали уровень цен. Если ваш сайт будет очень красивый, но не будет логики — плохо. Не старайтесь добавлять анимацию или другие спецэффекты на непродуманный сайт-портфолио. Если проект изначально плохой, его ничего не спасет.
— Не делайте работы для дизайнеров
На Behance, 80% работ смотрят дизайнеры и лишь 20% клиенты (в основном зарубежные). Это своего рода социальная сеть для дизайнеров. Вы можете выкладывать туда свои работы, но пока вы не в топе, крупные зарубежные клиенты вряд ли вас найдут и доверят вам большой проект, который изменит вашу жизнь. Публикация работ на Behance может превратиться в погоню за лайками других дизайнеров, но клиентов она вам не приведет.
— Ставьте правильную цель для портфолио
Правильная цель — новые заказы, а значит новые деньги. Другая цель — удивить друзей, людей и других дизайнеров (это опять же возвращаемся к теме Behance). Вам нужно определиться, что вторая цель вам не нужна. Если нужна, дело ваше. Тогда дальше вам читать не стоит, я буду рассказывать о достижении первой.
Как сделать сайт-портфолио
Всё большую популярность набирают сайты-портфолио. Это ваш личный полноценный проект, где вы рассказываете о своих услугах, ценах, контактах и размещаете краткую информацию о себе. Чтобы сделать свой сайт ещё более насыщенным, можете размещать статьи по тематике вашей специализации.
Мы расскажем о нескольких простых вариантах создания собственного сайта:
Сделать его на WordPress.
Выбираете хостинг, устанавливаете Вордпресс на него, выбираете шаблон, заполняете сайт своими работами и необходимой информацией. Шаблон можно выбрать на themeforest. Там они есть специальные для портфолио.
Создать в программе Adobe Muse.
Работать довольно легко и интуитивно, только вот за пользование нужно заплатить.
Также своё портфолио можно сделать с помощью: Dunked, Тумблер, Adobe Портфолио (синхронизируется с Behance), Readymag, Squarespace.
Откуда брать проекты, если их нет
— Дизайн для выдуманных клиентов
Все просто. Придумываете организацию, род деятельности, название, можете лого нарисовать и создаете для нее сайт. Выкладываете проект в портфолио. Плюсы: вы не нарушаете никаких прав, можете придумать любую компанию, например, гостиницу на Марсе, куда прилетают жители с Земли и делаете большой крутой проект.
— Дизайн известного бренда
Выбираете любой известный бренд и делаете концепт сайта таким, как видите его вы. У компании РЖД, по-моему, самый ужасный сайт в мире, можно смело предложить концепцию этого сайта. С известным брендом работаете как с обычным проектом: делаете прототип, рисуете визуал и презентуете это в портфолио как концепт выбранной компании. Известный случай, когда парень сделал концепт Windows: расписал как может выглядеть вся линейка, Windows Office и так далее, сделал презентацию своего проекта. Через какое-то время его заметили и пригласили работать в Microsoft. Если сделаете концепт для известного бренда, это может стать резонансным проектом и сделает вас популярным дизайнером.
— Участие в конкурсах
На сервисе 99designs (сайт англоязычный) публикуются конкурсы для дизайнеров по разработке веб-сайтов, логотипов, упаковок, обложек книг и другие проекты. После регистрации вам открываются заявки на разработку проектов по вашей специализации. Вы работаете над понравившимся проектом и сдаете свою работу на оценку. Участвуете вы и сотни других дизайнеров, клиент, опубликовавший заявку, выбирает из работ наиболее понравившуюся и выплачивает гонорар автору. Идея участия в подобных конкурсах отличная: появляется соревновательный дух, вы можете смотреть как решалась задача другими дизайнерами, если вас выбрали, вы зарабатываете гонорар. На начальном этапе, когда нужна наработка проектов, участие в конкурсе — хорошая мотивация. Когда у вас уже есть поток клиентов, в конкурсах лучше не участвовать, потому что велика вероятность, что выиграете не вы.
— Свой проект
Еще один способ: поэтапно рассказать о том, как вы создавали себе сайт-портфолио, на котором находится клиент в данный момент. Это не самый хороший вариант, лучше уж сделать сайт выдуманной организации.
— Дизайн для знакомых
Чаще всего первые заказы приходят через знакомых. Поэтому начинайте всем рассказывать, что вы веб-дизайнер. Не все понимают, что такое веб-дизайн, поэтому можете просто говорить: я делаю сайты. Если у вас в паре есть верстальщик, то вы точно можете сделать сайт под ключ. Здесь лучше всего работает ваше социальное окружение и то как вы рассказываете другим людям о своем занятии веб-дизайном. Чем больше аудитория об этом знает, тем быстрее к вам придут первые заказы. Желательно, чтобы у вас в вконтакте с некоторой периодичностью публиковались посты, где вы напоминаете людям о том, чем занимаетесь с приложением своих работ
Важно знакомым в живую напоминать, что вы дизайнер или рассказать какой-то смешной случай с заказчиком. Люди запомнят ваши истории и, когда возникает необходимость в сайте, они в первую очередь вспомнят о вас
Если нет проектов, используйте эти 5 способов, но ни в коем случае не работайте бесплатно. Работать бесплатно — очень плохо, это тормозит ваш прогресс и прогресс клиента.
Ключевые моменты портфолио
Обложка (превью)
Превью должно быть сочным и ярким
Это очень важно для Behance, поскольку от качества превью зависит количество просмотров. Хорошее превью — это ювелирная работа
Человек листает ленту и вдруг в серой массе видит вашу яркую обложку, на которую хочется кликнуть. Цель достигнута!
Главная страница Behance, март 2018
История кейса
Даже если вам удалось «продать» посетителю обложку кейса в вашем аккаунте на Behance, не стоит забывать и о его содержании. Здесь дизайнеры часто ленятся: показывают ту же обложку, только в большом размере. Это неправильно: всегда старайтесь подать кейс в виде истории. При этом не забывайте, что оптимальная длина кейса —16 000 пикселей.
Учитывайте, что глазу человека надо расслабляться при просмотре, поэтому делайте кейс контрастным: спокойная страница, например, со списком вакансий, и яркая страница. Не забывайте вставлять интерактивные элементы, например, GIF-изображения. Выполнить эти правила несложно, а польза для портфолио большая.
Sergey Popkov on Behance
Где опубликовать и кому показывать
Если ваша цель – работать в студии, то смело добавляйте самые креативные, смелые идеи. А вот простым людям, которые даже не знают, что такое композиция, лучше не показывать сборник со своеобразными работами. Подумают, что вместо годного и понятного стиля, придется любоваться солянкой из всех цветов радуги.
Соцсети
Бесплатный способ привлечь внимание к своему портфолио. Главное, поставить правильные хэштеги вроде #ядизайнер и #моиработы, регулярно добавлять записи на стену
На фото должны быть вы, можно оригинально оформить, но не перестарайтесь. Потенциальный заказчик хочет знать вас в лицо.
В наших соцсетях найти нормальный аккаунт-портфолио – проблема. Так что занять нишу, найти клиентов – это легко, ведь достойных конкурентов мало.
Нашла одно неплохое портфолио, чтобы показать, как это должно выглядеть.
Дизайнер интерьеров поставила фото, где четко видно лицо. В информации о себе она написала: личный сайт, специальность.
На стене с завидной регулярностью раз в неделю публикуются посты с проектами, рабочим местом и т. п. В фотоальбоме работы разделены на категории.
Советую завести профиль в зарубежных соцсетях Dribbble и DeviantArt.
Биржи фриланса
Здесь действуют те же законы составления портфолио, о которых мы говорили ранее.
Минус: большинство сервисов ограничивает количество работ для бесплатных профилей.
Облако Google Drive или Яндекс.Диск
PDF-файл, серию фотографий можно загрузить в папку на Google Drive или Яндекс.Диск. Это защитит от воровства. Присылайте ссылку только потенциальному клиенту. Ведь выгруженные в общий доступ работы кто-то может выдавать за свои.
Где можно размещать
Сделать портфолио – это одно дело, опубликовать – другое. От места, где вы его разместите, зависит скорость получения заказов.
Социальные сети
Оформите аккаунт в соцсетях под специальность. Сделайте фотоальбом со своими творениями и достижениями. Постите на стену записи о рабочем процессе. Потенциальному работодателю должно быть сразу понятно, чем вы занимаетесь, уровень вашего профессионализма.
Как превратить профиль соцсети в мини-портфолио:
- В статусе напишите профессию, ваши услуги.
- В графе “Место работы” укажите специальность.
- В фотоальбоме сделайте папки под каждый вид услуг. Например, “Ретушь”, “Свадебные фотографии” – все раздельно.
- На стене постоянно публикуйте видео, фото рабочего процесса, делитесь мыслями, идеями.
- Подпишитесь на тематические группы.
Вот как выглядит профиль-портфолио в социальной сети. Указана профессия, соответствующая аватарка, в фотоальбоме все, что касается работы.
Персональный сайт
Личный сайт – звучит престижно. Можно сделать одностраничник. На нем разместить выдающиеся творения, добавить кнопку “Позвонить”, “Заказать” или что-то в этом духе. Если ваша профессия далека от фриланса, можно просто оставить контакты.
Я нашла лендинг программиста. Его можно использовать как схему-образец.
Шаг 1. Представьтесь.
Шаг 2. Покажите услуги, которые вы готовы оказать.
Шаг 3. Добавьте свои работы.
Шаг 4. Установите форму обратной связи и оставьте контакты.
Но блог будет приносить больше пользы. Посты о том, как вы учились, справлялись со сложными заданиями. Конечно, сделать раздел “Мои работы” и указать контакты нужно обязательно. Я увлеченно читала блог судьи, психолога, которые рассказывали о сложных случаях, разбирали письма читателей.
YouTube-канал
Как говорил мой преподаватель по SMM, “Контент хорошо, но Ютуб лучше”. Потому что текст многих напрягает, а видео легче воспринимается. Записывайте значимые части вашей деятельности – как вы печатаете, ищете материалы, мастерите. Если вы профи, пробуйте снимать видеоуроки.
Портфолио в формате pdf
Это еще один очень удобный способ реализации. Однако при создании портфолио дизайнера таким образом надо иметь в виду несколько тонкостей.
В начале файла стоит написать небольшое приветствие, представиться и дать немного информации о себе (можно написать о профессиональных интересах, образовании, опыте работы и т. д.). Этот блок не нужно делать слишком большим, он должен кратко и точно отражать ключевую информацию. Не следует размещать на одной странице более 4 работ. Желательно, чтобы все они были одинакового размера. Все страницы портфолио должны быть оформлены в едином стиле. Как уже говорилось выше, не стоит делать файл слишком большим, поскольку работодателю будет сложно воспринять большое количество информации
На последней странице следует указать свои контактные данные и поблагодарить за внимание
Сайт и портфолио UX-дизайнера Элизабет Лин: визуализируй каждый шаг
Кто такая Элизабет Лин?Элизабет Лин — дизайнер продуктов из Сан-Франциско, поклонница моды, преподавания и классического саксофона.
Почему портфолио Элизабет клевое?Портфолио Элизабет Лин — пример классической истории. Как и Мориц, она подает свою дизайнерскую работу в формате кейсов, документирует свой процесс от старта до финала. Но в портфолио Элизабет есть нюанс — применение визуальных эффектов для привлечения внимания и расстановки акцентов на истории.
Сайт и портфолио UX-дизайнера Элизабет Лин.
Каждый шаг в ее исследовании иллюстрируется каким-то визуальным элементом — будь то виртуальная стена из стикеров, форма опроса, которая была отправлена участникам исследования, или ранние прототипы.
Еще один сильный ход в ее портфолио — небольшие заметки справа от текста. Заметки выделяются другим шрифтом и цветом по сравнению с основным текстом. Такие фрагменты притягивают взгляд при прокрутке, погружают в проект и создают атмосферу размышлений. Вот например несколько заметок: «было здорово видеть, как по-разному учителя будут использовать эту панель мониторинга» или «мы не продвинулись вперед с этим исследованием, потому что сначала хотели проверить базовое решение».
Поддержка ваших кейсов визуальными нюансами оживляет проект. Портфолио Элизабет — прекрасный пример того, как визуальное и текстовое повествование должны работать вместе и раскрывать ваш подход к UX-дизайну.
Чему стоит поучиться у Элизабет Лин?Цель вашего UX-портфолио — показывать и рассказывать. По примеру Элизабет поддерживайте каждый кейс интересными и полезными визуальными эффектами или реальными артефактами из вашего проекта, а не просто иллюстрациями.
В работе над новым дизайн-проектом попробуйте документировать свой процесс: делайте скриншоты опросов пользователей, которые вы проводите; фотографируйте свою стену, покрытую заметками после тяжелого мозгового штурма; держите свои макеты и вайрфреймы под рукой, когда они переходят от низкой к высокой точности. Когда дело доходит до добавления нового кейса в портфолио, эти артефакты помогут вам рассказать логичную историю.
Что запомнить и взять на вооружение?Применяйте визуальные элементы для захвата внимания и раскрытия деталей в каждом проекте. Иллюстрируйте каждый шаг с помощью фото, схем и других визуализаций.
Посмотреть пример портфолио →
Как попасть в топ на Behance
Можно ответить в духе Яндекса: «делайте крутые сайты…», но с Behance немного легче. Решение о выводе в топ (добавлении ачивки или шильдика Featured) редакция Behance принимает по многим параметрам, и один из них — анимационная вставка. Обычно все выигрышные кейсы делают с анимационными вставками и видеороликами.
Шильдик Featured на Behance — мечта многих дизайнеров. Это не только признание мастерства, но и возможность получать большие и денежные заказы от крупных студий и частных лиц.
Чтобы стать известным на Behance, дизайнер должен придерживаться следующих правил:
Делать портфолио ярким и красочным.
Правильно оформлять превью.
Регулярно убирать старые работы.
Делать фейковые работы для крупных брендов.
Соблюдать длину портфолио в 16000 пикселей.
Рассказывать историю кейса, а не просто загружать картинки.
Обращать внимание на макропланы и детали.
Просматривать чужие работы в ежедневном режиме и учиться у лучших.
О том, как назначить цену за работу, построить отношения с заказчиком и что предпочесть — офис или фриланс, читайте в этом материале.
Ключевые блоки Behance-кейса
В начале определите темы блоков и их последовательность, после этого можно приступать к дизайну. В результате должна получиться цельная история, у которой есть завязка, развитие сюжета и эпичный финал, а в конце могут идти «титры» и благодарности.
Нарезка блоков Behance-кейса. Скриншот: Tony Yemelyanov / Behance
В большинстве кейсов дизайнеры используют похожие тематические блоки, но оформляют их в стилистике конкретного проекта. Последовательность блоков может варьироваться в зависимости от видения автора.
Вот список самых универсальных блоков, которые можно найти практически в каждом кейсе:
1. Первый экран кейса
Отсюда пользователь начинает знакомство с вашим проектом, поэтому лучше сразу привлечь его внимание чем-то интересным — обычно это иллюстрация, анимация, фото, видео или просто впечатляющая типографика и композиция. Пользователю нужно сразу понимать, о чём ваш кейс, хотя бы в общих чертах, так что не стоит держать интригу до следующего экрана
Примеры первых экранов разных Behance-кейсов. Скриншот: сайт Behance
2. Описание проекта
Здесь всё просто. Например, если вы сделали редизайн банковского приложения, расскажите об этом одним-двумя абзацами. Часто описание проекта совмещают с первым экраном, чтобы пользователю сразу было понятно, о чём в кейсе пойдёт речь.
Примеры блоков описания проекта из разных Behance-кейсов. Скриншот: сайт Behance
3. Описание задачи и цели
Во многих случаях в этом блоке размещают два небольших абзаца. Первый описывает основную задачу, второй — чётко сформулированную цель.
Блок описания задачи и цели в Behance-кейсе. Скриншот: Larry V. / Behance
4. Блоки подготовительной работы
В эту категорию входят анализ рынка, описание пользователей, различные карты взаимодействия с продуктом, прототипы и так далее. Можно показать только часть или всё — главное, чтобы это дополняло презентацию и было интересно оформлено визуально.
Блоки Behance-кейса, описывающие процесс UX-проектирования. Скриншот: Netguru Team / Behance
5. Разные визуальные решения
В блоках визуальных решений можно встретить наборы UI-элементов проекта, сетки композиции, выбор шрифтовых и цветовых сочетаний и тому подобное. Стоит дополнять такие блоки кратким объяснением показанных решений.
Примеры оформления UI-блоков в разных Behance-кейсах. Скриншот: сайт Behance
GIF-анимация UI-блока из Behance-кейса Скриншот: Tony Yemelyanov / Behance
6. Видео и GIF-анимации
Видео и гифки бывают двух типов — развлекательные и демонстрационные.
Развлекательными можно разбавлять визуально похожие блоки кейса, чтобы он выглядел более динамично. Для этого подойдут проморолики вашего продукта или бизнеса, для которого этот продукт создавался.
Демонстрационные анимации и видео нужны, чтобы, например, показать, как при взаимодействии с пользователем будет вести себя тот или иной экран приложения, страница сайта или любые другие элементы вашего проекта.
Пример видеопрезентации взаимодействия пользователя с сайтом
7. Результаты работы
Рассказав о проекте, о его сложностях и обо всех самых интересных и важных этапах работы, покажите финальный результат. Например, если кейс на тему пользовательских интерфейсов или веб-дизайна, это должны быть макеты: десктопные и мобильные версии сайтов или экраны приложения.
Пример блока результатов работы из Behance-кейса. Скриншот: jesus labarca / Behance
В зависимости от стилистики проекта и самого кейса можно презентовать результаты работы в мокапах соответствующих устройств.
Пример блока макетов с мокапами в Behance-кейсе. Скриншот: Netguru Team / Behance
Демонстрационные видео и GIF-анимация также помогут презентовать результат работы.
8. Техническая информация
Этот блок — подобие финальных титров фильма. Обычно в нём пишут имена людей, которые работали над проектом, его направление, год создания и другие общие сведения.
9. Благодарность за просмотр
Блок благодарности обычно находится в самом конце кейса. Как правило, это большая надпись: «Спасибо за просмотр» или что-то похожее. Часто этот и предыдущий блок объединяют в один.
Примеры заключительных блоков из разных Behance-кейсов. Скриншот: сайт Behance
Не стоит делать этот блок слишком простым и скучным, потому что прямо под ним будет находиться большая синяя кнопка, с помощью которой пользователи могут поставить лайк вашему кейсу. Если вы добавите им приятных впечатлений последним блоком, вероятность получения лайка увеличится.
Экономьте время заказчика — создавайте портфолио в формате showreel
Digital-дизайнер Сартасова Елена, digital-агентство P R O M О B E L K A
У меня есть секрет — хотя, возможно, его знают многие дизайнеры, — как сделать портфолио, если у вас еще нет заказчиков и особого опыта. Самое худшее, что можно предположить, — показывать заказчикам студенческие работы или картины с художки. Это не годится совсем. Как и не годится пересылать отдельные картинки работ на почту клиенту в jpeg. Это дурной тон.
Выкладывать портфолио лучше на своем сайте. Но если его нет, то на известные площадки типа re:vision. Тогда заказчикам будет удобно перейти по одной ссылке, чтобы посмотреть работы. На сайте-портфолио не должно быть однотипных работ. Лучше пусть будет 10–15 проектов, в которых фигурируют разные стили и подходы. К каждой работе делайте интересное и умное превью, которое побудит открыть ее.
Если говорить о презентации работ, а не просто о рекламном формате, то каждому клиенту лучше показывать сначала то, что близко его тематике. Это продемонстрирует вашу компетенцию именно в области бизнеса клиента.
Сейчас век быстрого поиска, поэтому я советую создавать видеоролики showreel — общее видео о всех работах. Как вариант, сделать длинную и короткую версию для инстаграма. Еще секрет из личного опыта: используйте видеопортфолио, мини-ролики, микроанимацию. Это тренд, который делает любой кейс живым и информативным. Советую изучать анимацию сразу, она не раз еще пригодится.
В одном кейсе обязательно нужно выделять графически и текстом разные профессиональные решения по проекту: инновационность и удобство элементов интерфейса, оригинальные графические решения с описанием, как это повлияло на результат рекламной компании или использование web-продукта.
Портфолио дизайнера — не набор ссылок на красивые работы. Это подборка интересных кейсов, которые решали конкретные задачи заказчиков. Каждый проект требует сопроводительного материала, который объяснит, почему используются именно эти шрифт, текст и дизайн, как интерфейс приводит к целевому действию или почему такое цветовое решение снизило показатель отказов. Уделяйте портфолио не меньше времени, чем основной работе. Тогда оно принесет новые масштабные проекты и нестандартные задачи.
Том Паркс: добавьте стильный и смелый ход в каждом проекте
Кто такой Том Паркс?
Том Паркс — UI-дизайнер и бренд-дизайнер. 9 лет опыта в диджитал-дизайне. Арсенал навыков Тома обширен: UI-дизайн, бренд-дизайн, дизайн интерфейсов, иллюстрация, UI-анимация.
Почему портфолио Тома клевое?
Каждый проект Тома обладает особенным характером и сделан со вкусом.
Пример портфолио UI-дизайнера Тома Паркса
Чему стоит поучиться у Бади Аббаса?
Том не боится смелых и обоснованных решений и уверен в том, что делает. Поглядите на динозаврика в одном из его проектов – он просто сделал его и все и смотрится клево, уникально и выделяет бренд в толпе конкурентов.
Что запомнить и взять на вооружение?
Убедительная типографика, смелая работа с пространством и образами, в меру анимаций — все это сделает ваш макет свежим, захватывающим и приятным для изучения.
Посмотреть пример портфолио →