Chulakov Design

Источник боли

Бессонные ночи, правки, недоумение, кровь, пот, слезы — все позади. Вы отлично потрудились и сохранили финальную версию макета, утвержденную заказчиком. Есть ощущение, что на этом ваша миссия завершена, ведь следующий шаг до безобразия прост — передача макетов верстальщикам. На самом деле веселье только начинается.

У опытного дизайнера нет проблем с передачей макета фронтенд-разработчику - все нюансы учитываются бессознательно. У начинающего же — непонятные и странные просьбы вызывают обильное потоотделение, дрожь в коленках и повышенное внутричерепное давление. Мы пообщались с нашими разработчиками из @deepdigital и выписали примеры того, что стоит держать в голове и, при необходимости, исправить перед отправкой макета верстальщику.

1. Есть ли незапланированные цвета? 😤😤

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

Отдельно стоит упомянуть прозрачность без обоснованной необходимости. На одной странице вы выбираете серый цвет текста #BFBFBF , на другой — у вас черный текст с прозрачностью 26%. Серый цвет в обоих случаях одинаковый, но разработчик вас ненавидит. 2. Все ли отступы в порядке? 😤

Возьмем, например, отступы. Разработчику удобно работать с круглыми числами, и без должных инструкций ваш паддинг в 11 пикселей может превратиться в 10. Тут два пути — либо брать числа, равные минимальной единице сетки, либо специально обратить внимание разработчика на отступ, который должен быть не больше и не меньше 31 пикселя.

3. Содержат ли элементы полупиксели? 😤

Проверьте макеты: если у вас есть значения с десятичными или (боже упаси) сотыми и тысячными долями пикселя — накажите себя сами. Если ваш блок по ширине равен 117,5 — в какую сторону должен округлить разработчик? Потом не удивляйтесь, что на реальной верстке все скачет.

4. Различная длина контента 😤😤

Вы быстро и ловко вместили имя пользователя «Иван» в правый верхний угол макета рядом с пиктограммой «профиль». Разработчик проверяет форму именем «Константин», и Константин двигает всю строку. Предусматривайте сразу несколько кейсов: очень короткие/очень длинные названия для всех мест/полей с вводимым пользователем контентом.

5. Соблюдена ли логика адаптивной верстки? 😤😤😤 Одна из самых важных вещей, реализация которой порой вводит в ступор и взрывает мозг разработчикам. Возьмите за правило и придерживайтесь блочного расположения контента, особенно если делаете адаптивную верстку (вы же ее делаете, верно?). В адаптивах правый блок переносится вниз, иное построение вызывает боль и плодит костыли.

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