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

Введение в веб-дизайн: композиция, теория цвета и типографика

Добро пожаловать в курс «Основы веб-дизайна: от теории к первому макету»! Вы сделали первый шаг в мир, где творчество встречается с технологиями. Многие новички ошибочно полагают, что веб-дизайн — это просто «рисование красивых картинок». На самом деле, это проектирование решений. Дизайн решает задачу: как пользователю удобнее всего купить товар, прочитать новость или найти контакты компании.

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

Часть 1. Композиция: скелет вашего дизайна

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

Визуальная иерархия

Представьте, что вы заходите в комнату, где все люди кричат с одинаковой громкостью. Вы не поймете ни слова. То же самое происходит на сайте, где все элементы имеют одинаковый размер и яркость.

Визуальная иерархия управляет вниманием пользователя. Она подсказывает глазу, куда смотреть сначала, куда — потом, а что можно оставить на десерт. Мы создаем иерархию с помощью:

* Размера: Заголовок всегда больше основного текста. * Цвета: Яркая кнопка «Купить» заметнее серой кнопки «Отмена». * Положения: То, что находится выше и левее (для языков с чтением слева направо), воспринимается как более важное.

!Сравнение макета без иерархии и макета с четкой визуальной иерархией.

Негативное пространство (White Space)

Это одно из самых сложных понятий для новичков. Нам часто хочется заполнить каждый пиксель экрана информацией, чтобы место «не пропадало зря». Это ошибка.

Негативное пространство (или «воздух») — это свободное место между элементами. Оно не пустое; оно активное. Воздух помогает:

Разделять смысловые блоки.

Давать глазам отдых.

Акцентировать внимание на важном (чем больше пустоты вокруг объекта, тем заметнее этот объект).

> Дизайн — это не то, как предмет выглядит, а то, как он работает. > — Стив Джобс [Биография Стива Джобса]

Баланс

Ваш макет должен быть устойчивым. Баланс бывает двух видов:

* Симметричный: Элементы зеркально отражают друг друга относительно центральной оси. Это создает ощущение стабильности, традиционности и спокойствия. * Асимметричный: Элементы имеют разный визуальный вес, но уравновешивают друг друга (например, один большой объект слева уравновешивается группой мелких объектов справа). Это выглядит более динамично и современно.

Часть 2. Теория цвета: настроение и эмоции

Цвет — это самый мощный инструмент воздействия на подсознание. Он может вызвать доверие, тревогу или радость за доли секунды.

Цветовые модели: RGB против CMYK

Как веб-дизайнеры, мы работаем с экранами (мониторы, телефоны). Экраны излучают свет.

* RGB (Red, Green, Blue): Цветовая модель для экранов. Смешение этих трех цветов дает белый. Именно в этой модели вы будете работать 99% времени. * CMYK (Cyan, Magenta, Yellow, Key/Black): Модель для печати на бумаге. В веб-дизайне она не используется.

Психология цвета

У каждого цвета есть устойчивые ассоциации:

| Цвет | Ассоциации | Где часто используется | | :--- | :--- | :--- | | Синий | Доверие, спокойствие, логика | Банки, социальные сети, IT | | Красный | Энергия, опасность, важность | Распродажи, ошибки, еда | | Зеленый | Природа, рост, успех | Экология, финансы, здоровье | | Черный | Роскошь, стиль, тайна | Премиум-бренды, мода |

Правило 60-30-10

Новичкам сложно сочетать цвета. Чтобы не превратить сайт в радугу, используйте классическое правило интерьерного дизайна, которое отлично работает и в вебе:

* 60% — Основной цвет. Обычно это нейтральный фон (белый, светло-серый, темный). * 30% — Вторичный цвет. Используется для карточек, плашек, заголовков. Он поддерживает основной цвет, но отличается от него. 10% — Акцентный цвет. Самый яркий. Используется только* для кнопок (Call to Action) и важных ссылок. Он должен кричать: «Нажми меня!»

!Визуализация правила 60-30-10 в дизайне интерфейса.

Часть 3. Типографика: голос вашего бренда

Типографика — это не просто выбор шрифта. Это искусство оформления текста так, чтобы его было удобно и приятно читать. В вебе 90% контента — это текст, поэтому типографика критически важна.

Анатомия шрифта: Засечки и Гротески

Глобально все шрифты можно разделить на две большие категории:

Шрифты с засечками (Serif): У букв есть маленькие «ножки» или штрихи на концах (как в Times New Roman). Они ассоциируются с традициями, авторитетом, печатной прессой. Часто используются для длинных текстов в статьях, так как засечки помогают глазу скользить по строке.

Шрифты без засечек (Sans Serif): Буквы имеют прямые, ровные окончания (как в Arial или Roboto). Они выглядят современно, чисто и минималистично. Это стандарт для интерфейсов приложений и большинства веб-сайтов.

!Сравнение шрифтов Serif и Sans Serif.

Читабельность (Readability)

Ваша главная цель — чтобы пользователь не напрягал глаза. Вот несколько правил хорошей типографики:

* Ограничьте количество шрифтов. Используйте не более 2 (максимум 3) гарнитур на одном сайте. Один для заголовков, один для основного текста. * Контраст. Текст должен четко выделяться на фоне. Светло-серый текст на белом фоне — это мучение для читателя. * Длина строки. Слишком длинная строка утомляет, слишком короткая заставляет глаза бегать. Оптимальная длина строки для веба — 45–75 символов. * Интерлиньяж (Line Height). Это расстояние между строками. В вебе оно должно быть больше, чем в книгах. Хорошее правило: межстрочный интервал должен составлять 140–160% от размера шрифта.

Заключение

Сегодня мы заложили фундамент. Мы узнали, что:

Композиция управляет вниманием через иерархию и свободное пространство.

Цвет создает настроение и помогает расставлять акценты (правило 60-30-10).

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

В следующих статьях мы перейдем от теории к практике и начнем знакомство с инструментами прототипирования. Попробуйте теперь посмотреть на свои любимые сайты через призму этих знаний. Замечаете ли вы, как дизайнеры управляют вашим взглядом?

До встречи на следующем уроке!

Основы UX-дизайна: исследование пользователей, сценарии и создание прототипов

В предыдущей статье мы разобрали визуальную составляющую веб-дизайна: композицию, цвет и типографику. Это то, что делает сайт красивым и приятным глазу. Но представьте себе дом, который выглядит великолепно снаружи, но внутри у него нет дверей, лестница ведет в тупик, а выключатель света находится на потолке. Жить в таком доме невозможно.

То же самое касается и сайтов. Если UI (User Interface) — это то, как сайт выглядит, то UX (User Experience) — это то, как он работает и какие ощущения вызывает у пользователя при взаимодействии. В этой статье мы отложим кисти и краски и займемся проектированием логики.

Что такое UX и почему это важно?

UX-дизайн (User Experience Design) — это процесс создания продуктов, которые полезны, просты в использовании и приятны для взаимодействия. Главная цель UX-дизайнера — сделать так, чтобы пользователь достиг своей цели (купил товар, нашел информацию, подписался на рассылку) с минимальными усилиями.

> Если вы считаете, что хороший дизайн стоит дорого, вы должны посмотреть на стоимость плохого дизайна. > — Ральф Спет, CEO Jaguar Land Rover [Цитаты известных дизайнеров]

Работа над UX всегда начинается задолго до открытия графического редактора. Она состоит из трех этапов: исследование, сценарии и прототипирование.

Этап 1. Исследование пользователей

Самая большая ошибка новичка — думать: «Я делаю дизайн для всех». Когда вы делаете для всех, вы делаете ни для кого. Чтобы создать удобный продукт, нужно четко понимать, кто будет им пользоваться.

Целевая аудитория и Персоны

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

При создании персоны мы описываем: * Имя и фото: (например, «Ольга, 32 года»). Это помогает развить эмпатию. * Профессия и образ жизни: Менеджер среднего звена, много работает, мало свободного времени. * Цели: Хочет быстро заказать доставку еды, чтобы не готовить ужин. * Боли (Frustrations): Бесится, когда нужно проходить долгую регистрацию или когда сайт долго грузится.

Когда у вас есть конкретная Ольга, вы перестаете гадать. Вы спрашиваете себя: «Удобно ли будет Ольге нажать эту кнопку, если она держит телефон одной рукой в метро?».

!Пример карточки Персоны (Persona Card), которую составляет UX-дизайнер перед началом работы.

User Stories (Пользовательские истории)

Это короткие предложения, описывающие функционал с точки зрения пользователя. Они строятся по формуле:

Как <роль>, я хочу <действие>, чтобы <цель>.

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

Этот список историй становится вашим планом работ. Если функция не закрывает ни одну User Story, она, скорее всего, лишняя.

Этап 2. Сценарии и User Flow

Поняв, кто наш пользователь и чего он хочет, нужно продумать, как он это сделает. Это называется проектированием взаимодействия.

User Flow (Поток пользователя)

User Flow — это схема, которая показывает путь пользователя по вашему сайту или приложению для выполнения конкретной задачи. Это не красивые макеты, а блок-схема из квадратиков и стрелочек.

Представьте путь покупки товара:

Главная страница.

Поиск товара.

Страница товара.

Корзина.

Оформление заказа.

Страница «Спасибо за покупку».

Но что, если товара нет в наличии? А что, если пользователь забыл пароль? Хороший UX-дизайнер предусматривает не только «счастливый путь» (Happy Path), но и все возможные ответвления и ошибки.

!Пример диаграммы User Flow, показывающей логику перехода между страницами.

Информационная архитектура (Sitemap)

Если User Flow — это путь, то Sitemap (карта сайта) — это вид сверху на всю структуру. Это иерархический список всех страниц сайта. Она помогает понять, как страницы вложены друг в друга и как будет выглядеть навигационное меню.

Пример простой структуры: * Главная * О нас * Услуги * Дизайн * Разработка * Контакты

Этап 3. Прототипирование

Только теперь, когда у нас есть логика и структура, мы начинаем создавать визуальные образы экранов. Но не спешите добавлять цвета! Мы начинаем с прототипов.

Вайрфреймы (Wireframes)

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

Зачем нужны вайрфреймы?

Скорость: Набросать схему можно за 5 минут. Перерисовывать готовый цветной макет — часы работы.

Фокус на сути: Если показать заказчику цветной макет, он начнет обсуждать оттенок синего. Если показать черно-белую схему, он будет обсуждать удобство расположения кнопок.

Вайрфреймы бывают: * Низкой детализации (Low-fidelity): Наброски от руки на бумаге или маркерной доске. * Высокой детализации (High-fidelity): Аккуратные схемы в графическом редакторе, где соблюдены реальные размеры отступов.

!Слева: бумажный набросок. Справа: цифровой вайрфрейм.

Интерактивные прототипы

Когда вайрфреймы утверждены, их можно «оживить». В современных инструментах (например, Figma) можно настроить связи между экранами. Кнопка «Купить» будет реально перекидывать на экран корзины.

Это позволяет протестировать сайт на реальных людях еще до того, как написана хоть одна строчка кода. Вы даете телефон с прототипом другу и просите: «Попробуй заказать пиццу». Если он завис и не может найти кнопку — значит, ваш UX требует доработки.

Инструменты UX/UI дизайнера

Раньше дизайнеры использовали Photoshop, но он плохо подходит для проектирования интерфейсов. Сегодня стандартом индустрии являются векторные онлайн-редакторы.

Самый популярный инструмент на данный момент — Figma. Его преимущества: * Бесплатный для начинающих. * Работает в браузере (не нужен мощный компьютер). * Командная работа: Можно работать над макетом одновременно с другими людьми, как в Google Docs. * Универсальность: В Figma можно делать всё: от User Flow и вайрфреймов до финального дизайна и анимации.

Заключение

UX-дизайн — это фундамент. Без него красивый фасад (UI) рухнет. Мы выяснили, что:

Нужно знать своего пользователя в лицо (Персоны).

Нужно продумывать путь пользователя (User Flow).

Нужно начинать с черно-белых схем (Вайрфреймы), чтобы не отвлекаться на декор.

В следующей статье мы наконец-то откроем Figma и попробуем создать свой первый вайрфрейм на практике, применяя знания о композиции и сетках. Готовьтесь творить!

До встречи на следующем уроке!

Инструментарий дизайнера: работа в Figma, компоненты и UI-киты

Мы прошли большой путь: изучили основы композиции и цвета, поняли, кто наши пользователи, и научились строить логические схемы (User Flow). Теперь, когда у нас есть теоретическая база и черно-белые наброски (вайрфреймы), пришло время перенести идеи в цифровой формат.

В этой статье мы познакомимся с главным инструментом современного веб-дизайнера — Figma. Мы разберем не просто «куда нажимать», а логику работы с интерфейсами: зачем нужны фреймы, как компоненты экономят часы работы и что такое UI-киты.

Почему Figma стала стандартом?

Еще 10 лет назад дизайнеры страдали в Photoshop. Это был инструмент для обработки фото, тяжелый и неповоротливый для веб-интерфейсов. Затем появился Sketch (только для Mac), а потом пришла Figma и изменила правила игры.

Почему 90% вакансий требуют знания Figma:

Работает в браузере. Вам не нужен мощный компьютер. Проект доступен с любого устройства.

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

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

Знакомство с интерфейсом

Когда вы впервые открываете Figma, интерфейс может показаться пустым. Это сделано специально, чтобы ничего не отвлекало от холста. Рабочая область делится на четыре основные зоны:

!Карта интерфейса Figma: слева — структура, справа — настройки, сверху — инструменты, по центру — творчество.

1. Панель слоев (Layers Panel) — Слева

Здесь живет иерархия вашего макета. Все элементы, которые вы добавляете на холст, появляются здесь. * Pages (Страницы): Позволяют разделять проект на части (например: «Черновики», «Вайрфреймы», «Финальный дизайн»). * Layers (Слои): Список всех объектов на текущей странице.

2. Панель свойств (Design Panel) — Справа

Это «пульт управления» выбранным объектом. Если вы выберете текст, здесь появятся настройки шрифта. Если выберете прямоугольник — настройки цвета, обводки и теней. Здесь же находится вкладка Prototype для создания связей между экранами и Inspect (Dev Mode) для разработчиков.

3. Панель инструментов (Toolbar) — Сверху

Самое необходимое: курсор, создание фреймов, геометрические фигуры, перо (для рисования иконок), текст и добавление комментариев.

4. Холст (Canvas) — Центр

Бесконечное пространство, где вы творите. Вы можете хранить здесь сотни экранов макетов.

Фреймы против Групп: Фундаментальное отличие

Новички, пришедшие из Photoshop, по привычке используют Группы (Groups). В веб-дизайне это ошибка. Вашим основным строительным блоком должен стать Фрейм (Frame).

В чем разница?

* Группа — это просто «мешок», в который сложили слои, чтобы они не разлетались. У группы нет своих свойств, кроме размера. * Фрейм — это «окно» или контейнер. Он имитирует экран устройства.

Суперсилы Фрейма:

Constraints (Ограничения): Вы можете сказать кнопке внутри фрейма: «Всегда оставайся в правом нижнем углу, даже если я растяну фрейм». Группа так не умеет.

Clip Content (Обрезка): Фрейм может скрывать то, что вылезает за его границы.

Layout Grids (Сетки): Сетку можно наложить только на фрейм.

> Используйте Группы только для объединения мелких деталей (например, частей логотипа). Для всего остального (кнопки, карточки, экраны) используйте Фреймы.

!Фреймы позволяют настраивать адаптивное поведение элементов, в отличие от простых групп.

Компоненты: Святой Грааль продуктивности

Представьте, что вы нарисовали дизайн интернет-магазина. У вас 50 страниц, и на каждой есть кнопка «Купить» синего цвета. Вдруг заказчик говорит: «Давайте сделаем кнопки зелеными и скруглим углы».

Без компонентов вам придется вручную менять 50 кнопок. С компонентами вы меняете одну, и меняются все 50.

Как это работает?

Main Component (Родительский компонент): Это оригинал. Он обозначается иконкой из четырех ромбиков. Любые изменения в нем транслируются на копии.

Instance (Экземпляр/Дочерний компонент): Это копия оригинала. Обозначается пустым ромбом.

Вы можете менять текст или картинку внутри Экземпляра (например, на одной кнопке написано «Купить», на другой «Заказать»), но стиль (цвет, шрифт, скругления) останется привязанным к Родителю.

Правило хорошего тона: Все повторяющиеся элементы (кнопки, иконки, поля ввода, шапки, подвалы) должны быть компонентами.

Auto Layout: Дизайн, который верстает сам себя

Auto Layout — это, пожалуй, самая мощная функция Figma. Она позволяет создавать динамические контейнеры, которые автоматически меняют размер в зависимости от содержимого.

Примеры использования: * Кнопка: Если вы напишете длинный текст, кнопка сама расширится, сохраняя отступы. * Список товаров: Если вы удалите одну карточку товара из середины, остальные сами «подъедут» вверх, закрывая дыру. * Меню: Если добавить новый пункт, меню само пересчитает расстояния.

Auto Layout работает на основе CSS-свойства Flexbox. Освоив его, вы начнете думать как верстальщик, и ваш макет будет легко превратить в код.

!Auto Layout автоматически подстраивает размер контейнера под контент, сохраняя заданные отступы.

UI-киты и Дизайн-системы

Дизайнеру не нужно каждый раз изобретать велосипед. Вам не нужно рисовать с нуля стандартную стрелочку «Назад» или поле ввода пароля. Для этого существуют UI-киты (User Interface Kits).

UI Kit — это набор готовых компонентов (кнопок, иконок, форм, шрифтовых пар), выполненных в едином стиле.

Зачем использовать UI-киты?

Скорость: Вы собираете макет как конструктор LEGO, а не рисуете каждый кирпичик.

Единообразие: Все элементы гарантированно сочетаются друг с другом.

Обучение: Разбирая чужой качественный UI-кит, вы учитесь, как правильно организовывать слои и компоненты.

Самые популярные системы, которые стоит изучить: * Material Design (от Google) — стандарт для Android и многих веб-сервисов. * Human Interface Guidelines (от Apple) — стандарт для iOS и macOS.

Вы можете найти тысячи бесплатных UI-китов в Figma Community (вкладка Community на главном экране).

Полезные плагины

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

* Unsplash: Позволяет в один клик вставлять красивые бесплатные фотографии в макет. * Iconify: Доступ к тысячам векторных иконок (Material, FontAwesome и др.). * Lorem Ipsum: Генерирует текст-рыбу, чтобы заполнить макеты контентом.

Заключение

Figma — это не просто рисовалка. Это среда для инженерного мышления.

Сегодня мы узнали:

Фреймы лучше Групп, потому что они управляют адаптивностью.

Компоненты спасают от рутины при правках.

Auto Layout делает макеты «резиновыми» и живыми.

UI-киты помогают не начинать с чистого листа.

В следующей статье мы объединим все знания: теорию цвета, UX-проектирование и инструменты Figma, чтобы создать ваш первый полноценный макет Landing Page. Убедитесь, что вы зарегистрировались в Figma и попробовали создать пару фреймов!

До встречи на практике!

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

Мы уже научились работать с цветом и типографикой, исследовали потребности пользователей и освоили инструменты Figma. Теперь перед нами встает одна из самых сложных, но интересных задач современного веб-дизайна.

Представьте, что вы нарисовали идеальный макет для своего ноутбука. Все выглядит гармонично, шрифты читаются, кнопки на своих местах. Но затем ваш заказчик открывает этот макет на смартфоне в метро, и... катастрофа. Текст слишком мелкий, кнопки невозможно нажать пальцем, а горизонтальная прокрутка ломает всю композицию.

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

Эра множества экранов

Раньше веб-дизайнеры создавали сайты только для мониторов с разрешением 1024x768 пикселей. Это было просто. Сегодня пользователь может зайти на ваш сайт с iPhone 13 Mini, iPad Pro, ноутбука на 13 дюймов или широкоформатного монитора 4K.

Игнорировать мобильных пользователей нельзя. По статистике, более 55% всего мирового трафика приходится на мобильные устройства. Если ваш сайт неудобен на телефоне, вы теряете больше половины аудитории.

Адаптивный vs Резиновый (Responsive vs Fluid)

Существует два основных подхода к тому, как сайт подстраивается под экран:

Резиновый (Fluid) дизайн: Элементы задаются в процентах от ширины экрана. Когда вы сужаете окно браузера, блоки плавно сжимаются, как гармошка. Это выглядит плавно, но на очень широких или очень узких экранах дизайн может выглядеть странно (слишком растянутым или сплюснутым).

Адаптивный (Adaptive) дизайн: Дизайнер рисует несколько фиксированных макетов для конкретных разрешений (например, отдельно для 320px, 768px и 1440px). Сайт определяет устройство и показывает нужную версию.

Современный стандарт — это Responsive Design (отзывчивый дизайн). Это комбинация обоих методов. Сайт ведет себя как «резиновый», но при достижении определенных точек (breakpoints) он перестраивается: блоки, которые стояли в ряд, встают друг под друга, меню превращается в «бургер», а шрифты меняют размер.

!Иллюстрация того, как контент перестраивается на разных экранах в отзывчивом дизайне.

Контрольные точки (Breakpoints)

Вам не нужно рисовать макеты под каждую существующую модель телефона (их тысячи!). Достаточно выбрать ключевые ширины экранов, на которых дизайн будет меняться. Эти ширины называются брейкпоинтами.

Стандартный набор разрешений для дизайнера в Figma:

* Desktop (Десктоп): 1440px (или 1920px). Это основной макет для компьютеров. * Tablet (Планшет): 768px (или 834px). Вертикальная ориентация планшета. * Mobile (Мобильный): 375px (или 390px). Стандартный современный смартфон.

> Дизайн — это не просто то, как это выглядит и ощущается. Дизайн — это то, как это работает. > — Стив Джобс [Биография Стива Джобса]

Подход Mobile First

Существует стратегия проектирования Mobile First («сначала мобильные»). Суть ее проста: вы начинаете дизайн не с десктопа, а с самого маленького экрана смартфона.

Почему это эффективно?

Фокус на главном. На маленьком экране мало места. Вы не можете добавить туда декоративные элементы или лишние блоки. Вы вынуждены оставить только самое важное для пользователя.

Расширять проще, чем урезать. Когда у вас есть готовая мобильная версия, добавить дополнительные колонки для десктопа легко. А вот попытаться впихнуть огромный десктопный сайт в экран телефона — мучительно больно.

Модульные сетки: скелет вашего интерфейса

Как сделать так, чтобы при изменении размера экрана элементы не «плясали» и оставались выровненными? Для этого используется модульная сетка (Grid System).

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

Анатомия сетки

Любая сетка в веб-дизайне состоит из трех элементов:

Колонки (Columns): Вертикальные блоки, в которых размещается контент (текст, картинки). Ширина колонок обычно указывается в процентах, чтобы они могли растягиваться.

Межколонник (Gutter): Пустое пространство между колонками. Оно нужно, чтобы контент из соседних колонок не слипался. Обычно это фиксированное значение (например, 20px или 24px).

Поля (Margins): Отступы от левого и правого края экрана до контента. На мобильных устройствах поля меньше (16-20px), на десктопах — больше (от 100px и выше, либо центрирование контента).

!Визуальная структура 12-колоночной сетки с обозначением основных элементов.

Магия числа 12

Почему стандартом в веб-дизайне стала именно 12-колоночная сетка? Почему не 10 или 15?

Все дело в математике и гибкости. Число 12 имеет больше всего делителей. * Вы можете разделить экран на 2 равные части (по 6 колонок). * На 3 части (по 4 колонки). * На 4 части (по 3 колонки). * На 6 частей (по 2 колонки).

Если бы мы использовали 10 колонок, мы бы не смогли разделить экран на 3 или 4 равные части без дробных чисел. 12 колонок дают дизайнеру максимальную свободу компоновки.

Сетки на разных устройствах

Как сетка меняется при переходе от компьютера к телефону? Количество колонок уменьшается.

1. Desktop (Десктоп) — 12 колонок

Здесь у нас много места. Мы можем позволить себе сложные композиции: меню слева, контент по центру, баннеры справа. * Настройки: 12 колонок, Gutter 24px, Margins по центру или фиксированные.

2. Tablet (Планшет) — 6 или 8 колонок

Экран сужается. Блоки, которые занимали 3 колонки на десктопе (4 в ряд), теперь могут занимать 4 колонки (2 в ряд). * Настройки: 6-8 колонок, Gutter 20px, Margins 30-40px.

3. Mobile (Телефон) — 4 колонки

На телефоне контент почти всегда выстраивается в одну колонку по вертикали. Однако сетка из 4 колонок все равно нужна для выравнивания мелких элементов (например, иконок или кнопок). * Настройки: 4 колонки, Gutter 16px, Margins 16-20px.

Практика в Figma: Layout Grid

В предыдущей статье мы говорили о Фреймах. Сетки в Figma настраиваются именно в свойствах Фрейма.

Выберите фрейм (например, Desktop 1440).

В правой панели найдите раздел Layout Grid.

Нажмите «+». По умолчанию появится сетка в клеточку (как в тетради). Она нам не нужна.

Нажмите на иконку настроек сетки и поменяйте тип с Grid на Columns.

Задайте параметры: Count (12), Margin (например, 100), Gutter (24).

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

Constraints (Ограничения)

Чтобы сетка работала в паре с адаптивностью, нужно использовать Constraints. Это настройки, которые говорят элементу, как вести себя при изменении размера родительского фрейма.

* Left / Top: Элемент приклеен к левому верхнему углу (стандартное поведение). * Center: Элемент всегда остается по центру. * Scale: Элемент меняет размер пропорционально фрейму. * Left and Right: Элемент растягивается, сохраняя отступы от краев. Это идеальный вариант для фонов и карточек в резиновом дизайне.

Особенности проектирования для Touch-интерфейсов

Адаптация — это не только изменение размеров блоков. Это изменение способа взаимодействия. На десктопе у нас есть точный курсор мыши. На мобильном — толстый палец.

Размер имеет значение. Минимальная зона нажатия для пальца — 44x44 пикселя (по гайдлайнам Apple) или 48x48 dp (Android). Если вы сделаете кнопку меньше, пользователю будет сложно в нее попасть.

Ховеры (Hover) не работают. На телефоне нет состояния «наведения курсора». Эффекты, которые появляются при наведении мыши, на телефоне работать не будут. Не прячьте важную информацию в ховеры.

Шрифты. Текст, который хорошо читается на мониторе (16px), на телефоне тоже должен быть не меньше 16px. Не уменьшайте основной текст до 12px, иначе пользователю придется подносить телефон к носу.

Заключение

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

Главные выводы:

Используйте 12-колоночную сетку для десктопа и 4-колоночную для мобильных.

Помните про брейкпоинты (375, 768, 1440).

Проектируйте кнопки под палец (минимум 44px).

Используйте Constraints в Figma, чтобы автоматизировать адаптивность.

В следующей статье мы перейдем к самому интересному — созданию вашего первого полноценного макета Landing Page, используя все знания, которые мы накопили за этот курс. Мы соберем структуру, подберем цвета, настроим сетку и сделаем адаптивные версии.

До встречи на практике!

Подготовка макетов к верстке, современные тренды и создание портфолио

Поздравляю! Вы прошли огромный путь. Вы изучили композицию и цвет, поняли психологию пользователя, освоили Figma и научились адаптировать дизайн под мобильные устройства. У вас есть готовый макет. Но что дальше?

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

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

Часть 1. Handoff: передача макета в разработку

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

Разработчики не читают мысли. Они видят только то, что есть в файле Figma. Ваша задача — навести там идеальный порядок.

Чек-лист подготовки макета

Порядок в слоях.

Никаких Frame 145, Group 12, Vector 3. Каждый значимый элемент должен иметь понятное название на английском языке: Header, Footer, Button_Primary, Hero_Image. Разработчику проще ориентироваться в коде, если он видит те же названия в дизайне.

Удаление мусора.

Удалите все черновики, неудачные варианты и пустые фреймы, которые лежат вокруг основного макета. Оставьте только финальную утвержденную версию.

Стили и переменные.

Убедитесь, что все цвета и шрифты привязаны к стилям Figma (Text Styles, Color Styles). Если разработчик увидит, что в одном месте вы использовали черный цвет #000000, а в другом — #010101 (случайно), он напишет лишний код. Стили гарантируют единообразие.

!Слева — кошмар разработчика, справа — профессионально подготовленный файл.

Экспорт графики

Разработчику нужно выгрузить из вашего макета картинки и иконки. Вы должны заранее настроить параметры экспорта (раздел Export в правой панели Figma).

* SVG: Используйте для иконок и логотипов. Это векторный формат. Он мало весит и остается четким при любом увеличении. * JPG: Используйте для фотографий без прозрачного фона. Это сжатый формат, который экономит трафик. * PNG: Используйте для изображений с прозрачным фоном.

> Хороший дизайн — это как холодильник. Когда он работает, никто не замечает, но когда он не работает, это воняет. > — Айрин Ау, UX-дизайнер Google

Часть 2. Современные тренды веб-дизайна

Веб-дизайн меняется быстро. То, что было модно 5 лет назад (например, длинные тени и градиенты «вырви глаз»), сегодня выглядит устаревшим. Рассмотрим актуальные приемы, которые сделают ваши работы современными.

1. Bento Grids (Бенто-сетки)

Этот тренд популяризировала компания Apple в своих презентациях и интерфейсах iOS. Идея вдохновлена японскими коробочками для ланча «бенто», где еда разложена по аккуратным отсекам.

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

!Интерфейс, организованный по принципу Bento Grid.

2. Крупная типографика

Дизайнеры перестали бояться огромных букв. Заголовки становятся главным визуальным элементом первого экрана, иногда даже заменяя собой изображения. Это помогает мгновенно донести суть предложения.

3. Темная тема (Dark Mode)

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

4. Микро-взаимодействия

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

Часть 3. Создание портфолио и поиск работы

Вы научились делать дизайн. Теперь нужно, чтобы об этом узнал мир. Ваше резюме никого не интересует так сильно, как ваше портфолио.

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

Behance: Самая популярная платформа для дизайнеров в мире. Здесь публикуют подробные кейсы. Это ваша витрина для работодателей.

Dribbble: Социальная сеть для дизайнеров, где публикуют небольшие фрагменты работ (шоты). Больше подходит для вдохновения и лайков, чем для поиска серьезной работы новичку.

Tilda / Readymag / Notion: Вы можете собрать собственный сайт-портфолио. Это выглядит солидно и показывает, что вы умеете работать с конструкторами.

Структура Кейса (Case Study)

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

Хороший кейс на Behance рассказывает историю:

Задача: Что нужно было сделать? (Например: «Сделать редизайн сайта доставки пиццы»).

Проблема: Почему старый сайт был плохим? («Пользователи не могли найти меню, корзина не работала»).

Исследование: Покажите персон, User Flow, наброски от руки (вайрфреймы). Это доказывает, что вы думали над логикой.

Визуальное решение: Покажите цветовую палитру, шрифты, сетку.

Финальный результат: Красивые макеты экранов (десктоп и мобильная версия).

> Дизайн — это интеллект, ставший видимым. > — Алина Уилер, автор книг по брендингу

Как получить первый заказ?

Если у вас нет реальных клиентов, придумайте их!

* Редизайн существующего сервиса. Возьмите любимое приложение, найдите в нем недостатки и перерисуйте его. Опишите, почему ваше решение лучше. * Учебные проекты. Курсовые работы отлично подходят для портфолио, если они оформлены как полноценный кейс. * Благотворительность. Предложите бесплатно сделать дизайн для местного приюта животных или волонтерской организации. Вы получите опыт и реальный кейс, а они — помощь.

Заключение курса

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

Помните:

Дизайн решает задачу пользователя.

Удобство важнее красоты.

Порядок в слоях — признак профессионала.

Не бойтесь чистого листа. Открывайте Figma и начинайте творить. Удачи!