Портфолио дизайнера

Портфолио
Послужной список дизайнера, коллекция презентаций
его работ. Большинство дизайнеров размещают
портфолио на behance.net и dribbble.com.

Актуальное портфолио отображает:

Уровень дизайнера как профессионала.

Стабильность качества его работы.

Прогрессирует дизайнер или нет.

 Беханс — место
демонстрации
подробных
презентаций
behance.net работ
 Дрибббл —
место для
«шотов» —
коротких ярких
dribbble.com кусочков работ
Архив с несколькими картинками — штука, которая
отпугнёт кого угодно.

Никогда не делайте портфолио таким образом

Что такое «кейс»?
Это презентация одной отдельно взятой работы
дизайнера в виде красочного отчёта, в котором
отражаются ключевые моменты.

Чаще всего, развернутые работы на behance.net

называют кейсами.
Кейсы

дизайнера

на Behance

behance.net/ergemla
 Пример кейса на Behance

behance.net/gallery/88591359/Space-Projects-PART-III
 Хорошее портфолио это...

Несколько хороших кейсов, ... ... а не десятки плохих

Структура кейса
на Behance
О целях кейса
Приступая к работе над кейсом, максимально важно
обозначить конкретную цель.

Задайте себе вопрос «что я хочу получить от кейса?».

От ответа будет зависить содержание кейса.
Хотите набрать много «лайков»?

Тогда ориентируемся на таких же как мы —

на дизайнеров. В таком кейсе больше

внимания уделяется тому, что могут

оценить дизайнеры: визуальные приёмы,

акценты на технических моментах,

организация дизайн-системы и так далее.

PS: для этого больше подойдёт Dribbble

Хотите получить работу?

Такие кейсы создаются для потенциальных

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

Составьте план в виде ментальной карты. Miro отлично

для этого подойдёт.
Возьмите за основу структуру из 3 частей Емкое начало, объясняет
что за проект, и для чего
нужен.
Вступление

Разворачивание мысли
вступления, подробности
о проекта.

Основная часть Постепенный рассказ

истории, для своей
целевой аудитории

«Выстрел из всех орудий»:

красивый мокап
с главной «фишкой»
Кульминация и логическим итогом.
Продолжите вайрфреймом
и мудбордом
Перенесите план на вайрфрейм, оцените примерный
объём работ и при необходимости добавьте или удалите
элементы.

Вайрфрейм подскажет вам, на какие блоки из кейсов

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

Создайте мудборд, чтобы определиться со стилем

будущего кейса.
Какой должен быть
объём кейса?
Около 5 минут вдумчивого, с прочтением
текстов и изучением деталей.

Около 40-60 секунд


для поверхностного изучения.
Вступление
Крупный и понятный заголовок.
Одно изображение с фокусом на чём-либо.
Выразительный фон.
Стремитесь сделать «постер для фильма».
behance.net/gallery/86966587/ZOOP
behance.net/gallery/87081313/Game-Portal
behance.net/gallery/88381719/Music-player-design
Основная часть
Наполнение основной части зависит от целей кейса. Но помните,
универсального решения не существует, это рекомендации-)

Перемешайте блоки в нужной для вас пропорции и вперёд!

Для «лайков»: Для клиентов:

Мокапы страниц Мокапы станиц
Цвет Основные функций
Иконки Цель проекта
Элементы интерфейса Персонажи
UI Kit Сценарии + User Flow
Сетку ИА
Организацию проекта Вайрфреймы
Пример кейса под аудиторию дизайнеров

behance.net/gallery/87357367/Death-Stranding
 Пример кейса под аудиторию заказчиков

behance.net/gallery/70595543/YBC-Mobile-Application
behance.net/gallery/85732073/EMART-UXUI-RENEWAL
Кульминация
Подкрепите впечатления масштабом: покажите
все страницы в одном блоке.
Завершите кейс на высокой ноте: покажите один
яркий образ (страницу) которая подведёт итог
и поблагодарите зрителя.
Напишите что вы готовы к сотрудничеству.
Ненавязчиво попросите лайк.
 Пример демонстрации масштаба

behance.net/gallery/84082485/UIUX-Smart-Pharmacy-app
behance.net/gallery/86984497/Bloomberg-Futures
... и обложка проекта!
Разрабатывайте её уже после того, как кейс будет
готов, и у вас уже будет много граф. материала.
Обложка должна выражать общую эмоцию проекта.
1 обложка = 1 явный фокус внимания.
Элемент, на котором заострятся внимание должен
иметь крупный масштаб.
Пример удачной/неудачной фокусировки
 Размеры изображений
для кейса Behance
behance.net/gallery/60795221/Behance-Dimensions-2018-Update
Советы
и художественные
приёмы при оформлении
кейса
Ищите вдохновения
у лучших
Анализируйте устройство трендовых кейсов.

Изучите: повествование, визуальные приёмы,

композицию блоков, описательные тексты и так далее.

Это не призыв к копированию, а совет по поиску

удачных решений и тренировке глаза.

Пример настройки
фильтра Behance
Изображения > текст
Стремитесь показать вашу работу, а не рассказать о ней.

Одно изображение информативнее, чем десятки слов

(и куда более проще для восприятия). Поэтому, объём
изображений должен быть намного выше объёма текста.

Старайтесь избегать длинных текстов, используйте

их как дополнение к визуальной части.
behance.net/gallery/89708135/Aktivo-Score-App-Experience
behance.net/gallery/86966587/ZOOP
Экспериментируйте
с композицией
Оставьте строгие однотипные колонки для новостных
сайтов-) У кейса нет ограничений вёрстки, поэтому
в нём можно реализовать самые смелые идеи.
behance.net/gallery/89586949/Firefly-Smart-Home-App
behance.net/gallery/85074747/Meat-Delivery-App-UIUX
Контраст во всём
Множество произведений культуры основано
на контрастах: колобок и лиса, красавица и чудовище,
Бэтмен и Джокер и так далее... это проявляется
как в контрасте характеров, так и в визуальных образах.
Контраст упрощает восприятие, выделяет добро и зло,
день и ночь, большое и малое.

Используйте контраст в кейсе, передайте динамику,

расскажите историю за счёт чередования больших
и малых блоков, сложных и простых, насыщенных
и разряженных...
behance.net/gallery/89548717/Habitat-Home-Control-App
behance.net/gallery/88616919/MIUI-11-Always-On-Display
Покажите макет
на устройстве
Точно также, как одежда лучше смотрится на макенене,
чем на вешалке, так и макет воспринимаются лучше
в рамках устройства, под которое его проектировали.

Старайтесь размещать макеты в окошках браузера,

в ноутбуках, на смартфонах и так далее.
behance.net/gallery/89538869/Band-Website-Design
behance.net/gallery/88649239/Onboarding-Illustrations-3d
getcover.ru
mocover.net
artboard.studio
Настройте тень
Умение «понимать» тени — важный навык дизайнера.

Как правило, мелкая и жёсткая тень под макетом

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

Используйте крупные ненавязчивые тени, которые будут

обеспечивать контрастность, а не наоборот.
behance.net/gallery/89529671/Pause
behance.net/gallery/69044267/KaspiTravel
Не показывайте всё подряд
Качество, и только потом количество.

Большой объём работ — штука, которая может здорово

подкрепить впечатления, но одним объёмом создать
хорошее впечатление очень сложно.

Стремитесь создавать впечатления самыми важными

вещами в основной части кейса, покажите ключевые
экраны, и только в конце увеличьте значимость работ,
показав в одном блоке весь масштаб.
behance.net/gallery/89574799/She-Said-Where
behance.net/gallery/66745367/Polfendo-iOS-Android-App
Внесите разнообразие,
добавив глубины
Один из частых приёмов сделать красивый кейс —
применить эффект размытия элементов над и под
основным слоем кейса, имитируя эффект фокусировки
глаза на объектах разной удалённости.
behance.net/gallery/81869439/Reliefy-Medical-Project
Изометрия
Ещё один частый приём — показывать макеты
в изометрии. Это один из самых быстрых способов
сделать симпатичную картинку из «средненького»
материала.
behance.net/gallery/60474841/Dronhub-Application-and-website
Ненавязчиво попросите лайк-)

Мало кому нравятся просьбы делать что-то против воли.

Однако мягко напомнить об этом можно и нужно!

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

А вот слишком активные просьбы поставить лайк

раздражают всех. Также не надо просить поставить лайк
своей работе в комментариях к чужим кейсам.
behance.net/gallery/89493061/ELO-%28Liquid-Type-Medicine-Bottle
behance.net/gallery/86572373/Must-Movie-App
Напишите что вы готовы
к сотрудничеству
А почему бы и нет?) Даже если вы не находитесь
в активном поиске прямо сейчас, то в будущем кейс
может вывести вас на перспективное рабочее
предложение.
behance.net/gallery/75148929/Cradle
Домашнее задание
Оформить кейс, подготовиться к защите

Работать. Эффективно и весело!

Заходить в гости к UX School!