Дизайн сайта, ДЗ из ВУЗа по дизайну в figma. Продукт: Ход работы: Создать набор из 6 иконок на одну из заданных тем: • Свадьба • Хэллоуин • Рождество • Кулинария • Образование • Медицина • Космос • Кофе • Ресторан • Спорт • Путешествия • Косметология Условия: 1. Разместить все иконки на одном артборде. 2. Размер документа 616х440 пикселей, сделать сетку в 22 пикселя, по ней выравнивать иконки. 3. Иконки лучше сделать плоскими. Не добавлять объем и перспективу. 4. Иконки должны быть на одну тему, которая легко читается. Не смешивайте тематики. 5. Используйте 1 или 2 толщины обводки. Обе толщины должны присутствовать во всех иконках. 6. Иконки должны быть выполнены в 1-2 цветах. Этапы работы: 1. Выбрать инструмент frame и создать рабочую область: 2. Выставить в рабочей области нужные размеры: 3. При помощи геометрических фигур и линий нарисовать набор иконок на выбранную из списка тематику. 4. Экспортировать в формате jpeg. Практическая работа 2 «Исследование для проекта» Количество часов: 4 Цель работы: провести предпроектное исследование для разработки дизайна лендинга. Необходим текстовый редактор, например Microsoft Word. Ход работы: 1. Выбрать тему проекта (переделать сайт, не брать крупные онлайн-магазины) 2. Написать цель вашего проекта 3. Написать задачи вашего проекта 4. Написать информацию о компании 5. Описать аудиторию проекта (в общих чертах: пол, возраст, доход, проживание, работа) 6. Описать аудиторию при помощи метода персонажей 7. Описать аудиторию методом jobs to be done 8. Описать прямых конкурентов компании 9. Описать косвенных конкурентов компании 10. Подобрать сайты конкурентов и описать их преимущества и недостатки (не менее 6 сайтов) Практическая работа 3 «Информационная архитектура» Цель работы: проанализировать структуру выбранного проекта и построить информационную архитектуру лендинга. Оборудование: Программное обеспечение для составления блок-схем, графиков. Например XMind, Draw.io. Ход работы: 1. Создание информационной архитектуры – определить суть проекта, его разделы. 2. Для разработки используйте иерархическую модель данных 3. Прорабатывайте сначала разделы верхнего уровня, постепенно спускаясь до уровня ниже. Или по разделам – сначала один, потом другой. 4. Загрузить схему в формате pdf. Практическая работа 4 «-» Количество часов: 2 Цель работы: разработать Wireframe главной страницы лендинга. Ход работы: 1. Сделать макет wireframe главной страницы десктопной версии по принципам, которые были объяснены на практическом занятии, как показанное на рисунке 24. Wireframe должен включать header со всеми разделами сайта, которые были прописаны в архитектуре. Должны быть показаны все кнопки, личный кабинет, если есть. Параметры wireframe: • Фрейм размерами: 1920 (ширина), высоту можно поставить примерно 3000, потом уменьшить, либо увеличить. • Настроить сетку в 12 колонок. По ширине сетка должна быть размером подходящим для мониторов ноутбука – примерно 1300, весь важный контент, а именно заголовки, основной текст, карточки товаров, фотографии – все это должно быть выровнено по сетке и не выходить за нее. • Цветной фон, фоновые фотографии, графика – это уже размещается по размерам фрейма, то есть по всей ширине. • Gutter между колонками 20-30 • Оптимальная высота главной страницы лендинга для десктопных браузеров — в районе 600-800px, Оптимальная высота header 100-120px • Весь текст должен быть таким, каким он будет на сайте. Графику показать при помощи геометрических фигур. Также должен быть макет всех всплывающих окон. • Цвет всего макета - серый. Рекомендации: • Если изображение овальной формы (либо похожей на овал), лучше текст располагать слева, а его справа. • В header пункты меню лучше никак не выделять, просто оставить текстом. • Не располагайте много текста на главной странице, можно ограничиться можно только заголовком. • Сделайте кнопку заказать/зарегистрироваться, то есть кнопку с каким-то целевым действием, если это подходит теме сайта. 2. Загрузить выполненную работу на сайт в формате pdf. Практическая работа 5 «Wireframe остальных блоков» Количество часов: 6 Цель работы: разработать Wireframe остальных блоков лендинга, сучётом правил гештальт композиции. Оборудование: Компьютер и программа Figma. Также можно взять лист бумаги и карандаш, чтобы сделать предварительные наброски. Ход работы: 1. Необходимододелать wireframe оставшихся блоков. Всех блогов вместе с главным экраном и футером должно быть не менее 5 блоков, можно больше. Так же необходимо нарисовать всплывающие окна. На рисунке 45 приведёт пример того, как должна быть выполнена работа. Практическая работа 6 «Wireframe для адаптива (под мобильную версию)» Количество часов: 6 Цель работы: разработать Wireframe под мобильные устройства. Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе десктопной версии сделать адаптивную версию wireframes. Для этого выбирается фрейм для iphone 14, и настраивается сетка по параметрам как на рисунке 48, а именно: • 8 колонок • Margin 16 • Gutter 10 2. Далее переставляются все элементы в варфрейме по следующим принципам: • Сделать поля меньше • Если что-то не помещается, то уменьшить • Контент перемещается вниз налево • Уменьшаем элементы Практическая работа 7 «Дизайн десктопной и мобильной версий» Количество часов: 4 Цель работы: создать дизайн для десктопной и мобильной версии лендинга Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе референсов и информации полученной на лекциях сделать итоговый дизайн десктопной и мобильной версии лендинга. Подобрать цвета и фотографии. Требования: • На весь макет не должно быть более 4 цветов • Все обводки должны быть одной толщины • Обработка фотографий должна быть одинаковой (по яркости, контрастности, насыщенности и общей цветовой гамме) 2. Готовую работу загрузить на портал в формате pdf или ссылкой на Figma. Практическая работа 8 «Итоговая презентация по сайту» Количество часов: 4 Цель работы: создать презентацию по проекту и подготовиться к выступлению с докладом Оборудование: Компьютер и программа Figma или Microsoft PowerPoint. Ход работы: 1. Необходимо подготовить презентацию выполненной работы в любой доступной программа для презентаций. 2. В презентации необходимо осветить все этапы проваленной работы. Стрцутура презентации должна иметь следующие обязательные этапы. • Титульный лист (ФИО, название проекта) • Исследование • Архитектура сайта • Wireframes (адаптив и десктопная версия) • Итоговый дизайн (адаптив и десктопная версия). Объём работ: Ход работы: Создать набор из 6 иконок на одну из заданных тем: • Свадьба • Хэллоуин • Рождество • Кулинария • Образование • Медицина • Космос • Кофе • Ресторан • Спорт • Путешествия • Косметология Условия: 1. Разместить все иконки на одном артборде. 2. Размер документа 616х440 пикселей, сделать сетку в 22 пикселя, по ней выравнивать иконки. 3. Иконки лучше сделать плоскими. Не добавлять объем и перспективу. 4. Иконки должны быть на одну тему, которая легко читается. Не смешивайте тематики. 5. Используйте 1 или 2 толщины обводки. Обе толщины должны присутствовать во всех иконках. 6. Иконки должны быть выполнены в 1-2 цветах. Этапы работы: 1. Выбрать инструмент frame и создать рабочую область: 2. Выставить в рабочей области нужные размеры: 3. При помощи геометрических фигур и линий нарисовать набор иконок на выбранную из списка тематику. 4. Экспортировать в формате jpeg. Практическая работа 2 «Исследование для проекта» Количество часов: 4 Цель работы: провести предпроектное исследование для разработки дизайна лендинга. Необходим текстовый редактор, например Microsoft Word. Ход работы: 1. Выбрать тему проекта (переделать сайт, не брать крупные онлайн-магазины) 2. Написать цель вашего проекта 3. Написать задачи вашего проекта 4. Написать информацию о компании 5. Описать аудиторию проекта (в общих чертах: пол, возраст, доход, проживание, работа) 6. Описать аудиторию при помощи метода персонажей 7. Описать аудиторию методом jobs to be done 8. Описать прямых конкурентов компании 9. Описать косвенных конкурентов компании 10. Подобрать сайты конкурентов и описать их преимущества и недостатки (не менее 6 сайтов) Практическая работа 3 «Информационная архитектура» Цель работы: проанализировать структуру выбранного проекта и построить информационную архитектуру лендинга. Оборудование: Программное обеспечение для составления блок-схем, графиков. Например XMind, Draw.io. Ход работы: 1. Создание информационной архитектуры – определить суть проекта, его разделы. 2. Для разработки используйте иерархическую модель данных 3. Прорабатывайте сначала разделы верхнего уровня, постепенно спускаясь до уровня ниже. Или по разделам – сначала один, потом другой. 4. Загрузить схему в формате pdf. Практическая работа 4 «-» Количество часов: 2 Цель работы: разработать Wireframe главной страницы лендинга. Ход работы: 1. Сделать макет wireframe главной страницы десктопной версии по принципам, которые были объяснены на практическом занятии, как показанное на рисунке 24. Wireframe должен включать header со всеми разделами сайта, которые были прописаны в архитектуре. Должны быть показаны все кнопки, личный кабинет, если есть. Параметры wireframe: • Фрейм размерами: 1920 (ширина), высоту можно поставить примерно 3000, потом уменьшить, либо увеличить. • Настроить сетку в 12 колонок. По ширине сетка должна быть размером подходящим для мониторов ноутбука – примерно 1300, весь важный контент, а именно заголовки, основной текст, карточки товаров, фотографии – все это должно быть выровнено по сетке и не выходить за нее. • Цветной фон, фоновые фотографии, графика – это уже размещается по размерам фрейма, то есть по всей ширине. • Gutter между колонками 20-30 • Оптимальная высота главной страницы лендинга для десктопных браузеров — в районе 600-800px, Оптимальная высота header 100-120px • Весь текст должен быть таким, каким он будет на сайте. Графику показать при помощи геометрических фигур. Также должен быть макет всех всплывающих окон. • Цвет всего макета - серый. Рекомендации: • Если изображение овальной формы (либо похожей на овал), лучше текст располагать слева, а его справа. • В header пункты меню лучше никак не выделять, просто оставить текстом. • Не располагайте много текста на главной странице, можно ограничиться можно только заголовком. • Сделайте кнопку заказать/зарегистрироваться, то есть кнопку с каким-то целевым действием, если это подходит теме сайта. 2. Загрузить выполненную работу на сайт в формате pdf. Практическая работа 5 «Wireframe остальных блоков» Количество часов: 6 Цель работы: разработать Wireframe остальных блоков лендинга, сучётом правил гештальт композиции. Оборудование: Компьютер и программа Figma. Также можно взять лист бумаги и карандаш, чтобы сделать предварительные наброски. Ход работы: 1. Необходимододелать wireframe оставшихся блоков. Всех блогов вместе с главным экраном и футером должно быть не менее 5 блоков, можно больше. Так же необходимо нарисовать всплывающие окна. На рисунке 45 приведёт пример того, как должна быть выполнена работа. Практическая работа 6 «Wireframe для адаптива (под мобильную версию)» Количество часов: 6 Цель работы: разработать Wireframe под мобильные устройства. Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе десктопной версии сделать адаптивную версию wireframes. Для этого выбирается фрейм для iphone 14, и настраивается сетка по параметрам как на рисунке 48, а именно: • 8 колонок • Margin 16 • Gutter 10 2. Далее переставляются все элементы в варфрейме по следующим принципам: • Сделать поля меньше • Если что-то не помещается, то уменьшить • Контент перемещается вниз налево • Уменьшаем элементы Практическая работа 7 «Дизайн десктопной и мобильной версий» Количество часов: 4 Цель работы: создать дизайн для десктопной и мобильной версии лендинга Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе референсов и информации полученной на лекциях сделать итоговый дизайн десктопной и мобильной версии лендинга. Подобрать цвета и фотографии. Требования: • На весь макет не должно быть более 4 цветов • Все обводки должны быть одной толщины • Обработка фотографий должна быть одинаковой (по яркости, контрастности, насыщенности и общей цветовой гамме) 2. Готовую работу загрузить на портал в формате pdf или ссылкой на Figma. Практическая работа 8 «Итоговая презентация по сайту» Количество часов: 4 Цель работы: создать презентацию по проекту и подготовиться к выступлению с докладом Оборудование: Компьютер и программа Figma или Microsoft PowerPoint. Ход работы: 1. Необходимо подготовить презентацию выполненной работы в любой доступной программа для презентаций. 2. В презентации необходимо осветить все этапы проваленной работы. Стрцутура презентации должна иметь следующие обязательные этапы. • Титульный лист (ФИО, название проекта) • Исследование • Архитектура сайта • Wireframes (адаптив и десктопная версия) • Итоговый дизайн (адаптив и десктопная версия). Техническое задание есть.