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