Создание дизайна сайта (лендинг) в Figma с нуля | Практика, этапы работы / Landing Page в Figma

• Евгений приветствует зрителей и объясняет, что видеоурок посвящен разработке дизайна сайта с квадрокоптерами.  

• Создается фрейм с координатами 0, 0, шириной 1920 и высотой 3000 пикселей.  

• Устанавливается четырехколоночная сетка для выравнивания контента.  

• Для создания отступов можно использовать математические формулы или значения.  

• Для скрытия колонок используются направляющие.  

• Сайт будет состоять из шапки, основного контента и подвала.  

• Шапка создается с помощью фрейма, задается высота и ширина.  

• Для удобства изменения дизайна сайта используются стили.  

• Создаются квадратики для каждого цвета, которые затем сохраняются как стили.  

• Переменные используются для изменения цветов, что упрощает процесс.  

• В шапке размещаются три элемента: меню, логотип и кнопка для звонка.  

• Создаются отдельные блоки для меню и блоков с обновлениями и выбором модели.  

• Текст выравнивается по центру и задается отступ между элементами.  

• Текстовые элементы объединяются в группы и задаются отступы.  

• Кнопка для звонка выравнивается по центру шапки.  

• Логотип выбирается с помощью плагинов и задается его размер и цвет.  

• Логотип выравнивается по центру, задаются стили для заголовков и текста.  

• Создается основной фрейм для размещения всех блоков.  

• Задается заголовок первого уровня и расстояние между элементами.  

• Выбирается изображение и задается его размер.  

• Создается кнопка с текстом и задается стиль для текста.  

• Кнопка выравнивается и задается расстояние между элементами.  

• Кнопка выравнивается и задается стиль для текста.  

• Текст в кнопке задается заглавными буквами.  

• Стиль для текста изменяется для соответствия содержимому.  

• Текст в кнопке автоматически становится заглавными буквами.  

• Для изменения стиля текста нужно изменить фрейм.  

• Важно, чтобы расстояние между элементами было одинаковым.  

• Заголовки должны быть заглавными буквами.  

• Текст "Обновление" выравнивается по центру.  

• Важно задать отступ и выровнять текст относительно фрейма.  

• Текст и картинки должны быть выровнены.  

• Рекомендуется использовать прозрачные фоны для блоков.  

• Важно задавать одинаковые расстояния между элементами.  

• Создается фрейм для третьей секции.  

• Задается заголовок второго уровня и выравнивается текст.  

• Важно учитывать расстояние между элементами.  

• Картинки выравниваются и группируются.  

• Используются группы для выравнивания и стилизации.  

• Задаются одинаковые расстояния между элементами.  

• Карточки создаются с помощью групп и стилей.  

• Важно задавать одинаковые расстояния между элементами.  

• Карточки группируются для удобства разработки.  

• Создается секция для обратной связи.  

• Размещаются импуты для ввода данных.  

• Картинка размещается справа для единообразия.  

• Заголовки должны быть минимально акцентированы, чтобы не перегрузить внимание.  

• Блок с обратной связью делится на две части, одна из которых призывает к действию.  

• Используется заголовок второго уровня, который можно выровнять по центру или разделить на две части.  

• Картинка размещается справа, чтобы не превышать половину размера секции.  

• Картинка может быть замылена для улучшения внешнего вида.  

• Замыливание может быть спорным решением, но это единственный вариант.  

• Все импуты должны быть в одном стиле.  

• Расстояние между блоками уменьшается для улучшения внешнего вида.  

• Импуты можно оформлять по-разному: текст с подчеркиванием, бордер, автолаут фрейм.  

• Подвал или футер делается отдельно от основного блока.  

• Высота подвала может быть в полтора раза больше шапки.  

• В подвале дублируется информация из шапки, например, номер телефона и логотип.  

• Акцентный цвет заменяется на черный для уменьшения внимания.  

• Дизайн подходит для новичков, так как все элементы расположены одинаково.  

• В будущем можно адаптировать дизайн под разные устройства.