25 примеров макетов сайтов (с аннотированными вайрфреймами)

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

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

Как читать вайрфреймы

Каждый ряд блоков — это одна горизонтальная полоса страницы, сверху вниз по мере прокрутки. Блоки рядом располагаются по соседству на экране компьютера; на телефоне они выстраиваются в том же порядке, поэтому левый блок отображается первым. Эта страница о расположении страницы в целом. Для верхней части страницы см. примеры hero-секций; для меню — примеры навигации.

Пять шаблонов макетов в одной таблице

Шаблон	Порядок разделов	Лучше всего подходит	Примеры ниже
Сервисная воронка	Герой, услуги, доказательства, форма	Посетители хотят получить предложение или забронировать	1–8
Посещение	Герой, меню, история, часы работы и карта	Люди приходят к вам лично	9–14
Забронировать или вступить	Герой, цены или расписание, бронирование	Записи, занятия, членство	15–19
Сетка	Герой, сетка элементов, детали, запрос	Объявления, товары, портфолио	20–24
Для читателей	Герой, работы, о себе, подписка	Цель — постоянная аудитория	25

Макеты для сервисного бизнеса

1. Срочный ремонт: экстренная полоса под главным экраном

Шаблон: Ironpeak Roofing (шаблонный дизайн We.Inc, не сайт клиента).

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

2. Мультисервис с блоком зоны обслуживания

Шаблон: Summit Trades (шаблонный дизайн We.Inc, не сайт клиента).

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

3. Список услуг с выделенной специализацией

Шаблон: Voltline Electric (шаблонный дизайн We.Inc, не сайт клиента).

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

4. Чек-лист и мгновенный запрос

Шаблон: Brightwell Cleaning (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Видимый чек-лист того, что входит в каждый визит, снимает главное беспокойство (что именно я получу?) до формы расчёта стоимости. Подходит для: Клининг, уход за газоном, обслуживание бассейна.

5. История местного мастера

Шаблон: Halden Woodworks (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Название города в заголовке и описание «как проходит работа» создают доверие для крупных разовых заказов. Подходит для: Плотники, строители, отделочники.

6. Профессиональная фирма: области практики и сотрудники

Шаблон: Sterling & Vance LLP (шаблонный дизайн We.Inc, не сайт клиента).

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

7. Консалтинг: сначала доказательства

Шаблон: Linden Consult (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Доказательства идут сразу после главного экрана, а услуги подаются как проблемы, знакомые покупателю. Подходит для: Консультанты, коучи, B2B-услуги.

8. Краткая страница бухгалтера

Шаблон: Ledgerline CPA (шаблонный дизайн We.Inc, не сайт клиента).

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

Макеты для общепита и гостеприимства

9. Кафе: меню, история, посещение

Шаблон: Ember & Roast (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Сначала меню, посещение — в конце: люди смотрят, что вы предлагаете, а потом — где и когда. Подходит для: Кафе, пекарни, бары.

10. Пекарня с предзаказом

Шаблон: Flour & Fern (шаблонный дизайн We.Inc, не сайт клиента).

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

11. Ресторан с длинной прокруткой

Шаблон: Azafran (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Для ресторана-достопримечательности атмосфера продаёт бронирование — страница рассказывает историю перед призывом к действию. Подходит для: Изысканная кухня, дегустационные меню, банкетные залы.

12. Ресторан с тремя разделами

Шаблон: Crust (шаблонный дизайн We.Inc, не сайт клиента).

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

13. Сначала расписание

Шаблон: ROAM (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Когда местоположение меняется ежедневно, главный вопрос — «где вы сегодня», поэтому он идёт прямо под главным экраном. Подходит для: Фудтраки, рынки, поп-ап точки.

14. Событийный сервис с формой запроса

Шаблон: Harvest & Vine (шаблонный дизайн We.Inc, не сайт клиента).

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

Макеты для бронирования и членства

15. Салон с упором на бронирование

Шаблон: Lumé Salon & Beauty Spa (шаблонный дизайн We.Inc, не сайт клиента).

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

16. Расписание занятий и цены

Шаблон: Tidewater Yoga (шаблонный дизайн We.Inc, не сайт клиента).

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

17. Спортзал с программами и уровнями

Шаблон: Iron (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Уровни членства рядом упрощают сравнение; бесплатное первое занятие снижает барьер. Подходит для: Спортзалы, клубы, абонементы.

18. Клиника: услуги, команда, адрес

Шаблон: Verdant Family Health (шаблонный дизайн We.Inc, не сайт клиента).

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

19. Ветеринарная клиника с экстренным уведомлением

Шаблон: Meadowpaw Veterinary (шаблонный дизайн We.Inc, не сайт клиента).

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

Сеточные макеты: объявления, магазины и портфолио

20. Сетка объявлений

Шаблон: Keystone Realty (шаблонный дизайн We.Inc, не сайт клиента).

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

21. Страница одного товара

Шаблон: Verre Halo (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Цена в панели навигации и в конце; всё остальное отвечает на вопрос «стоит ли оно того?» Подходит для: Монопродуктовые бренды, запуски, продукты на краудфандинге.

22. Магазин малых партий

Шаблон: Cellar & Rowan (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Сначала товары, затем история, оправдывающая цену, затем подписка на следующую партию. Подходит для: Производители, свечи, керамика, еда.

23. Выпуск товара

Шаблон: Loop (шаблонный дизайн We.Inc, не сайт клиента).

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

24. Сначала портфолио-сетка

Шаблон: Drafthouse (шаблонный дизайн We.Inc, не сайт клиента).

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

Макеты для персональных сайтов и авторов

25. Автор с рассылкой

Шаблон: Plume (шаблонный дизайн We.Inc, не сайт клиента).

Почему это работает: Работы, затем подписка на рассылку: цель — постоянные читатели, а не разовый запрос. Подходит для: Авторы, создатели контента, спикеры.

Как выбрать макет

1. Назовите одно действие, которое вы хотите, чтобы большинство посетителей совершило (позвонить, забронировать, купить, запросить, подписаться). Оно станет синим блоком.
2. Составьте список трёх вопросов, которые посетитель задаёт перед тем, как совершить действие (например: вы работаете в моём районе, сколько это стоит, можно ли вам доверять). Каждый вопрос получает свой раздел в этом порядке.
3. Выберите шаблон из приведённой выше таблицы, который подходит.
4. Удалите разделы, которые вы не можете заполнить реальным контентом. Пустой раздел «Результаты» или подставные отзывы наносят больше вреда, чем более короткая страница.
5. Проверьте на телефоне. Блоки рядом выстраиваются в столбик; убедитесь, что главная кнопка по-прежнему отображается в начале (см. мобильный дизайн).

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

Распространённые ошибки в макетах

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

Используйте один из этих макетов

Каждый из представленных здесь макетов является шаблоном в библиотеке шаблонов We.Inc. На бесплатном плане можно использовать до 3 шаблонных сайтов на адресе we.inc (без AI-кредитов и пользовательского домена). Starter за $20 в месяц добавляет AI-конструирование — можно попросить изменения вроде «переместить отзывы выше услуг» — и пользовательские домены; см. тарифы. Сначала набросайте прототип с помощью генератора мокапов сайта, затем проверьте результат с помощью оценщика сайта.

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

Что такое макет сайта?

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

Какой макет лучше всего подходит для сайта малого бизнеса?

Для большинства сервисных предприятий: главный экран с одной чёткой кнопкой, услуги, доказательства (например, отзывы) и контактная форма или форма запроса — с кнопкой, повторяющейся в шапке.

Сколько разделов должно быть на главной странице?

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

Это реальные сайты бизнеса?

Нет. Все 25 — шаблонные дизайны We.Inc, используемые для демонстрации шаблонов макетов.

Как меняются макеты на мобильных устройствах?

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

В чём разница между макетом и структурой?

Макет — это расположение одной страницы. Структура — это то, как страницы связаны по всему сайту: иерархия, URL-адреса и внутренние ссылки.

Начать бесплатно · Банковская карта не нужна

Product

• AI Website Builder: Describe a site in plain English; it's live in minutes
• White Label Platform: Your brand, your domain, your margin
• Enterprise: SSO, custom SLAs, and dedicated support
• Developer API: Embed site generation into your SaaS

Who It's For

• For Agencies: Resell under your brand
• For Freelancers: Your own branded builder
• For Hosting Providers: Add a builder to your stack
• For SaaS Platforms: Embed site creation via API
• For Startups
• For Financial Services
• For Healthcare

Features

• Drag & Drop Editor
• Built-in SEO Tools
• Custom Branding
• Client Dashboard
• Reseller Billing (Stripe Connect)

Resources

• Blog
• Help Center
• Free Business Tools
• Website Templates
• Glossary & Guides
• Integrations
• Developers
• Benchmark
• Windows App

Company

• About Us
• Pricing
• Apply to the Partner Program
• Contact
• Careers
• Security

View Sitemap