Будь-макет містить елементи. І часом їх дуже багато. Між елементами виникають оптичні зв'язку і тяжіння, які підкоряються теорії близькості і, зокрема, правилу зовнішнього і внутрішнього.
Если вы решили построить дом или сделать ремонт Kalkyler för gipsarbeten мы сможем вам провести качественно расчеты стройматериалов.
Сітка допомагає дотримуватися це правило, не обчислюючи кожне відстань і розмір окремо. Ви закладаєте ключові закономірності один раз, при побудові сітки, а потім просто дотримуєтеся їх.
На відміну від колоночной, модульна сітка задає вертикальний ритм і основні пропорції елементів, підтримуючи їх у всьому макеті. Це зручна, гнучка і досить проста система. За умови, що ви досить вникли в її принципи.
Чим визначається структура сітки
Модульна сітка будується в двох напрямках: горизонтальному і вертикальному. Грубо кажучи, це комбінація колонок і рядів з разлиновкой макета на рядки.
Останнє інтуїтивно зрозуміло всім літнім аксакалів, яким доводилося за допомогою олівця і лінійки сотнями креслити горизонтальні лінії на аркушах для рефератів. Втім, не здивуюся, якщо студенти роблять це до сих пір.
Отже, якщо вам потрібно побудувати сітку з нуля, ви будете відштовхуватися від двох речей. По-перше, від контенту, який потрібно розмістити в макеті: текстів, ілюстрацій, таблиць, переліків, медіафайлів. По-друге, від пропорцій і площі носія: паперового листа, екрану, полотна або чогось більш екзотичного.
Якщо контент простий і незмінний, і відомий вам заздалегідь, то найпростіше буде відштовхуватися саме від нього. Якщо ж контент складний і непередбачуваний (наприклад, user-generated - призначений для користувача), то сітка в більшій мірі буде визначатися форматом носія і загальними принципами типографіки і композиції.
Початок побудови. вертикальний ритм
Коли мова йде про сайти або друкованої продукції, дизайн багато в чому залежить від типографіки і властивостей тексту. Тому побудова сітки зручно починати з вертикального ритму.
В першу чергу вам потрібно намацати два взаємопов'язаних ключових параметра: базову висоту рядка і базовий розмір шрифту. Простіше кажучи (хі-хі), базові інтерліньяж і кегль. І ось ця простенька задача постійно вводить людей в ступор. «Як мені дізнатися потрібну висоту рядка?», «А який шрифт брати?», «А скільки рядків потрібно робити для буклету? А для візитки? »І т.п.
Варіант «А». Підхід «від рядка»
Якщо у вашого носія фіксований розмір і вам вже відомий весь ключовий контент, то інтерліньяж можна прикинути заздалегідь.
Для цього потрібно уявити, що кожен елемент дизайну, включаючи відступи, займає по висоті кілька абстрактних рядків. Потім скласти всі рядки разом і розділити на них висоту макета. А потім кожну абстрактну рядок розбити на N реальних рядків, відповідних потрібного інтерліньяжу - так, щоб в них адекватно помістився заданий текст.
Простий, але детальний приклад з картинкою
А як же бути з розміром шрифту? О, тепер все дуже просто! За все тією ж логікою «правила зовнішнього і внутрішнього», інтерліньяж повинен складати приблизно 150-200% від висоти кегля. Тобто розмір вашого шрифту буде в 1,5-2 рази менше висоти рядка. А це від 2,5 до 3,3 мм. Цей розмір нескладно підібрати в пунктах або навіть просто на око.
Підкреслю, що не обов'язково виміряти тисячні частки з калькулятором. У вас є окомір і почуття пропорції - їх повинно бути досить. І навіть якщо вони поки не розвинені, через сотню-другу макетів ви зможете потрапляти в сітку пальцем з точністю до 1-2 пікселів, навіть при прихованих направляючих і відключеною прив'язці. І не забувайте, що людське око сприймає розміри і відстані з поправками на фізіологію. Тому і сама сітка - не догма, а лише грубе підмога в розрахунках. Останнє слово завжди за оптичної компенсацією. До цієї теми повернемося нижче.
Ще момент. Буває так, що після всіх розрахунків з'ясовується, що шрифт занадто великий або інтерліньяж занадто дрібний. В цьому випадку ви або робите перерахунок сітки, або просто використовуєте пропорційні значення. Як правило, компромісний варіант - це половинний або полуторний інтерліньяж.
Варіант «Б». Підхід «від кегля»
Далеко не завжди у вас буде передбачуваний контент і фіксований полотно. У веб-дизайні ви куди частіше працюєте з тотальною невизначеністю.
Іноді це схоже на художню ліплення з соплів. Висота вашого макета умовно нескінченна, ширина - плаваюча, основний контент призначений для користувача, що вбудовуються віджети надані артіллю «Пупкін і сини», а реальні тексти сторінок замовник збирається показати вам десь приблизно за день до запуску сайту. Але це не точно.
В таких умовах, очевидно, немає сенсу намагатися визначати кількість рядків. Зате можна танцювати від зворотного: від розміру шрифту (кегля). І це навіть простіше.
Все, що вам потрібно, це вибрати для проекту базовий кегль, який буде досить великим, щоб добре читатися, і при цьому досить компактним, щоб в рядок основних текстових блоків поміщалися 7-8 слів. Строго кажучи, для російської мови досить і 5-6 слів, тому що в середньому у нас, звичайно, довше і твердо
