Веб-дизайн с нуля: от основ до первых заказов

Основы веб-дизайна и принципы композиции

Представьте, что вы зашли на сайт магазина электроники, и первое, что бросается в глаза — хаос: баннеры разного размера, кнопки вразнобой, текст еле читается. Через три секунды вы закрываете вкладку. Теперь представьте другой сайт: чистый, с понятной структурой, где глаз сам находит нужный товар. Разница между ними — не в бюджете, а в композиции. Именно композиция решает, останется пользователь или уйдёт. И именно с неё начинается любой дизайн.

Что такое веб-дизайн и почему он не равен «красивости»

Веб-дизайн — это проектирование визуальной и функциональной части сайтов и приложений так, чтобы пользователь достигал своей цели с минимальными усилиями. Это не просто «сделать красиво». Хороший дизайн одновременно решает задачу бизнеса (продать, информировать, удержать) и задачу пользователя (найти информацию, купить товар, зарегистрироваться).

Микропример: кнопка «Купить» может быть самой красивой на странице, но если она спрятана внизу экрана за тремя блоками текста — конверсия упадёт. Дизайн работает, когда визуал подчинён логике.

Композиция: скелет любого макета

Композиция — это arrangement, расположение элементов на странице так, чтобы они воспринимались как единое целое. В живописи композиция формирует эмоцию, в веб-дизайне — направляет внимание и управляет поведением.

Семь принципов композиции, которые нужно знать с первого дня:

1. Баланс — распределение визуального веса элементов. Бывает симметричным (зеркальное отражение слева направо) и асимметричным (разные по весу элементы уравновешивают друг друга). Симметрия создаёт ощущение порядка и надёжности — её часто используют банки и страховые компании. Асимметрия выглядит современнее и динамичнее — подходит для креативных агентств и стартапов.

2. Контраст — различие между элементами по размеру, цвету, форме или плотности. Контраст управляет вниманием: глаз всегда тянется к самому контрастному объекту. Если заголовок и основной текст одного размера и цвета — пользователь не поймёт, с чего начать чтение.

3. Иерархия — расстановка приоритетов через визуальные средства. Крупнее и ярче — важнее. Меньше и бледнее — второстепеннее. Иерархия — это ответ на вопрос: «Что пользователь должен увидеть первым, вторым, третьим?»

4. Близость (Proximity) — элементы, связанные по смыслу, располагаются рядом. Карточка товара содержит фото, название и цену в одном блоке — потому что они логически связаны. Если цену отнести в другой угол страницы, связь теряется.

5. Повторение (Repetition) — единообразное использование стилей для однотипных элементов. Все кнопки одного размера и цвета, все заголовки одного шрифта. Повторение создаёт ритм и предсказуемость — пользователь быстрее учится ориентироваться.

6. Выравнивание (Alignment) — каждый элемент визуально связан хотя бы с одним другим элементом через общую линию. Ничто не должно располагаться хаотично. Даже небольшое смещение в пару пикселей считывается подсознательно как неряшливость.

7. Негативное пространство (Whitespace) — пустое место между элементами. Это не «пустота», а активный инструмент. Паузы в музыке создают ритм — whitespace делает то же самое для дизайна. Apple использует огромные пустые пространства на своих лендингах, и это выглядит премиально.

Работа с визуальной иерархией на практике

Допустим, вы проектируете лендинг для онлайн-курса по фотографии. Задача: чтобы пользователь записался. Вот как иерархия управляет порядком прочтения:

Hero-секция — крупный заголовок «Научитесь снимать как профессионал за 4 недели» + кнопка «Записаться»

Преимущества — три блока с иконками: «12 уроков», «Практика каждый день», «Сертификат»

Социальное доказательство — отзывы учеников с фото

Призыв к действию — повторная кнопка записи с ценой

Каждый следующий блок чуть менее заметен, чем предыдущий. Пользователь скользит взглядом сверху вниз, и каждый шаг приближает его к решению. Если бы отзывы стояли первыми — человек ещё не понял, зачем ему курс, и социальное доказательство не сработает.

Worked example: композиция карточки блога

Разберём, как собрать карточку статьи для блога. Это базовый элемент, который встречается на каждом втором сайте.

Шаг 1. Определяем элементы. Карточка содержит: изображение, заголовок, краткое описание, дату публикации, аватар автора.

Шаг 2. Расставляем иерархию. Заголовок — самый крупный текстовый элемент. Описание — мельче. Дата и автор — самый мелкий текст, потому что это второстепенная информация.

Шаг 3. Применяем близость. Аватар и имя автора — рядом, в одной строке. Изображение — вверху, заголовок — сразу под ним, потому что они связаны: картинка иллюстрирует тему статьи.

Шаг 4. Добавляем контраст. Заголовок — жирный, тёмный цвет. Описание — обычный вес, серый оттенок. Это создаёт разницу в восприятии за долю секунды.

Шаг 5. Используем whitespace. Между изображением и заголовком — отступ 16px, между заголовком и описанием — 8px, между описанием и метаинформацией — 12px. Эти отступы не случайны: они создают визуальные группы и дают глазу «дышать».

Почему именно так: изображение привлекает внимание первым (люди обрабатывают картинки быстрее текста), заголовок даёт понять тему, описание мотивирует кликнуть, а метаинформация добавляет доверия.

Типичная ошибка: «заполнить каждый пиксель»

Новички часто боятся пустого пространства. Им кажется, что если на экране есть место — туда нужно что-то добавить. Это приводит к перегруженным макетам, где элементы давят друг на друга.

В реальности whitespace работает как дыхание в речи. Представьте лектора, который говорит без пауз — через минуту вы перестанете его слушать. Тот же принцип: пустое пространство вокруг кнопки «Купить» делает её заметнее, а не беднее.

Исследование Google, 2012 показало, что визуально сложные страницы воспринимались пользователями как менее красивые, чем простые — причём за 1/50 секунды. Люди буквально не успевают прочитать ни слова, но уже чувствуют перегруженность.

Сетки: невидимый каркас

Сетка (grid) — система горизонтальных и вертикальных направляющих, по которым выравниваются элементы. Сетка не видна пользователю, но без неё макет выглядит несобранным.

Самый распространённый вариант — 12-колоночная сетка. Почему 12? Потому что число делится на 2, 3, 4 и 6 — это даёт гибкость при раскладке. Блок может занимать 4 колонки (треть ширины), 6 (половину), 3 (четверть) и так далее.

Микропример: на сайте новостей ширина основной колонки — 8 колонок сетки, а боковая панель — 4. На мобильном они встают друг под друга: сначала основной контент, потом сайдбар. Сетка обеспечивает эту трансформацию.

Мостик к следующему шагу

Композиция — это фундамент. Но фундамент без стен — это не дом. Следующий уровень — научиться наполнять композицию цветом, шрифтами и визуальными элементами так, чтобы макет не просто «держал структуру», а производил впечатление. Именно этому посвящены цветоведение и типографика — инструменты, которые превращают скелет в живой интерфейс.

Цветоведение, типографика и визуальные элементы

Почему Facebook, Twitter и LinkedIn выбрали синий? Почему почти все рестораны быстрого питания используют красный и жёлтый? Ответ — не в личных предпочтениях основателей. Цвет влияет на эмоции, поведение и даже на то, сколько времени пользователь проведёт на сайте. А шрифт определяет, поверят ли вам. Цветоведение и типографика — два столпа, на которых держится визуальная убедительность дизайна.

Цвет: больше, чем эстетика

Цветовая модель — система описания цветов. В веб-дизайне используется модель RGB (Red, Green, Blue), где каждый цвет складывается из трёх каналов со значениями от 0 до 255. Белый — это 255, 255, 255. Чёрный — 0, 0, 0. Каждый цвет также записывается в формате HEX — шестнадцатеричном коде, например #FF5733.

Для практики важно понимать три характеристики цвета:

Оттенок (Hue) — собственно цвет: красный, синий, зелёный. Это положение на цветовом круге.

Насыщенность (Saturation) — насколько цвет яркий или блёклый. 100% — чистый цвет, 0% — серый.

Светлота (Lightness) — насколько цвет ближе к белому или чёрному.

Микропример: возьмите синий цвет. Если увеличить насыщенность — получится яркий электрик, как у Telegram. Если уменьшить — приглушённый тёмно-синий, как у Deutsche Bank. Один оттенок, но совершенно разные настроения.

Цветовой круг и гармоничные сочетания

Цветовой круг — инструмент для подбора сочетающихся цветов. Основан на трёх группах:

Основные: красный, жёлтый, синий

Составные: оранжевый, зелёный, фиолетовый (получаются смешиванием основных)

Третичные: промежуточные оттенки

Из цветового круга выводятся схемы сочетаний:

| Схема | Описание | Когда использовать | |---|---|---| | Комплементарная | Два цвета напротив друг друга (синий + оранжевый) | Максимальный контраст, привлечение внимания | | Аналоговая | Три соседних цвета (синий, голубой, бирюзовый) | Гармоничный, спокойный дизайн | | Триадная | Три цвета на равном расстоянии (красный, жёлтый, синий) | Яркий, динамичный интерфейс | | Раздельно-комплементарная | Основной цвет + два соседних с его дополнением | Контраст без чрезмерной агрессивности |

На практике для сайта обычно достаточно 2–3 цветов: один основной (брендовый), один акцентный (для кнопок и ссылок) и нейтральный (для фона и текста).

Психология цвета в дизайне

Цвета вызывают устойчивые ассоциации. Это не мистика, а результат культурного кода и биологических реакций:

Синий — доверие, стабильность. Банки, соцсети, корпорации.

Красный — энергия, срочность. Распродажи, рестораны, предупреждения.

Зелёный — природа, рост, деньги. Экология, финансы, здоровье.

Чёрный — премиальность, элегантность. Люксовые бренды.

Оранжевый — дружелюбие, действие. Призывы к покупке.

Важная оговорка: ассоциации зависят от культуры. В Китае белый цвет ассоциируется с трауром, а не с чистотой. Если вы делаете сайт для международной аудитории — проверяйте контекст.

Типографика: голос вашего дизайна

Типографика — искусство подбора и расположения шрифтов. Если цвет — это эмоция, то шрифт — это характер. Один и тот же текст, набранный разными шрифтами, производит совершенно разное впечатление.

Основные категории шрифтов:

Антиква (Serif) — с засечками (мелкими штрихами на концах букв). Примеры: Times New Roman, Georgia, Playfair Display. Воспринимаются как серьёзные, традиционные, надёжные. Подходят для новостных сайтов, юридических фирм, университетов.

Гротеск (Sans-serif) — без засечек. Примеры: Arial, Helvetica, Inter, Roboto. Выглядят современно, чисто, технологично. Стандарт для интерфейсов, стартапов, IT-компаний.

Рукописные (Script) — имитируют handwriting. Примеры: Pacifico, Dancing Script. Используются точечно — для логотипов, декоративных заголовков. Набирать ими основной текст нельзя: читаемость падает.

Моноширинные (Monospace) — все буквы одной ширины. Примеры: Courier, Fira Code. Применяются для отображения кода и технической информации.

Микропример: представьте сайт адвокатского бюро, набранный шрифтом Pacifico. Даже если текст грамотный, посетитель подсознательно решит, что фирма несерьёзная. Шрифт — это первое впечатление о характере бренда.

Иерархия текста и размеры

Типографическая иерархия — это система размеров и начертаний, которая помогает пользователю быстро сканировать страницу. Стандартная структура:

H1 — главный заголовок страницы, 32–48px

H2 — заголовок секции, 24–32px

H3 — подзаголовок, 20–24px

Body — основной текст, 16–18px

Caption — подписи, метаинформация, 12–14px

Важное правило: размеры должны быть пропорциональны. Если H1 равен 48px, а body — 16px, то соотношение 3:1. Если H1 — 48px, а H2 — 46px — разница незаметна, иерархия теряется. Рекомендуется использовать шкалу с коэффициентом 1.25–1.5 (музыкальная типографская шкала).

Сочетание шрифтов: сколько и каких

Золотое правило — не более двух шрифтов в одном проекте. Один для заголовков, другой для основного текста. Третий допустим только в исключительных случаях (например, моноширинный для кода).

Приём: контраст между шрифтами. Если заголовок — антиква с засечками (Playfair Display), то текст — гротеск без засечек (Inter). Два гротеска рядом часто выглядят неразличимо — пользователь не чувствует разницы.

Полезные ресурсы для подбора пар: Google Fonts предлагает рекомендации к каждому шрифту, а сервис FontPair показывает проверенные сочетания.

Worked example: стилизуем карточку блога

Вернёмся к карточке статьи из предыдущей главы и наполним её цветом и шрифтами.

Шаг 1. Определяем палитру. Основной цвет — тёмно-синий #1A2B4A (заголовки, текст). Акцентный — яркий оранжевый #FF6B35 (кнопка «Читать», дата). Фон — светло-серый #F5F5F5.

Шаг 2. Назначаем шрифты. Заголовок карточки — Inter Bold, 20px. Описание — Inter Regular, 14px, цвет #666666. Имя автора — Inter Medium, 12px, цвет #999999.

Шаг 3. Проверяем контраст. Текст #666666 на фоне #F5F5F5 — контрастность около 4.5:1. Это минимальный уровень по стандартам WCAG (руководство по доступности веб-контента). Для мелкого текста лучше стремиться к 7:1.

Шаг 4. Добавляем акцент. Оранжевая точка рядом с датой публикации привлекает внимание и связывает метаинформацию с общей палитрой.

Визуальные элементы: иконки, иллюстрации, фото

Помимо текста и цвета, дизайн использует визуальные элементы:

Фотографии — создают эмоциональную связь. Реальные фото людей конвертируют лучше стоковых.

Иконки — визуальные ярлыки для действий и разделов. Должны быть в одном стиле (либо все с заливкой, либо все линейные).

Иллюстрации — придают индивидуальность. Тренд последних лет — плоские иллюстрации в стиле flat design.

Градиенты — плавные переходы между цветами. Вернулись в моду в 2018 году и остаются популярными.

Микропример: иконки корзины, поиска и профиля в шапке сайта. Они мгновенно понятны без слов — это экономит пространство и ускоряет навигацию. Но если одна иконка линейная, а другая с заливкой — это выглядит как ошибка, даже если функционально всё работает.

Типичная ошибка: «я выбрал любимый цвет»

Новички часто строят палитру вокруг личных предпочтений. «Мне нравится фиолетовый — значит, сайт будет фиолетовым». Но дизайн решает задачу клиента, а не дизайнера. Фиолетовый может идеально подойти для косметического бренда и провально смотреться на сайте строительной компании.

Правильный подход: начинать с аудитории и задачи. Кто будет пользоваться сайтом? Какое чувство должен вызвать дизайн? Какие цвета использует конкурент — и стоит ли выделяться или следовать отраслевым стандартам?

Если из этой главы запомнить три вещи — это:

Цвета работают через контраст и ассоциации, а не через личный вкус дизайнера

Не более двух шрифтов в проекте, и они должны контрастировать по стилю

Контрастность текста к фону — минимум 4.5:1 по стандарту WCAG, иначе часть пользователей просто не прочитает текст

UI/UX-принципы и современные тренды в дизайне

Когда-то сайты были простыми: заголовок, текст, картинка, ссылка. Сегодня пользователь открывает приложение и ожидает, что всё будет работать интуитивно, быстро и красиво. Если кнопка не нажимается там, где ожидается, — пользователь уходит. Если страница грузится дольше трёх секунд — 53% мобильных пользователей покидают её по данным Google. За каждой деталью интерфейса стоит наука о поведении людей — и называется она UX-дизайн.

UI и UX: две стороны одной монеты

Эти термины часто путают, но они описывают разные вещи:

UX (User Experience) — пользовательский опыт. Это всё, что человек чувствует, взаимодействуя с продуктом: легко ли найти информацию, логична ли структура, приятен ли процесс. UX-дизайнер отвечает на вопрос: «Почему это работает именно так?»

UI (User Interface) — пользовательский интерфейс. Это визуальное оформление: кнопки, цвета, отступы, иконки, анимации. UI-дизайнер отвечает на вопрос: «Как это выглядит?»

Микропример: представьте дверь. UX — это решение, что дверь должна открываться на себя, с ручкой на высоте 100 см, потому что так удобнее большинству людей. UI — это выбор цвета двери, формы ручки и таблички «Вход».

На практике, особенно во фрилансе, один человек совмещает обе роли. Это нормально — важно лишь понимать, что сначала решается задача (UX), а потом она оформляется (UI).

Принципы UX, которые нельзя игнорировать

1. Закон Фиттса — время достижения цели зависит от размера объекта и расстояния до него. Крупные кнопки нажимать быстрее. Кнопка «Отправить заказ» должна быть большой и близко к месту заполнения формы — а не маленькой и в углу экрана.

2. Закон Хика — чем больше выбор, тем дольше принятие решения. Если в навигации 15 пунктов, пользователь растеряется. Оптимально — 5–7 основных разделов. Именно поэтому в магазинах одежды товары разбиты по категориям, а не выставлены все вместе.

3. Принцип близости (Гештальт-принципы) — элементы, расположенные рядом, воспринимаются как связанные. Мы уже применяли это в композиции, но в UX это критично: если поле «Email» стоит рядом с полем «Пароль» — пользователь понимает, что это одна форма входа.

4. Паттерн Z-reading — в западных культурах взгляд движется по странице по траектории, напоминающей букву Z: левый верхний угол → правый верхний → левый нижний → правый нижний. Самая важная информация и CTA-кнопки размещаются по этой траектории.

5. Принцип 3 кликов — пользователь должен найти нужную информацию не более чем за три клика. Это не жёсткое правило, а ориентир: если до товара нужно пройти 6 уровней вложенности — навигация плохая.

Доступность: дизайн для всех

Доступность (accessibility) — проектирование интерфейсов, которые могут использовать люди с ограничениями: слабовидящие, дальтоники, пользователи с моторными нарушениями.

Базовые требования:

Контраст текста к фону не менее 4.5:1 для обычного текста и 3:1 для крупного

Все интерактивные элементы доступны с клавиатуры (не только мышкой)

У изображений есть alt-текст — описание для скринридеров

Цвет не единственный способ передать информацию (ошибка выделяется не только красным, но и иконкой или текстом)

Микропример: форма с ошибкой. Плохо — поле просто стало красным. Хорошо — поле красное + иконка восклицательного знака + текст «Введите корректный email». Так информация доступна даже дальтоникам.

По данным ВОЗ, более миллиарда людей в мире живут с той или иной формой инвалидности. Доступный дизайн — не благотворительность, а расширение аудитории.

Современные тренды в веб-дизайне

Тренды приходят и уходят, но некоторые закрепляются как стандарты. Вот что определяет визуальный язык 2023–2025 годов:

Тёмная тема (Dark Mode). Переключатель светлой и тёмной темы стал ожидаемой функцией. Тёмный фон снижает нагрузку на глаза в условиях слабого освещения и экономит заряд батареи на OLED-экранах. При проектировании тёмной темы нельзя просто инвертировать цвета — нужно заново подбирать контрасты, потому что на тёмном фоне яркие цвета выглядят агрессивнее.

Glassmorphism. Эффект матового стекла: полупрозрачные блоки с размытием фона. Используется в macOS, Windows 11, банковских приложениях. Выглядит современно, но требует аккуратности — на сложном фоне текст может стать нечитаемым.

Микроанимации. Маленькие анимационные реакции на действия: кнопка чуть увеличивается при наведении, иконка «лайка» взрывается при клике, полоса загрузки плавно заполняется. Они делают интерфейс живым и дают обратную связь.

Асимметричные раскладки. Отход от строгих симметричных сеток. Элементы смещаются, перекрывают друг друга, создают ощущение динамики. Эффектно выглядит, но требует мастерства — иначе получится хаос.

Минимализм с характером. Чистые интерфейсы с большим whitespace, но с яркими акцентами: необычным шрифтом, насыщенным цветом или выразительной иллюстрацией. Минимализм не значит «скучно» — он значит «ничего лишнего».

Worked example: проектируем экран входа в приложение

Разберём UX/UI экран авторизации шаг за шагом.

Шаг 1. Определяем цель. Пользователь должен войти в аккаунт с минимальными усилиями. Альтернатива — регистрация для новых пользователей.

Шаг 2. Применяем закон Хика. Не предлагаем 5 способов входа. Два варианта: email + пароль и «Войти через Google». Этого достаточно для 90% пользователей.

Шаг 3. Расставляем иерархию. Логотип приложения — вверху (брендинг). Заголовок «Вход» — крупно. Два поля ввода — по центру. Кнопка «Войти» — крупная, акцентного цвета, занимает всю ширину контейнера (закон Фиттса). Ссылка «Забыли пароль?» — мелким текстом под полями. Ссылка «Нет аккаунта? Зарегистрируйтесь» — внизу экрана.

Шаг 4. Обрабатываем ошибки. Если пароль неверный — поле подсвечивается красным, под ним появляется текст «Неверный пароль», а кнопка временно блокируется на 2 секунды (защита от брутфорса).

Шаг 5. Добавляем микроанимацию. При нажатии кнопки «Войти» появляется спиннер загрузки. Если вход успешен — плавный переход на главный экран. Если ошибка — лёгкая тряска формы (shake animation), которая визуально сигнализирует о проблеме.

Типичная ошибка: «модно значит правильно»

Новички копируют тренды без понимания контекста. Glassmorphism красив, но если фон за блоком постоянно меняется (видео, слайдер) — текст прыгает по контрастности и становится нечитаемым. Анимации эффектны, но если каждый клик сопровождается двухсекундной анимацией — пользователь раздражается.

Тренд — это инструмент, а не догма. Вопрос перед применением: «Это решает задачу пользователя или просто нравится мне?» Если второе — откажитесь.

Если из этой главы запомнить три вещи — это:

UX решает задачу пользователя, UI оформляет решение — и в таком порядке они проектируются

Доступность — не опция, а стандарт: контраст 4.5:1, alt-тексты у изображений, управление с клавиатуры

Тренды применяются через призму пользы, а не моды — если тренд ухудшает usability, он не нужен

Работа в Figma: от идеи до готового макета

До 2016 года дизайнеры работали в Photoshop или Sketch — программах, которые устанавливались на компьютер и не позволяли совместно редактировать файл в реальном времени. Потом появилась Figma — браузерный редактор, который изменил правила игры. Сегодня Figma используется в 77% дизайн-команд по данным опроса UX Tools, 2023. Если вы начинаете с нуля — это ваш основной инструмент.

Почему Figma

Три причины, по которым Figma стала стандартом:

Доступность. Работает в браузере — не нужно скачивать и устанавливать. Бесплатный тариф позволяет создавать до 3 проектов и 3 файлов — для старта этого достаточно.

Совместная работа. Несколько человек могут редактировать один файл одновременно, как в Google Docs. Клиент может оставить комментарий прямо на макете. Это экономит часы переписки.

Экосистема. Тысячи готовых UI-китов, иконок и шаблонов в сообществе Figma Community. Можно взять готовую библиотеку компонентов и собрать макет в разы быстрее, чем рисовать каждый элемент с нуля.

Микропример: вы делаете лендинг для кофейни. Вместо того чтобы рисовать иконку чашки кофе, вы находите в Figma Community набор иконок для ресторанов, перетаскиваете нужную и адаптируете под свою палитру. На это уходит 30 секунд вместо 15 минут.

Интерфейс Figma: что есть что

Когда вы открываете Figma, вы видите пять ключевых зон:

Панель инструментов (сверху) — выбор, фигуры, текст, рамки, перо, комментарии

Панель слоёв (слева) — иерархия всех элементов на холсте. Каждый прямоугольник, текст и картинка — это слой

Холст (центр) — рабочая область, где вы создаёте макет

Панель свойств (справа) — настройки выбранного элемента: размер, цвет, отступы, эффекты

Pages (внизу слева) — страницы внутри одного файла. Удобно разделять: одна страница — десктоп-версия, вторая — мобильная, третья — компоненты

Первое, что нужно сделать при старте проекта: создать Frame (Shift + A) — это аналог артборда. Выбираете пресет: iPhone 14, MacBook Pro, или задаёте произвольный размер. Всё содержимое макета размещается внутри фрейма.

Базовые инструменты, которые покрывают 80% задач

Фигуры (Shapes). Прямоугольник, эллипс, линия, многоугольник, звезда. Из прямоугольников строится 90% интерфейсов: карточки, кнопки, поля ввода, блоки контента. Скруглённые углы настраиваются в панели свойств — радиусом скругления.

Текст (T). Клик по холсте создаёт текстовый блок. Шрифт, размер, межстрочный интервал, цвет — всё настраивается справа. Совет: сразу задавайте стили текста (Text Styles) для заголовков и основного текста — потом сможете применять их ко всему проекту одним кликом.

Auto Layout. Самый мощный инструмент Figma. Он автоматически расставляет элементы с заданными отступами. Если вы добавите новый элемент — остальные сдвинутся. Если измените размер — контейнер подстроится. Auto Layout имитирует поведение вёрстки и экономит часы ручной расстановки отступов.

Микропример: вы делаете список новостей. Без Auto Layout каждую карточку вы двигаете вручную на 16px вниз. С Auto Layout вы помещаете карточки в контейнер, задаёте отступ 16px между элементами — и при добавлении десятой карточки всё выстраивается автоматически.

Компоненты (Components). Повторяющиеся элементы (кнопки, карточки, поля ввода) превращаются в компоненты (Ctrl + Alt + K). Изменяете мастер-компонент — все копии обновляются. Это критично для больших проектов: если у вас 40 кнопок на сайте, а клиент просит поменять цвет — вы меняете один компонент, и все 40 обновляются.

Worked example: собираем секцию лендинга

Спроектируем hero-секцию для сайта онлайн-курса по веб-дизайну.

Шаг 1. Создаём фрейм. Desktop — 1440 × 900px. Задаём фоновый цвет #FFFFFF.

Шаг 2. Размечаем сетку. Включаем Layout Grid: 12 колонок, gutter 20px, margin 80px. Направляющие помогут выровнять элементы.

Шаг 3. Добавляем навигацию. Прямоугольник 1440 × 72px в верхней части. Слева — текстовый блок «EduDesign» (логотип). Справа — три текстовых блока: «Курсы», «О нас», «Контакты». Между ними отступ 32px. Auto Layout (горизонтальный) для правой группы — чтобы при добавлении пункта меню остальные сдвинулись.

Шаг 4. Создаём заголовок. Текстовый блок «Станьте веб-дизайнером за 8 недель» — Inter Bold, 56px, #1A2B4A. Под ним подзаголовок «Практический курс с наставником и реальными проектами в портфолио» — Inter Regular, 20px, #666666.

Шаг 5. Кнопка CTA. Прямоугольник 220 × 56px, скругление 8px, заливка #FF6B35. Внутри текст «Записаться на курс» — Inter SemiBold, 16px, белый. Auto Layout внутри кнопки — текст центрируется автоматически.

Шаг 6. Иллюстрация. Справа от текстового блока — изображение или иллюстрация (можно временно заменить серым прямоугольником-плейсхолдером). Размер примерно 500 × 400px.

Шаг 7. Объединяем в Auto Layout. Текстовый блок + кнопку помещаем в вертикальный Auto Layout с отступом 24px. Затем текстовую группу и иллюстрацию — в горизонтальный Auto Layout с отступом 64px. Центрируем по вертикали внутри hero-фрейма.

Почему именно так: Auto Layout гарантирует, что при изменении текста или размера экрана элементы не «поедут». Это макет, который ведёт себя как настоящий сайт.

Экспорт и передача разработчику

Когда макет готов, Figma позволяет:

Экспортировать элементы в PNG, SVG, PDF — для презентации клиенту

Передать в разработку через вкладку Inspect — разработчик видит размеры, отступы, цвета в форматах CSS, iOS и Android

Сгенерировать ссылку на макет — клиент смотрит и комментирует без регистрации

Вкладка Inspect — это ваш мост к вёрстке. Чем точнее вы расставили отступы и размеры, тем меньше вопросов будет у разработчика.

Полезные ресурсы внутри Figma

Figma Community — библиотека бесплатных шаблонов, UI-китов, иконок. Наберите «UI Kit» и найдёте готовые наборы компонентов для лендингов, мобильных приложений, дашбордов

Plugins — плагины расширяют функционал. Unsplash — бесплатные фото прямо в Figma. Iconify — 200 000+ иконок. Content Reel — генерация фейковых данных (имена, фото, тексты) для реалистичных макетов

Variables — система переменных для цветов, отступов и режимов (светлая/тёмная тема). Задаёте переменную color-primary, используете везде, а при смене бренда меняете одно значение

Типичная ошибка: «рисовать пиксель в пиксель без системы»

Новички расставляют элементы на глаз: тут отступ 13px, там 17px, кнопка 41px высотой. Макет выглядит неплохо, но когда нужно внести правку — всё разъезжается, потому что нет системы.

Решение: задайте дизайн-систему с самого начала. Определите базовый шаг отступов (4px или 8px) — и все размеры должны быть кратны этому шагу. Кнопки — 40px или 48px, не 43px. Отступы — 8, 16, 24, 32px, не 13 или 17. Это не придирка — это фундамент, который экономит часы при масштабировании проекта.

Если из этой главы запомнить три вещи — это:

Auto Layout — главный инструмент Figma, который имитирует поведение вёрстки и экономит время на расстановку отступов

Компоненты позволяют менять десятки элементов одним действием — без них крупные проекты не масштабируются

Все размеры и отступы должны быть кратны базовому шагу (4 или 8px) — это основа дизайн-системы

Практика, разбор кейсов и подготовка к фрилансу

Первый заказ на веб-дизайн — это как первый прыжок с парашютом: страшно, но именно этот момент отделяет «я учусь» от «я дизайнер». Статистика платформы Upwork показывает, что дизайнеры интерфейсов входят в топ-10 самых востребованных специальностей на фрилансе. Но чтобы получить первый заказ, одного умения пользоваться Figma недостаточно — нужен процесс, портфолио и понимание, как общаться с клиентом. Именно этому посвящена финальная глава.

Кейс 1: лендинг для кофейни «Боб&Боб»

Разберём реальный сценарий. Друг просит вас сделать сайт для его кофейни. Бюджет — символический, но это ваш первый проект для портфолио.

Шаг 1. Сбор информации (бриф). Прежде чем открывать Figma, задайте клиенту ключевые вопросы:

Какая цель сайта? (Привлечь гостей, рассказать о меню, принять заказы онлайн)

Кто целевая аудитория? (Молодые люди 20–35 лет, офисные работники рядом)

Есть ли брендбук? (Логотип, цвета, шрифты — или всё создаётся с нуля)

Какие сайты нравятся клиенту визуально? (Это даёт ориентир по стилю)

Какие страницы нужны? (Главная, меню, контакты — или только лендинг)

В данном случае: цель — привлечение гостей, аудитория — молодые люди, брендбука нет, нужны главная и страница меню.

Шаг 2. Анализ конкурентов. Откройте 5–7 сайтов кофеен в вашем городе и крупных сетей (Starbucks, кофемания). Зафиксируйте: какие блоки встречаются чаще всего, какие цвета доминируют, что работает хорошо, а что раздражает. Типичные блоки для сайта кофейни: hero с фото, описание концепции, меню, отзывы, адрес и карта.

Шаг 3. Создание wireframe. Wireframe — это схематичный набросок структуры без деталей дизайна. Проще говоря, серые прямоугольники с подписями. В Figma это занимает 20–30 минут и позволяет согласовать структуру с клиентом до того, как вы потратите часы на визуальное оформление.

Для «Боб&Боб» wireframe главной страницы:

Навигация: логотип + «Меню», «О нас», «Контакты»

Hero: крупное фото кофе + заголовок «Кофе, который вдохновляет» + кнопка «Посмотреть меню»

Блок «Почему мы»: три преимущества с иконками (свежая обжарка, авторские напитки, уютный зал)

Галерея: 4 фото интерьера и напитков

Отзывы: три карточки с цитатами

Футер: адрес, телефон, часы работы, соцсети

Шаг 4. Визуальный дизайн. На основе wireframe собираем макет в Figma. Палитра: тёплый бежевый #F5E6D3 (фон), тёмно-коричневый #3E2723 (текст), медный #B87333 (акценты). Шрифты: заголовки — Playfair Display, текст — Leno. Фотографии — реальные снимки кофейни (или качественные стоки с Unsplash).

Шаг 5. Презентация клиенту. Генерируем ссылку на макет в Figma, отправляем другу. Просим посмотреть и оставить комментарии прямо на макете. Первый раунд правок — обычно 3–5 замечаний. Важно: не принимайте правки «на лету». Зафиксируйте все замечания, оцените трудоёмкость и согласуйте сроки.

Кейс 2: редизайн существующего сайта

Представьте, что клиент приходит с работающим, но устаревшим сайтом. Такие заказы — хлеб фрилансера, потому что «сделать лучше» проще, чем «сделать с нуля».

Что анализировать:

Метрики. Попросите доступ к аналитике. Если 70% трафика с мобильных, а сайт не адаптивен — это главная проблема.

Точки отказа. На какой странице пользователи уходят? Если на странице оплаты — возможно, форма слишком сложная.

Визуальные проблемы. Несогласованные шрифты, отсутствие иерархии, устаревшая цветовая схема.

Процесс редизайна:

Аудит текущего сайта (скриншоты с пометками)

Список проблем и приоритетов

Wireframe нового варианта

Сравнение: старый vs новый (чтобы клиент видел контраст)

Итерации по фидбеку

Микропример: клиент — интернет-магазин одежды. Аудит показывает, что на мобильных кнопка «Добавить в корзину» перекрывается баннером. Решение — переработать hero-секцию, уменьшить баннер, увеличить CTA-кнопку. Одно изменение — и конверсия может вырасти на 15–20%.

Портфолио: ваш пропуск на фриланс

Без портфолио вы — «ещё один дизайнер без опыта». С портфолио вы — специалист, который может показать результат. Три варианта наполнения:

1. Учебные проекты. Переделайте сайты известных брендов в своём стиле. Сделайте редизайн главной страницы Spotify, лендинг для вымышленного стартапа, экраны мобильного приложения. Важно: укажите, что это концепт, а не реальный заказ.

2. Проекты для знакомых. Сайт для кофейни друга, лендинг для репетитора сестры, визитка для фотографа. Даже бесплатные проекты дают реальный опыт работы с клиентом и готовый кейс для портфолио.

3. Конкурсы и челленджи. Платформы типа Daily UI предлагают ежедневные задания: «Дизайн экрана логина», «Дизайн карточки товара». 100 дней — 100 работ. Это формирует навык и наполняет портфолио.

Где размещать портфолио:

Behance — стандарт индустрии. Кейсы с описанием процесса ценятся выше, чем просто картинки

Dribbble — визуальная площадка. Подходит для демонстрации отдельных экранов и UI-элементов

Личный сайт — максимальный контроль над подачей. Можно сделать на Tilda или Webflow за вечер

Ценообразование: сколько просить за первый заказ

Главная дилемма новичка: запросить мало — обесценить свой труд, запросить много — не получить заказ.

Практический подход:

Определите почасовую ставку. Для начинающего дизайнера в России — 500–1500 руб./час, на международном рынке — 15–30 долл./час

Оцените трудоёмкость. Лендинг из 5 секций — примерно 15–25 часов работы

Итого: первый лендинг стоит 7 500–37 500 руб. (или 225–750 долл.)

Не работайте бесплатно, если это не ваше осознанное решение (проект для портфолио). Даже символическая оплата устанавливает профессиональные рамки: клиент относится к процессу серьёзнее, а вы — ответственнее.

Коммуникация с клиентом: 5 правил

1. Всегда начинайте с брифа. Никогда не соглашайтесь на задачу «сделай красиво». Уточните цели, аудиторию, сроки, бюджет. Бриф — ваша страховка от бесконечных правок.

2. Показывайте промежуточные результаты. Wireframe → визуальная концепция → детальный макет. Три точки согласования лучше, чем один финал, который клиент отвергает целиком.

3. Фиксируйте правки. После каждого раунда правок отправляйте клиенту список внесённых изменений. Это экономит от «а мы думали, вы поменяете и вот это тоже».

4. Ограничивайте раунды правок. В договоре укажите: «2 раунда правок включены, дополнительные — по отдельному согласованию». Иначе правки never end.

5. Передавайте файлы осознанно. Финальные макеты — после оплаты. Исходники — по договорённости (и обычно за дополнительную плату, потому что это ваша интеллектуальная собственность).

Где искать первые заказы

Фриланс-биржи: FL.ru, Kwork, Upwork, Fiverr. Конкуренция высокая, но для первых 3–5 проектов — нормальный старт

Социальные сети. Пост в Telegram-чате «Дизайнеры ищут работу» или в тематическом сообществе ВКонтакте. Опишите, что готовы взять небольшой проект за умеренную оплату

Личные связи. Расскажите всем знакомым, что занимаетесь веб-дизайном. Первые заказы часто приходят через «сарафанное радио»

Холодные письма. Найдите малый бизнес с устаревшими сайтами. Напишите короткое письмо: «Заметил ваш сайт, есть идеи по улучшению. Могу показать бесплатный аудит». Даже если 1 из 20 ответит — это первый клиент

Типичная ошибка: ждать идеального момента

Новички годами учатся, собирают знания, но не решаются взять первый заказ. «Я ещё недостаточно знаю», «Мой Figma пока не тот уровень», «Портфолио не готово». Этот синдром самозванца знаком 70% специалистов, по данным исследования Harvard Business Review.

Правда в том, что первый заказ — это и есть лучшее обучение. Вы столкнётесь с реальными проблемами: клиент не понимает, чего хочет; правки противоречат друг другу; сроки горят. И именно это превращает вас из «человека, который умеет пользоваться Figma» в дизайнера.

Если из этой главы запомнить три вещи — это:

Начинайте с брифа и wireframe — это экономит часы и защищает от бесконечных правок

Портфолио строится из учебных проектов и работ для знакомых — не ждите «настоящих» заказов, чтобы начать показывать результат

Первый заказ — это часть обучения, а не его финал: беритесь, когда чувствуете 70% готовности, а не 100%