1. Основы веб-дизайна и работа с макетами в Figma
Основы веб-дизайна и работа с макетами в Figma
Добро пожаловать на курс «Создание сайтов без знания иностранных языков». Многие новички боятся приступать к веб-разработке, полагая, что для этого нужно свободно владеть английским языком или знать сложные языки программирования. Это миф. Современный веб-дизайн — это визуальный процесс, похожий на сборку конструктора.
В этой первой статье мы разберем фундамент любого сайта — его макет. Мы научимся работать в программе Figma, которая стала отраслевым стандартом, и поймем, как подготовить дизайн для дальнейшего переноса в конструктор Tilda или верстки на HTML.
Что такое веб-дизайн и почему мы начинаем не с кода?
Прежде чем строить дом, архитектор рисует чертеж. В создании сайтов этот чертеж называется макетом. Веб-дизайн — это не просто «сделать красиво». Это проектирование удобства для пользователя.
Ваша задача на этом этапе — расположить элементы (текст, кнопки, картинки) так, чтобы посетитель сайта сразу понял, куда он попал и что ему нужно сделать.
Почему именно Figma?
Figma — это графический редактор, который работает прямо в браузере. Вам не нужно скачивать тяжелые программы или покупать лицензии за сотни долларов. Для старта достаточно бесплатной версии.
> Figma — один из главных инструментов для проработки макета лендинга. А чтобы превратить его в работающий сайт, нужно перенести дизайн в Tilda. > > pay.yandex.ru
Интерфейс Figma на английском, но не пугайтесь. Вам понадобится выучить всего около 10 слов, которые обозначают инструменты (например, Frame — рамка, Text — текст, Rectangle — прямоугольник). Это не сложнее, чем запомнить названия кнопок на пульте от телевизора.
Знакомство с интерфейсом Figma
Когда вы откроете новый файл в Figma, вы увидите три основные зоны:
Создание первого «листа» (Frame)
В веб-дизайне нет понятия «страница А4». Вместо этого мы используем Фреймы (Frames). Фрейм — это область, ограничивающая экран устройства.
Чтобы создать фрейм, нажмите клавишу F и выберите справа готовый шаблон. Для дизайна под компьютеры (десктопы) стандартом считается ширина 1440 пикселей или 1200 пикселей (для рабочей области Tilda).
Базовые принципы дизайна для новичков
Чтобы ваш сайт выглядел профессионально, даже если вы делаете его впервые, соблюдайте три правила.
1. Сетка и выравнивание
Хаос отпугивает. Все элементы на сайте должны быть выровнены относительно друг друга. В профессиональном дизайне используется 12-колоночная сетка.
Представьте, что ваш экран поделен на 12 вертикальных полос. Кнопки, заголовки и картинки должны начинаться и заканчиваться строго по границам этих полос. Tilda, с которой мы будем работать позже, построена именно на такой сетке.
2. Типографика (Шрифты)
Не используйте больше двух разных шрифтов на одном сайте.
Размер шрифта тоже важен. Для основного текста оптимальный размер — от 16 до 18 пикселей. Для заголовков — от 32 до 60 пикселей.
3. «Воздух» (Отступы)
Самая частая ошибка новичков — лепить элементы друг к другу. Оставляйте пустое пространство между блоками. Это называется «воздух». Он помогает глазу отдыхать и фокусироваться на важном.
Работа с элементами макета
Давайте разберем, из чего состоит любой блок сайта и как это сделать в Figma.
Геометрические фигуры
Любая кнопка или плашка — это прямоугольник (R — Rectangle). В правой панели вы можете скруглить ему углы (параметр Corner Radius) и залить цветом (параметр Fill).
Изображения и иконки
Картинки можно просто перетащить с папки компьютера прямо в Figma. Однако важно понимать разницу форматов при подготовке к верстке.
Согласно taptop.pro, для обеспечения четкости на любых экранах:
Группировка
Если вы создали кнопку (прямоугольник + текст), выделите оба элемента и нажмите Ctrl + G (или Cmd + G на Mac). Теперь это группа. Figma воспринимает её как единый объект, что упрощает перемещение по макету.
Подготовка макета к переносу в Tilda
Ваша конечная цель — не просто красивая картинка, а работающий сайт. Поэтому, рисуя в Figma, вы должны думать как верстальщик.
Измерение расстояний
Это самый важный навык. Чтобы узнать точное расстояние между объектами (например, от заголовка до картинки), выделите один объект, зажмите клавишу Alt (или Option на Mac) и наведите курсор на второй объект. Figma покажет красные цифры — это пиксели.
Запоминайте эти значения. Когда вы будете собирать сайт в Tilda, вам нужно будет выставить точно такие же отступы.
Экспорт ресурсов
Перед тем как переходить к сборке сайта, нужно выгрузить графику.
> Макет можно разбить на части и экспортировать графику в форматах PNG, JPEG или SVG. Для сложных иконок лучше выбрать SVG — он легче и лучше масштабируется. > > pay.yandex.ru
Как это сделать:
Типичные ошибки при создании макета
Итоги
Мы разобрали первый этап создания сайта — визуальное проектирование. Теперь у вас есть понимание, как подготовить «чертеж» будущего проекта.
Краткое резюме: