Модульні сітки у веб-дизайні. Модульна сітка в графічному дизайні

Модульна сітка- це система організації об'єктів у просторі, заснована на рядах та колонках певного, строго заданого розміру. У осередках можна розташовувати одиниці контенту: текстові блоки, заголовки, врізання та зображення.

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

Зверніть увагу на один із ескізів розвитку Манхеттена 1807 року, який підпорядковується суворій сітці вулиць, що проходять із заходу на схід та з півночі на південь

Навіщо потрібні сітки?

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

Наслідуючи нове віяння, на початку 1960-х художник-оформлювач Пітер Палаццо оновив дизайн газети New York Herald Tribune. 1966-го художній редактор Джанет Коллінз ввела нову верстку в лондонській Times. Обидва ці перетворення показали працівникам промисловості, що єдиний стиль оформлення підвищує якість взаємодії читачів з виданням. Газетники та редакції журналів швидко зрозуміли необхідність сіток та почали застосовувати їх у своїй практиці.

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

Йозеф Мюллер-Брокманну своєму посібнику «Модульні системи в графічному дизайні» пише про сітки так:

«Структуруючи за допомогою модульної сітки площини та простір, дизайнер отримує можливість організувати тексти, фотографії та графічні зображення за принципами об'єктивності та функціональності.<…>Логічно організований дизайн підтримує достовірність інформації та сприяє їй читача».

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

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

Ми зібрали найбільш поширені зразки, які вже стали «класичними», знайомство з якими допоможе краще зрозуміти модульне проектування:

Квадратна сітка

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

На прикладі:Роберт Бюхлер, 1914
Джерело: Thinking Form

Сітки Макса Білла

Першим досвідом застосування сітки в книжковій справі була розроблена Максом Біллом система книги «Die Neue Architektur». У цій книзі, що вийшла 1940 року, Альфред Рот застосував поділ сторінки на дев'ять горизонтальних модулів. Вони дозволили вільно розташовувати ілюстрації і розміщувати ними текст трьома мовами. Декількома роками раніше, спираючись на ідеї «нової друкарні» Баухауса, Білл використав шестимодульну сітку у своєму знаменитому плакаті «Negerkunst», створеному для виставки південноафриканського скельного живопису в 1931 році.

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

Модульна сітка - це система побудови візуальної інформації на основі блоків - модулів.

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-9", renderTo: "yandex_rtb_R-A-269783-9", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); , this.document, "yandexContextAsyncCallbacks");

Модуль.

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

З історії.

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

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

Навіщо потрібна модульна сітка.

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

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

Побудова модульної сітки.

Модуль може бути розміром у 2 квадратні метри, 3 на 3 міліметри або 12 на 12 пікселів. Все залежить від тієї системи вимірювань, у якій ми його використовуємо.

У веб-дизайні переважно використовуються модулі розміром 12, 16 або 24 px. Деякі рекомендують брати за основу відстань між рядками, що в принципі теж логічно.

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

Більш складні модульні сітки використовують більшу кількість елементів. Наприклад, ми беремо за основу модуль Х і отримуємо сітку з кроком 3Х по горизонталі та 4Х по вертикалі. У цьому як вертикальні і горизонтальні блоки поділяються між собою модулем Х.

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

Модульна сітка в айдентиці

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

Друкарська сітка в журналах та газетах

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-10", renderTo: "yandex_rtb_R-A-269783-10", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); , this.document, "yandexContextAsyncCallbacks");

Друкарська сітка є скоріше різновидом модульної сітки через специфічні особливості друкарської справи.

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

Модульна сітка не є чимось обов'язковим і її використання також справа особистих уподобань та смаків. Використовувати її можна по-різному.

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

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

Побудова модульної сітки вCorelDraw.

Є кілька варіантів використання сітки у корелі.

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

Другий спосіб це побудова сітки за допомогою напрямних. Ми можемо зробити напрямні видимими або невидимими за допомогою іконки номер 2.

Приклад модульної сітки на основі напрямних у корелі малюнку 4.

Тут модуль розміром 5 мм. За допомогою нього ми побудували складнішу сітку.

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

Використання модульної сітки вAdobePhotoshop.

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

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -269783-11", renderTo: "yandex_rtb_R-A-269783-11", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); , this.document, "yandexContextAsyncCallbacks");

Висновки.

Модульна сітка використається повсюдно. Її значення велике, а можливості не можна недооцінювати.

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

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

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

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

Сітка може допомагати нам вирішувати поставлені завдання, так і бути частиною рішення. Найбільш яскравим прикладом може бути інтерфейс windows phone:

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

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

Для наочності наведу приклад модульної сітки періодичного друкованого видання. Якщо ми верстаємо журнал, то структурними елементами може бути заголовок, підзаголовок, текст, ілюстрації. Зазвичай у журналах є різні типи статей, де роль текстової частини може змінюватися. У таких випадках, щоб зробити сітку гнучкішою, я використовую 5-7 модулів (по горизонталі):

Об'єднання модулів може здійснюватися практично в будь-якому зручному для вас форматі:

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

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

У випадку з сайтами оптимальною кількістю колонок вважається 12, 16 та 24, що пов'язано з особливостями верстки сайтів та використання можливостей фреймворку. Мінімальною висотою модуля для web я вважаю 20px, що пов'язано з оптимальним розміром шрифту (12-14pt) та його читання.

Тепер настав час поговорити про технічний бік питання.

Створення модульної сітки в

Перший і найпростіший спосіб - це включити сітку самого графічного редактора (Ctrl + ') і, орієнтуючись нею, виставити напрямні. Вийде довго і з великою ймовірністю помилок.
Встановити спеціальні плагіни для Photoshop ( GuideGuide , Modular Grid Pattern , GridMaker 2).
Завантажити готовий шаблон з одного з безкоштовних сіток генераторів, таких як 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Встановіть потрібні параметри та натисніть «GENERATE».

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

Створення модульної сітки в

На відміну від Photoshop, InDesign має власні засоби створення модульної сітки. В меню Layoutнеобхідно вибрати пункт Create Guidesі в діалоговому вікні ввести потрібні вам параметри:

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

Створення модульної сітки в

Перший спосіб (аналогічно Photoshop) - це включити сітку самого графічного редактора і, орієнтуючись на ній, виставити напрямні. Також є можливість будь-яку фігуру зробити напрямною, що допоможе в організації похитної сітки.
Завантажити готові шаблони сіток. Де – підкаже пошук. В інтернеті їх можна знайти багато.

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

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

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

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

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

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

Модульна сітка в 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 використовується універсальна структура з колонками розміром 61 х 16 пікселів, що відповідає стандартним фото та відео бренду.

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

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

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

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

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

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

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

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

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

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

Автор Йозеф Мюллер-Брокманн (1914–1996) – графічний дизайнер та викладач. Його роботи є взірцем простоти в дизайні та тонкого використання друкарні, форми, кольору. Вони вплинули на багатьох сучасних дизайнерів.

На сайті Студії Лебедєва написано, що книги немає у продажу. Раджу заглянути в один із офіційних магазинів.Давно хотів прочитати «Модульні системи у графічному дизайні». Вважав, що її вже не продають. Після захисту семестрових робіт у БВШД натрапив на магазин студії Лебедєва. Виявляється, вони її друкують та продають.

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

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

Приклади сторінок із використанням модульної сітки

Дизайнеру на замітку

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