Дизайн сайта: структура, шрифты, цвета и адаптив для новичка
Дизайн сайта складывается из четырёх решений: структура страницы, шрифт и размер текста, палитра с достаточным контрастом и поведение на телефоне. Создать дизайн можно самому в CSS, взять готовый шаблон или собрать страницу из блоков в конструкторе. Ниже каждое решение с примером кода и подбор пути под ваш опыт.
Ответ за 30 секунд
Дизайн сайта строят на четырёх решениях: структура, шрифт от 16 пикселей, палитра с контрастом не ниже 4,5 к 1 и раскладка под телефон. Новичку проще взять готовый шаблон и подстроить цвета, чем рисовать с нуля. Свой CSS нужен для нестандартного вида. Цены на 24 октября 2026.
Конструктор Таймвеб: тариф Базовый 209 ₽ в месяц за год, 150 шаблонов, 170 блоков, бесплатный SSL и 10 дней на пробу (на 24 октября 2026).
Свой дизайн или готовый шаблон: что выбрать новичку4 решенияструктура, шрифт, цвет, адаптив
16 pxминимум для основного текста
4,5 к 1контраст текста и фона по WCAG
01 · 1 мин
Из каких решений складывается дизайн сайта#
Дизайн это порядок, а не украшение: посетитель должен за несколько секунд понять, что это за сайт и куда нажать. Для этого достаточно принять четыре решения.
| Решение | Что выбрать | Ориентир |
|---|---|---|
| Структура | порядок блоков и сетка | один главный блок на экран, отступы одной шкалы |
| Шрифт | гарнитура и размер | основной текст от 16 пикселей, не больше двух шрифтов |
| Цвет | фон, текст, акцент | контраст текста с фоном не ниже 4,5 к 1 |
| Адаптив | раскладка на телефоне | колонки встают друг под другом |
Последнюю строку разбирает страница адаптивный сайт, остальные три ниже.
02 · 1 мин
Как выстроить структуру страницы: порядок блоков, сетка и отступы#
Первый экран отвечает на три вопроса: что это за сайт, чем он полезен и что нажать дальше. Под ним идут доводы: услуги, цены, примеры работ, отзывы, а в конце контакты и повторный призыв к действию. Какие страницы нужны сайту целиком, описано в материале структура сайта.
Расстояния между блоками задайте одной шкалой, например кратной восьми пикселям. Колонку содержимого ограничьте по ширине, иначе строка тянется на весь монитор:
.container {
max-width: 1080px;
margin: 0 auto;
padding: 0 16px;
}
.section { padding: 48px 0; }03 · 1 мин
Какой шрифт, размер текста и цвета выбрать для сайта#
Основной текст набирают размером от 16 пикселей с межстрочным интервалом около 1,5: на меньших размерах приходится щуриться, особенно на телефоне. Строка читается легко при длине примерно 60-75 знаков, поэтому колонку делают уже экрана. Берите не больше двух шрифтов, один для заголовков и один для текста. Системные шрифты вроде system-ui не требуют загрузки и открываются мгновенно.
С цветом хватит трёх ролей: фон, цвет текста и акцент для кнопок и ссылок. Контраст текста с фоном для обычного размера должен быть не ниже 4,5 к 1: это требование уровня AA стандарта доступности WCAG 2.2. Тёмно-серый текст #1f2933 на белом даёт около 15 к 1, акцент #0b5fff около 5 к 1, а светло-серый #999999 на белом только 2,9 к 1 и проверку не проходит.
:root {
--bg: #ffffff;
--text: #1f2933;
--accent: #0b5fff;
}
body { background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; }
a, .button { color: var(--accent); }Переменные собраны в одном месте, поэтому палитру меняют за минуту. Правила проверки контраста описаны в документации W3C.
Инструмент · 1 мин
Свой дизайн или готовый шаблон: что выбрать новичку#
Свой CSS даёт уникальный вид, но требует навыков и времени. Готовый шаблон экономит недели, но его вид знаком многим посетителям. Какие бывают шаблоны и где их брать, разобрано на странице шаблоны для сайта. Ответьте на два вопроса.
Свой дизайн или готовый шаблон: подбор по двум вопросам
Ответьте, и подсказка назовёт путь для вашего сайта
05 · 1 мин
Как собрать дизайн в конструкторе без кода#
В конструкторе дизайн собирают из блоков: выбирают шаблон, меняют цвета, шрифты и фото под себя, переставляют секции. На тарифе Базовый у Таймвеб за 209 ₽ в месяц при оплате за год доступны 150 шаблонов и 170 блоков, а на тарифе Оптимальный за 359 ₽ в месяц домен .RU в подарок (на 24 октября 2026).
Ограничение одно: настройки зависят от платформы, а вёрстку под нестандартную идею не допишешь. Зато нет работы с кодом и проверки на телефонах. Как собрать сайт целиком, описано на странице конструктор сайтов.
06 · 1 мин
Вопросы про дизайн сайта#
Как создать дизайн сайта онлайн без дизайнера?
Возьмите шаблон конструктора и подстройте цвета, шрифты и фото: так получается аккуратный вид без макета. Если нужен уникальный стиль, задачу отдают дизайнеру, порядок описан на странице заказать создание сайта.
Сколько шрифтов и цветов нужно для дизайна сайта?
Достаточно одного-двух шрифтов и трёх цветовых ролей: фон, текст, акцент. Лишние варианты утяжеляют страницу и делают вид пёстрым.
Нужно ли рисовать макет перед созданием сайта?
Для простой визитки хватит схемы блоков на бумаге: порядок экранов и заголовки. Макет в графическом редакторе нужен, когда над сайтом работают несколько человек.
Как проверить контраст цветов на сайте?
Введите цвет текста и фона в онлайн-проверку контраста WCAG и убедитесь, что результат не ниже 4,5 к 1. Для крупного текста порог ниже, 3 к 1.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: Конструктор сайтов Таймвеб, timeweb.com/ru/services/constructor, проверено 24 октября 2026; Домены Таймвеб, timeweb.com/ru/services/domains, проверено 24 октября 2026; MDN Web Docs: CSS, developer.mozilla.org/ru/docs/Web/CSS, проверено 24 октября 2026; W3C: Understanding Contrast (Minimum), WCAG 2.2, w3.org/WAI/WCAG22/Understanding/contrast-minimum.html, проверено 24 октября 2026.
Соберите сайт в конструкторе
Если не хотите возиться с кодом, соберите сайт из блоков в конструкторе Таймвеб от 209 ₽ в месяц: шаблоны, блоки, бесплатный SSL и 10 дней на тест.
- Тарифы от 209 ₽ в месяц
- Без кода, из готовых блоков
- 150 шаблонов и бесплатный SSL
- Домен .RU в подарок на тарифе Оптимальный