30.01.2015 / Основные правила дизайна web-страниц для html-верстки

Требования, описанные ниже, можно и не соблюдать. Однако, как показывает практика, каждое несоответствие ведет за собой множество трудностей как для дизайнера, так и для верстальщика. Надеемся, наша статья поможет сэкономить время на работу над дизайн-макетом вашего сайта.

 

Файлы

 

  • Формат: Adobe Photoshop PSD
  • Цветовая схема: RGB
  • Pixel aspect ratio: Square pixels

 

Разрешение файлов для дизайн-макетов html-сайтов (dpi) может быть любым. Все файлы должны иметь четкое название на латинице, чтобы при передаче не произошло путаницы. Например, можно: maket.psd; нельзя: макет.psd.

 

Размеры макетов

 

  • Рекомендуемая ширина (HD-монитор): 1920 px
  • Область для контента (текстов и их заголовок, изображений и форм): 990×570 px. Внимание! Эта область должна быть горизонтальной.

 

В слое Requirements должны присутствовать описания макета при его просмотре на мониторах, разрешение которых не соответствует 1024×768. Также в макете должен быть слой (или группа слоев) Extended с рамкой браузера, которая отличается от 1024×768.
Если фон не зафиксирован по ширине, стоит работать с широким фоном. Если фон не зафиксирован по высоте (а контент при этом имеет высоту 570 px), стоит работать с более высоким фоном. Если ни высота контента, ни высота фона никак не зафиксированы, работайте с тянущимся фоном.

 

Слои и группы

 

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

 

 

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

 

 

  • Любая форма ввода данных должна сопровождаться полными сервисными сообщениями. Не забудьте прописать все текстовые поля, отметить пункты выпадающих списков и чекбоксы. 

 

Шрифты

 

  • Все шрифты, которые встречаются в макете, необходимо прикладывать отдельными материалами в формате ttf или otf. Исключение: Arial, Courier, Tahoma, Times New Roman.
  • Деформировать шрифт текстовых элементов сайта запрещено.

 

 

Динамические элементы (кнопки, плавающие блоки и другие)

 

  • Если элемент имеет вид изображения, у него должны быть точные размеры в px.
  • Динамические элементы должны быть представлены во всех рабочих состояниях (при нажатии, без нажатия, неактивное). Не забудьте разбить все элементы по группам и слоям.

 

Другие новости

вверх