Похожие статьи

Создание сайтов - модель качественной верстки (45,71%)
Начнем с того, что суть моей статьи в первую очередь заключается в создании удобной модели верстки наших проектов. Иногда гуляя по сети, я натыкаюсь на очень хорошо сделанные веб – сайты, но когда, начинаю разглядывать внутреннюю структуру сайта я ужасаюсь. Дело в том, что при создание сайтов разной сложности и структуры, я наработал немалый опыт…

Безопасность мобильных устройств (45,61%)
На данный момент уже трудно найти такое место на нашей планете, где не побывал сотовый телефон. Прогресс так разогнался, что вчерашние мечты - уже повседневность. Сейчас сотовый телефон - не только средство общение, а целый мультимедиа набор. Вместе с тем сотовые телефоны стали такими же приманками для хакеров, как и компьютеры. Хакеры используют…

Правила грамотной верстки сайтов (45,61%)
В этой статье хотелось бы рассказать об известных мне правилах верстки (в частности о пробелах, сокращениях, кавычках, дефисах, тире и т. д.), обращая внимание на их html-реализацию…

Автор:
www.designbook.tomsk.ru

Дата публикации 25-12-2005 20:45
Статья просмотрена 3671 раз

Краткий экскурс в историю изобретения

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

Хватит истории

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

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

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

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

Пример: Софтлист. Таким его видит пользователь

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

А таким его видит верстальщик

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

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

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

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

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

Похожие статьи

Пиринговые сети (40%)
В статье подробно рассказывается об общих принципах устройства и работы пиринговых файлообменных сетей. Дается описание как различных типов P2P-сетей (с центральным сервером, без такового), так и разнообразных программ-клиентов (Napster, Kazaa, eDonkey2000, iMesh, Gnutella)…

Тестирование ноутбуков и настольных систем (38,81%)
В этой исследовании мы протестируем несколько настольных компьютеров, сравним результаты с предыдущими тестами наших ноутбуков и попытаемся выяснить, что же скрывается за загадочной надписью Centrino. Компьютеры, представленные в тестировании, не подбирались заранее с какой-либо определенной целью. Просто мы взяли свои домашние компьютеры,…

Бесплатная мобильная связь, для всех? (38,71%)
На стыке технологий зарождаются порой самые интересные и порой шокирующие решения. И тогда становится понятным высказывание «Всё, что может быть придумано человеком, обязательно будет придумано». Сейчас мы стали современниками не рядового события, а именно, мобильная связь может быть бесплатной для любого желающего и притом совершенно законно.…

Сервисные центры по ремонту ноутбуков (38,71%)
Сервис-центры по ремонту и обслуживанию ноутбуков бывают авторизованные изготовителем, которые обслуживают модельный ряд ноутбуков непосредственного производителя, так и неавторизованные, которые производят ремонт ноутбуков любых производителей. В авторизованных сервис-центрах ремонт производится методом узловой и блочной замены (к примеру,…

Версия сайта для печати средствами CSS (38,1%)
Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны; они больше доверяют бумаге — там и подпись поставить можно и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати. Благодаря CSS решение этой задачи не составит большого труда…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (0) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Частный дизайнер: наиболее частые заблуждения заказчика Вы опасаетесь работать с дизайнером фрилансером или другим частным разработчиком? Зря, ведь это такой же работник, как тот, что выполняет заказ, который Вы разместили в рекламном агентстве. Дизайнеры в принципе народ беспокойный, творческий. Вчера он пошел работать в рекламное агентство, а сегодня ему надоело работать на дядю, и он решил…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

Что такое фирменный стиль? Фирменному стилю довольно трудно дать строгое словарное определение. Однако что такое фирменный стиль, понять и представить очень легко. Авангардные художники часто любят издеваться над одним из символов Америки – логотипом компании «Coca-Cola», вписывая в красный круг витиеватым фирменным шрифтом разнообразные тексты, от юмористических до…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Выпадающее меню на CSS и JavaScript Если на сайте слишком много ссылок в расположенном горизонтально главном меню, то для всех разделов может не хватить места. В таком случае необходимо делать выпадающее меню. Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню…

Создание сайта с помощью фреймов Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…