Софт для Windows    Программы для смартфонов и планшетов, мобильный софт    Софт для Линукс, Unix, Linux
 

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

Веб-дизайн | 09:57 26 ноября
Краткий экскурс в историю изобретения
Необходимость в составлении геометрии модульной сетки возникла у меня примерно год назад. Я тогда закончил работу над дизайном сайта одной организации, передав макет кодеру для верстки. И тут началось самое интересное. По результатам верстки я получил дизайн, беспощадно лишенный права на жизнь. На бессознательном уровне верстальщик сдвинул заголовки, изменил ширину строк, расстояние между изображениями и еще кое-что. Я спросил: Почему все стало выглядеть иначе?. Он ответил: Я хотел как красивее. C тех пор я предлагаю верстальщику на время работы отключить орган, отвечающий за эстетическое, каждый раз прилагая к макету геометрию модульной сетки.

Хватит истории
HTML-кодер видит в присланном дизайнером макете страницы набор объектов и их физических свойств: линия  {горизонтальная} {зеленая}. А как эта {горизонтальная} {зеленая} линия должна реагировать на различные разрешения экрана или изменение размера окна браузера (по замыслу дизайнера), кодер может только догадываться. Существуют ли обстоятельства, при которых расстояние от линии до ближайшего объекта (до текста, например) может изменяться, верстальщик также может только догадываться.

Обычно хороший веб-дизайнер вкладывает в оформление страницы такого рода закономерности. Они могут проявляться в строгой пропорциональности размеров таблиц, форм, расстояниях между объектами, в возможности масштабирования кегля шрифта и т.п. Это дисциплинирует структуру сайта. Но дело в том, что HTML-кодер все эти закономерности может не увидеть. Не дизайнеру назло и не потому, что он не внимательный, а потому что на макет смотрит через призму своих интересов.

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

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

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


(на сайте автора можно посмотреть увеличенную копию изображений)

В этой сетке описано 17 параметров, позволяющих кодеру сверстать сайт с иголочки.

Есть небольшой перечень принципов, которые при составлении геометрии учитывать желательно:

  • Не должно быть повторяющихся (обозначающих один параметр) линий;
  • Для упрощения восприятия желательно применять разные цвета;
  • Важно показать, какие размеры должны задаваться в пикселях, а какие  в процентах;
  • Важно определить, какие блоки текста на сайте будут фиксированного размера, а какие  масштабируемого. Желательно, чтобы весь шрифт был масштабируемый;
  • Желательно прилагать к геометрии подробное текстовое описание.

С другой стороны, не нужно заниматься пушковоробейством, объясняя верстальщику, что при наведении курсором на гиперссылку цвет ее меняется, а фон на веб-странице должен стоять не по дефолту, а белый.

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

Автор: Илья Бобяков
Источник: http://www.designbook.tomsk.ru/


 

Последние новости

Кластер с горячим резервированием Как стало известно CNews, 'Воентелеком' разработал и провел испытания первого в России отказоустойчивого кластера для комплексного оснащения узлов связи...
ИТ-взлом из страха потерять работу Стали известны подробности ареста сотрудниками ФБР 31-летнего американского ИТ-специалиста Жэня Чжэндуаня (Zhengquan Zhang), которому предъявлено обвинение в устано
Недорогой Microsoft Surface для школьников?В Сети уже появлялись сообщения о том, что в рамках мероприятия, которое Microsoft проведет 2 мая в Нью-Йорке, ожидается глобальный анонс новой 'облачной' оп
Инвестиционные планы 'Почты России' В распоряжении CNews оказалась инвестиционная программа госпредприятия 'Почта России' на 2017 г., утвержденная приказом министра связи Николая Никифорова...
В наследство от старого аппарата преемнику достался ностальгический дизайн и возможность до 1 месяца находиться в режиме ожидания...

Блог о софте

AVG 2013 Christmas Collection Mega Pack Final Version-FL | 761 MBAVG 2013 Christmas Collection Mega Pack Final VersionYou Have a Complete Collection of AVG 2013 SoftwareMega Pack Contains:AVG Antiviru
О программе:Zoner Photo Studio Pro - приложение, созданное для качественной обработки цифровых снимков...
Sophos Virus Removal Tool - антивирусный сканер проведет диагностику вашего ПК на наличие вирусов, программ-шпионов, руткитов и поддельных антивирусов и удалит их...
Photo Collage Max – программа, которая создает фотоколлажи. Так же создает альбомы, календари и т.п. Содержит в себе множество шаблонов, фигур, масок, фоторамок...
Дизайн Календарей - это доступная и удобная программа для создания красивых календарей с фотографиями на любой год или месяц...