Как сделать дизайн идеальным, а вашего разработчика счастливым?

Zeplin.io — способ подружить дизайнера и верстальщика

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

Мы разработали свод правил, соблюдая которые, вы можете не переживать — ваш макет всегда будет в идеальном порядке.

Шаг 1. Установите сетку рабочей области

Мы часто используем Bootstrap для веб проектов и стандартную сетку для устройств из шаблона.

Сетка в Sketch
Установка сетки

Шаг 2. Стандартизация при помощи стилей

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

Цвета

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

Цветовая палитра Sketch

Стили шейпа

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

Стили шейпа
Создание стиля шейпа
Быстрое изменение цвета

Стиль шрифта

Работает также, как и для текстового стиля.

Шрифтовые стили Sketch

От чего ваш разработчик будет счастлив, а вы не будете переживать из-за неправильных цветов шрифта?

Потому, что он не будет использовать дополнительные инструменты, он не потеряет прозрачность, цвет или тень. Он откроет Zeplin и сделает это:

Zeplin Css

Итак, используйте корректные имена для стилей и используйте стили при создании текста и кнопок.

Шаг 3. Шаблон при помощи символа

Символы дают возможность использовать один и тот же объект в нескольких частях макета и даже создавать шаблон из разных объектов с разным контентом.

Иконки

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

Работа с иконками в Sketch

Затем сделайте символ экспортируемым и используйте их во всех приложениях.

Экспорт иконок с Sketch

Отныне вам не нужно думать о нарезке. Разработчик сможет скачать вашу прекрасную иконку в svg и в 3-х вариантах размеров — @1x, @2x, @3x:

@1x, @2x, @3x из Zeplin

Элементы UI

Вы можете создавать более сложные объекты, такие как UI-киты, и делать несколько копий символа с разными данными.

Упорядочивайте ваши текстовые поля в зависимости от их функций,

UI-кит Sketch

и наслаждайтесь разнообразием!

Символы в Sketch

Также, используйте свойства текста во всех элементах при изменении

Кнопки: фиксированная ширина, выравнивание по-центру

Кнопка-символ

Чекбокс / радиобаттон / текстовая область / ввод текста: ширина авто, выравнивание по левому краю

Выравнивание текста

Таблица: фиксированная ширина (в зависимости от ширины колонки)

Чекбоксы и радиобатоны в Sketch

Шаг 4. Создание гайдлайна

Сгенерированные гайдлайны

Шаг 5. Загрузите в Zeplin

Проверьте имена, размеры и экспортируемые символы

Символы в Zeplin

Проверьте и установите стили

стили в Zeplin

Надеемся, что данная статья была полезной для вас, спасибо за внимание!