16 правил грамотной верстки макета

16 правил грамотной верстки макета

  1. Сетка. Соблюдайте сетку. С её помощью можно быстро собрать каркас страницы в соответствии с предложенным дизайном. К тому же это просто удобно.
  2. Именование слоёв в файле макета. Имена слоёв по названию должны соответствовать тому, что на них находится и не иметь непонятных названий. Это облегчает и поиск, и понимание логики созданного.
  3. Наложение слоёв. Его лучше использовать только обычное. Никаких затуханий или исключений. А эффекты слоя — уже поверх.
  4. Делать границы с использованием градиентов также не стоит.
  5. Шрифты. Этот отдельный момент хочется выделить не только в отдельный пункт, но и в рамочку и с кучей восклицательных знаков. Прикладывайте к созданному макету используемые в нём шрифты (хотя бы в .ttf). Зачастую поиск необходимого шрифта отнимает очень много времени. Помните также, что существуют лицензионные ограничения.
  6. Наличие более чем двух нестандартных шрифтов на странице делает затруднительной её визуализацию в браузере, как следствие, пользователем такая страница воспринимается негативно.
  7. Элементы типографики. Таблицы, заголовки, списки и их параметры, оформление цитат и т.п. типографические элементы лучше сделать в отдельном макете. Становится понятнее, какие стили прописывать при вёрстке ресурса.
  8. Используйте несколько проработанных стилей, которые будут повторяться в макете, помогая структурировать содержание. (Классический пример: Заголовок 1, Заголовок 2, Заголовок 3, Заголовок 4, основной текст)
  9. Элементы навигации. Кнопки, ссылки и элементы управления обычно имеют минимум четыре состояния: обычное отображение, стиль отображения с наведенным курсором, нажатая (процесс) и посещенная. Для кнопок меню и навигации есть положения «текущий активный пункт» и «неактивная кнопка» (в зависимости от текущих условий и событий на странице). Не надо заставлять верстальщика делать лишнюю работу, додумывая недостающее, и гадать, какой стиль элемента имелся ввиду.
  10. Каждую часть (блок) стоит хранить в своей папке с понятным названием.
  11. Дополнительные функции и блоки. Связанный по смыслу контент (выпадающие списки, дополнительные функции или окна) должны также находиться в связанных по смыслу папках.
  12. Слои со скрытыми элементами. Стоит выделить слой цветом, если он содержит в себе скрытые элементы (выпадающие списки, дополнительные функции или окна)
  13. Фон. Если используется повторяющийся фон, то надо дать верстальщику 1 единичку этого узора, чтобы он не резал и не подгонял его.
  14. Размеры шрифтов. Никаких чисел со знаками после запятой. Используйте целые единицы.
  15. Разрешение макета 72 dpi.
  16. Если предполагается адаптивность макета — создайте макет в нескольких размерах: для десктопа, для планшета в портретном и ландшафтном отображении, для смартфона.

Источник geekbrains.ru