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