Домашнее задание ЧАСТЬ2

межсезонная распродажа

выбрать программу

дней

до -70%

ДО 28 февраля

КУРС: ПРОФЕССИЯ «ВЕБ-ДИЗАЙНЕР»

ПРОГРАММЫ

КОНТАКТЫ

Собираем прототип
и рисуем первый экран сайта

ОНЛАЙН-ИНТЕНСИВ ПО ВЕБ-ДИЗАЙНУ

Домашнее задание: часть №2

Влад Федорин

Креативный директор MDA
Куратор курса:
Профессия: Веб-дизайнер

ПОДРОБНЕЕ О КУРСЕ

Сегодня вы:

Создадите прототип сайта

Соберете первый экран сайта в Figma

Создание прототипа

1. Создайте фрейм размером 1400х800 пикселей.
2. В пункте меню выберите инструмент текст. Курсором в виде плюса нажмите на фрейм и введите Логотип.

5. С зажатой клавишей Alt/Option скопируйте слово логотип и напишите цену.

3. В пункте меню выберите инструмент Rectangle и нарисуйте условный пункт меню. С зажатой клавишей Alt/Option скопируйте прямоугольник простым перетаскиванием и создайте условные пункты меню.

4. То же самое повторите с нижним блоком, после чего в пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте условный круг выбора цвета. Скопируйте еще два круга.

6. В пункте меню выберите инструмент Rectangle и нарисуйте прямоугольник. Поверх этого прямоугольника с зажатой клавишей Alt/Option скопируйте текст и напишите слово кнопка.

7. В пункте меню выберите инструмент Rectangle и нарисуйте условный прямоугольник, в котором будет картинка.

Создание первого экрана

1. Создайте фрейм размером 1400х800 пикселей.
2. В правой части меню в пункте Layout Grid выберите колонны (Columns), и задайте им следующие параметры: Count = 12, Margin = 80, выберите любой цвет.

8. Нарисуйте прямоугольник с размерами 700х800 пикселей и в параметре Fill выберите пипетку, после чего выберите необходимый цвет.
9. Поместите прямоугольник ниже всех на панели слоев, а также в правый угол на фрейме.

3. Из вашей папки перетащите в окно фигмы картинку с логотипом, выставив ее по левому краю сетки.
4. Далее, с помощью инструмента текст, создайте пункты меню.

5. Выделив все пункты меню, задайте им следующие настройки:
начертание = Regular, размер пунктов = 16.
6. В правом верхнем углу в панели меню выравниваем элементы относительно
друг друга.
7. В параметре More Options выберите пункт Tidy up, после чего в окне расстояний укажите число 80 (80 пикселей).

10. С зажатой клавишей Alt/Option скопируйте текст из пункта меню и напишите заголовок "Race max logic pro", задав ему необходимые параметры.
11. То же самое, проделайте с текстом "Артикул: 000000001"

12. В пункте меню выберите инструмент Ellipse и с зажатой клавишей Shift нарисуйте круг, после чего скопируйте еще два. Для первого круга в параметре Fill выберите белый цвет, а также добавьте параметр Stroke (обводка) шириной 2 пикселя черного цвета. Добавьте цвет для остальных кругов.
13. Выровниваем по левому краю.

14. С помощью инструмента Rectangle нарисуйте прямоугольник размером 400х84 пикселя и покрасьте его в черный цвет.
15. Скопируйте текст и напишите "Добавить в корзину", выбрав для него белый цвет. Поместите текст на панели слоев выше слоя с прямоугольником. Выравниваем по правому краю.

16. Скопируйте текст и напишите "12 933", после чего задайте ему необходимые параметры. То же самое, проделайте для слова "Рублей".
17. Выравниваем по сетке.

18. Из вашей папки перетащите в окно фигмы картинку с кроссовком, с зажатой клавишей Shift, вы можете поменять ее размеры, потянув за ее углы.
19. Поместите картинку по центру.

20. В пункте меню выберите инструмент Ellipse и нарисуйте овал, в параметре Fill придайте ему более серый оттенок.
21. Далее в параметре Effects выберите эффект Layer Blur со значением 50, после чего в параметре Fill в окне с процентами задайте прозрачность заливке на 49%.
22. Установите слой с тенью на панели слоев ниже слоя с кроссовком.

23. Скопируйте текст и напишите слово "krossovki". Задайте ему следующие настройки: шрифт = 200 пунктов, межбуквенное расстояние = 19,5%, буквы заглавные, цвет серый.
24. Скопируйте этот текст и напишите слово "povsednevnie".
25. Расположите текст на панели слоев под слоями с картинкой кроссовка и его тенью