Основные правила дизайна web-страниц для html-верстки
30.01.2015 /
Требования, описанные ниже, можно и не соблюдать. Однако, как показывает практика, каждое несоответствие ведет за собой множество трудностей как для дизайнера, так и для верстальщика. Надеемся, наша статья поможет сэкономить время на работу над дизайн-макетом вашего сайта.
Файлы
- Формат: 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.
- Динамические элементы должны быть представлены во всех рабочих состояниях (при нажатии, без нажатия, неактивное). Не забудьте разбить все элементы по группам и слоям.
Интересное в блоге
