Дизайн-сайты для создания сайтов делятся на две группы: где рисуют макет (Figma и её аналоги) и где сайт собирают из готового дизайна (конструкторы с шаблонами и ИИ). Между ними есть третий путь, о котором поиск почти молчит: создание сайта по готовому дизайну — когда макет уже нарисован, и его нужно превратить в работающий сайт. Именно здесь чаще всего теряются время и деньги.
Ниже — что показывает поиск, где рисуют дизайн сайтов, как проверить, готов ли макет к вёрстке, контраст цветов (с проверкой) и как проходит создание сайта по дизайну от макета до запуска.
Есть макет и нужен сайт? Или нужен и дизайн, и сайт? Создание сайтов под ключ: вёрстка по вашему макету или дизайн с нуля, адаптивная версия, система управления, формы и Метрика. Лендинг от 15 000 ₽, корпоративный сайт от 40 000 ₽. Договор, гарантия 12 месяцев.
Тридцать страниц поиска: подборки сервисов и конструкторы
Я разобрал тридцать страниц, которые поиск показывает по запросу «дизайн сайты для создания».
Десять страниц — подборки: «25 бесплатных сервисов», «101 сервис для дизайнера», нейросети для дизайна. Восемь — конструкторы и ИИ-генераторы, которые обещают сайт «с дизайном за 5 минут». Четыре — студии, ещё четыре — каталоги и тендеры исполнителей. Две страницы — редактор макетов Figma, две — гайды по веб-дизайну.
Ни одна не рассказывает, что делать, когда дизайн уже есть. А это обычная ситуация: макет нарисовал фрилансер, знакомый дизайнер или сам владелец в Figma — и теперь нужно, чтобы сайт выглядел так же, работал на телефоне и не разваливался от настоящих текстов.
Дизайн-сайты для создания: где рисуют и где собирают
Инструменты в выдаче решают разные задачи, и важно не путать их между собой.
- Редакторы макетов. Figma, открытый Penpot и похожие сервисы. Здесь рисуют страницы, компоненты, мобильную версию. Результат — макет, а не сайт: его ещё нужно сверстать. Доступность зарубежных сервисов из России проверяйте до начала проекта.
- Конструкторы с шаблонами. Tilda, Wilda и другие. Дизайн берётся из шаблона и правится визуально — сразу на работающем сайте.
- ИИ-генераторы. Предлагают структуру и оформление по описанию. Удобно для черновика, но результат похож на тысячи других сайтов.
- Сайты-помощники дизайнера. Шрифты, иконки, палитры, фото, вдохновение — то, что собирают подборки «сайтов для дизайнеров».
Для бизнеса практический выбор такой: сайт по шаблону конструктора — быстро и недорого, но похоже на другие; сайт по собственному макету — дольше и дороже, но под вашу задачу. Подробно о том, из чего состоит дизайн и как принимать макет, я писал в статье о создании дизайн-макета сайта.
Создание сайтов по дизайну: как макет становится сайтом
Создание сайтов по дизайну — это вёрстка и сборка: макет превращается в код, подключается система управления, формы и аналитика. На каждом этапе к макету появляются вопросы, и чем раньше на них ответить, тем меньше переделок.
Готов ли ваш макет к вёрстке: проверка
Перед тем как отдавать макет в работу, пройдите по списку. Пункты разделены по весу: блокеры не дают начать, остальное добавляет работы или уточняется по ходу.
Отметьте, что есть в вашем макете
Хорошо, если вместе с макетом передаётся UI-кит — страница с цветами, размерами шрифтов, кнопками, полями и отступами. Он работает как словарь: верстальщик собирает стили один раз и использует их на всех страницах. Без UI-кита стили приходится собирать по макету экран за экраном, и мелкие расхождения неизбежны.
Самый частый блокер — отсутствие мобильной версии. Дизайнер рисует красивую страницу шириной 1440 пикселей, а больше половины посетителей откроют сайт на телефоне. Додумывать мобильную версию за дизайнера — значит получить что-то среднее между макетом и вкусом верстальщика.
Совет вебмастера: попросите дизайнера нарисовать хотя бы главную страницу в мобильном варианте и одну внутреннюю. Остальное верстальщик доведёт по аналогии. Это дешевле, чем спорить о каждом блоке после сдачи, и быстрее, чем переделывать уже готовую вёрстку по замечаниям заказчика.
Три ширины экрана: что должно быть в макете
Сайт открывают на экранах от 360 до 2000 пикселей в ширину. Нарисовать каждую ширину невозможно, поэтому дизайн делают для трёх опорных размеров, а между ними сайт перестраивается по правилам.
На телефоне всё выстраивается в одну колонку, меню прячется под кнопку, кнопки становятся крупнее — под палец, а не под курсор. На планшете часто две колонки. На компьютере — три и больше, с широкими отступами. Если в макете есть только компьютерная версия, решения о телефоне принимает тот, кто верстает, — и об этом стоит договориться заранее.
Цвет и контраст: проверьте, читается ли текст
Ещё одна частая проблема макетов — светло-серый текст на белом фоне. В редакторе на большом мониторе он выглядит изящно, а на телефоне на улице его невозможно прочитать. Для контраста есть понятная мера — отношение яркостей текста и фона. Выберите цвета из своего макета и посмотрите результат.
Заголовок блока
Обычный текст абзаца, который посетитель читает на телефоне в метро при дневном свете.
Для обычного текста нужен контраст не ниже 4,5 : 1 — это уровень AA по стандарту доступности веб-контента WCAG. Для крупных заголовков допустимо 3 : 1. Серый #8a8a8a на белом даёт около 3,45 : 1 — для заголовка сойдёт, для абзаца уже мало. Поправить это в макете — дело минуты, а после вёрстки придётся менять цвет во всех стилях. Самый светлый серый, который ещё проходит для обычного текста на белом, — около #767676: у него контраст 4,54 : 1. Проверяйте не только основной текст, но и подписи под полями, серые даты в блоге и текст на цветных кнопках.
Шрифты: частый блокер, о котором вспоминают последним
Дизайнер выбирает шрифт в редакторе, и в макете он выглядит прекрасно. Но на сайте шрифт работает только при двух условиях: у него есть лицензия на использование в вебе и есть файлы в веб-формате. Многие шрифты, установленные на компьютере дизайнера, лицензированы только для печати или только для личных проектов.
- Проверьте лицензию. Бесплатные шрифты с открытой лицензией, например из каталога Google Fonts, можно использовать на сайте. Платные — только с купленной веб-лицензией.
- Проверьте кириллицу. Красивый латинский шрифт часто не имеет русских букв или имеет их в одном начертании из пяти.
- Ограничьте число начертаний. Каждое начертание — отдельный файл, который загружается при открытии страницы. Два шрифта по два-три начертания — разумный предел.
- Подключайте шрифты с сервера сайта. Так страница не зависит от внешних сервисов и открывается быстрее.
Нейросети и дизайн: что генератор даёт и чего нет
Четверть страниц в выдаче — про нейросети для дизайна сайтов. Генератор действительно быстро предлагает структуру, цветовую схему и блоки. Как черновик это полезно: можно показать дизайнеру или вебмастеру направление вместо слов «хочу современно и стильно».
Но у сгенерированного дизайна три слабых места. Он усреднённый: генератор собирает то, что видел чаще всего, поэтому результат похож на тысячи сайтов. Он не знает ваших клиентов и не может решить, что важнее показать на первом экране. И он часто не готов к вёрстке: нет мобильной версии, состояний, правил для настоящих текстов. Поэтому к сгенерированному макету применим тот же список проверки, что и к нарисованному вручную.
Создание сайта по дизайну или по шаблону: что выбрать
По шаблону конструктора
- Быстро: дизайн уже есть, остаётся заменить тексты и фото.
- Недорого или бесплатно.
- Сайт похож на сотни других на том же шаблоне.
- Структура подстраивается под шаблон, а не под задачу.
По собственному макету
- Структура и оформление — под ваш бизнес и ваших клиентов.
- Узнаваемый стиль, согласованный с логотипом и вывеской.
- Дольше и дороже: нужен дизайн и вёрстка.
- Важно, чтобы макет был готов к вёрстке — см. проверку выше.
Есть и промежуточный вариант, которым я пользуюсь чаще всего для малого бизнеса: структура и оффер — под задачу, а оформление — на основе проверенной сетки и компонентов, без рисования каждого пикселя с нуля. Это дешевле полного индивидуального дизайна и при этом не выглядит шаблонно. Подробнее — в статье о правильном дизайне сайта.
Кто делает сайт по дизайну и сколько это стоит
Если макет есть, нужен человек, который сверстает его и соберёт сайт. Это может быть верстальщик — тогда систему управления, формы и аналитику придётся заказывать отдельно, — или вебмастер, который сделает всё вместе. Стоимость зависит от числа разных шаблонов страниц в макете, сложности анимаций и того, на чём будет работать сайт.
- Посчитайте разные шаблоны страниц, а не страницы: десять статей блога — это один шаблон, а не десять.
- Отметьте сложные места: слайдеры, фильтры, калькуляторы, анимации при прокрутке.
- Решите, кто будет менять тексты после запуска — от этого зависит, нужна ли система управления.
- Передайте исходный файл макета, а не картинки: из него берут размеры, цвета и экспортируют иконки.
Цену вёрстки по вашему макету я называю после того, как посмотрю его: число шаблонов и сложность видны сразу. Ориентир по моим ценам — в калькуляторе, а как устроены этапы — на странице процесса работы.
Как принять сайт, сверстанный по макету
Когда сайт готов, его сравнивают с макетом. Полного совпадения до пикселя не бывает: браузеры по-разному отрисовывают шрифты, а настоящие тексты другой длины. Важно не совпадение, а то, что замысел сохранён. Проверьте:
- Телефон. Откройте сайт на своём телефоне, а не в уменьшенном окне браузера: всё ли читается, нажимаются ли кнопки пальцем.
- Длинные тексты. Вставьте самый длинный заголовок и самое длинное название услуги — не ломаются ли блоки.
- Формы. Отправьте заявку, ошибитесь в поле — видно ли сообщение, пришло ли письмо.
- Цвета и шрифты. Совпадают ли с UI-китом, подключены ли нужные начертания.
- Скорость. Открывается ли страница быстро через мобильный интернет: тяжёлые фото и анимации — частая причина задержек.
Самые долгие проекты в моей практике — не те, где сложный дизайн, а те, где макет нарисован только для компьютера и с «рыбой» вместо текстов. Тогда половина работы — догадки о том, что имел в виду дизайнер. Полный макет с мобильной версией экономит больше времени, чем любая скорость вёрстки.
— Александр Рожков
Есть макет в Figma или другом редакторе? Пришлите ссылку — посмотрю, готов ли он к вёрстке, и назову цену и срок до начала работ. Нет макета — сделаю и дизайн, и сайт. Условия — на странице создания сайтов.
Итог
Дизайн-сайты для создания сайтов делятся на редакторы макетов, конструкторы с шаблонами, ИИ-генераторы и сайты-помощники для дизайнеров. Если макет уже есть, создание сайта по дизайну начинается с проверки: мобильная версия, шрифты с веб-лицензией и реальные тексты — обязательны, состояния кнопок, иконки в SVG и описание анимаций — желательны. Контраст текста с фоном — не ниже 4,5 : 1. Шаблон даёт скорость, собственный макет — соответствие задаче, а компромисс — структура под задачу на проверенных компонентах.
Если нужен сайт по вашему макету или под ключ с дизайном — условия на странице создания сайтов.
Опрос
Откуда дизайн для вашего сайта?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
Где сделать дизайн сайта?
В редакторах макетов вроде Figma или открытого Penpot — если нужен собственный макет. Если подходит готовое оформление — в конструкторе с шаблонами.
Можно ли сделать сайт по готовому макету?
Да, это обычная работа: макет верстается, подключаются система управления, формы и аналитика. Важно, чтобы в макете была мобильная версия, шрифты с веб-лицензией и реальные тексты.
Что нужно передать верстальщику кроме макета?
Исходный файл макета, а не картинки, шрифты или ссылки на них, иконки в SVG, фото в исходном качестве, описание анимаций и состояний кнопок.
Какой контраст текста нужен на сайте?
Не ниже 4,5 : 1 для обычного текста и 3 : 1 для крупных заголовков — по стандарту доступности WCAG, уровень AA.
Нужна ли мобильная версия макета?
Да. Без неё верстальщик сам решает, как перестроить блоки на телефоне, а большая часть посетителей открывает сайты именно с телефона.
Что выбрать: шаблон или собственный дизайн?
Шаблон — если нужно быстро и недорого. Собственный макет — если важен узнаваемый стиль и структура под задачу. Компромисс — структура под задачу на проверенных компонентах.
Сколько стоит сайт по готовому дизайну?
Зависит от числа разных шаблонов страниц и сложности анимаций. Цену называю после просмотра макета; ориентир — лендинг от 15 000 ₽, корпоративный сайт от 40 000 ₽.
