Как сделать дизайн сайта: самому, по шаблону или с дизайнером

У сайта мало времени: по данным Nielsen Norman Group, посетители часто уходят со страницы за 10–20 секунд, и за это время дизайн должен объяснить, что вы продаёте и почему вам можно доверять. Хорошая новость в том, что для этого не всегда нужен дизайнер за сотни тысяч рублей: многое владелец бизнеса может сделать сам — на готовом шаблоне или в бесплатном редакторе макетов.

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

Коротко: для небольшого бизнеса чаще всего хватает готового шаблона: свои фото, тексты и баннеры делают его узнаваемым. Свой макет можно нарисовать бесплатно — в бесплатных тарифах Figma и Pixso или в Penpot, — но это ещё не сайт, его нужно собрать. Дизайн проверяйте цифрами: контраст текста не ниже 4,5:1, кнопки на телефоне от 44×44 пикселей, главная картинка загружается быстрее 2,5 секунды. Фото и шрифты берите только по лицензии: с 2026 года компенсация за чужое фото — до 10 млн ₽.

Три пути: самому, по шаблону или с дизайнером

Цены фрилансеров — минимальные предложения на Профи.ру в ноябре 2026 года, цены студий — оценка руководителя студии на vc.ru в 2026 году. Готовый шаблон подходит магазину или компании, которым нужно продавать уже сейчас. Дизайнер нужен, когда у бренда сложный фирменный стиль, нестандартные функции или когда вы делаете сайт под крупную рекламную кампанию. Как выбрать шаблон и не получить «сайт как у всех», мы разбирали в статье «Шаблон сайта: как выбрать и сделать сайт по шаблону».

Этапы дизайна сайта: что можно сделать самому

1. Цель и аудитория. Одна главная цель — заказ, звонок или запись, — портрет покупателя и 3–5 сайтов конкурентов: что в них нравится и что раздражает.
2. Структура и прототип. Список страниц и блоков главной: первый экран, преимущества, каталог, доставка и оплата, отзывы, контакты. Прототип — это схема блоков без оформления, её можно нарисовать хоть на бумаге.
3. Тексты и фото — до дизайна. Если рисовать дизайн под условный текст, потом его придётся переделывать. Подготовьте реальные заголовки, цены, условия доставки и возврата, фото товаров и работ.
4. Визуальный стиль. Логотип, 1–2 фирменных цвета, 1–2 шрифта с лицензией для сайта.
5. Мобильная версия. Откройте макет или демо шаблона на своём телефоне и понажимайте кнопки пальцем.
6. Сборка. На шаблоне — замените тексты, фото, баннеры и меню. С подрядчиком — примите исходники и права на них.
7. Проверка на людях. Попросите 3–5 знакомых найти и заказать товар, а сами молча смотрите, где они спотыкаются.

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

Правила, которые подтверждают исследования

Первый экран решает

Ценность нужно объяснить за 10 секунд, советует Nielsen Norman Group. В её исследовании движения глаз 57% времени просмотра пришлось на первый экран, а 74% — на первые два. Значит, первый экран сразу отвечает на вопросы: что вы продаёте, для кого, на каких условиях и куда нажать.

Заголовки вместо «простыни»

Знаменитый F-паттерн — когда взгляд скользит по верху и левому краю страницы — по данным той же NN/g, признак плохо оформленного текста, а не правило раскладки. Помогают подзаголовки, короткие абзацы, жирные ключевые слова и главное — в первых строках.

Доверие складывается из деталей

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

Красота помогает, но не спасает

Красивый интерфейс кажется удобнее, и мелкие недочёты ему прощают — это называют эффектом эстетики и удобства. Но крупные проблемы — запутанный каталог или сложная корзина — красота не компенсирует.

Карточка товара и корзина: где теряются заказы

По данным Baymard Institute, в среднем покупатели бросают 70,22% корзин. Среди главных причин — дополнительные расходы, которые всплывают в конце (около 40% случаев), требование зарегистрироваться (18%) и слишком сложное оформление (17%). Хорошо продуманное оформление заказа, по оценке института, может поднять конверсию крупного магазина в среднем на 35%. Для дизайна это значит: показывайте итоговую сумму с доставкой до оформления, разрешайте покупку без регистрации и пишите условия возврата рядом с описанием товара.

Технический минимум в цифрах

• Контраст. По стандарту доступности WCAG 2.2 контраст обычного текста с фоном — не ниже 4,5:1, крупного текста, иконок, рамок полей и кнопок — не ниже 3:1. Проверить можно в любом онлайн-калькуляторе контраста.
• Кнопки. Минимальный размер области нажатия по стандарту — 24×24 пикселя, а для кнопок «Купить», «В корзину» и «Позвонить» на телефоне лучше от 44×44.
• Шрифт. Обязательного минимума нет, но основной текст на телефоне удобно читать от 16 пикселей.
• Узкий экран. На ширине 320–390 пикселей не должно быть горизонтальной прокрутки, а текст должен увеличиваться вдвое без потерь.
• Скорость. Пороги Google Core Web Vitals: главная картинка или блок первого экрана загружается не дольше 2,5 секунды, реакция на нажатие — до 200 миллисекунд, а страница не «прыгает» при загрузке (показатель CLS не больше 0,1).
• Картинки. Не загружайте фото с телефона «как есть» на 5–10 МБ: уменьшите их и сожмите, например в формат WebP.

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

Как сделать макет сайта в Figma и чем её заменить

Что с Figma в России

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

Альтернативы

• Pixso — облачный редактор с русским интерфейсом: бесплатно — три дизайн-файла, платные тарифы — в рублях.
• Penpot — редактор с открытым кодом: бесплатный тариф без лимитов, можно установить на свой сервер.

Как нарисовать макет: по шагам

1. Создайте два фрейма — для компьютера, например шириной 1440 пикселей, и для телефона — 390 пикселей.
2. Задайте сетку и отступы, чтобы блоки стояли ровно.
3. Сохраните цвета и стили текста, чтобы не подбирать их заново на каждом экране.
4. Соберите блоки по прототипу с реальными текстами и фото.
5. Сделайте мобильную версию каждого блока.
6. Свяжите экраны в кликабельный прототип и покажите его людям.

Готовые макеты и наборы элементов

Бесплатные файлы в сообществе Figma публикуются под лицензией CC BY 4.0: использовать их в коммерческом проекте можно, но автора нужно указать. Фото и шрифты внутри такого макета — отдельные объекты, и права на них нужно проверять отдельно.

Дизайн с помощью нейросети

По оценке Nielsen Norman Group за 2025 год, большинство нейросетей для дизайна пока не дотягивают до качества дизайнера. Они полезны для узких задач — подобрать палитру, переписать текст, сделать картинку-заглушку, — а по размытому запросу собирают «франкенштейн-макеты» с лишними блоками и нелогичным порядком. Результат резко улучшается, если дать нейросети нишу, аудиторию, список блоков, реальные тексты и цены и пару примеров сайтов, которые нравятся. Подробнее о возможностях нейросетей — в статье «Можно ли сделать сайт с помощью нейросети».

Есть и юридический нюанс. Автором по Гражданскому кодексу может быть только человек. По сообщениям СМИ, в 2026 году суд первой инстанции в Москве отказал в защите картинок, созданных нейросетью по запросу, потому что творческого вклада человека в них не было. Значит, конкурент, возможно, сможет взять вашу ИИ-картинку без последствий. А если нейросеть повторила чужое фото, персонажа или товарный знак, отвечать будет владелец сайта, на котором картинка размещена.

Юридические ловушки: фото, шрифты и чужой дизайн

Фото из интернета

Фотография — объект авторского права, и размещать её на сайте можно только с разрешения автора или по лицензии. С 4 января 2026 года, после поправок в Гражданский кодекс, компенсация за такое нарушение — от 10 тыс. до 10 млн ₽ вместо прежних 5 млн, а за удаление водяного знака или подписи автора — ещё от 1 тыс. до 100 тыс. ₽. Отвечает владелец сайта, даже если фото поставил подрядчик: так разъяснил Верховный суд.

Это не теоретический риск. По данным РАПСИ, в 2025 году Свердловский областной суд взыскал с цветочного магазина 60 тыс. ₽ за шесть чужих фото букетов на сайте — по 10 тыс. за каждое. Снимайте свои товары или берите фото со стоков с понятной лицензией и сохраняйте подтверждение покупки.

Шрифты

Шрифт — тоже объект авторского права, и правообладатели выигрывают такие споры: например, по данным правообладателя, в 2026 году Суд по интеллектуальным правам оставил в силе взыскание 300 тыс. ₽ с издательского дома за шрифт на сайте. Безопасный путь — шрифты под открытой лицензией SIL OFL, в том числе большинство шрифтов Google Fonts, или купленная лицензия именно для сайта. Пометка «free for personal use» означает, что для бизнеса шрифт бесплатным не является.

Иконки и стоки

У бесплатных ресурсов тоже есть условия. Фото с Unsplash можно использовать в коммерческих проектах без разрешения, а бесплатные иконки Font Awesome — только с указанием авторства. Читайте лицензию каждого ресурса, прежде чем ставить его на сайт.

Можно ли повторить сайт конкурента

Идеи и решения авторским правом не охраняются: каталог слева и корзина справа — общее место. А вот конкретные тексты, фото, графику и дизайн копировать нельзя. Закон о защите конкуренции отдельно запрещает копировать внешний вид товара, цветовую гамму и фирменный стиль конкурента, если покупатели могут вас перепутать. Штраф для организации за недобросовестную конкуренцию — от 100 до 500 тыс. ₽, а компенсация за чужой товарный знак — до 10 млн ₽.

Кому принадлежит заказанный дизайн

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

Сколько стоит дизайн сайта

Цены — по Профи.ру на ноябрь 2026 года, оценке руководителя студии на vc.ru и данным Хабр Карьеры за первое полугодие 2026 года. Сроки тоже разные: лендинг в студии делают 1–2 недели, интернет-магазин — 3–6 месяцев, а готовый шаблон наполняют своими текстами и фото за несколько дней. Подробный расчёт стоимости сайта целиком — в статье «Сколько стоит сделать сайт в 2026 году».

Как сделать готовый шаблон «своим»

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

• Свои фото товаров, работ, команды и магазина — главный способ отличаться и защита от исков за чужие снимки.
• Баннеры к сезону и праздникам оживляют главную страницу.
• Тексты под вашу нишу: преимущества, условия доставки и возврата, ответы на частые вопросы.
• Проверка на телефоне: до выбора откройте живое демо шаблона на своём смартфоне.

Шаблоны по нишам — в разделе «Готовые сайты».

Редизайн: как не потерять заказы и позиции

• Меняйте постепенно. Nielsen Norman Group советует не переделывать всё заново, если хватит точечных правок: вам сайт может надоесть, а клиентам — нет.
• Зафиксируйте «до». За 1–3 месяца до изменений сохраните из Яндекс Метрики конверсии, отказы и долю мобильных, а из Вебмастера — число страниц в поиске.
• Сохраните адреса. Если адреса страниц меняются, поставьте постоянные редиректы 301 со старых на новые и держите их не меньше года — так советует Google. Позиции при этом могут временно колебаться.
• Тестируйте без вреда для поиска. При A/B-тесте используйте временный редирект 302 или тег canonical и не держите эксперимент дольше, чем нужно.
• Сравнивайте честно: одинаковые периоды «до» и «после» с поправкой на сезон.

Нейросеть при редизайне пригодится для вариантов первого экрана и текстов, но решения принимайте по цифрам Метрики, а не по картинке.

Частые вопросы

Где можно сделать макет сайта онлайн?

В браузерных редакторах: Figma и Pixso — бесплатно до трёх файлов, Penpot — бесплатно без лимитов. Конструкторы сайтов позволяют собрать страницу из готовых блоков сразу без макета.

Можно ли сделать дизайн сайта бесплатно?

Да: бесплатные тарифы редакторов, шрифты под открытой лицензией, фото со стоков с бесплатной коммерческой лицензией и готовый шаблон на бесплатном тарифе BITCAT Free — до 50 страниц, но без своего домена.

Работает ли Figma в России?

Бесплатный тариф работает, но купить платную подписку из России нельзя: Figma не продаёт её новым клиентам из России и не принимает отсюда оплату.

Можно ли сделать дизайн сайта с помощью нейросети?

Черновик, идеи и тексты — да, финальный дизайн — пока нет. Картинки, целиком созданные нейросетью, могут не охраняться авторским правом.

Чем макет отличается от прототипа?

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

Можно ли взять фото с чужого сайта, если указать источник?

Нет. Нужно разрешение автора или лицензия. Компенсация за нарушение — от 10 тыс. ₽ за каждое фото и до 10 млн ₽.

Кому принадлежит дизайн, который сделал фрилансер?

Если в договоре нет пункта об отчуждении исключительного права, оно остаётся у автора. Пропишите передачу прав и исходников заранее.

Сколько стоит дизайн сайта?

От 0 ₽, если рисовать самому или взять готовый шаблон, от 5 000 ₽ за лендинг у фрилансера и от 50–80 тыс. ₽ за прототип в студии.

Итог

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

Статья актуальна на ноябрь 2026 года и не заменяет консультацию юриста.