Я - сам себе дизайнер, сверстайте мне макет.
Как заказать верстку по своему макету дизайна и не свести с ума кодера, который будет его верстать.

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

«Пустые макеты»
Очень часто заказчики приносят макеты, на которые нанесены только основные сочетания цветов и от силы - пару элементов дизайна, типа рамочки профиля автора и иконки. Это вызывает целый ряд проблем.
Во-первых, при работе с таким полупустым макетом на верстальщика ложится не только работа по созданию кода - ему приходится выступать в роли дизайнера, додумывать как оформить те элементы, которые не обозначены на макете.
Во-вторых, когда кодер подбирает цвета и стили необозначенных элементов экспериментальным путём, это может привести к неожиданным результатам и вытекающим правкам и комментариям от заказчика с требованием переделать то, на что было потрачены силы и время.
В-третьих, сам клиент не имеет представления, как будет выглядеть итоговый результат и сочетаться элементы дизайна, ведь нарисовал не сами веб-страницы, а только отдельные куски. И, к сожалению, часто эта проблема перекладывается на кодеров, хотя они не должны отвечать за сам дизайн.

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

Макет в таких заказах представляет собой ТЗ. И, как мы уже писали, ВСЁ, что вы НЕ указываете в ТЗ (то есть на макете), вы оставляете "на вкус дизайнера".
Поэтому самый простой способ избежать проблем с верстальщиками - это делать подробные макеты.

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

Если разрисовывать макет подробно вам не подходит по какой-либо причине, то тут есть два варианта как поступить:

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

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

«Творческие макеты»
Другая проблема, преследующая заказы на верстку макета, это непонимание заказчиками что можно (и что нельзя) в точности поставить на коды ровно так, как это изображено на макете, ввиду отсутствия опыта в веб дизайне.
Многие заказчики рисуют макеты, основываясь только на эстетическом восприятии, добавляя кучу градиентов, фильтров и эффектов, а потом удивляются, почему итоговый результат не соответствует макету.
Конечно, профессиональный верстальщик просто обязан указать на проблемы в макете, все объяснить и все изменения согласовать, однако не каждый, кто берется за верстку макетов, профи до мозга и костей - некоторые будут пытаться приблизиться к недостижимому идеалу. Да и даже профи не с первого взгляда на файл макета могут заметить все косяки, порой некоторые проблемы с эффектами всплывают после половины выполненной работы и вообще где-то там, где их не ждешь.

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

• Пиксель-перфект не бывает
  Вернее, бывает, но в том случае, если макет делает профессионал с базой знаний о том, как делать макеты так, чтобы они идеально соответствовали веб-стандартам. Если же вы не сильно разбираетесь именно в ВЕБ дизайне, то либо наймите профессионала для создания макета, либо морально будте готовы к тому, что существует вероятность, что не все ваши красивости "переедут" на страницы сайта ровно в том виде, как это получилось в графическом редакторе.
  Также если вам важно стремиться к идеалу, заранее знать о проблемах макета и согласовывать изменения в нем, то укажите это при заказе, чтобы не нарваться на специалиста, который просто будет верстать по принципу "и так сойдет".

• Adobe Photoshop vs Figma
  Adobe Photoshop - это прежде всего графический редактор, поэтому он содержит массу соблазнов для создания косяков на макетах.
  Как минимум надо избегать применения каких-либо эффектов слоёв, влияющих на фоновый элемент. Например, внутри блока есть текст с большой тенью, таким образом создаётся эффект градиента у блока - на верстке невозможно сделать тень, которая будет создавать такой эффект. Или, например, в верстке нет эффекта "умножение" у тени, соответственно, выглядеть она будет по-другому, а воссоздовать именно вашу тень очень тяжело.
  Мы настоятельно рекомендуем для новичков в веб дизайне освоить редактор Figma - он просто не позволяет делать лишние творческие изыски, которые совсем невозможно сверстать. Какие-либо фоновые картинки с эффектами наложения слоев можно сделать в фотошопе, а вот сам макет нарисовать в фигме - так будет в разы меньше несостыковок с кодерами.

• Тени, градиенты, блюры, фильтры и т.д.
  Сейчас существуют CSS-коды, которые делают просто космические штуки, однако с ними не все так просто.
  Во-первых, не все современные фичи работают во всех браузерах, особенно старых версиях. Причем не древних браузерах, а просто стареньких, полгода-год без обновлений - достаточно, чтобы у пользователя что-то не отображалось.
  Во-вторых, такие фичи в каждом браузере отображаются по-разному. Даже text-shadow и box-shadow, которые существуют уже сто лет, выглядят немного по-разному в разных браузерах.
  Как будут выглядеть такие штуки после верстки зависит не от кодера, а от вашего браузера - в каких-то браузерах все красивенько, в каких-то - убого, а в каких-то - просто не работает.
  Если вам нужен, например, градиент, но позарез "пиксель-перфект как на макете", то это до сих пор достигается путем вставки фоновых картиночек - и тут все зависит от того, возможно ли ваш макет нарезать на нужные картиночки. Так что (опять же, если вам принципиален пиксель-перфект) лучше упрощать дизайн, стремясь к минимализму.

• Крутые "дизайнерские" шрифты
  Шрифты, которые применяются для веб совершенно отличаются от шрифтов, которые сделаны для графики (плакатов, картинок и т.д.).
  Это в фотошопе, если у вас кегель шрифта содержит какие-то невнятные отступы вокруг текста, его легко подвинуть и переставить. А при применении таких шрифтов на сайте, происходит просто жесть. Как минимум верстальщик будет размахивать костылями, накручивая вам тонны ненужных кодов ради того, чтобы выровнять заголовочки. Как максимум - вы можете нарваться на кодера, который скажет "не мой шрифт - не моя проблема".

«Хаотичные макеты»
Еще одна проблема, которая может сказаться на результате работы кодера - это бардак в файле макета.
Казалось бы, что такого страшного может случиться? А много чего может: не заметить интерактивный элемент (потому что все разбросано без структуры и папок), вырезать не ту текстуру не того размера (потому что дизайнер просто залил ей весь фон и не оставил исходник), верстать дизайн "полотном" (потому что склеили элементы), потратить на верстку раза в три больше, чем предполагалось (потому что блуждание по макету занимает тонну времени) и т.д....

Когда вы делаете макет для себя, нет никаких проблем в том, чтобы оставить его в "хаотичном" виде. Однако делегируя работу с макетом другому человеку, важно привести его в порядок, чтобы этот человек быстро разобрался.

Вот основные советы, которые помогут вам достичь гармонии и взаимопонимания:

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

• Не склеивайте слои и предоставляйте исходники.
  Во-первых, не стоит объединять слои без необходимости. Иной раз такое сверстать просто невозможно, особенно, если вам нужна мобильная версия. Макет должен состоять из слоев, иначе кодеры работали бы с картинкой, а не макетом. Если же склейка слоев необходима, то как вариант - скопируйте все слои, которые намереваетесь склеить, вынесете в отдельную папку и сделайте ее невидимой: таким образом у кодера останутся все исходные элементы.
  Во-вторых предоставляйте исходники. Порой "нарезка" макета превращается в ад, потому что совершенно нет никакого представления о том, из чего состоит тот или иной элемент: например, часто текстуры накладывают в виде "полотна" заливкой и совершенно не понятно, какого размера эта текстура была изначально и какой кусок вырезать для вставки на сайт, чтобы она отображалась без швов. В таких случаях лучше для кодера предоставить исходник текстуры и, конечно, сохранить на макете все этапы ее "перекраски", если таковые были, а потом только использовать ее для заливки слоев.

• Составляйте дополнительное ТЗ или инструкции.
  Не каждый макет способен на 100% передать все, что необходимо от кодера. Например, стоит предоставить пояснения и указания для вёрстки интерактивных элементов и анимаций, если они предусмотрены в дизайне.
  Также часто на макетах либо вообще не обозначают активные элементы (например, какого цвета должны быть ссылки при наведении курсора), либо их легко потерять где-то в списке отключенных слоев (особенно, если они никак не подписаны). Поэтому небольшая инструкция по наличию таких элементов в дизайне очень выручает.
  Еще можно привести в пример дизайны с использованием иконок-шрифтов типа Font Awesome или Material Icons. Даже если кодер узнал их и догадался, что это не картинки, занимает огромное количество времени поиск той самой иконки в общем списке на официальном сайте, так что, имеет смысл составить список с названием или кодом иконок, которые используется в определенном элементе макета.