ТИЛЬДА

Чтобы делать крутые, продающие и цепляющие сайты, нужно учитывать несколько ключевых формул и принципов. Они помогут сделать сайт удобным, эстетичным и конверсионным.

1. Формула идеальной читаемости (размер шрифта, высота строки, длина строки)

Эти параметры определяют, насколько удобно читать текст на сайте.

Размер шрифта (Font Size): 16–20 px (для основного текста).
Межстрочный интервал (Line Height):Body: размер шрифта × 1.5 (например, 16 px → 24 px).
Заголовки: размер шрифта × 1.2–1.3.
Длина строки: 50–75 символов (включая пробелы) — идеальная читаемость.

Пример: если используешь 18 px для текста, то:
✅ Line Height = 18 × 1.5 = 27 px
✅ Длина строки ≈ 60 символов

2. Формула цветового контраста

Текст должен хорошо читаться на фоне. Для этого используют контраст по WCAG (Web Content Accessibility Guidelines).

Минимальный контраст для читаемости:
✅ Черный (#000) текст на белом (#FFF) фоне → Контраст 21:1 (отлично)
✅ Темно-серый (#333) на светло-сером (#F5F5F5) → Контраст 10:1 (норм)
❌ Серый (#888) на белом (#FFF) → Контраст 2.5:1 (плохо, сложно читать)
Проверить контраст можно на сайте contrast-ratio.com.

3. Золотое сечение в дизайне (1.618)

Этот коэффициент помогает правильно распределять размеры блоков.
Применение:

Если у тебя есть блок шириной 960 px, то высота должна быть 960 ÷ 1.618 ≈ 593 px.
Если шрифт основного текста 16 px, заголовок может быть 16 × 1.618 ≈ 26 px.

Это создаст естественный баланс и эстетическую гармонию.

4. Формула ритма отступов (Spacing & Padding)

Отступы между элементами должны быть кратны 4 px (8, 12, 16, 24, 32, 48 px и т. д.).
Примеры:

Отступы между заголовком и текстом: 16–24 px.
Между секциями (разделами): 48–80 px.
Поля в кнопках: 16 px сверху и снизу, 32 px слева и справа.

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

5. Формула идеального CTA (призыв к действию)

Чтобы кнопки были заметными и конверсионными, используют 3 ключевых элемента:
CTA = (Контраст + Четкость + Место)
✅ Контраст → Кнопка должна выделяться (например, на белом фоне – яркая синяя/красная кнопка).
✅ Четкость → Текст на кнопке должен быть конкретным («Купить», «Записаться», «Получить консультацию»).
✅ Место → Размещай кнопку выше сгиба («above the fold») и дублируй внизу страницы.
Пример CTA-кнопки:
🔹 Плохо: «Оставить заявку» (непонятно, что будет дальше)
✅ Хорошо: «Получить бесплатную консультацию» (четкий оффер)

Что значит «место» для CTA-кнопки?
Где лучше размещать кнопку, чтобы её нажали?
Люди читают сайты по F- или Z-паттерну (см. пункт 6). Это значит, что самые заметные точки — левый верхний угол, центр и правый нижний угол экрана.
Лучшие места для кнопок CTA:
✅ Above the Fold – сразу в первом экране (без скролла). Люди должны видеть кнопку, не листая страницу.
✅ После блока с УТП – когда клиент понял, что ему предлагают.
✅ После списка преимуществ – сразу после аргументов «почему мы».
✅ В конце страницы – для тех, кто дочитал (закрываем сомнения).
Пример расположения CTA:

Главный экран: «Получить консультацию»
После блока с выгодами: «Заказать видеонаблюдение»
В футере: «Связаться с нами»

6. Формула визуальной иерархии (F-паттерн и Z-паттерн)

Как люди сканируют сайты?

F-паттерн → Для текстовых страниц. Люди читают слева направо, сначала заголовки, потом бегло основное тело.
Z-паттерн → Для лендингов. Внимание двигается по диагонали: сначала верхний левый угол, потом вправо, вниз и снова влево.

Вывод:
✅ Размещай ключевую информацию и CTA в начале пути взгляда пользователя (верхняя часть страницы и в точке пересечения «Z»).

7. Формула скорости загрузки сайта (3 сек. или уходят 50% пользователей)

Люди не любят медленные сайты.
✅ Критическая скорость загрузки: до 3 сек.
✅ Если дольше 3 сек. — 50% пользователей покинут сайт.
✅ 1 секунда задержки = на 7% меньше конверсий.
Как ускорить сайт:

Сжимай изображения (WebP вместо PNG, SVG для иконок).
Минимизируй анимации.
Используй кеширование (Tilda, Webflow это делают автоматически).

Проверять скорость можно на Google PageSpeed Insights.

8. Формула баланса текста и картинок (60/40)

Контент должен быть сбалансирован:
✅ 60% текст, 40% изображения — идеальный баланс.
✅ Если 80% текста, сайт перегружен, люди не читают.
✅ Если 80% картинок, нет информации, сайт не объясняет ценность.

9. Формула 8-секундного внимания

Средний пользователь решает за 8 секунд, останется он на сайте или нет.
Что важно в первые 8 сек.?
✅ Ясный заголовок (решает боль клиента).
✅ Подзаголовок (конкретика).
✅ CTA-кнопка (призыв к действию).
Пример:
❌ Плохо: «Видеонаблюдение для всех» (размыто)
✅ Хорошо: «Умное видеонаблюдение: защита вашего дома 24/7» (четко)

10. Формула адаптивности (4 точки разметки)

Сайт должен быть удобен на разных экранах.
✅ Десктоп (≥1280 px) — полноразмерный дизайн.
✅ Планшет (768–1280 px) — уменьшенные отступы, мобильная навигация.
✅ Мобильный (360–768 px) — крупные кнопки, вертикальные блоки.
✅ Минимальный (≤360 px) — самое важное, никаких сложных элементов.
Тестируй сайт на мобильных устройствах!
Вывод: что применять сразу?Если хочешь делать крутые сайты:
✅ Оптимизируй шрифты и отступы (формула читаемости).
✅ Делай контраст CTA (продающие кнопки).
✅ Размещай контент по F/Z-паттерну (удобство восприятия).
✅ Делай сайт быстрым (скорость = конверсии).
✅ Тестируй мобильную версию (она важнее десктопа).
Если будешь применять эти формулы, твои сайты станут не просто красивыми, а реально продающими

5. Что значит «место» для CTA-кнопки?Где лучше размещать кнопку, чтобы её нажали?
Люди читают сайты по F- или Z-паттерну (см. пункт 6). Это значит, что самые заметные точки — левый верхний угол, центр и правый нижний угол экрана.
Лучшие места для кнопок CTA:✅ Above the Fold – сразу в первом экране (без скролла). Люди должны видеть кнопку, не листая страницу.
✅ После блока с УТП – когда клиент понял, что ему предлагают.
✅ После списка преимуществ – сразу после аргументов «почему мы».
✅ В конце страницы – для тех, кто дочитал (закрываем сомнения).
Пример расположения CTA:

Главный экран: «Получить консультацию»
После блока с выгодами: «Заказать видеонаблюдение»
В футере: «Связаться с нами»

Где нельзя ставить CTA:❌ В тексте без выделения – люди её просто не увидят.
❌ В местах с низким контрастом – если кнопка сливается с фоном.
❌ Только в одном месте – люди должны видеть кнопку несколько раз.
Скругление кнопок, картинок и подложек – влияет ли это? 1. Скругление кнопок✅ Круглые и мягкие кнопки → ассоциируются с дружелюбностью, безопасностью, инновациями.
✅ Четкие углы (0-4 px радиус) → выглядят строгими, деловыми, корпоративными.
Как выбрать радиус скругления?

0 px (прямоугольные) – формально, строго (например, банки, IT-сервисы).
4–8 px – универсальный вариант, выглядит современно.
16–32 px – дружелюбно, мягко (подходит для B2C, SaaS, мобильных приложений).
50% (круглая кнопка) – для иконок, соцсетей.

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

2. Скругление картинок и подложекОвальные / закругленные фото → выглядят мягче, дружелюбнее.
Квадратные без скруглений → строгий, профессиональный стиль.
Каскадные (один угол скруглен, другие острые) → трендовый, динамичный стиль.

❗ Главное правило: скругления должны быть едиными по всему сайту!
❌ Плохо: кнопки круглые, а карточки с фото — острые.
✅ Хорошо: кнопки 16 px скругления → карточки тоже 16 px.

Вывод: что делать?CTA-кнопку ставь в самых заметных местах (первый экран, после выгод, в конце).
Если бренд серьезный и формальный → прямые углы (0-4 px).
Если сайт должен быть дружелюбным → 8-16 px скругления.
Если хочешь трендовый дизайн → комбинируй острые и мягкие углы.

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

Да, есть логика масштабирования радиуса скругления в зависимости от размера объекта. Если мелкие элементы будут слишком скруглёнными, а крупные — слабо, это нарушит гармонию дизайна.
Формула скругления (Radius Scaling Formula)Радиус скругления (R) должен быть пропорционален размеру объекта (S).
R = S × 0.1 → 0.25

Как это применять:Мелкие элементы (до 50 px) → скругление 4–8 px
Средние элементы (100–300 px) → скругление 12–24 px
Крупные блоки (500+ px) → скругление 32–64 px

📌 Примеры:
✅ Кнопка 48 px высотой → скругление 6 px (48 × 0.125)
✅ Карточка 300 px шириной → скругление 24 px (300 × 0.08)
✅ Баннер 1200 px → скругление 64 px (1200 × 0.05)
Почему это важно?Если у мелких объектов будет слишком сильное скругление, они станут похожи на таблетки. А если у крупных элементов — слишком слабое, будет ощущение несогласованности.
📌 Идея: Tilda и Figma рекомендуют пропорциональное скругление, и в UI-дизайне эта формула помогает держать баланс.

Хорошо, давай разберем формулу скругления простыми шагами.
Формула расчета радиуса скругленияR = S × K, где:

R — радиус скругления (насколько сильно закругляются углы).
S — размер объекта (например, ширина или высота кнопки, карточки, блока).
K — коэффициент скругления (от 0.05 до 0.25 в зависимости от типа элемента).
Как выбрать коэффициент K?Для кнопок → K = 0.125
Для карточек, контейнеров → K = 0.08
Для больших блоков, баннеров → K = 0.05

Примеры расчетов 1. Кнопка (ширина 160 px, высота 48 px)Формула:
R = 48 × 0.125 = 6 px
📌 Итог: радиус скругления 6 px
2. Карточка товара (300 × 400 px)Формула:
R = 300 × 0.08 = 24 px
📌 Итог: радиус скругления 24 px
3. Баннер на сайте (1200 × 600 px)Формула:
R = 1200 × 0.05 = 60 px
📌 Итог: радиус скругления 60 px

Как это применять на практике?Определяешь размер объекта.
Подбираешь коэффициент в зависимости от типа элемента.
Умножаешь размер на коэффициент и получаешь радиус скругления.

Теперь твои скругления будут выглядеть гармонично, а сайт — более эстетичным.

Выбор коэффициента K зависит от типа элемента и его визуального веса. Чем больше объект, тем меньше коэффициент.

Правило выбора K:Мелкие объекты (кнопки, иконки, бейджи): K = 0.125
Средние объекты (карточки, контейнеры, модальные окна): K = 0.08
Крупные объекты (баннеры, фоновые секции): K = 0.05

Как это работает на практике? 1. Кнопка 48 px (маленький объект, K = 0.125)Формула: R = 48 × 0.125 = 6 px
2. Карточка товара 300 px (средний объект, K = 0.08)Формула: R = 300 × 0.08 = 24 px
3. Баннер 1200 px (крупный объект, K = 0.05)Формула: R = 1200 × 0.05 = 60 px
Почему нельзя делать одно скругление для всего?Если маленькие объекты скруглить слишком сильно → они станут похожи на таблетки.
Если большие объекты скруглить слабо → сайт будет выглядеть угловатым и несбалансированным.
📌 Запомни:

Кнопки, бейджи → 4–8 px
Карточки, модалки → 16–32 px
Баннеры, секции → 40–80 px

Теперь ты сможешь делать скругления пропорциональными и гармоничными.

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

1. Базовые рекомендации по размерам текста

Размер шрифта зависит от типа текста и его важности:

Заголовки (H1): 32–48 px (жирный, SemiBold/Bold)
Подзаголовки (H2-H3): 24–32 px (обычный или SemiBold)
Основной текст (body): 16–20 px (Regular или Medium)
Дополнительный текст (сноски, подписи): 12–14 px (Regular или Light)

Базовые рекомендации по размерам текста.
Размер шрифта зависит от его роли на странице:

Заголовки (H1) — самые крупные, привлекают внимание, обычно 32–48 px.
Подзаголовки (H2-H3) — меньше основного заголовка, но все еще выделяются: 24–32 px.
Основной текст (body) — комфортный для чтения, 16–20 px.
Дополнительный текст (сноски, подписи, примечания) — 12–14 px, т.к. он менее важен.

То есть, чем важнее элемент, тем он крупнее.

2. Формула золотого сечения для шрифтов

Есть подход, основанный на пропорциях:

Размер основного текста × 1.618 = размер заголовка
Например, если основной текст 16 px, то заголовок: 16 × 1.618 ≈ 26 px

3. Метод "4х" (по кратности)

Часто дизайнеры используют кратность 4 px, например:

Body: 16 px
H3: 20 px
H2: 24 px
H1: 32 px

4. Подбор толщины

(Weight)Bold (700-900) – для главных заголовков
SemiBold (600-700) – для второстепенных заголовков
Regular (400-500) – для основного текста
Light (200-300) – для дополнительной информации

5. Оптимальное соотношение межстрочного интервала (Line Height)

Основной текст: размер шрифта × 1.5 (например, 16 px → 24 px)
Заголовки: размер шрифта × 1.2–1.3

Оптимальное соотношение межстрочного интервала (Line Height)
Line Height (межстрочный интервал) — это расстояние между строками текста. Оно делает текст более читаемым.

Есть простая формула:

Основной текст (body) → размер шрифта × 1.5Например, если текст 16 px, то 16 × 1.5 = 24 px (Line Height)
Заголовки (H1, H2) → размер шрифта × 1.2–1.3Если заголовок 32 px, то Line Height = 32 × 1.2 = 38 px

Почему это важно?
Если межстрочный интервал слишком маленький, текст "слипается" и его трудно читать. Если слишком большой — текст выглядит разорванным.
Надеюсь, теперь стало понятнее!

6. Максимальная длина строки

50–75 символов (включая пробелы) – идеальная читаемость
Если строка длиннее, то текст становится сложным для восприятия

Если делаешь сайт на Tilda, Figma или Webflow, можешь тестировать эти параметры и подстраивать под реальный макет.