Дизайн и верстка

25 Жов
25.10.2012

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

Существуют правила наследования отступов/полей, есть правила округления, правила пропорции и прочее. Если каждый элемент на странице соответствует правилам, верстка будет четкой и однозначной.

Ширина колонки в 298рх, ширина сайта 1001рх, отступ 13рх, поле 7рх, размер одной и той же картинки в разных блоках 100х113, 129х115, 237х201, размеры шрифта 18,357pt, сжатые по ширине методом трансформации с цветом, opacity которого 81%.

Бывает, что таки значения сделаны намеренно, а бывают установленными “на глаз”. В результате к каждому макету применяется индивидуальный подход во время верстки и тысячи вопросов про себя или вслух “была ли установка значения осознанной или нет?”

Пожелания:

  1. Пропорциональность картинок на сайте одной и той же сущности.
  2. Кратные 10-ти размеры основных колонок и ширины сайта. Если не брать во внимание адаптивные и резиновые сайты, в среднем ширина сайта берется 990рх. По стандартам ширина баннера 300рх. Добавим еще отспут от колонки в 10-20рх. Позволяет соответствовать стандартам и исключает проблемы с центрированием.
  3. Добавим к этому отступы в 10-20рх между блоками, пропорционально уменьшающиеся в глубину контейнеров. Конечно, исключения из правил не исключаются.
  4. Целочисленные размеры шрифта, вручную выставленные межбуквенные интервалы и четко заданный цвет.
  5. Расстановка основных конструктивных линий, в частности, линии центра.
  6. Центрирование сайта относительно макета.
  7. По поводу цвета шрифта: как на неоднородном фоне четко определить цвет шрифта, opacity которого 81%?. Чтоб цвет шрифта в верстке соответствовал дизайну, его значение в дизайне должно быть однозначным.

Придерживаясь таких правил снизится количество хранимых файлов на сервере и записей в БД, количество запросов к серверу и скорость загрузки страниц; исключаются проблемы с центрированием объектов и размещением внутри них других; увеличится степень соответствия верстки макету; снижается количество вопросов “а можно здесь пренебречь 2px?”, а также, переверстывание всяких упущений и недосмотров.

Теги: ,