Оформление презентации лонгрида | Дизайн и продвижение | 2 курс
Рекомендации по визуальному и техническому оформлению проектов 1 модуля 2 курса направлений «Дизайн и программирование» и «Дизайн и продвижение цифрового продукта».
Самое важное: формат проектов для витрины Школы Дизайна отличается от студенческого портфолио — эти проекты практически не включают этапы разработки, а переходят сразу к сути.
I. Основы (обложка, фон, выкладка)
Обложка
Фон у платформы очень светлый, и белые обложки на нем будут смотреться не так выигрышно, как контрастные.
Ситуация: у лонгрида белый цвет доминирующий. Решение — инвертировать обложку/сделать на полтона темнее. Можно добавить окантовку, чтобы очертить границы обложки вашего проекта.
Проверяйте обложку на контрастность и привлекательность. Обложка — лицо проекта.
Фон
Слайды должны быть контрастны фону портфолио, иначе будут «выпадать» и портить композицию.
Фоны у обложки и портфолио отличаются, но из-за низкого конраста изображение кадрируется не очень симпатично. Следует следить за такими нюансами.
Есть контраст — глазам несложно сканировать контент.
Выкладка
Важно поддерживать логичную выкладку контента для поддержания композиции. Плиточная выкладка делает проект стабильным, даже если присутствуют слайды без фона.
Хорошие примеры, изображения и текст чередуются. Контрастный фон у текстовых блоков хорошо поддерживают композицию.
Неудачный выбор выкладки. Много пустого пространства, белый фон у мокапа создает «дыру».
II. Контент (статика, динамика, мокапы)
Самое важное
Слайды должны быть динамичными и увлекательными — привлекающими внимание. Избегайте пустот и «дырок», но и не переусердствуйте с деталями — может получиться визуальный шум. Важно четко определить что и зачем вы показываете.
Статика: одиночные изображения, слайдеры, плитка
Что это может быть
Наша визуальная база: скриншоты, мокапы, мобильные версии, рендеры, графические решения.
На слайды можно добавить текст, если он будет интересно внедрен в изображение и написан фирменным шрифтом.
Сами слайды могут быть оформлены различными способами: в виде слайдера, плитки или как самостоятельное изображение. Всё зависит от вашей задумки и ценности контента.
Показывайте самые яркие и креативные фрагменты лонгрида крупно
В начале проекта можно показать обложку лонгрида, либо сделать горизонтальную обложку специально для портфолио.
Плитка — можно показать фрагменты из лонгрида (из референса — интерактивный кадр и паттерн)
К примеру ниже есть два пойнта.
Пойнт 1: слайдером можно показать несколько похожих фрагментов из лонгрида (либо сам лонгрид, разбитый на части);
Пойнт 2: В целом, какие-то фрагменты можно показать подобным столбиком из нескольких кадров. Важно чтобы фон изображения был контрастным фону портфолио.
Если показываете подобные детали — оформляйте контент внутри слайда аккуратно и интересно.
К примеру ниже — показывайте то, что сделали сами. Не добавляйте чужие картинки для создания нужной атмосферы, лучше покажите графику или добавьте ссылку на плейлист с нужным настроем.
Изображение 1 — мудборд; изображение 2 — графика в лонгриде.
Динамика: видео и gif
Видео и гифки помогают уменьшить длину скучного скролла одинаковых элементов, позволяют целостно показать приемы.
Что это может быть
Анимации на сайте; демонстрация отдельных функций; видео на сайте; рендеры; анимированные мокапы.
Видео добавляем через Kinescope, Gif — как изображение.
Несколько экранов — можно слайдером
Плитку можно использовать в случае, если у Gif низкое разрешение
Можно показать как работает стиль
Добавляйте фрагменты анимашек на цветных фонах!
Про мокапы
Важно
Выбирайте качественные и атмосферные мокапы для демонстрации интерфейса. Можете показывать не только цифровые носители, но и физические — плакаты, сувенирная продукция и т. д.
Вписывайте мокап в «сущность» лонгрида
Не забывайте про адаптивы!
Замечание: на примерах выше мы видим три почти одинаковых мокапа ноутбуков, основные различия — анимации на фоне.
Старайтесь выделяться среди других проектов: берите неожиданные мокапы, рисуйте их, генерируйте, фотографируйте реальные устройства в интересном сеттинге.
Носители соответствуют настроению и тематиике лонгрида.
Технические рекомендации
Для изображений JPEG:
Размер файла — до 150 MB
от 1860×2631 до 3720×5262
Для GIF
Размер файла — до 10 MB
от 1860×2631 до 3720×5262
III. Ссылки
Добавляйте все, что успели собрать за модуль:
1. Ссылка на сайт; 2. Ссылка на скринкасты; 3. Дополнительные материалы (стикеры, мерч).
Для оформления ссылок используйте функцию «Кнопка» — так, эта часть проекта будет выглядеть целостно.
