21.07.2026 08:00
Olxa 0 3400 Источник
Ломакина Ольга

Продуктовый дизайнер в Домклик

В первых двух частях (1, 2) мы разобрали, для чего дизайнеру требуется знание основ вёрстки, и познакомились с языком разметки HTML. Сегодня мы углубимся в то, как простая разметка превращается в дизайн, и поговорим о CSS.

CSS — это набор правил, каждое из которых состоит из двух частей:

  1. Селектор (Selector): указывает, к какому элементу на странице применить стиль — это может быть тег (h1, p), класс (.button) или ID (#header)

  2. Блок объявлений (Declaration Block): набор свойств и их значений, заключённые в фигурные скобки {}

Пример простого правила:

h1 {
    color: #333; /* Цвет текста */
    font-size: 32px; /* Размер шрифта */
}

Это правило говорит браузеру: «Найди все заголовки первого уровня (h1) и примени к ним тёмно-серый цветом текста #333 и размер шрифта 32 пикселя».

Основные свойства для работы с макетом

Дизайнеру важно понимать, какие свойства отвечают за визуальную часть. Вот главные из них:

1. Типографика (Text & Fonts)

Это самая частая задача. В макете вы задаëте шрифты и размеры, а в CSS это выглядит так:

  • font-family: название шрифта (важно помнить про «фолбэк» (fallback) — список запасных шрифтов на случай, если основной не загрузится)

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

  • font-size: размер текста

  • line-height: межстрочный интервал (в дизайне часто указывают просто число — например, 1.5 означает множитель от размера шрифта)

  • letter-spacing: расстояние между буквами

Цвет и фон (Color & Background)

Здесь всё интуитивно понятно:

  • color: цвет текста

  • background-color: цвет заливки элемента

  • background-image: фоновая картинка

Отступы и рамки (Box Model)

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

  • Содержимого (Content): текст или изображение.

  • Внутреннего отступа (Padding): пустое пространство между содержимым и границей

  • Границы (Border): линии вокруг элемента

  • Внешнего отступа (Margin): пустое пространство между разными элементами.

В CSS за это отвечают свойства
padding, margin  иborder.

Понимание этой модели помогает избежать ситуаций, когда дизайнер задаëт высоту кнопки в 40px, а верстальщик делает её 48px из-за внутренних отступов по умолчанию.

Позиционирование и раскладка

Раньше это было самой сложной частью верстки, но с появлением Flexbox и Grid всё стало проще.

Flexbox идеально подходит для одномерных макетов: навигационных меню, карточек товаров в ряд, выравнивания элементов по центру.

.nav {
    display: flex; /* Включаем флекс-контейнер */
    justify-content: space-between; /* Распределяем элементы с равными промежутками */
}

Grid — это инструмент для создания сложных двумерных сеток, похожих на журнальную вëрстку.

.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Создаем сетку из 12 колонок */
}

Дизайнеру полезно рисовать сетку макета с колонками и отступами (гаттерами), чтобы верстальщик мог легко перенести её в Grid-сетку.

Адаптивность (Responsive Design)

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

Пример:

/* Эти стили применятся ко всем элементам с классом .card,
если ширина экрана меньше или равна 768 пикселей */
@media screen and (max-width: 768px) {
    .card {
        width: 100%; /* На мобильном карточка занимает всю ширину */
    }
}

Когда вы создаёте дизайн для мобильных устройств, вы фактически определяете новые правила, которые верстальщик реализует через медиазапросы (max-width: ...).

Как дизайнеру упростить жизнь верстальщику

  1. Используйте Auto Layout в Figma. 
    Если вы используете автомакеты для кнопок и карточек, вы уже мыслите категориями CSS Flexbox. Это значительно упрощает перенос дизайна в код.

  2. Давайте имена слоям осмысленно. Слой с названием Rectangle 123_copy_5 не несёт никакой информации. Назовите его button_primary или card_image. Хорошие имена слоёв часто становятся именами классов в CSS (.button-primary).

  3. Соберите руководство. Выделите на отдельном артборде все базовые стили: типографику, цвета, состояния кнопок (основное, наведение, неактивное). Это готовый UI-набор для верстальщика.

  4. Не забывайте про интерактивность. Покажите состояния элементов: как выглядит кнопка при наведении (hover), какой цвет у посещëнной ссылки (visited), как выглядит поле ввода при фокусе (focus).

Освоив эти базовые понятия CSS, вы сможете не просто передавать «картинку», а проектировать интерфейсы с пониманием того, как они будут жить и работать в браузере.

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

? Telegram-канал Домклик Дизайн
https://t.me/domclickdesign

Комментарии (0)