Anton Reshetov

FRONT END DEVELOPER / WEB DESIGNER / WORDPRESS

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

Предисловие

При верстке по дизайн-макету заказчика приходиться сталкиваться с рядом проблем, а точнее одной, которая снимает остальные вопросы - это полная некомпетентность горе дизайнера создавшего этот дизайн-макет.

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

Казалась бы все очень логично, так происходит везде где что-то строиться, разрабатывается, создается и т.д. Но не всегда у всех хорошо с логикой.

Поэтому веб-дизайнер должен не только корректно разрабатывать дизайн-макет, зная некоторые ограничения CSS, но и также сопровождать его техническим описанием.

Основные требования к дизайн-макету

  • Макет должен быть по 12-и колоночной сетке Grid System, для правильного позиционирования элементов. На сегодняшний день оптимальный размер макета 1200px.
  • Если это .psd или .sketch макет, то группы и слои должны иметь четкое и понятное описание групп элементов и самих элементов. Пример: header, footer, navigation, slider, call-to-action-btn и т.д.

  • При разработке макета в Photoshop:
    • В одном .psd - один дизайн
    • Наименование файлов в соответсвии со страницами сайта: Home page.psd, Portfolio page.psd, Single page.psd и т.д.
    • Новый элемент - новый слой.
    • Все графические элементы, изображения, шрифты должны быть приложены к макету, структурированы по папкам /img, /icon, /fonts и иметь понятное название.

  • При разработке макета в Sketch:
    • Название артбордов должно соответствовать названию страниц Home page, Portfolio page, Single page и т.д.
    • Все графические элементы, изображения, шрифты должны быть приложены к макету, структурированы по папкам /img, /icon, /fonts и иметь понятное название.

  • К дизайн макету должен прилагаться Style Guide - руководство стиля где описаны цвета, размеры шрифтов, состояние кнопок, форм и т.д.

Соблюдения этих требований отделяет дилетанта от профессионала, а так же показывает что Вы уважительно относитесь к чужому труду.

Давайте каждый будет заниматься своим делом и выполнять его на все 100% :)