Оформление презентации одностраничного сайта | 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. Дополнительные материалы (стикеры, мерч).
Для оформления ссылок используйте функцию «Кнопка» — так, эта часть проекта будет выглядеть целостно.
