1.5. Правило Третин

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

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

Розділ 3. Розміщення елементів сайту по законах розміщення об’єктів.

Тема1. Модульна сітки.

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

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

Спроби «систематизувати красу» робилися ще в Середні століття переписувачами книг. Вони використовували набір спеціальних правил для розмітки сторінок.

Після Другої світової війни кілька графічних дизайнерів, включаючи Макса Білла і Джозефа Мюллера-Брокмана, натхненні роботою «Нова типографіка» Яна Чіхольда, задалися питанням верстки сторінок.

Вони почали розробляти систему, яка б дозволила найкращим чином розташовувати текст і ілюстрації на сторінці. Фундаментальна робота Мюллера-Брокмана - «Grid Systems in Graphic Design» - сприяла поширенню модульних сіток в європейській, а пізніше і американської типографіці.

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

Модуль - умовний блок в конкретній сітці, крок в її ритмі.

2. Навіщо використовувати модульну сітку?

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

Крім того, вона дозволяє створити єдиний стандарт можливого розташування блоків для всіх сторінок сайту.

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

3. Як користуватися модульною сіткою?

Як приклад - сайт компанії А2К. В ньому для зручності використовується фіксована 12-колонкова сітка. З цієї сітці у нас вибудовуються всі ключові елементи - починаючи від меню і перемикача мов, логотипу, телефонів і закінчуючи копірайтами.

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

Завдяки сітці, сторінка залишиться такою ж цілісною і зібраною.

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

4. Корисні ресурси

   1. Сітки для Photoshop

Baseline Grid PSD - чудовий макет 960-піксельної сітки від Teehanlax. Завдяки 6-піксельному вертикальному модулю, забезпечує гнучкий контроль текстового ритму.

The Golden Grid Template - шаблон, побудований на базі css-фреймворка The Golden Grid.

2. CSS-фреймворки на основі сіток

1KB Grid - чудова бібліотека, яка ставить в основу швидкість. Виберіть кількість колонок, їх ширину і ширину відступу - натисніть «Завантажити» і приступайте до верстки вашого сайту.

Baseline - ще одна бібліотека для швидкого прототипування, на цей раз з ухилом в типографіку.

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

Суб’єкт – об’єкт. Колірні схеми. Стилі веб-сайтів.