Тема модульних сіток в дизайні і, взагалі, модульної системи побудови - дуже велика, в рамках одного поста розглянути її нереально. Сьогодні я хочу розповісти, чому потрібно використовувати модульну сітку при розробці, які є інструменти, що допомагають в роботі і як не стати заручником прямих ліній і рівних відступів. Моє завдання - зацікавити вас, а кожен зробить для себе якісь висновки.
Трохи історії
Можна вважати, що веб-дизайн бере свій початок від традиційних, друкованих книг, газет і інших подібних речей. Книги і газети існують багато років, їх верстка давно «устаканилася», є певні традиції і норми, яких дотримуються. Однак, модульні системи з'явилися ще раніше і прийшли в книгодрукування з архітектури. У класичній архітектурі за одиницю модуля зазвичай брали радіус колони у її заснування і пропорційно йому встановлювалися інші елементи конструкції (ширина, висота будівлі та інше).
Нинішня модульна сітка в веб-дизайні з'явилася відносно недавно і виконує дуже важливу функцію - спрощує проектування і верстку сторінок. Що сьогодні називається модульної сіткою і як вона працює?
Модульна сітка в веб-дизайні
Модульна система верстки - система верстки, при якій основою композиції смуг і розворотів стає модульна сітка з певним кроком (модулем), однаковим або різним по горизонталі і вертикалі.
вікіпедія
Відразу скажу, що жорсткого стандарту використання модульної сітки немає і навряд чи колись з'явиться. Саме тому існує маса різновидів сітки і ви вільні використовувати будь-яку, яка сподобається. Нижче я розповім про найпопулярніші видах сітки, а поки подивимося, які є переваги використання.
- Привносить порядок і цілісність сприйняття.
- Модульна сітка це шаблон, а за шаблоном завжди працювати швидше і зручніше, що веде до підвищення швидкості розробки шаблону і його верстки.
Здавалося б, переваг трохи, але не поспішайте з висновками. Подивіться на скріншоти нижче і спробуйте візуально посунути пару блоків в різні боки.
Що у вас вийшло? Я впевнений, що композиція вже порушена і сайт не сприймається як єдине ціле.
Ось так дрібниці вміють впливати на загальну картину. Але, в той же час - «диявол криється в деталях» і початківці дизайнери, дізнавшись про модульної сітці, починають сприймати її як аксіому. Що з цього виходить?
- дизайн стає «академічно» нудним
- сітка накладається навіть тоді, коли її застосування недоречно
- використовуючи сітку, легко забути про головних і додаткових елементах дизайну - сітка зрівнює всіх
- сітка - інструмент, а не самоціль дизайну
Отже, підіб'ємо невеликий підсумок. Модульна сітка - штука, безумовно, потрібна і важлива. Її використання необхідно для того, щоб ваші блоки не танцювали по сторінці і сприймалися як єдине ціле. Але, в той же час, вона накладає деякі обмеження, які можна і потрібно переступати, якщо того вимагає ідея дизайну.
Чи не вписуйте дизайн в сітку, навпаки, створюйте сітку під дизайн.
Інструменти для роботи з модульної сіткою
Я розповім про тих сервісах і фреймворки, якими користувався особисто, але в Мережі їх величезна кількість.
Відмінний макет для створення сторінок від Олексія Черенкевіч в форматі PSD - тут
Тут великий вибір фреймворків, але я використовував всього два, які повністю мене влаштовують. Це 960Grid і Blueprint. Ці фреймворки складно назвати повноцінними модульними сітками, це, скоріше, модульні колонки Але роботу свою виконують.
modulargrid - невеликий скрипт для верстальника з гнучкими настройками. Вміє показувати сітку поверх вашої верстки, полегшуючи і прискорюючи процес. Дуже хороша штука, рекомендую.
Онлайн-сервіси для генерації
Ось такий вийшов набір, для повного циклу розробки, від малювання до верстки.
Використовуйте, тільки не переборщіть ... Вдалого дня
Схожі записи
Спасибо большое - ваш праця не пропадає даром. Скажіть, а сітки немає в фотошопі, як, наприклад, лінійок? Сітку треба робити самому або користуватися сітками інших? Я правильно зрозумів.
спасибі за статтю. хоч тут я трохи краще дізналася про модульної сітці