Как передавать
дизайн в верстку
7 Февраля 2014
Как передавать дизайн в верстку
7 Декабря 2013
На этот счет образовалась целая дискуссия у Артема Горбунова. Действительно, универсального ответа нет, так как в каждой организации свой подход, в зависимости от того, для какой платформы разрабатываются дизайн макеты, и в каких программах работают специалисты.

Но я могу дать субъективную точку зрения, что делать дизайнеру, когда он не знает, как будут работать с макетами (например это фриланс заказ) или что требовать от дизайнера, если у вас нет возможности поинтересоваться напрямую с командой разработчиков.
1
Создаем мастер-страницу
для верстальщика
Чтобы у верстальщика
не осталось ни одного вопроса
Когда весь дизайн готов, то помимо всех страниц сайта у вас должна быть еще одна дополнительная — master page, или мастер-страница. На ней должны быть собраны все стили, все виды кнопок и их состояний, все виды форм заголовков других элементов, которые присутствуют в дизайне. Это может выглядеть примерно так или так, но в формате .psd или другого редактора.
Если редактор специфический для разработчиков (например Sketch), то все элементы должны быть нарезаны дизайнером.

Таким образом верстальщик просто открывает страницу и собирает все стили с одного места, вместо того чтобы искать все это в 35 макетах, а это займет намного больше времени верстальщика, чем дизайнера, поэтому вам как клиенту придется переплатить за это копеечку. Дешевле будет доплатить дизайнеру за такую работу, так как он знает свои макеты лучше других.
2
Стили текста в Adobe Photoshop
Автоматизируем процесс
создания макетов
Все верстальщики начинают работу с создания стилей, чтобы потом при верстке страниц не тратить время на поиск цвета и размера шрифтов или кнопок на странице контактов. Для дизайнера критично не облажаться и унифицировать весь дизайн, чтобы не получилось так, что на странице «Контакты» цвет и размер всех шрифтов отличается от страницы «О нас». Вот тут начнутся проблемы, верстальщих начнет материться и тратить больше часов дорогого времени на работу дизайнера.
Чтобы не было таких ситуаций в фотошопе есть удобная панель «Character Styles», где мы сразу создаем шаблон всех возможных вариантов шрифтов и заголовков (как и программе Sketch). Теперь больше не надо вспоминать, какой размер шрифта был там или другом месте. Достаточно одного клика чтобы задать все необходимые параметры текста на новой странице.
3
Smart Objects
и Smart Linked Objects
Автоматизируем процесс
создания макетов
Чтобы в будущем ускорить процесс работы над дизайном, удобнее всего
в повторяющихся группах, например в карточках товара использовать Smart Objects. Таким образом, если вам понадобится сделать изменение в одной карточке, оно автоматически применится ко всем остальным объектам.
А если хедер и футер уже утверждены, то можно просто вставлять их в макеты
с момощью функции Place Linked, таким образом, например, если вы захотите внести изменения в шапку, то оно применится ко всем страницам сразу, и вам не нужно будет вручную перелапачивать, к примеру 20 страниц дизайна. Подробнее об этом написано тут, или есть еще такая статья, рекомендую всем дизайнерам к прочтению.
Вердикт
Если вы заказывайте дизайн шаблонов сайта, которые будут реализовываться командой, отдельной от дизайнера, включайте в разработку master page,
и будет всем счастье!

Понравилась статья? Расскажите друзьям:
Назад   /   Вперед
Made on
Tilda