Создание нового проекта
Создайте новый проект. На вкладке с командами нажмите на плюсик и выберите «Design file». Назовите проект «Web Site Design».
Создание фрейма и сетки
Создайте фрейм для размещения элементов дизайна. Вместо шаблона iPhone 11 Pro Max выберите десктопное разрешение, например, 1440×1024. Переименуйте фрейм в «main».
Добавьте систему сеток. Установите 12 столбцов (стандарт Bootstrap). Укажите отступы по бокам, чтобы избежать наложения контента на края экрана. Измените цвет сетки на ненавязчивый серый.
Создание шапки сайта
Создайте шапку сайта. Добавьте иконку, например, скачав её с Iconfinder (иконка, связанная с книгами). Увеличьте и переименуйте иконку (например, «logo»).
Добавьте название сайта – например, «Edu» (веб-сайт с курсами по дизайну). Выберите шрифт (например, Source Code Pro), сделайте логотип жирным, увеличьте его размер (например, до 90 pt) и выберите цвет (тёмно-синий). Уменьшите размер иконки (например, до 68×68 px) и расположите её рядом с названием.
Создание меню навигации и добавление фонового изображения
Добавьте меню навигации с пунктами: «Главное», «Курсы», «Про нас», «Контакты». Измените цвет текста на тёмно-синий, сделайте его полужирным и уменьшите размер (например, до 25 pt). Расположите пункты меню на одной линии с логотипом, сохраняя равные отступы. Сгруппируйте элементы меню в объект «Навигация», а всю шапку – в объект «Верхняя шапка».
Добавьте фоновое изображение (например, векторное изображение по запросу «programming» с freepik.com). Разместите его под шапкой. Немного сместите навигацию влево, чтобы она не перекрывала крайнюю колонку. Выровняйте по высоте логотип и изображение. Выберите для иконки тёмно-синий цвет.
Текст призыва к действию и кнопка
Добавьте текст призыва к действию (например, «Хотите изучить дизайн?») и кнопку. Создайте два прямоугольника, один поверх другого, немного сдвинутый вниз, для эффекта наведения. Добавьте текст на кнопку (например, «Вникнуть»). Установите цвет текста, размер (например, 35 pt) и шрифт (Black). Добавьте заполнитель текста (Lorem Ipsum) ниже, измените его размер и ширину (например, 432 px). Измените текст заголовка на «Хотите стать дизайнером?». Создайте отдельные квадраты с цветами для удобства выбора.
Группировка элементов и добавление фоновых иконок
Сгруппируйте кнопку, блок призыва к действию и цвета. Выровняйте элементы навигации по одной линии с логотипом.
Добавьте хаотично расположенные иконки на задний фон (например, картинки, связанные с образованием и дизайном с Iconfinder). Измените их размер, цвет (серый) и расположите их на заднем фоне. Сгруппируйте иконки в отдельный объект.
Создание блоков с характеристиками проекта
Создайте блоки, описывающие характеристики проекта. Воспользуйтесь инструментом «Ручка», создав абстрактные фигуры. Добавьте текст с короткими словами (например, «Быстро», «Круто», «Хорошо»). Установите цвет текста, размер шрифта (например, 40 pt) и шрифт (Black). Ограничьте перемещение иконок при изменении размеров фрейма.
В этом уроке вы создали базовый дизайн веб-страницы. Дальнейшая работа будет основываться на тех же принципах: добавление новых секций, иконок и текста.