Частая жалоба верстальщиков: «Они делают непонятный макет! Отступы пляшут, заголовки разных размеров и начертаний, элементы выпадают из сетки! Не хочу с ними работать”. Дизайнеры, в своё время, жалуются на то, что верстальщики портят макеты.
Эти жалобы взаимодополняемы. Если начать разбираться в корне проблемы, то виноватыми окажутся оба. Как помирить этих двух работников фронта?
Необходимо понять, что в большинстве случаев меняться нужно обоим.
Дизайнеры:
1. Используйте сетку
Удивительно, как много людей, называющих себя „веб-дизайнерами“ игнорируют этот базовый элемент работы. Сетка задает строгую горизонтальную иерархию вашего макета. Большинство верстальщиков используют готовые сетки или делают свои, что даёт им высокую точность и скорость вёрстки.
Изучите принцип работы сетки, например Bootstrap.
Если вам сложно самому рассчитать размеры колонок, используйте специальный онлайн-калькулятор.
Возьмите на вооружение 10, 8 или 4-пиксельную сетку. В изучении 8px сетки отлично помогает изучение концепции Material Design и этой статьи.
2. Изучите основы вёрстки
Вам нет необходимости вникать в подробности Javascript, работы с npm, git, или препроцессорами. Вам необходимо освоить вёрстку для того, чтобы понять, что можно сделать, а что нет. Когда вы сами поймете, как создаётся вёрстка, вы сможете объективно оценить, насколько сложную задачу вы ставите перед верстальщиком, и, в случае чего, упростить её.
3. Показывайте состояния объектов в различных состояниях
Очень часто происходит так, что дизайнер не показывает и даже не рассказывает верстальщику о ховер-эффектах (какими они будут при наведении или нажатии на объект). В таких случаях часто верстальщик делает ховер-эффект таким, каким он сам его видит у себя в голове.
Не заставляйте думать верстальщика за вас. Показать состояния объектов можно вот так:
- Сделать один элемент отличающимся от остальных и набросить на него сверху курсор “руки”.
- В случае модальных окон создать для него отдельный слой, который можно безболезненно скрыть, и показать на примере или через прототип как будет появляться и исчезать окно.
Также можно перенести все объекты для ховера на отдельный лист, чтобы показать их состояния до и после.
4. Типизируйте
Типизируйте все объекты на макете. Если это заголовок Open Sans 1.2em, то пусть он везде будет Open Sans 1.2em. Аналогично поступите с кнопками, абзацами, интерлиньяжем и отступами. Мы не говорим, что всё должно выглядеть одинаково — нет. Вы должны понимать, что чем больше у вас типизированных объектов, тем проще верстальщику с ними работать. Если вы хотите полностью сработаться с верстальщиком, изучите связку Атомарный дизайн + БЭМ.
5. Переименуйте слои
Об этом пункте не говорил разве что ленивый, но слишком уж часто верстальщику приходят макеты с хаотично накиданными слоями, название которых ни о чём не говорит. Переименуйте слои согласно их смыслу и сгруппируйте по типам. Вы можете использовать в названиях как БЭМ-синтаксис, так и общие термины вроде button, header, footer и так далее.
6. Соберите изображения и иконки
Соберите все иконки и изображения из вашего макета и разместите в папку проекта согласно смыслу. Например вот так: img/photos/photo1.jpg, img/icons/facebook.svg и так далее. Этот простой шаг поможет верстальщику гораздо быстрее и эффективнее работать с макетом при вставке графики.
7. Создайте Kit
Под Kit’ом я имею виду отдельный лист, в котором прописаны все типизированные элементы системы: например заголовки всех уровней и разновидностей, кнопки и их вариации, разделительные линии и так далее. Если вы ранее типизировали объекты, то вы легко можете перенести их в Kit на отдельный лист. Благодаря этому верстальщик может спокойно подготовить базу с помощью методологии БЭМ и собирать сайт словно кубики лего.
8. Комментируйте
Если вы предоставляете на вёрстку статичный макет, постарайтесь оставить максимальное количество комментариев по тем элементам дизайна, по которым вопросы могут возникнуть. Не ленитесь. Потратьте время сразу, и избавьте себя от кучи вопросов на будущее. Большинство программ для создания интерфейсов позволяют делать это максимально удобным способом.
Верстальщики:
1. Посмотрите на макет глазами дизайнера
Очень важно оценить художественную работу дизайнера до начала вёрстки. Вы можете подумать, что тот или иной объект верстать будет сложно, но для начала осознайте, почему именно так поступил дизайнер, и будет ли картина такой же цельной, если убрать или изменить объект? Предложите дизайнеру свой вариант, и в большинстве случаев он объяснит вам, почему он использовал именно такое решение, и возможно ли его изменить или удалить без потерь для макета.
2. Попробуйте нарисовать дизайн
Чтобы лучше понимать работу дизайнера и оценить его труд по-настоящему, испытайте себя в его роли. Выберите любую понравившуюся вам программу для работы с графикой и нарисуйте один или несколько макетов, соблюдая все требования, которые вы предъявляете дизайнеру. Оцените свою работу как художник, и отдайте на суд людям в чатах, на форумах, друзьям и знакомым. Это даст вам лишний повод убедиться, что дизайнер не зря ест свой хлеб… Ну или то, что в вас всегда спал художник.
3. Не принимайте решений за дизайнера
Очень часто рисуя по макету, верстальщики пренебрегают какими-то “мелочами” и не верстают их. Они считают, что дизайнер просто увлёкся, и нарисовал ненужные “красотульки”. Нет! Хороший дизайнер изучает продукт, для которого будет рисовать дизайн, продумывает элементы, композицию, размещает все на это макете и создаёт единую картину. Если у вас возникают какие-то сомнения относительно изменений в дизайне, обязательно согласуйте их с дизайнером.
4. Поддерживайте диалог
Обсуждайте дизайн. Получив макет, оцените его (соблюдая первый пункт), и расскажите дизайнеру в каких местах и почему нужно внести правки. Что такое адаптивная сетка и для чего она конкретно нужна. Уточняйте спорные моменты: возможно, что дизайнер намеренно разрушил ритм композиции, а не просто допустил небрежность. Если у кнопки, ссылки или картинки нет ховер-эффекта, спросите, как он должен выглядеть или где он прорисован. Обязательно обговаривайте спорные моменты, тогда не только ваша работа, но и работа дизайнера улучшится.
5. Обсудите общие инструменты для работы
Верстальщикам часто приходилось получать макеты в неудобных для вёрстки форматах, в которых достаточно проблематично посмотреть размеры, цвета, тени или отступы. Решите вместе с дизайнером, какой программой лучше пользоваться для обоих. Разнообразие программного обеспечение ны рынке легко позволяет это сделать. Уже сейчас в вопросе создания пользовательских интерфейсов у вас есть выбор между продуктами Adobe (например Adobe XD), Sketch, Figma или Framer (который буквально на днях выпустил в очередном релизе возможность создавать интерфейсы). Выберите что-то одно или несколько программ и поймите, как вы будете взаимодействовать.
Заключение
Самое главное в работе двух работников фронта, это понять возможности друг друга и общаться. Как и в любых отношениях, здесь должна быть согласованность и налаженная коммуникация. Начните внедрять эти пункты по одному или же все сразу, и тогда работа принесёт вам искреннее удовольствие.
Над статьёй работали Григорий Мочалин и Илья Дзенски.
Комментарии (32)
Gambala
03.06.2017 21:41+1Годно. Тоже работаю в паре с дизайнером, от себя добавлю пару универсальных советов:
1. Создавайте собственные проекты
Код придется годами самим же поддерживать и развивать. От дизайна будут зависеть метрики и, как следствие, лично ваша прибыль. Выше ответственность, и меньше соблазн сделать попроще да побыстрее, и отдать результат кому-то другому.
2. Работайте в одном месте
Если есть возможность. К человеку бывает значительно проще подойти со своим ноутом и прям на месте обсудить проблему. Мы с дизайнером живем в соседних городах, поэтому чаты, аудио и видеозвонки — 90% коммуникаций. Но когда удается поработать вместе — много проблем решается за считанные минуты.
idzenski
03.06.2017 21:47Пункт номер два, к сожалению, прокатывает редко. Но показ экрана в Skype частично решает проблему.
GriNAME
03.06.2017 21:56Вот кстати по пункту два очень хорошо помогает Figma или что-то подобное. Созвонились через телеграмм, скайп, хенгаутс или что-то чем пользуются люди и в лайв режиме. Практически ощущение что работаете в одном помещении. Уже не на одном проекте это испробовали. Так как к сожалению не всегда получается работать в одном помещении. Но а так да, бесспорно работа в одном месте лучший вариант.
Ну и по первому пункту согласен. Свои проекты не только вызывают ответственность но и желание выполнить работу самым лучшим образом.
frees2
03.06.2017 21:53+1Коротко. Честно говоря, чтобы современный дизайн сломать надо очень постараться. ( Может есть ещё заморочки в мобильных браузерах) Bootstrap в принципе уже не нужен, он избыточен. Года два назад это было актуально.
xPomaHx
04.06.2017 01:20+3Все перечисленные проблемы не от дизайнера или верстальщика, а от того кто требует чтобы сайт был 1 в 1 с дизайном, и не слушает что дизайнер просто на глаз сюда воткнул заголовок, а посередине это то как сейчас на сайте.
Busla
04.06.2017 02:24Если мы посмотрим на шрифты, то там исключительно одно сплошное «на глазок», потому что человек ощущает не абсолютные величины, а зрение подвержено «оптическим иллюзиям» — на восприятие размера влияет цвет, контраст и прочее.
Пока у нас были огромные пиксели, отойти от сетки не получалось, потому что шаг был слишком велик. С увеличением удельного разрешения экранов появилась техническая возможность красиво дизайнить не по сетке.xPomaHx
04.06.2017 05:50+1Верстальщик вообще нечего на глазок не делает, дизайн в псд это то как будет выглядеть сайт на каком то одном разрешении, остальные разрешения дизайнер додумывает сам. А шрифты просто копируются прямо из свойств если в дизайне он 20px то и на сайте будет такой же.
knuklus
04.06.2017 08:42По хорошему дизайнер предоставляет макет под большие, средние и малые экраны.
Да современные инструменты это уже далеко не psd, а тот же xd например.
al5dy
04.06.2017 08:42+3Я человек простой, получаю говно-макет — делаю такую же верстку, аналогично и в обратной ситуации не говоря ни слова. А в случае если после верстки начинается кипишь, просто говорю — «Посмотрите на макеты, на типографику ит.п — это шлак, поэтому такая и верстка». После этого в 99% дизайнеру так прилетает по шапке, что на след. день я имею вылизанный макет со всеми комментариями, папочками ит.п. Дружатся в детском саду, а на работе люди работают и их надо учить кнутом и страпоном.
idzenski
04.06.2017 10:37А говно-дизайнер сразу осознает что сделал говно или только после «шапки»?
al5dy
04.06.2017 11:24+1Тут уже частные случаи идут и все зависит от дизайнера. Если дизайнер адекватный и нормальный человек, то решаю все по тихому, с ним лично в обход заказчика/босса. После объяснений и аргументаций человек обычно осознает, что сделал говно и все правит. Если дизайнер залупается и кидает фразочки типа «сам поправишь, тут я забыл подрисовать — дополнишь ит.п, ой я там 100500 шрифтов вставил найдешь нужный рубик называется», то делаю как описал выше, ибо с такими людьми разговаривать бесполезно их нужно только учить.
DenimTornado
04.06.2017 11:36В один прекрасный момент диз. будет отличный, а вы наговняете и прилетит уже вам. Если речь идёт о работе в команде, то общение и обсуждение необходимо.
al5dy
04.06.2017 11:49+1Вы поняли, что написали? Как можно наговнять отличный диз? Отличный дизайн — я молчу в тряпочку, говно — делаю как писал выше. Вы поймите, что если вы верстаете уже более 11 лет, то перевидали столько макетов и техник, что можете задетектить говно даже по предварительным jpeg-ам. Естественно, если бы я верстал 1 год, то это была бы совсем другая история.
По поводу команды — согласен на 100%, только вот никто одеяло не должен тянуть на себя и все будет тип-топ. А так в команде все должно быть отлажено как часы, в противном случае кто-то кого-то будет постоянно тянуть вниз.
PavelUstyugov
04.06.2017 08:42очень жизненная статья и ее можно давать как пособие (в моем случае дизайнерам).
Встречал дизайнеров, которые вообще рисовали макет на своем очень широком мониторе на всю ширину экрана и потом верстальщику (мне) приходилось думать какого размера сверстать тот или иной элемент, включая размер шрифта, поскольку на обычном мониторе ничего не помещалось. О сетки даже не шло речи. Тоже накидал инструкцию для дизайнеров с рекомендацией следовать сетке.
Особая сложность взаимодействия возникала с бывшими дизайнерами-полиграфистами… Они не имели представление о блочной верстке, а еще рисовали элементы управления так, как видит их воображения не зная даже как это дает нам html. приходилось через js реализовывать тот или иной элемент.
andrhohlov
04.06.2017 08:42Работа дизайнера — очень ответственная. Тут и прямой диалог с заказчиком, жаждущим игры шрифтами. И прямые последствия каждого из решений — чуть-чуть «передизайнил» и обеспечил верстальщику муки и костыли, которые в итоге дойдут и до программиста. И самое невнятное ТЗ, и необходимость уместить творческие порывы в технические рамки.
В связке дизайнер-верстальщик-программист очень много противоречий.
И разрешить их можно только если каждый осознает себя частью процесса и более-менее понимает весь процесс.
Дизайнеры|верстальщики|программисты — понимайте друг друга и будьте компетентными в своей сфере полностью и хоть немного в смежных.
Я уже долгое время призываю дизайнеров следовать вот таким требованиям к макетам: https://github.com/andrey-hohlov/psd-templates-requirements
С позволения автора в список статей по теме добавлю и эту.GriNAME
04.06.2017 12:43Да конечно добавляйте) Хорошая у вас инфа по ссылке, прочитал, согласен с написанным.
SuperKozel
04.06.2017 18:52первый список должен быть просто чеклистом «являешься ли ты вебдизайнером»
я задолбался натыкаться на «вебдизайнеров», которые не знают, что такое колоночная верстка/адаптивный дизайн/ui kit. Спасибо, что макет не в jpп
Как будто поувольнялись из оперативных полиграфий
matraskin
04.06.2017 20:28Верстальщик не нужен. Тут пруф
idzenski
04.06.2017 20:31Да, вполне возможно что верстальщика в его самом бытовом понимании заменит нейросеть. Многие выдохнут) Но большой вопрос что останется на работе верстальщиков и в каком формате выдаст нейросеть результат. Так что будем ожидать результат.
GriNAME
05.06.2017 19:39Тоже думаю что базовую верстку хорошо бы уже на ИИ передать. Вот фронтендеры — да, они нужны. По сути грань между современными бекендерами и фронтедерами настолько мала, так как на фронтенде сейчас можно сделать почти все, а бекенд в некоторых случаях выполняет лишь роль БД на сервере. А просто верстка это лично для меня скучная деятельность. Конечно современные инструменты могут немного приукрасить работу, но если только верстать, то надоедает быстро. А вот писать SPA или что-то такое это очень и очень интересно. Ну и оплачиваемо)))
Monki
04.06.2017 20:28Вопрос от только собирающегося входить в профессию: а разве в студиях нет какого-то устоявшегося что-то типа чек-листа\style guid'а для дизайнеров? Почему если произошли раз-два-три таких ситуации, пм или еще какой начальник не вразумил дизов раз и навсегда?
zahmTOD
05.06.2017 13:06Нельзя сказать «студии». Каждая студия индивидуальна по количеству говна, которое в ней творится ).
В маленьких, но профессиональных студиях очень низкий уровень текучки. Зачастую если какой-то спец уходит из нее, то оставляет после себя полноценного заместителя, и поэтому устои студии не меняются. И попасть в такие коллективы нереально.
В остальных студиях плотность дедлайнов и их степеней переменчива, как и коллектив. В таких условиях на какие-то стандарты просто не остается времени.
krlmisha
05.06.2017 14:01Да уверен, что есть что-то подобное, просто это несколько сложнее контролировать на мой взгляд. Вспомните какой ужас был лет 5-10 назад (на заре web 2.0 короче), когда все кнопочки были глянцевыми, под каждым элементом была тень, много было графики, которая нагружала страницу. Сейчас большинство пришли к единству чистого и простого дизайна.
idzenski
05.06.2017 14:04Абсолютно не ужас. Всего лишь актуальные и текущие тренды дизайна. Делали так не потому что это «никто не контролировал», а потому что так было модно, как сейчас моден material, flat, fluent и т.д. Советую почитать чтобы понять разницу: «Эволюция веб-дизайна — 20 лет за 5 минут»
Chipr
06.06.2017 00:27Мы своей командой уже достаточно давно перешли на Zeplin. От меня, как от дизайнера, нужны теперь только кнопки/формы/баннеры и т.п. отдельным файлом. Все остальной: шрифты, размеры, цвет и т.п. есть там. Ускоряет и упрощает работу всем, но требует аккуратной работы в графическом редакторе.
Dmitry88
вариант — совместить оба направления в одном человеке. Через верстальщик обычно проходит много дизайнов, волей-неволей дизайнерские скиллы придут
GriNAME
Ну если это возможно для конкретного человека и есть желание, то очень даже вариант)
Мы с Ильей (@idzenski) решили что каждый будет углублялся в ту область, от которой он получает удовольствие. И на мой взгляд если расти до профи, то сложно сочетать на действительно крутом уровне и художественный скилл и программистский. ИМХО
kucheriavij
Дело не в том что проходит много макетов, и у верстальщика появятся скилы, а в образе мышления и видения картины. Верстальщик использует уже готовую композицию, дизайнер же создает эту композицию. Поэтому гораздо проще научить дизайнера верстать, чем верстальщика рисовать
Dmitry88
Скорее наоборот, все типовые опробованные решения уже придуманы и на 99% буду выбраны заказчиком. Профессия дизайнера сильно переоценена. Но, это мое мнение.
kucheriavij
У меня на работе сейчас наоборот, типовые решения уже приелись, и чаще всего просят сделать «что-нибудь этакое». Когда рисуют «этакое», верстальщики держась за голову делают, а потом у руководства появляются вопросы, типа «какого фига на верстку столько времени уходит», при этом никто не хочет слышать аргументы о том что это не типичное решение, которое требует времени, а дизайнеры увидев тот или иной эффект на одном проекте, пытаются его присунуть на другой проект, не понимая как это работает, и почему оно там используется. Вот тут и начинаются конфликты
idzenski
Возможно вы забываете о том, что достаточно часто клиент хочет то, не зная чего. В этот момент дизайнер начинает «править бал» и рассказывать, как будет лучше для выполнения целей клиента.