UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Идеальный UI при помощи Sketch и Zeplin
Редакція
Редакція

Опубліковано • Оновлено

Идеальный UI при помощи Sketch и Zeplin

Как сделать дизайн идеальным, а вашего разработчика счастливым? http://ux.pub/kak-podruzhit-dizajnera-i-verstalshhika-zeplin-com/ Одно из фундаментальных преимуществ Sketch состоит в том, что он позволяет создавать макеты в том виде, в котором они будут встроены в код. Все дизайнеры пугаются требований разработчиков: используй тот же отступ, тот же цвет, все элементы должны быть одинакового размера, и т. д. Для выполнения данных требований, нам нужно найти все “одинаковые” элементы и одновременно их править. Очевидно, чем больше ваш проект, тем больше усилий вы потратите на его завершение. Мы разработали свод правил, соблюдая которые, вы можете не переживать - ваш макет всегда будет в идеальном порядке.

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

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

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

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

Цвета

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

Стили шейпа

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

Стиль шрифта

Работает также, как и для текстового стиля. От чего ваш разработчик будет счастлив, а вы не будете переживать из-за неправильных цветов шрифта? Потому, что он не будет использовать дополнительные инструменты, он не потеряет прозрачность, цвет или тень. Он откроет Zeplin и сделает это: Итак, используйте корректные имена для стилей и используйте стили при создании текста и кнопок.

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

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

Иконки

Лучше всего иметь иконки одинакового размера. Создавайте универсальный набор иконок, меняйте их, изменяйте и просто наслаждайтесь :)Затем сделайте символ экспортируемым и используйте их во всех приложениях. Отныне вам не нужно думать о нарезке. Разработчик сможет скачать вашу прекрасную иконку в svg и в 3-х вариантах размеров - @1x, @2x, @3x:

Элементы UI

Вы можете создавать более сложные объекты, такие как UI-киты, и делать несколько копий символа с разными данными. Упорядочивайте ваши текстовые поля в зависимости от их функций, и  наслаждайтесь разнообразием! Символы в Sketch Также, используйте свойства текста во всех элементах при изменении

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

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

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

Проверьте имена, размеры и экспортируемые символы Символы в Zeplin Проверьте и установите стили стили в Zeplin Надеемся, что данная статья была полезной для вас, спасибо за внимание!


Перевод статьи Cadabrastudio

Топ коментарі (1)

Згорнути/розгорнути
 
uxp profile image
Xperience

Добре що є фігма)