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

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

Чтобы сайт выглядел дороже, не нужно обязательно добавлять сложную графику, нестандартный курсор, 3D или десяток анимаций. Гораздо важнее привести к системе типографику, отступы, изображения, кнопки, карточки и движение на странице. Ниже разберем именно те приемы, которые влияют на визуальное восприятие сайта. Техническую проверку перед публикацией — домен, HTTPS, favicon, битые ссылки, SEO-настройки, формы и другие обязательные вещи — здесь повторять не будем. Для этого лучше использовать отдельный чек-лист запуска сайта на Tilda.

1. Сначала уберите визуальный шум

Один из самых быстрых способов сделать сайт визуально дороже — перестать оформлять каждый блок как отдельный дизайн-проект. На недорогих по восприятию сайтах часто одновременно встречаются:

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

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

• основной и дополнительные цвета;
• стили заголовков и обычного текста;
• основные и вторичные кнопки;
• принцип оформления карточек;
• один или несколько согласованных радиусов скругления;
• набор повторяющихся отступов;
• стиль иконок;
• характер анимации.

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

Полезная проверка

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

2. Сделайте типографику заметно иерархичной

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

H1 — 64 px, H2 — 48 px, текст — 18 px.

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

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

16 → 20 → 28 → 40 → 56 px

или так:

16 → 18 → 24 → 32 → 48 px

Это не готовые значения для копирования, а пример принципа. Конкретные размеры зависят от гарнитуры, длины текста, композиции и устройства. Tilda в материалах по визуальной иерархии отдельно обращает внимание на необходимость заметного контраста между уровнями. Если один заголовок имеет размер 24 px, а следующий 22 px, формально они разные, но визуальной иерархии почти нет. В качестве заметной разницы Tilda приводит диапазон примерно в 1,5–2 раза для элементов разных уровней.

Не используйте слишком много размеров

Характерная проблема:

14 / 16 / 18 / 20 / 22 / 24 / 26 / 30 / 32 px

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

• крупный заголовок;
• заголовок раздела;
• небольшой заголовок;
• основной текст;
• дополнительный или служебный текст.

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

Следите не только за размером, но и за межстрочным расстоянием

Крупный заголовок с огромным расстоянием между строками часто выглядит рыхло. Основной текст с чрезмерно плотными строками, наоборот, превращается в тяжелое полотно. Tilda приводит ориентировочные диапазоны:

• основной текст — около 16 px и 120–160% межстрочного расстояния;
• H3 — 32–42 px и 110–120%;
• H2 — 48–60 px и 100–120%.

Сама Tilda подчеркивает, что это именно ориентиры: значения нужно корректировать под конкретный шрифт, объем текста и устройство. Для основного абзацного текста есть и требование доступности: MDN со ссылкой на рекомендации WCAG рекомендует line-height не менее 1.5.

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

Не пытайтесь сделать сайт дорогим только необычным шрифтом

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

3. Выстройте ритм: сетку и отступы

Следующий сильный признак визуально дорогого сайта — ощущение, что каждый элемент стоит именно там, где должен. Особенно быстро это ломается в Zero Block, где элементы можно свободно перемещать и появляется соблазн расставлять всё «на глаз». Проверьте две вещи.

Элементы должны привязываться к понятным линиям

Посмотрите, где начинаются:

• основные заголовки;
• тексты;
• фотографии;
• карточки;
• кнопки.

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

Используйте ограниченный набор расстояний

Похожая проблема возникает с отступами. Если на странице между похожими элементами используются 27, 34, 51, 63, 87 и 112 px без какой-либо системы, глаз замечает нерегулярность, даже если пользователь не может объяснить, что именно его смущает.

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

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

4. Сократите количество визуальных приемов

Один из самых характерных способов визуально удешевить сайт — попытаться сделать интересным каждый элемент. Например:

• первая карточка с тенью;
• вторая с градиентом;
• третья со стеклом;
• четвертая только с обводкой;
• один блок на бежевом фоне;
• следующий на сером;
• потом яркая плашка;
• затем огромная цветная форма.

В результате конкурировать за внимание начинает буквально всё.

Не делайте отдельный дизайн для каждой кнопки

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

Если основная кнопка на первом экране прямоугольная, в следующем блоке превращается в капсулу, затем получает обводку, а в конце страницы становится кнопкой со сложной тенью, сайт теряет целостность. То же относится к hover-состояниям.

Не превращайте каждый блок в карточки

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

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

Скругления, тени и градиенты должны быть системой

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

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

5. Работайте с изображениями как с частью дизайна

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

Проверьте:

• похож ли характер обработки фотографий;
• совпадает ли логика кадрирования;
• нет ли рядом дорогой предметной съемки и очевидного дешевого стока;
• не смешаны ли без причины фотография, 3D, плоские иллюстрации и несколько разных наборов иконок;
• достаточно ли качества у изображения для того размера, в котором оно показывается.

Не загружайте огромные исходники без необходимости

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

Для логотипов и простой графики используйте вектор, когда он подходит задаче

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

Но правило «всё делать SVG» неверно. Для обычной фотографии нужен растровый формат. Главная мысль здесь другая: не используйте тяжелый растровый файл там, где достаточно компактной векторной графики, и не растягивайте небольшое изображение до огромного размера.

6. Сделайте движение спокойным и последовательным

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

Например:

• один заголовок прилетает слева;
• второй появляется снизу;
• фотография увеличивается;
• карточки возникают каскадом;
• следующая секция движется с параллаксом;
• кнопка подпрыгивает;
• декоративная фигура постоянно вращается.

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

Для одного проекта лучше определить несколько принципов движения. Например:

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

То есть пользователь не должен замечать: «О, здесь использовали другой эффект». Он должен воспринимать движение как естественную часть сайта. Если добавляется пользовательская CSS-анимация, стоит также учитывать системную настройку prefers-reduced-motion, с помощью которой браузер может определить, что пользователь предпочитает уменьшенное количество необязательного движения.

Добавьте аккуратный прелоадер, если он подходит проекту

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

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

7. Доведите до системы мелочи

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

Проверьте:

• одинаковы ли размеры одинаковых кнопок;
• одинаково ли оформлены стрелки;
• совпадает ли толщина похожих линий;
• одинаковы ли иконки по визуальному весу;
• не прыгают ли радиусы между похожими карточками;
• совпадают ли отступы внутри одинаковых элементов;
• одинаково ли оформлены заголовки одного уровня;
• согласованы ли hover-состояния;
• нет ли элемента, который существует на сайте в единственном визуальном стиле.

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

Визуально дорогой дизайн очень часто отличается не количеством добавленного, а количеством того, что дизайнер решил не добавлять.

Быстрый чек-лист: что проверить на своем сайте

Перед финальной оценкой страницы пройдитесь по ней целиком:

• Есть понятная система H1, H2, H3 и основного текста.
• Одинаковые текстовые роли оформлены одинаково.
• Межстрочное расстояние соответствует размеру и назначению текста.
• Нет большого количества почти одинаковых размеров шрифта.
• Заголовки действительно отличаются от второстепенного текста.
• Основные элементы страницы привязаны к понятной сетке.
• Похожие расстояния действительно повторяются.
• Между секциями больше воздуха, чем между связанными элементами внутри них.
• Основные кнопки выглядят одинаково.
• Карточки одного типа оформлены одинаково.
• Нет случайного набора скруглений, теней и обводок.
• Используется ограниченная и понятная цветовая система.
• Фотографии выглядят как единый набор.
• Иконки выполнены в одном стиле.
• Изображения достаточно качественные, но не загружены неоправданно тяжелыми файлами.
• Векторная графика используется там, где она действительно подходит.
• Анимации работают по нескольким понятным сценариям, а не по отдельному сценарию для каждого блока.
• Если используется прелоадер, он поддерживает стиль сайта и не мешает быстро получить доступ к контенту.
• На мобильных устройствах сохраняется та же визуальная иерархия, а не просто уменьшается десктопная версия.
• На странице нет декоративных элементов, которые ничего не дают композиции.

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

Как понять, что именно делает ваш сайт визуально дешевле

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