Макети веб-сайтів

Приклади та ідеї макета веб-сайтів


Макет вашого веб-сайту може визначати його успіх. Отримайте неправильний дизайн, і люди будуть плутати та дезорієнтуватись, знищуючи користувацький досвід. Вони, ймовірно, пропустять критичний вміст або не побачать заклик до дії.

Але важливість вашого макета йде далі. Дизайн повинен відповідати вмісту вашого сайту. При правильному розташуванні ваш вміст може сяяти, але при неправильному вмісті він може стати переповненим, важким для читання і не натхненним.

Макет вашого веб-сайту може визначати його успіх. Отримайте неправильний дизайн, і люди будуть плутати та дезорієнтуватись, знищуючи користувацький досвід. Вони, ймовірно, пропустять критичний вміст або не побачать заклик до дії.

Але важливість вашого макета йде далі. Дизайн повинен відповідати вмісту вашого сайту. При правильному розташуванні ваш вміст може сяяти, але при неправильному вмісті він може стати переповненим, важким для читання і не натхненним.

Зрештою, всі сайти мають сітку, що знаходиться під дизайном веб-сайту. Ці стовпці та рядки забезпечують порядок у вашому вмісті та спрямовують погляд користувача на сторінку. У межах цих сіток ви можете створити безліч різних підходів. Кожен веб-сайт має основну сітку, на якій дизайнер побудував макет.

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

Варто сказати, що не потрібно дотримуватися одного підходу. Ви можете легко комбінувати кілька макетів на своєму веб-сайті або навіть на одній сторінці, наприклад, цільовій.

З цього приводу розглянемо найпоширеніші варіанти макета, доступні вам.

Почнемо з найпростішої схеми компонування з усіх, однієї колонки.

1. Макет одного стовпчика

Незважаючи на найскладніший макет, який ви знайдете, він значно зростав у популярності з моменту зростання мобільної мережі. Це тому, що веб-сайт може використовувати однаковий дизайн на мобільних пристроях, планшетах та настільних комп’ютерах, скорочуючи час розробки.

Крім того, макети в одних стовпцях добре допомагають створити чудовий досвід читання, оскільки він зосереджує користувача на вмісті, не відволікаючи жодної сторони. Ось чому сайт блогів Середній приймає його для всіх своїх статей.

Середній використовує макет одного стовпця для покращення досвіду читання.

Нарешті, у поєднанні із зображеннями, макет одного стовпчика може зробити потужний вплив, оскільки він дозволяє показувати ці зображення якнайбільше. Океанський курорт є прекрасним прикладом цього в дії.

Курорт Океан використовує повну ширину свого одноколонного дизайну, щоб досягти максимального впливу зображень.

Маючи на увазі ці чинники, подумайте про те, як використовувати макет одного стовпця, якщо ви хочете, щоб люди багато часу проводили за читанням на вашому веб-сайті або якщо у вас є зображення, для яких потрібна світла кімната.

Через його простоту, навколо одного макета стовпців існує мало проблем. Однак вам потрібно уважно розглядати потік інформації. Яке замовлення потрібно користувачеві, щоб побачити ваш вміст?

Наприклад, корисно дати користувачам короткий виклад того, що сторінка охоплює вгорі, щоб намалювати їх і запропонувати чіткий заклик до дії до кінця.

Крім того, подумайте, як можна змусити користувача прокручувати сторінку вниз. Макети в одному стовпчику, як правило, довші, і користувачеві не завжди очевидно, що вміст внизу знаходиться внизу. Візуальний індикатор, такий як стрілка, може допомогти.

Якщо макет одного стовпця здається трохи обмежуючим, але у вас все ще є багато вмісту для спілкування, подумайте про те, щоб прийняти дизайн, орієнтований на вміст.

2. Макет, орієнтований на вміст

Веб-дизайнери часто використовують контент, орієнтований на контент на новинних сайтах або в блогах, і він, як правило, має первинний стовпець для вмісту та один або кілька бічних стовпців для додаткової інформації.

Перевага цього макета полягає в тому, що він може допомогти вам керувати довжиною рядка центрального вмісту, змінюючи ширину бічних стовпців. Це має значення тому якщо довжина рядка тексту занадто довга або коротка, її важче читати, таким чином, зменшення розуміння та збереження інформації.

Однак, зроблено правильно, контент, орієнтований на вміст, ідеально підходить для будь-якого веб-сайту, орієнтованого на копію. Секрет полягає в тому, щоб розбити вміст цього макета на невеликі, легко засвоювані шматки.

Публікації в Boagworld розбивають вміст із заголовками, списками, зображеннями та викладеними цитатами.

Наприклад, в моєму блозі, ви побачите, що мій середній пост визначається заголовками, списками, зображеннями та витягуйте цитати. Це всі методи, що допомагають користувачеві сканувати статтю, знаходячи цікаві деталі.

Ретельно розглянемо також бічні колони. Важливо, щоб веб-дизайнер розмістив правильний вміст у цих стовпцях і щоб вони візуально мали правильну вагу.

Проблема полягає в тому, що користувачі розраховують знайти вторинний вміст у бічних стовпцях і тому приділяти їм менше уваги. Тому, якщо ви плануєте включити щось на зразок заклику до дії в бічний стовпчик, воно повинно бути досить сильним, щоб привернути увагу.

Наприклад, зауважте, як Smashing Magazine використовує барвисту ілюстрацію кота, щоб привернути увагу до форми реєстрації їх у бюлетені у правій колонці.

Журнал Smashing використовує свої бічні стовпчики для надання вторинної інформації про публікацію.

Мало того, що макет, орієнтований на вміст, підходить для кожної сторінки вашого сайту. Веб-сайти часто поєднують цей макет із дизайном у журнальному стилі.

3. Макет журналу

Як випливає з назви, такий підхід до верстки широко використовується в журналах або на сайтах новин, щоб показати велику кількість різних історій.

Натхненні макетом друку, вони дозволяють поєднувати заголовки та зображення для введення сюжетів. Це може бути захоплюючим способом передачі того, що по суті є списком посилань.

Це також відмінний макет для виділення контенту, який регулярно змінюється. Ось чому веб-сайти з новинами люблять The Washington Post так прихильно це.

Веб-сайти з новинами, як правило, надають перевагу макетному стилю журналу.

Однак макет не позбавлений своїх недоліків. Макет журналу може бути складним, щоб зробити чуйним, часто вимагаючи повної зміни дизайну для менших екранових пристроїв.

Цей стиль компонування веб-сайту також може бути дещо захоплюючим, велика кількість зображень та заголовків кричить на увагу.

Найефективніший спосіб вирішення цієї проблеми – створення чіткої візуальної ієрархії. Іншими словами, зробіть деякі “історії” більшими за інші.

За допомогою різних розмірів історії вони орієнтують користувачів на очі.

Наприклад, зауважте, як Vogue веб-сайт фокусує увагу на зображенні ліворуч, роблячи його значно більшим. Вони ефективно підказують користувачеві, де слід шукати першим.

Це також допомагає, що решта користувальницького інтерфейсу є простою, з чистою типографією та простими панелями навігації. Якщо ви збираєтеся використовувати макет журналу, вам потрібно буде наполегливо працювати, щоб все було просто.

Ще одним потенційним недоліком макета журналу є те, що він може виглядати «коробчастим», оскільки сітка, що його підкладає, настільки видна. Однак ви можете пом’якшити це, взявши натхнення від нашого наступного типу макета.

4. Макет розриву сітки

Макети, які, здається, розбивають основу сітки, можуть бути візуально набагато цікавішими, ніж більш традиційні підходи. Вони також чудові для привернення уваги до конкретних елементів екрану, які вибиваються із звичайних стовпців.

Візьмемо, наприклад, Сайт фестивалю VR Arles. Зверніть увагу, як вони привертають вашу увагу до своєї панелі навігації, перекривши її двома стовпцями.

Фестиваль VR Arles звертає вашу увагу на панель навігації, перекриваючи дві колонки.

Ще одне практичне використання схеми розбиття сітки – це використання її для накладання тексту на зображення таким чином, щоб привернути увагу до копії. Коли веб-сторінка повністю накладає текст на зображення, його часто можна втратити. Однак, як можна див. з прикладу нижче, якщо текст частково перекриває малюнок, він виділяється набагато більше.

Цей дизайн привертає увагу до тексту та закликає до дії, частково накладаючи його на зображення.

Мінусом розбиття сітки є те, що їх важко виправити, особливо коли веб-сайти потребують чуйності. По правді кажучи, більшість конструкцій, що розбивають сітки, не мають нічого подібного. Ще є основна сітка, і всі елементи екрана вміщуються в неї. Просто сітка набагато складніша, і це не так очевидно. Це робить їх важкими для проектування.

Їх притаманна складність полягає в тому, що ви схильні бачити, що їх використовують компанії, керовані дизайном, такі як дизайнерські агентства або модні бренди. Вони демонструють ступінь витонченості дизайну, яка подобається певній аудиторії.

Якщо схема розбиття сітки виявляється занадто складною для вашої ситуації, але ви все ще хочете зробити щось більш інноваційне та незвичне, розгляньте дизайн на весь екран.

5. Повноекранний макет

Повноекранні макети, як випливає з назви, розміщуються на одному екрані, не потребуючи користувач прокручувати. Це робить їх ідеальними для розповіді чи презентацій.

Візьмемо, наприклад, Види в шматках. Цей багатий та інтерактивний досвід презентації розповідає про 30 зайнятих видів.

Види та шматки - це багатий інтерактивний досвід, який проходить без необхідності прокрутки.

Як бачите, макети на весь екран найкращі, коли супроводжуються потужними зображеннями. Це робить їх прекрасним вибором для веб-сайтів, багатих фотографією, ілюстраціями чи відео.

Не те, що вам потрібно суворо дотримуватися підходу на одному екрані. На перший погляд, Ру на веб-сайті Парламентської площі видається повноекранним веб-сайтом у тому ж сенсі, що і Види в шматках. Їх чудова образність заповнює весь огляд.

Цей веб-сайт використовує весь вікно перегляду для демонстрації його чудової фотографії.

Однак можна переглянути далі вниз по сторінці, щоб побачити додатковий вміст. На жаль, це підкреслює один потенційний недолік при такому підході до компонування. Користувачі не завжди розуміють, що вони можуть прокручувати, і тому вони можуть пропускати цінний вміст.

Також потрібно уважно розглянути питання про те, як компонування буде адаптуватися під різні розміри. Наприклад, чи буде працювати на повноекранному підході на мобільному пристрої? Також чи обрізатимуть зображення, коли зміниться розмір екрана, або просто зменшаться? Ви можете швидко знайти фокуси зображень, які висікаються з області видимості при менших розмірах.

Це означає, що якщо у вас є приголомшливі зображення, ви будете намагатися знайти кращий дизайн макета. Але, якщо ви хочете отримати можливість додати деякий опис та заклики до дії поряд із цими зображеннями, ви можете розглянути альтернативний макет.

6. Черговий макет

Змінна схема компонування є однією з найбільш часто зустрічаються в Інтернеті. Ви побачите, що він складається із серії блоків вмісту, кожен з яких має макет із двох стовпців. Зазвичай блоки складаються із зображення з одного боку та тексту з іншого.

Його назва називає те, що зображення чергується в сторону. Таким чином, перший блок матиме вміст зліва та зображення праворуч, тоді як наступний блок змінює цю компоновку.

Такий підхід до розстановки особливо прихильний при поясненні особливостей або переваг товару. Наприклад, програмні продукти на кшталт Вебідо буде використовувати зображення для показу функції, а потім копію, щоб пояснити, як воно працює або користь, яку він надає.

Webydo чергує текст і зображення в різних змістах блокує свою домашню сторінку.

Не те, щоб ці блоки вмісту обмежені зображеннями та текстом. Іноді сайти замінюють зображення відео. В рівній мірі змістова сторона елемента може містити все, від піктограм до відгуків або закликів до дії.

Наприклад, Convertkit включає відгуки та заклик до дії поряд з їх текстом у кожному змістовному блоці.

Convertkit включає відгуки та заклики до дій поряд із їх зображеннями.

Частина причин, що чергуються блоки є настільки поширеними, це те, що вони є простим підходом до компонування з невеликими недоліками. Якщо вам потрібно повідомити кілька торгових точок, це майже завжди надійний варіант компонування.

Звичайно, ваші вимоги можуть бути різними, тому ще одним варіантом слід вважати макет на основі картки.

7. Макети на основі карт

Макети сторінок на основі картки – ще один поширений підхід до макета, який ви побачите в усьому Інтернеті.

Макети на основі карт – це чудовий спосіб надати людям ряд варіантів для вибору користувача, надаючи їм достатньо інформації щодо кожного вибору для прийняття рішення.

Це робить їх популярним вибором для сторінок із списками продуктів сайтів електронної комерції. Це дозволяє веб-сайту відображати зображення товару, опис та ціну. Ви навіть можете додати такі функції, як “Зберегти для подальшого”, як видно з Веб-сайт Asos.

Сайти електронної комерції, такі як Asos, надають перевагу макетів на основі карт для відображення списків товарів.

Однак ви знайдете веб-сайти з використанням макетів на основі карт в будь-якій ситуації, коли користувачам потрібно вибрати зі списку. Наприклад, іншим типовим способом використання буде відображення списку статей на сайті блогу чи новин.

Макет на основі картки дозволяє відображати зображення історії, назви та опису, а також будь-які додаткові відомості про публікацію, яку ви хочете включити. Нагороди Блог – прекрасний приклад такого використання в дії.

Awwwards використовуйте макет на основі картки, щоб перелічити публікації на своєму блозі.

Найкраще, що макети на основі карт працюють добре чуйно, коли кількість карт підряд повільно зменшується, коли наявна ширина зменшується.

Однак є кілька незначних недоліків у підході. По-перше, карти найкраще працюють, коли ви додаєте зображення. Це означає, що якщо ви намагаєтеся знайти підходящі фотографії для кожного зі списків, вам може бути краще іншого дизайну.

Інша незначна проблема полягає в різній кількості вмісту. Якщо одна картка має більше вмісту, ніж інша, вона може залишати пробіл або всередині картки, або між кожним рядом.

Якщо картки мають різну кількість вмісту, вони можуть залишати пробіли між картками.

Один із способів пом’якшити цю проблему – не намагатися тримати картки в одному рядку, як показано в прикладі нижче.

Дозволяючи карткам заповнити порожній простір, ви отримуєте більш естетично оформлений дизайн.

Тим не менш, це другорядне питання, яке пояснює широке прийняття такого підходу до компонування.

Ще одна не менш популярна конструкція – це макет зображення героя.

8. Макет героя

Макет героїв названий на зображеннях героїв, тих великих зображень із текстовими накладками, які домінують на домашніх сторінках на стільки веб-сайтах. Apple добре використовує класичний образ героя.

Apple добре використає класичний образ героя.
Pixave для MacOS надає макет герою ще більше, домінуючи в його дизайні домашньої сторінки.
Pixave для MacOS надає макет герою ще більше, домінуючи в його дизайні домашньої сторінки.

Що робить зображення героїв настільки поширеними, це те, що вони дозволяють розмістити свої зображення значення пропозиції вражаючим способом прямо в точці входу вашого веб-сайту.

Як видно з Піксав і Apple веб-сайти вище вони, як правило, складаються з великого фонового зображення, заголовка чи ремінця та опису. Макети героїв також часто приходять з помітним закликом до дії.

Якщо вам потрібно чітко пояснити, що ви пропонуєте на своїй домашній сторінці чи цільовій сторінці таким чином, що приверне увагу, то образ героя цілком може стати дорогою. Однак це, мабуть, ступінь їх використання.

Інколи ви бачите макет героя, який використовується на наступних сторінках. Але в більшості випадків образ героя просто відвертає увагу від більш цінного змісту. Тому використовуйте обережно.

Окрім цього, є невеликий недолік від використання макета героїв. Так, вони є загальними, але користувачі знайомі з ними, і вони ефективні.

Значно менш поширеним варіантом компонування є макет розділеного екрана.

9. Розбивка екрана

Як і у повноекранному макеті, розділений екран – прекрасний спосіб привернути увагу, коли користувачі вперше завітають на ваш веб-сайт, як ви можете бачити з Домашня сторінка компанії з веб-дизайну нижче.

Цей сайт використовує макет розділеного екрана, щоб пояснити дві їх пропозиції.

Те, що робить приклад вище таким ефективним, є чітка причина макета на розділеному екрані. На веб-сайті видно, що у їхньому бізнесі є дві сторони – дизайн та розробка.

Подібний приклад – коли ви хочете надати користувачам чіткий бінарний вибір. Розділений екран має багато сенсу в цій ситуації, оскільки він розділяє екран порівну між двома варіантами.

Наприклад, агентство з моделювання 62 Управління використовує розділений екран, щоб заохотити користувачів визначити, шукають вони чоловічу чи жіночу модель.

62 Управління використовує розділений екран, щоб заохотити користувачів зробити вибір між двома варіантами.

На жаль, за межами обмеженої кількості застосувань, є мало причин для прийняття розбитого екрану. Це відносно обмежуючий варіант компонування, і там просто не так багато сценаріїв, де це доречно. Однак у тих випадках, коли він є, це далеко не найкращий вибір.

Аналогічний варіант, який забезпечив би трохи більшу гнучкість, – це асиметричне розташування.

10. Асиметричний макет

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

Перевага такого макета перед розділеним екраном полягає в тому, що він дозволяє додавати акценти певній стороні сторінки. Чим більше нерухомості має сторона, тим більше уваги ви приділяєте цьому. Це, в свою чергу, дозволяє ідентифікувати первинний та вторинний контент.

За умови розміщення первинних та вторинних стовпців ви можете використовувати підхід декількома способами. Наприклад, Фелікс Лесуеф використовує метод на своєму сайті для поділу між вмістом та навігацією.

Фелікс Лесуеф використовує асиметричний макет, щоб виділити навігацію по своїх сайтах.

На противагу цьому Поживи їсти веб-сайт використовує другий стовпець, щоб ви могли побачити наступний розділ його веб-сайту.

Nourish Eats використовує цей підхід до компонування, щоб більш помітно викрити вторинний контент.

Багато в чому асиметричний макет – відмінний вибір. Він гнучкий, порівняно простий у виконанні та менш використаний. Це зручний спосіб зробити так, щоб ваш веб-сайт виглядав по-різному без головних болів деяких інших варіантів.

Як вибрати макет

Читаючи цю статтю, ви зробили перший крок у виборі правильного макета для свого сайту. Ви дізналися, які варіанти вам доступні.

Далі вам потрібно зрозуміти, які варіанти можуть бути підходящими для вашого сайту. Один із способів зробити це – подивитися на своїх конкурентів. Однак я б радив не зупинятися на цьому. Небезпека полягає в тому, що ви їх скопіюєте, і це завжди поставить вас на крок позаду.

Натомість подивіться на сайти в інших секторах, які мають власні типи вмісту. Якщо у вас є веб-сайт про брошуру, орієнтований на аудиторію B2B, подивіться на інші подібні сайти. Так само, якщо у вас є сайт електронної комерції, подивіться на електронну комерцію в інших секторах.

Звідти працюйте зі своїм дизайнером, щоб експериментувати з деякими різними підходами. Запропонуйте їм обмислити деякі ідеї на основі різних макетів і подивіться, що найкраще підходить для вашого вмісту.

Якщо ви виявите, що не можете прийняти рішення або не маєте впевненості в правильному напрямку, спробуйте поставити варіанти перед деякими користувачами та отримайте їх реакцію. Не запитуйте їх, які вони віддають перевагу, а також запитуйте, чи помітили вони критичний вміст чи зрозуміли, про що йдеться у компанії.

По правді кажучи, ви, мабуть, опинитесь і обираєте різні підходи до компонування для різних частин вашого веб-сайту, і це нормально. Тому що, коли мова заходить про макет веб-сайту, використання правильного в потрібний час є критичним.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me