Основы верстки макета

Основы верстки макета
Основы верстки макета

При верстке сайта с PSD макета у многих верстальщиков возникают проблемы с реализацией некоторых моментов нарисованные дизайнером в PSD макете. Будь то кнопка или градиент или какой нибудь эффект. Ведь каждый дизайнер хочет чтоб его творение было безупречным и редко думают о верстальщиках которые должны его сверстать.

Поэтому нам верстальщикам приходиться либо изворачиваться, тратя на это свое рабочее время или просить дизайнера переделать или в крайнем случае забить и сделать более-менее что-то похожее.

Если заказчик внимательный, то принимая последнее решение у вас возникнуть проблемы с несоответствием проекта с дизайном. Все эти факторы накладывают на нас разработчиков черное пятно, так как дизайнер сидит тихо в углу со своей премией.

Преимущества от введения этих стандартов и требований:

  • Дизайнер становится более организованным, он помнит, что нужно соблюдать правила и как следствие psd макеты начинают меньше весить
  • Верстальщик получая «правильный» макет может более точно оценить срок выполнения, так как точно понимает, что ему не придется никуда больше ходить и просить что-то переделывать, также сюда можно добавить и сокращение сроков выполнения.
  • Результат на выходе получается более идентичный тому, что нарисовано, так как все что дизайнера «натворил» можно реализовать в браузере.

Итог: дизайнер счастлив(не надо ничего переделывать), верстальщик счастлив(все хорошо верстается и тратится ночь на доп.работу, чтоб успеть и нервы впорядке), заказчик (сверстаный макет соответствует утвержденному макету), в итоге все остаются в профите от введение этих правил.

Ниже привожу список требований:

  1. Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
  2. Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
  3. Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа »multiply, screen, overlay, и т.д.».
  4. Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
  5. Никаких градиентных границ (бордеров, stroke).
  6. Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).
  7. ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF
    По возможности — не использовать в макете больше 2-х не стандартных шрифтов, их кол-во сильно влияет на рендеринг страницы в браузере, что негативно сказывается на отношения пользователя к сайту.
  8. Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)
  9. Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п.
  10. Каждый блок должен находится в своей папке и имеет правильное человеческое название, чтобы не собирать части блока по всему макету.
  11. Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности.

Вывод: Соблюдение данных рекомендаций, поможет реализовать этап создания проекта — верстка, максимально точно к созданному макету и поможет избежать:

  • несоответствие макета и сверстанного варианта;
  • проблем с утверждением верстки;
  • проблем с кроссбраузерность и работы верстки в целом.

Источник Хабрахабр

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.