1. Baseline
2. З чого ж почати?
3. 960 grid system
4. підсумок:
5. Використання сітки при передачі макетів в верстку
6. Корисні книги
7. Корисні інструменти
8. Modulargrid http://modulargrid.org/#app
9. Gridcalculator http://gridcalculator.dk/
10. Gridinator
11. GridDesigner http://grid.mindplay.dk
12. Gridlover https://www.gridlover.net/try

Найважливіше в веб-дизайні це Grid System. Це основа і фундамент вашого майбутнього сайту, інтерфейсу, додатки.

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

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

Сітки - це взагалі окрема культура. Є величезна кількість книг, матеріалів, статей на цю тему. Сітки використовуються не тільки при створенні сайтів, але і в графічному дизайні. І я вам рекомендую глибоко і досконало вивчити дане питання. Благо в мережі величезна кількість матеріалів на цю тему.

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

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

До речі, з системою сіток нас познайомили ще в ранній школі. Всі пам'ятають зошити в клітинку? У лінійку?

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

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

Baseline

Є таке поняття як "Базова лінія" (англ. Baseline, або лінія шрифту) - уявна пряма лінія, що проходить по нижньому краю прямих знаків без урахування звисанням і нижніх виносних елементів. У рядку символи тексту стоять на базовій лінії, а нижні виносні елементи тексту «звисають» з неї.

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

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

Який у вас може виникнути нюанс?

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

Особливо це погано виглядає якщо текст досить невеликий:

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

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

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

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

Модульна сітка використовується друкарями, графіками, фотографами і дизайнерами виставок для вирішення двох-і тривимірних візуальних завдань. Графік і друкар за допомогою модуля роблять рекламу, проспекти, каталоги, книги, журнали, дизайнер виставок створює концепцію експозиції, стендів, рекламних дисплеїв і так далі. Структуруючи за допомогою модульної сітки площині і простір, дизайнер отримує можливість організувати тексти, фотографії і графічні зображення за принципами об'єктивності і функціональності. Скорочується число форматів для образотворчих елементів. Величина ілюстрації визначається відповідно до її значенням для даної теми. Скорочення візуальних елементів і включення їх в модульну систему створює враження продуманого єдності, прозорості, ясності, виникає порядок в оформленні. Логічно організований дизайн підтримує достовірність інформації і розташовує до неї читача. Інформація з ясно і логічно розташованими заголовками, підзаголовками, текстами, ілюстраціями і підписами до них не тільки швидше і легше читається, вона краще розуміється і відкладається в пам'яті. Це науково доведений факт, і дизайнер повинен постійно тримати його в розумі.
З глави «Для чого потрібен модуль». Книга Йозефа Мюллера-Брокманом «Модульні системи в графічному дизайні. Посібник для графіків, друкарів і оформлювачів виставок »

джерело: https://www.artlebedev.ru/izdal/modulnye-sistemy/

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

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

З чого ж почати?

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

960 grid system

960 grid system - це мабуть найпоширеніша система сіток для веб-дизайну. Більш детальну інформацію можна дізнатися на офіційному сайті 960 grid і там же завантажити вихідні сітки. Якщо дуже коротко, то принцип роботи з цієї сіткою дуже добре пояснюється в цьому відео:

Некоректна посилання. Спробуйте другую.ОтменаВставіть

замінити відео

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

Якщо говорити зовсім просто, то на виході ваш макет повинен мати ось такий вигляд:

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

Тому вам треба багато практики і вивчень даного питання.

підсумок:

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

1. Для початку створіть горизонтальний ритм. Яка ширина сітки? Скільки колонок? Які відступи? У цьому вам допоможуть генератори сіток онлайн. (Modulargrid, gridcalculator і ін.)

2. Далі створіть вертикальний ритм для Baseline.

Використання сітки при передачі макетів в верстку

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

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

Не завжди все починається з сітки

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

Корисні книги

Хочу ще порекомендувати корисні книги про сітки в графічному дизайні.

Grid Systems in Graphic Design: A Йозеф Мюллер-Брокманн «Модульні системи в графічному дизайні»

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

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

Скачати книгу
Купити книгу російською мовою

The complete guide to CSS grid

Повне керівництво по CSS сітці. Відмінний матеріал для дизайнерів і розробників.

Читати онлайн (англійською)

Аллен Хёрлберт - Сітка

Книга Аллена Хёрлберта "Сітка" (аналогічно попередньої), навіть російською.

Скачати книгу

Модульні сітки: Проектування многополосних видань

Лаптєв, Володимир Володимирович

Скачати книгу

Корисні інструменти

Ще хочу поділитися корисними ресурсами для побудови сіток.

Modulargrid
http://modulargrid.org/#app

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

Gridcalculator
http://gridcalculator.dk/

Більш просте додаток. Допомагає швидко робити розрахунок сіток для веб-сайтів і додатків під різні дозволи екранів.

Gridinator

http://gridinator.com

Зручний інструмент, дозволяє генерувати сітку з параметрами pixel widths, em widths, percentage widths. Є експорт сітки в CSS, html, image.

GridDesigner
http://grid.mindplay.dk

Інструмент для просунутих дизайнерів. Більше підійде скоріше розробникам, так як додаток робить експорт в CSS тільки. Є ще можливість задати набір параметрів для тіпогрфіі.

Gridlover
https://www.gridlover.net/try

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

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