Рекомендации по визуальному и техническому оформлению проектов 1 модуля 2 курса направления «Дизайн и программирование».
Самое важное: формат проектов для витрины Школы Дизайна отличается от студенческого портфолио — эти проекты практически не включают этапы разработки, а переходят сразу к сути.
I. Основы (обложка, фон, выкладка)
Обложка
Фон у платформы очень светлый, и белые обложки на нем будут смотреться не так выигрышно, как контрастные.
Ситуация: у лонгрида белый цвет доминирующий. Решение – инвертировать обложку/сделать на полтона темнее. Можно добавить окантовку, чтобы очертить границы обложки вашего проекта.
На красивую, яркую обложку сразу хочется кликнуть
Фон
Слайды должны быть контрастны фону портфолио, иначе будут «выпадать» и портить композицию.
Правильно, если фон контрастен слайдам.
Выкладка
Важно поддерживать логичную выкладку контента для поддержания композиции. Плиточная выкладка делает проект стабильным, даже если присутствуют слайды без фона.
II. Контент (статика, динамика, мокапы)
Самое важное
Слайды должны быть динамичными и увлекательными — привлекающими внимание. Избегайте пустот и «дырок», но и не переусердствуйте с деталями – может получиться визуальный шум. Важно четко определить что и зачем вы показываете.
Статика: одиночные изображения, слайдеры, плитка
Что это может быть
Наша визуальная база: скриншоты сайта, графика, мокапы, прочие доп. материалы (стикеры, мерч).
На слайды можно добавить текст, если он будет интересно внедрен в изображение и написан фирменным шрифтом.
Сами слайды могут быть оформлены различными способами: в виде слайдера, плитки или как самостоятельное изображение. Всё зависит от вашей задумки и ценности контента.
В начале презентации можно добавить горизонтальную обложку
Добавляйте увлекательные динамичные экраны
Подсказка — справа снизу можно добавить паттерны из графического набора
Есть дополнительные материалы — показываем. В описании можно добавить ссылку на стикеры.
Карточки со статьями можно показать без привязки к странице
Аналогично про посты в социальных сетях
Карту сайта и пободные материалы «за кадром» можно оформить в слайдер. Так и покажете свою работу, и не отвлечете пользователя от красивых картинок с дизайном
Плохо — не нужно «резать» устройства, если вы показываете длинный экран. Лучше сделать его еще длиннее, но показать все девайсы и контент целиком.
Важно: лучше избегать колонтитулов. так как мы скроллим призентацию сверху вниз, колонтитулы могут выглядеть странно.
Напоминание — колонтитулы лучше убирать. Если вам сложно красиво оформить блок «элементы стиля», пробуйте размещать контент в отдельных плитках.
Например, как тут.
Динамика: видео и gif
Видео и гифки помогают уменьшить длину скучного скролла одинаковых элементов, позволяют целостно показать приемы.
Что это может быть
Анимации на сайте; демонстрация отдельных функций; видео на сайте; рендеры; анимированные мокапы.
Видео добавляем через Kinescope, Gif – как изображение.
Красивый скринкаст главной страницы — видно и стиль и подход к анимациям
Фрагменты интерфейса сайта — можно отдельно, или в мокапе
Хорошо — скринкаст с конкретным сценарием
Если есть интерфейс браузера — без лишних вкладок
В оригинальном проекте цвет фона портфолио такой же, как и мой. При условии использования широкого формата ход с «прозрачным» фоном может выглядеть уместно, иначе мы наблюдаем «дырки» в слайде
