Большой гайд по верстке сайтов для новичков

Этап 1. Основа проекта 

Верстка — этап, на котором дизайн-макет превращается в рабочий сайт. Эту задачу можно решить разными способами: с помощью no-code конструкторов — Tilda, Webflow, Readymag и Taptop, или с помощью кода — HTML, CSS и JavaScript. 

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

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

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

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

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

Этап 2. Брифинг

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

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

Отдельно обсудите тип сайта: простой лендинг, интернет-магазин, корпоративный сайт или сложный сервис? От этого зависят объем работы, сроки и бюджет. А еще станет понятно, можно ли собрать сайт на конструкторе или придется отдавать его в разработку.

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

Еще нужно заранее узнать, на какой CMS — системе управления контентом — все будет собираться. По сути, CMS — это движок, на котором работает сайт: WordPress, Bitrix, 1C и другие. У каждой системы есть свои ограничения: где-то сложнее настроить адаптив, где-то есть жесткие требования к сетке. Поэтому лучше сразу спросить, какие разрешения нужно отрисовать и какие технические нюансы стоит учесть. 

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

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

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

Читайте также:

Как сделать адаптивный макет: пошаговое руководство для веб-дизайнеров

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

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

Прототипы бывают разными. Иногда достаточно простого текстового плана, например, если вы показываете логику, а дальше делегируете работу дизайнеру. Но если работаете с клиентом, лучше показывать проработанный прототип, где все понятно без лишних объяснений. Картинки, блоки и структура должны быть так, чтобы по макету уже можно было представить, как будет выглядеть готовый сайт. Если в макете есть что-то сложное, например анимация или поведение элементов при взаимодействии, то можно анимировать их прямо в Figma, через вкладку Prototype.

Делать прототип удобнее всего в той же среде, где потом будете рисовать дизайн, — я обычно выбираю Figma. Текстовую структуру можно собрать в FigJam: там легко расставлять блоки и связывать их стрелками. 

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

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

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

Еще важно учитывать, откуда пользователь придет. Если сайт находят через поиск — важно, чтобы на первом экране был ответ на запрос. Если переход по QR-коду или рекламе — логика будет другой. В этом случае он, вероятно, перешел туда после того, как навел телефон на упаковку или баннер. Поэтому его внимание ограничено, а времени для того, чтобы он успел вникнуть, нет. Поэтому сайт должен быстро зацепить: крупный заголовок, ясная подача, четкий call to action. 

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

Читайте также:

Создание лендинга с нуля: разбираем на примере «Ашан»

Этап 4. Мудборд

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

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

Обычно достаточно 3–5 мудбордов. Они должны отличаться друг от друга по стилю, технике и характеру. Больше показывать не стоит — чем больше выбор, тем сложнее принять решение. Выбирайте только те варианты, которые действительно подходят бизнесу и его задачам.

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

На этапе мудборда важно определиться с ключевыми визуальными элементами:

• шрифтами;
• цветами;
• техникой: 3D, иллюстрации, фото;
• общей стилистикой: минимализм, брутализм, flat и прочие. 

Каждое решение должно иметь смысл и работать на образ бренда. Аргументы вроде «так сейчас модно» или «просто красиво» не работают. 

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

За вдохновением можно идти на Awwwards и в портфолио студий. Там — живые, реализованные проекты. Pinterest подходит в те моменты, когда нужно быстро найти картинки и собрать мудборд. Behance стоит использовать с осторожностью: на сайте много студенческих и концептуальных работ, которые выглядят красиво, но не работают в реальности. 

Студии и сайты, за которыми можно следить: 

• Locomotive;
• Buro;
• Basement Studio;
• Creative People;
• Chipsa;
• Ava Digital;
• Redis;
• SNP;
• aic.

Подборки для вдохновения:

• Awwwards;
• CSS DA;
• Made with Readymag;
• Footer Design;
• Brutalist websites;
• Cargo;
• Fuse kiwi;
• Hoverstat;
• Minimal Gallery.

Telegram-каналы для насмотренности: 

• Morrre design (Петр Дабу);
• Visual touch ;
• Коммуналка;
• Curated by Mitrofanov;
• Magazine Design;
• Posterino.

Этап 5. Дизайн 

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

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

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

Адаптивы лучше делать только после того, как финально утвержден десктоп, — это экономит время и нервы. Принцип mobile first хорошо работает в приложениях, но в случае с сайтами проще идти от десктопа к мобильному.

Что важно учесть при дизайне:

Работайте по сетке. Самый распространенный вариант для десктопов — 12-колоночная, но под конкретный проект могут подойти и 16, 10, 8, 6, 4 или 2 колонки. Сетка помогает выстроить макет, избежать хаоса с отступами и сделать верстку системной.

Не используйте нечетные и дробные значения. Они приводят к размытым пикселям. Например, если вы задали отступ в 10px, а при адаптации экран уменьшился вдвое, значение станет 5px, если масштаб еще уменьшится, то получится дробь 2,5px. Визуально это плохо влияет на четкость: пиксели как бы «расплываются» и не встают точно по сетке. Чтобы этого избежать, лучше работать по системе 8px — она задает четкий ритм, где все значения кратны 8. 

Используйте Auto Layout и компоненты в Figma. Это ускоряет работу и облегчает работу с правками. Если что-то нужно поменять, достаточно отредактировать основной компонент, и изменения автоматически подтянутся во все его копии. Но важно, чтобы он был настроен правильно: заданы привязки, позиционирование, логика поведения элементов внутри. 

Добавляйте цвета и шрифты в «Стили» в Figma. Работайте только через них — это упрощает правки и делает макет чище.

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

Этап 6. Верстка и подготовка адаптивных версий

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

Чаще всего для адаптивного дизайна используют пять разрешений: 1920px, 1440px, 1024px, 768px и 375px. Это те размеры экранов, под которые дизайнеры обычно отрисовывают макеты, если сайт будет верстаться с помощью HTML/CSS. Сколько именно версий нужно сделать — зависит от проекта и того, что согласовано с клиентом.

Если работаете в Тильде, отрисовывать каждую версию в Figma не нужно. Внутри конструктора уже предусмотрены предустановленные адаптивные размеры: 1200, 960, 640, 480 и 320 пикселей. При желании можно задать свои значения. 

Если вы делаете сайт для десктопов, нужно настроить адаптив под 1920px. Без него сайт на широком мониторе будет выглядеть растянутым: крупные шрифты, пиксельные изображения и разъехавшаяся верстка. 

Это связано с тем, что 1200px — формат ноутбуков, а большинство стационарных компьютеров используют разрешения от 1920px и выше. Чтобы сайт выглядел аккуратно и стабильно, для таких экранов нужен отдельный макет. А вот горизонтальную мобильную версию 480px чаще всего можно смело отключить — она нужна только для видеоплатформ. Вместо нее можно использовать популярное вертикальное разрешение 375px, под которое чаще всего заходят с телефона.

На старте работы определитесь с типом верстки.

Фиксированная (адаптивная) верстка — это когда сайт привязан к определенной ширине макета и дизайн всегда остается в пределах колонок. Брейкпоинты могут быть любые.

Колонки не растягиваются и не масштабируются: если разрешение увеличится, например, сайт, сверстанный под 1440px, откроют на мониторе с шириной 1600px, то по краям просто появятся пустые поля.

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

На адаптиве 1024px адаптация макета происходит автоматически браузером. Элементы меняют размер в зависимости от ширины экрана. Контент растягивается только горизонтально.

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

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

Если верстаете сами на Тильде — работайте в автоскейле. Если отдаете на разработку — выбирайте резиновую верстку.

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

Когда адаптируете сайт под разные устройства, важно, чтобы размеры заголовков и других элементов менялись последовательно и предсказуемо. Например, если на самой широкой версии — 1920px, заголовок H1 имеет размер 80px, то на более узких экранах он должен уменьшаться плавно: на 1200px — до 60px, на 980px — до 50px и так далее. Не должно быть скачков, вроде 80–60–70 — это ломает визуальную иерархию и выглядит неаккуратно.

То же самое касается наборного текста. Если начинаете с 20px на 1920px, нет смысла уменьшать кегль на каждый шаг: 19px на 1200, 18px на 980 и так далее. Такое дробление не дает заметной пользы пользователю. Лучше объединить близкие по значению стили: 20px для 1920px, 16px для всего диапазона от 1200 до 640px, 14px для самых маленьких экранов — от 375 до 320px.

Этот принцип работает не только со шрифтами, но и с другими параметрами: отступами между блоками, радиусами скруглений, размерами иконок.

Этап 7. Передача макета команде разработки

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

Если отдаете клиенту готовый сайт на Тильде, проверьте адаптивность. Все версии, от мобильной до десктопной, должны быть отрисованы. Иконки лучше загружать в формате SVG, а изображения — в JPEG, если есть фон, или PNG, если его нет. Лучше предварительно сжать их. Не забудьте добавить фавикон, описание страницы, бейджик и настроить базовое SEO. Убедитесь, что сайт открыт для индексации — чек-лист собрали ниже.

Чек лист по базовым SEO настройкам на Тильде:

1. Включена индексация для поисковых роботов.
2. На страницах проставлены тег H1, title и description.
3. Установлены фавикон и бейджи.
4. Включено защищенное подключение и редирект с http на https.
5. Проставлены описания alt для изображений.
6. Если есть настройка у кнопки с внешними ссылками — ставьте rel nofollow.
7. Если на странице много переходов в Telegram или WhatsApp, то в seo-настройках страницы поставьте галочку у «Запретить поисковикам переходить по ссылкам на этой странице». Таким образом ваша страница не будет заблокирована из-за большого количества внешних ссылок. 

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

Можно ли сверстать сайт самостоятельно

Tilda — самый известный no-code конструктор: простая панель администратора, доступные тарифы, легко разобраться с помощью гайдов. 

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

Как выбрать хорошего верстальщика на Tilda

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

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

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

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

Совет 3. Узнайте, умеет ли специалист работать с кодом
На Tilda можно сделать многое без кода, но не всё. Например, если хотите нестандартную анимацию или кастомный калькулятор, может понадобиться код.

Будет большим преимуществом, если специалист умеет работать с HTML, CSS или JavaScript. Плохо написанный код может замедлить загрузку сайта или вызвать ошибки: например, кнопки не будут нажиматься, а блоки будут «прыгать» при прокрутке. Хороший специалист учитывает ограничения Tilda и тестирует все перед запуском.

Главное о верстке 

Верстка — это не про кнопки и пиксели. Это про понимание, как работает сайт и зачем он нужен. Чем лучше погрузитесь в задачу, соберете прототип, продумаете взаимодействия и структуру, тем проще будет двигаться дальше — к дизайну, а потом и к финальной сборке. 

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