Всем привет! Сегодня я покажу вам, как сделать вот такой дизайн сайта в двух вариантах. Этот урок создан для людей обладающих базовыми навыками работы в Figma.
Итак, приступим!
1. Для начала создаем сетку, по которой будем работать, она нужна для упрощения работы.
2. В каждом сайте присутствует Header - область в верху страницы, на которой находятся контакты, логотип, кнопки. В нашем случае рисуем логотип (так как это не реальный заказ) и создаем меню-бургер.
3. Пишем "Получи обмерочный чертеж заполнив форму." шрифтом Montserrat, а потом перетаскиваем под Header.
4. Под главной надписью обязательно пишем подробности "Заполни форму и оформи заказ за несколько кликов".
5. Рисуем голубой прямоугольник и максимально скругляем у нег углы. В Figma есть различные эффекты, я выбрал "Тень", цвет также синий для создания эффекта свечения, которое привлекает у покупателя внимание к кнопке.
6. С помощью инструмента "Перо" я начертил две линии и расположил их рядом друг с другом. Линии нужны для плавного перехода между картинкой и информационной частью.
7. Чтобы картинка была интереснее я создал для нее элемент, который представляет собой мини-портфолио и просто фишку.
На этом мой первый вариант был готов!
Второй вариант отличается, тем что я удалил картинку и линии. А в правой части расположил векторный элемент с тенью. Заменил меню-бургер на обычное меню.