Каркас сайту, або модульна сітка у веб-дизайні

27

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

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

Що таке модульна сітка?

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

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

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

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

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

Які бувають сітки?

Давайте розглянемо види сіток для веб-дизайну.

1. Блокова сітка — груба розмітка площі на блоки.

2. Колоночная — має колонки у своїй структурі.

3. Модульна — складається з пересічних прямих, які утворюють модулі.

4. Ієрархічна — сітка з інтуїтивним розміщенням блоків, без будь-якої логічної структури.

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

Сітка для веб-дизайну 960 Grid System (http://960.gs) відповідає концепції «статичного» макета, а для створення «гумового» можна звернути увагу на сітку фреймворку Bootstrap (http://getbootstrap.com/css/#grid). Модульний каркас 960 GS ділить веб-сторінку на 12, 16 і 24 колонки.

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

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

найпоширеніше дозвіл екрана 1024х768;

ширина макета не повинна перевищувати 770 пікселів, для того щоб на екрані з роздільною здатністю 800х600 внизу не з’являлася смуга прокручування;

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

Виходячи з цього, пропорція виглядає так: 200 пікс. + 550 пікс. або 150 пікс. + 620 пікс.

Більшою колонці передбачається розмістити меню навігації, меншою — каталог, або зміст.

Дивіться і вчіться — модульна сітка сайту BBC

Розглянемо в якості прикладу сітку веб-дизайну відомого сайту. На всіх сайтах BBC використовується універсальна структура з колонками розміром 61 х 16 пікселів, що відповідає стандартним фото і відео бренду.

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

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

1. Процес починається з визначення місць для блоків вищої ієрархії. Уявляємо себе такими Шерлок Холмсами – майстрами дедукції і дотримуємося правило «Від загального до часткового, від більшого до меншого».

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

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

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

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

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

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

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