UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее
Идеальный UI при помощи Sketch + Zeplin

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

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

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

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

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

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

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

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

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

UX-исследователь
UX-исследователь
Станьте UX - исследователем - одним из самых востребованных специалистов в продуктовой команде
Забронировать место

Цвета

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

Цветовая палитра 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

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

Total
0
Shares
Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Protoship Teleport: конвертация вебсайтов в документы Sketch
Подробнее

Protoship Teleport: конвертация вебсайтов в документы Sketch

Protoship конвертирует документы Sketch в HTML и CSS с примесью SASS, сетками Bootstrap и компонентами React. Благодаря этому, дизайнерам не нужно больше генерировать спецификации дизайна для передачи в разработку, а сами разработчики могут создавать красивый HTML непосредственно из макета, безо всякого кодирования вручную.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share