25 прикладів макетів сайтів (з анотованими вайрфреймами)
25 прикладів макетів сайтів із бібліотеки шаблонів We.Inc — кожен із блоковим вайрфреймом структури сторінки, попереднім переглядом дизайну, поясненням, чому макет працює, і для якого бізнесу він підходить. Включає керівництво з вибору макету.
Макет сайту — це порядок і розташування розділів на сторінці: що йде першим, що розміщено поруч і де знаходиться головна кнопка. Нижче наведено 25 макетів, кожен із яких показано як простий блоковий вайрфрейм і попередній перегляд повного дизайну. Всі 25 є шаблонними дизайнами We.Inc, а не сайтами клієнтів, згруповані за типом бізнесу, якому вони підходять. Синій блок у кожному вайрфреймі — це головний заклик до дії.
Як читати вайрфрейми
Кожен рядок блоків — це одна смуга сторінки, згори донизу при прокручуванні. Блоки поруч розміщені поряд на екрані комп'ютера; на телефоні вони складаються в стек у тому ж порядку, тому лівий блок відображається першим. Ця сторінка про компонування всієї сторінки. Щодо верхньої частини сторінки, дивіться приклади секції героя; для навігаційних меню дивіться приклади навігації.
П'ять шаблонів макетів в одній таблиці
| Шаблон | Порядок розділів | Найкраще коли | Приклади нижче |
|---|---|---|---|
| Лійка послуг | Герой, послуги, докази, форма | Відвідувачам потрібен розрахунок або запис | 1-8 |
| Відвідати | Герой, меню, історія, години та карта | Люди приходять до вас особисто | 9-14 |
| Записатись або приєднатись | Герой, ціни або розклад, запис | Прийоми, заняття, абонементи | 15-19 |
| Grid | Герой, сітка позицій, деталі, запит | Оголошення, товари, портфоліо | 20-24 |
| Reader | Герой, роботи, про автора, реєстрація | Мета — аудиторія, яка повертається | 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, а не сайт клієнта).
Чому це працює: Роботи, потім підписка на розсилку: мета — читачі, які повертаються, а не один запит. Підходить для: Письменники, автори контенту, спікери.
Як обрати макет
- Визначте одну дію, яку ви найбільше хочете, щоб відвідувачі здійснили (зателефонувати, записатись, купити, надіслати запит, підписатись). Це і стане синім блоком.
- Назвіть три питання, які відвідувач ставить перед тим, як діяти (наприклад: ви обслуговуєте мою зону, скільки це коштує, чи можна вам довіряти). Кожне отримує розділ — у цьому порядку.
- Оберіть шаблон із наведеної вище таблиці, який відповідає.
- Видаліть розділи, які не можете наповнити реальним контентом. Порожній розділ «Результати» або заглушки відгуків шкодять більше, ніж коротша сторінка.
- Перевірте на телефоні. Блоки поруч складаються в стек; переконайтесь, що головна кнопка з'являється рано (дивіться дизайн для мобільних).
Коли одна сторінка стає довгою, розділіть її на кілька. Структура сайту показує, як розділи вище перетворюються на карту сайту.
Типові помилки в макетах
- Розміщення форми зв'язку лише внизу довгої сторінки без кнопки в шапці.
- Три колонки тексту для аудиторії, яка використовує телефон; використовуйте картки, які чисто складаються в стек.
- Залишення шаблонних цифр, відгуків або значків, які ви не можете підтвердити.
- Галерея до того, як відвідувач знає, чим ви займаєтесь.
Використайте один із цих макетів
Кожен макет тут є шаблоном у бібліотеці шаблонів 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