Что нового?

Задавать вопросы

Задавайте вопросы и получайте ответы. F.A.Q помощь новичкам.

Платное повышение

Доступные платные повышения прав групп - VIP, Продавец.

Связаться С Персоналом

Наши специалисты готовы ответить на ваши вопросы.

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

XAKER

Администратор
Регистрация
22.02.2019
Сообщения
834
Реакции
210
Баллы
43
Веб-сайт
hackinfo.online
16-pravil-gramotnoi-verstki-maketa-768x416.jpg

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

    Источник
 
Сверху