Чек-лист. Подготовка макета к верстке. Перед тем, как отправи | PRO фриланс. Блог Амира Исламова

Чек-лист. Подготовка макета к верстке.

Перед тем, как отправить макет на верстку, его нужно хорошенько приготовить. Нарезаешь лук, обжариваешь с двух сторон до золотистой корочки, поливаешь соусом и получаешь пездюлей от верстальщика. Так. Это не та история.

Я не из тех, кто сразу делает чистые аккуратные макеты с нужным порядком слоев. Сначала в моих макетах можно заблудиться и поломать мизинцы. После того, как дизайн утвержден я вызываю мистер-пропера. Чтобы было чисто. Самое хреновое, что можно сделать – отправить макет сразу после финиша. С такими дизайнерами и враги не нужны.

・・・・・・・・・・・

### Готовить макет к верстке нужно, как минимум по двум причинам:

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

2. Самому будет удобнее ориентироваться в макете. Если в будущем захочешь внести правки и закинуть в портфолио, либо добавить анимацию.

・・・・・・・・・・・

### По порядку, что делаю я. Чек-лист:

✓ 1. Про адаптив я думаю можно не напоминать, естественно он должен быть. Планшет, мобилки.
✓ 2. Все компоненты кладу в отдельный фрейм
✓ 3. В последнее время начал так же создавать Ui кит со стилями цвета и типографики. Так в нем удобнее ориентироваться.
✓ 4. Отрисовка всех модальных окон. (страница благодарности, заказать звонок и т.д)
✓ 5. Задизайнить состояния элементов. (поведение кнопок, иконок, ошибок)
✓ 6. Убрать лишние направляющие и сетки
✓ 7. Прикрепить файлы шрифтов.
✓ 8. Подготовить стили цвета и текста.
✓ 9. Почистить слои. Со времен фотошоп я привык наводить порядок в слоях. Если ты работаешь в фигме, скетчке или adobe делать этого не обязательно. В отличие от фотошопа, в этих прогах хорошо организован выбор элементов и удобный экспорт.

Но я все равно навожу порядок. НАСРАЛ? УБЕРИСЬ!

По слоям:
— Группирую элементы в логичные папки.
— Даю осмысленные имена слоям.
— Соблюдаю иерархию. Хидер должен быть вверху, а футер внизу панели слоев.
— Удаляю все пустые и лишние слои. Никто не должен гадать нахоя они там.
— Скрытые глазом слои, либо удаляю, либо комментирую их присутствие.

・・・・・・・・・・・

Когда файл полностью подготовлен, можно со спокойной дизайнерской душой отправлять на верстку) В фигме через Share. (Без права редактирования) Фотожоповские Psd-шки обычно гружу на облако)

В след. статьях расскажу про базовую проверку верстки.