Требования к макетам при разработке дизайна сайта

  1. Должны быть разработаны макеты для каждой не типовой страницы сайта. Например, для магазина это:
    • Главная
    • Типовая страница / о компании
    • Новости
    • Вакансии
    • Контакты с картой и формой обратной связи
    • Каталог услуг и страница услуг
    • Клиенты/партнеры
  2. Если требуется мобильная верстка, то необходимо подготовить дополнительные шаблоны для:
    • мобильных телефонов - 320px
    • планшетов - 768px (1024px если необходимо отдельное ландшафтное отображение)
  3. Ширина макета. Если сайт не резиновый или условно-резиновый, ширина макета должна опираться на следующие точки: 1280px; 1440px. Эти разрешения хорошо делятся на 3, 4, 6, 12 для создания колонок сайта.
  4. Макетная сетка должна содержать определенное число колонок (обычно 12) и блоки должны быть выровнены по данным колонкам. Что такое модульная сетка и для чего она нужна в веб-дизайне »
  5. Вертикальный ритм. Необходимо создать свод правил, в которых высота блоков, строк, отступов пропорциональна некоторой величине. Это заметно упростит работу верстальщику, избавив его от необходимости высчитывать каждый отступ и лайнхейт. В идеале все вертикальные метрики макета должны быть выражены через 2 переменных: базовый размер шрифта и вертикальный ритм.
  6. Пикселизации и артефактов быть не должно. Особенно это заметно на экранах хороших смартфонов. Поэтому все изображения, используемые в мобильной версии и версии для планшетов должны иметь копию с повышенной плотностью пикселей (2x)
  7. При оформлении необходимо использовать 1 или 2 типа шрифта. Использовать декоративные шрифты только там где это целесообразно: заголовки, элементы оформления. Жирностью и курсивом злоупотреблять не желательно.
  8. Всегда подготавливать активные (:active, :hover) состояния ссылок, кнопок, пунктов меню. Сайт должен реагировать на действия пользователя там где это необходимо.
  9. Подготавливать favicon и apple-touch-icon