Как лучше работать над UI в Sketch

Давайте поплаваем

Когда я учился плавать, сначала я это делал по-собачьи. Однако мне вполне удавалось чисто технически пересекать бассейн в одну и другую сторону. Правда элегантности мне явно не хватало. Затем я научился плавать свободным стилем и стал буквально скользить по водной глади. Точно также вы всегда можете улучшить эффективность и ваших дизайн-процессов.

В 2009 году я написал статью о том, как прокачать навыки работы в Photoshop. Мне показалось интересным написать что-то подобное и про Sketch, основываясь на моём опыте работы над проектами в команде. Как и большинство интерактивных дизайнеров, я поучаствовал в нескольких проектах, в которых Sketch был основным инструментом. Последнее обновление (Sketch 3.3 и далее) исправило несколько крупных багов. Повысилась эффективность, и в купе с несколькими полезными плагинами Sketch стал для меня одним из самых предпочитаемых графических редакторов. Он практически стал стандартом в области дизайна.

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

Один основной документ Sketch

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

Вот простой пример, чтобы вы уловили смысл.

Ещё Sketch позволяет создавать отдельные страницы внутри одного файла, но по моему опыту работы в команде эти подстраницы иногда остаются незамеченными. Я решил это так: оставлять на подстраницах полезные элементы и старые итерации, а первая страница содержит в себе текущую версию дизайна. Производительность работы с несколькими артбордами в одном документе в 3 версии Sketch улучшилась. Однако, если ваш компьютер тормозит, тогда разделите ваш дизайн на несколько документов. Главное — внимательно управлять текстовыми стилями, shared styles (Большая часть проектов основывается на том, что есть какой-то общий стиль проекта — styleguide. Sketch позволяет создавать shared styles, которые будут использоваться во всём проекте: заголовки или список фирменных цветов. — прим. ред.), символами. Я объясню это позже несколько подробнее.

Итерации

В процессе создания ваш дизайн постоянно будет итерироваться, и вы будете искать новые направления. Sketch максимально облегчает этот процесс благодаря скорости дублирования артбордов и элементов страницы. Мне нравится хранить итерации на подстраницах моего документа, а последнюю и лучшую версию выводить на первую страницу, объединённую с остальным дизайном. Обычно для понятности я называю эту страницу «Master Layout».

Синхронизация ваших артбордов

Как только у вас появилась структура сайта, вы можете организовать ваши артборды в документе Sketch аналогичным образом. Мне нравится называть мои артборды, используя номера, чтобы последовательно обозначить структуру сайта. К примеру, у меня названия обычно начинаются с «00_Home» для главной страницы, а затем, допустим, «01_AboutUs», «02a_Products», «02b_Products» и так далее.

Вы можете использовать пустые артборды, чтобы обозначать ими экраны, которые нужно создать. Имея визуальное отображение недостающих кусочков помогает определять «дыры» в вашем дизайне и показывает, как всё смотрится друг с другом. Когда в иерархии что-то меняется, перегруппировать элементы и поменять их местами не составляет труда. И помните: держите структуру ваших артбордов в левой колонке. Это очень удобно.

Структура слоёв

Как и в случае с Photoshop, в Sketch тоже имеет смысл быть аккуратными и опрятными с UI-дизайном. Называйте ваши слои и группируйте их на основе иерархии вашей страницы. Подумайте о том, как ваша страница была бы организована в коде, используя divs. Поэтому, если вверху страницы у вас есть заголовок, поместите его в группу со всеми сопутствующими элементами и удостоверьтесь, чтобы она была в верху списка ваших слоёв артборда. Пример структуры страницы может выглядеть так:

Есть несколько причин важности грамотной группировки и организации элементов страницы. Во-первых, вы легко можете их менять местами. Вдруг вам захочется увидеть, как смотрится страница с другим порядком контента. Во-вторых, если вы передаёте ваш файл другому дизайнеру, он легко и быстро может найти нужные компоненты и взять модуль для своей страницы без необходимости искать все важные слои. В-третьих, если вы пользуетесь Framer Studio для прототипирования, вы должны держать все компоненты страницы сгруппированными по слоям, чтобы обозначать их. Наконец, разработчики поблагодарят вас за логику, встроенную в ваши файлы. Она сильно поможет им в работе.

Текстовые стили, Shared Styles и символы

Эти функции невероятно полезны и экономят ваше время, но, если неправильно ими пользоваться, они будут жутко вас бесить. Самая частая проблема, с которой я сталкивался — это если дизайнеры работают в раздельных документах Sketch. Когда приходит время воедино собирать весь дизайн, текстовые стили и символы с одинаковыми именами наезжали друг на друга, рождая хаос. Вам вряд ли хочется проходиться по всему дизайну, чтобы удостовериться в корректности типографики или чтобы привести элементы UI в должный вид. Если заранее знать об этой проблеме, значит её можно обойти. Когда на старте проекта вы и ваша команда проходите итерации по разным направлениям, вообще не используйте shared styles. Как только у вас появилось более или менее чёткое представление о дизайне, создайте стили, символы и раздайте этот основной документ Sketch вашей команде, чтобы они начинали свою работу, имея всю базу.

Если вы создаёте правила по наименованию текстовых стилей, тогда ваши файлы станут намного понятнее для вашей команды.

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

<Название стиля> — <Название шрифта> <Стиль> <Размер> (<цвет>, <выравнивание>)

И выглядит это так:

Эта информация поможет вам в создании руководства по стилю в конце проекта. Сто процентов.

Photoshop и Illustrator

Конечно, Sketch не может делать многие вещи, доступные в Photoshop и Illustrator. Если вам нужно создать векторную иллюстрацию в Illustrator, убедитесь, что все штрихи сохранены (не обрисовывайте их) и экспортируйте файл в SVG прежде, чем переносить его в Sketch. Так вы избежите проблем с интерпретацией файла в Sketch.

Обычно рядом с основным файлом Sketch у меня хранится папка с компонентами дизайна (assets folder), в которой есть отдельные папки SVG и PNG. Я экспортирую всё в неё и ещё не забываю держать под рукой файлы AI и PSD. Есть одна фишка, которую я ОЧЕНЬ ХОТЕЛ бы видеть в Sketch — это возможность делать ссылки на внешние файлы, как это, например, делает Indesign, или чтобы был какой-нибудь смарт-объект-файл, как у Creative Cloud. А пока приходится импортировать файлы вручную.

В Photoshop я часто ретуширую фото, чтобы было удобнее работать с дизайном. Лучше сжимать изображения до импортирования его в Sketch. Но я очень часто видел Sketch-файлы, содержащие много уменьшенных изображений, но высокого разрешения. В результате файл весил очень много. Или сжимайте, или обрезайте изображение, только затем импортируйте его. А оригинал сохраняйте в папке с компонентами.

Прежде, чем приступить к работе

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