Ваш макет создан для других.

Часто дизайнеры торопятся и забывают про правильное построение элементов дизайна, а также их именование.

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

Создавайте палитру цветов

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

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

Храните все стили текста в одном месте

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

Используйте материнский артборд

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

Расскажите что из себя представляют объекты

Любой слой или фрейм в дизайне должен иметь осмысленное имя. Например фон кнопки должен иметь название хотя бы bg-button, а не Rectangle 100500. Это касается абсолютно всех элементов и групп, начиная с самого первого компонента в макете. Такой прием значительно упрощает поиск по макету, а также даёт возможность интуитивно предположить за что эта группа отвечает.

Анимируйте

Бывает и такое, что дизайнер не анимирует экраны даже простыми связками. А зря. Так он очень облегчает работу программисту, когда он понимает как будет вести себя интерфейс и при каких условиях. Это облегчит восприятие макета, так как сам разработчик сможет увидеть то, что должно получиться в действии и ему не придётся постоянно спрашивать дизайнера о том, как должен вести себя тот или иной экран.

Оставьте исходное изображение

Если Вы использовали изображение в своем дизайне, то наверняка его меняли в масштабе. В таком случае настоятельно рекомендуется поместить его рядом с Вашим UI Kit'ом в оригинальном размере, дабы программист не ломал голову: "Какой первоначальный размер у этой картинки?". Благодаря этому несложному приему он сможет изменять размер исходного изображения без потери качества, а не масштабировать потерявшую качество картинку.
Соблюдение таких простых правил упростит жизнь вам и людям, которые работают с вашими проектами.
Автор статьи | Наш телеграмм-канал