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

Короткий екскурс в історію винаходу

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

Досить історії

HTML-кодер бачить у надісланому дизайнером макеті сторінки набір об'єктів і їх фізичних властивостей: лінія – {горизонтальна} {зелена}. А як ця {горизонтальна} {зелена} лінія повинна реагувати на різні дозволу екрану або зміна розміру вікна браузера (за задумом дизайнера), кодер може тільки здогадуватися. Чи існують обставини, при яких відстань від лінії до найближчого об'єкту (до тексту, наприклад) може змінюватися, верстальник також може тільки здогадуватися.

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

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

Приклад: Софтліст (найбільший у Томську архів програмного забезпечення). Ось таким його бачить звичайний користувач:

А ось таким його бачить рядовий верстальник одного томської групи розробників:

(На сайті автора можна подивитися збільшену копію зображень)

У цій сітці описано 17 параметрів, що дозволяють кодеру зверстати сайт «з голочки».

Є невеликий перелік принципів, які при складанні геометрії враховувати бажано:

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

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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*