5 вещей, которые нужно сделать до создания следующего дизайн-файла в Sketch, или подготовка к дизайну “мизанплас”

Новое руководство по стилю доступно вместе с советами и подсказками в этом посте! Окончание школы поваров и вхождение в реальный мир кулинарии происходит не так гламурно, как вы могли бы подумать. Вы не просто берете свой диплом, надеваете поварский колпак и открываете ресторан в фешенебельном районе города. А было бы неплохо, да! Но нет, большинство шеф-поваров начинают свой путь, подготавливая мизанплас. Не говорите по-французски? Mise en place означает “все на своих местах”. Имеется в виду подготовка и организация ингредиентов перед готовкой самих блюд. Вы наверняка видели, как у Рейчел Рэй все ингредиенты разложены по крошечным пиалкам перед готовкой ее очередного 30-минутного-рецепта-который-я-клянусь-займет-не-меньше-часа? Как оказалось, именно так и готовятся к приготовлению блюд на профессиональных кухнях. Посмотрите: Такая организация дает мне ощущение тепла и уюта. Молодые неопытные шефы приходят на кухню за часы до начала работы шефа, чтобы нарезать каждый овощ, обрезать каждое филе, подготовить все соусы (помимо многих других обязанностей). Поступая так, они делают возможным для ресторана приготовить все те изысканные блюда, чтобы удовлетворить многочисленных посетителей и сделать так, чтобы каждый посетитель покинул заведение не позже, чем через 2 часа после прихода. Если бы они дожидались получения заказа, и только потом начинали готовить все ингредиенты, обслуживание растянулось бы на часы, блюда подавались бы непоследовательно, а кухня попросту не могла бы справиться с наплывом заказов. Продукт-дизайнеры всегда должны готовить свой мизанплас перед погружением в саму “готовку” дизайна. Перед созданием дизайна десятков страниц и сценариев работы продукта важно настроить свое рабочее пространство для стабильно успешной работы. Вот пять советов по подготовке такого мизанпласа.

1 Настройте типографику и текстовые стили

Этот совет очевиден, но работа довольно рутинная. Нет более значимого пути взаимодействия с пользователями и понимания вашего продукта, чем посредством слов, так что важно тщательно проработать текстовые стили. Для себя я предпочитаю готовить самый широкий выбор из возможных размеров и стилей текста, так что мой набор типографики выглядит примерно так (я всегда создаю и темную версию тоже!): Я могу очень быстро сменить шрифт, если передумаю в процессе: 1) Select All, 2) Change Font, 3) Sync styles. - выделить все, заменить шрифт, синхронизировать стили. Все! В каждом стиле есть четыре подтипа:

• По умолчанию (обычно 80-100% прозрачность)
• Вспомогательный (прозрачность 50-70%)
• Неактивный (20-40%)
• Акцент (обычно брендовый цвет).

Почему я использую прозрачность вместо 16-ричных оттенков? Это удобный способ сделать так, чтобы ваш текст выглядел круто на любом фоновом тексте. На картинке ниже прозрачность (вторая строка) выглядит намного лучше, чем просто серый цвет (первая строчка), потому что текст впитал в себя оттенок подложки. Вторая строка текста - одна и та же на каждом цвете фона. Но прозрачность заставляет ее подстраиваться под каждый цветовой сценарий, в итоге текст выглядит по-разному. Все по цене одного. Как удобно! Я не буду углубляться в механику выбора хороших размеров шрифта в этом посте. Если вам интересно, ознакомьтесь с постом Типографика за десять минут. И, наконец, вы обязаны создать текстовый стиль Sketch для каждого стиля, который вы задаете. Если вы в процессе решите, что вместо 25% прозрачности вам нужна 30% для “неактивного” стиля, вам нужно будет заменить параметр всего в одном месте, и изменения войдут в силу по всему документу.

Совет от профи: использование слеша в названиях текстового стиля (см. выше) создаст небольшие подменю в списке стилей:

Мои стили темной версии тоже настроены, но они белые, поэтому не очень хорошо отражаются в этом меню (там, где во втором меню стили обозначены как “Light”, сейчас стоит “Dark”)

2 Настройка стилей цветов и объектов (Colors & Object)

Есть ПЯТЬ базовых цветов, которые нужно задать до всего остального:

Базовые цвета

• Бренд: тут все ясно, это основной оттенок бренда.
• Черный: задайте базовый черный оттенок, который будете использовать для всего текста в дизайнах. Я стараюсь избегать чистого черного, вместо него создаю оттенок черного с примесью моего цвета бренда (или комплиментарного с ним), как на фото ниже:

Возьмите ваш брендовый цвет и поместите на него 80-90% черный квадрат поверх. Определите полученный оттенок пипеткой и используйте его в качестве базового черного. Он не намного отличается от черного, но разница есть! Я буду использовать тот, что внизу справа.

Цвета состояний

• Цвет ошибок (Error): какой-то вариант красного. Это состояние говорит о том, что что-то пошло не так. Чистый красный - это чересчур. Оттените его желтым или синим, чтобы глазам было спокойнее.
• Предупреждение (Warning): какой-то вариант желтого. Это состояние сигнализирует пользователю, что все пока хорошо, но потенциально может возникнуть проблема. Не стоит выбирать слишком яркий желтый для таких уведомлений. Я обычно выбираю из оранжевых оттенков, они хорошо читаются на белом.
• Успешное действие (Success): какой-то вариант зеленого. Это состояние говорит пользователям о том, что все хорошо. Я предпочитаю цвета попрохладнее, так что немного разбавлю свой зеленый синим.

Слева направо: брендовый, черный, цвет ошибки, цвет предупреждения, цвет успешного действия. Почему только пять цветов? Я строго убежден, что использовать цвета в продукте нужно очень осмотрительно. Не красьте что-то в фиолетовый, просто чтобы это было фиолетовым. Мои дизайны строятся в черно-белой гамме, ТОЛЬКО ЕСЛИ я не пытаюсь привлечь к чему-то особое внимание. Дополнительные цвета уместны для элементов вроде графиков и схем, но и они должны быть в оттенках, отличных от ваших базовых цветов.

Объектные стили

Тут чуть сложнее, чем с настройками шрифта, но эти приготовления тоже сэкономят уйму времени в процессе работы над дизайном. Стили объектов охватывают все, начиная от фонов карточек до граничных контуров элементов списка. Вот набор некоторых моих стилей объектов: Я использую эти стили всегда при создании объектов, и если нужно обновить базовый стиль, просто обращаюсь к этому руководству и синхронизирую измененный стиль по всем страницам документа. Это нереальная экономия времени, особенно после нескольких месяцев работы над дизайном, когда в документе 97 разных экранов приложения. Очень удобно!

3 Создание страниц и артбордов

Тут все довольно просто, также поможет содержать дизайн в чистоте. Заранее решите, каким образом хотите организовать свои дизайны:

• По функционалу: в кулинарном приложении есть смысл делать одну страницу для всех артбордов с “рецептами”, и отдельную страницу для всех артбордов “профиля”
• По роли пользователя: В приложении Medium одна страница вмещает все артборды “читателя”, и отдельная страница - артборды “автора”
• По рабочему процессу: в приложении Uber одну страницу стоит посвятить артбордам процесса “заказа машины”, вторую - “добавлению кредитной карты”.

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

Совет от профи: если вы используете InVision, организация артбордов постранично тут же окупится. Я связался с их командой поддержки насчет того, как артборды и страницы синхронизируются с InVision, в частности – можно ли создать разделы прямо на основе заголовков моих страниц. Так каждая страница была бы разделом, и все артборды на этой странице были бы в соответствующем разделе в InVision. Мне сказали, что на тот момент такая функция не поддерживается, но они уже получили массу запросов на разработку этой опции, так что каждый должен твитнуть им насчет такой возможности, тем самым ускорив процесс ее разработки! Не проходите мимо!

Вот страницы в UX Power Tools, над которыми мы работаем, так что вы можете посмотреть, каким образом разделены элементы. Совет от профи: если добавить дефис в начало названия артборда или страницы, они не синхронизируются с InVision!

4 Настройка сетки и макета

Сеточная система очень важна. Все эти советы направлены на упрощение жизни дизайнера и на сокращение количества решений, который вам придется принять в процессе дизайна. Задание сеточной системы позволит значительно облегчить макетирование и позиционирование элементов; вам даже не придется думать, как точно задать интервалы между объектами, так как сетка создает фиксированные инкременты и даже помогает настроить сдвиги по умолчанию под себя. 12-колоночная сетка до сих пор самая популярная, так как легко делится на 1, 2, 3, 4, 6 и 12. Вот иллюстрация настроек 8-пиксельной сетки, отображенной на экране позади окна: Это приложение на всю ширину экрана с плавающим контент-блоком. По мере увеличения ширины браузера 12-колоночная сетка всегда будет в центре контент-блока. В зависимости от макета вашего приложения (край-в-край или плавающий), необходимо задать каркас макета на каждой странице: Это макет фиксированной ширины (плавающий) с шапкой на всю ширину.

Бонус: друзья вашего программиста полюбят вас за использование такой сетки, потому что каждый фреймворк “сидит” на подобной сеточной системе. И последнее примечание: лично я не настраиваю строки в Sketch, потому что они отличаются от страницы к странице. Если хотите, вы можете настроить и строки тоже!

5 Импорт и символизация исходников для брендинга

Уже почти! Вдохните глубже: Последнее, что нужно сделать - импортировать любые/все брендовые исходники. Это может быть всего лишь лого, или же целый набор брендированных иконок приложения. Важно конвертировать каждый исходник в символы. Придерживайтесь простоты, но храните их в символах! Почему? Представим, что вы уже отрисовали 75 экранов какого-нибудь приложения, на каждом есть лого и слоган в шапке навигации. А потом маркетинг-отдел решил сменить слоган, потому что “Just Do It” уже где-то встречалось, и какая-то крупная компания грозит судебным иском за его использование. Как они могли это упустить? Ну, дизайнер слегка облажался и забыл превратить лого в символ. Так что теперь ему придется вручную изменить слоган в 75 копиях лого по документу. Не будьте, как он. Было бы гораздо проще символизировать лого в самом начале, и потом обновить его везде одним кликом. Вот и все! Вы приготовили отличный мизанплас для своего дизайна, и готовы начать работу на своей “дизайн-кухне”.

---

Перевод статьи Jon Moore