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