4 правила работы в Sketch над крупными проектами

    image


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


    Правило №1: Создавать символы


    Элементы, которые повторяются чаще 2 раз на артборде нужно переводить в символы. Если понадобилось внести какие-либо правки внешнего вида символа, меняем его на странице «Symbols», и редактирование применится автоматически на всех артбордах проекта.


    image


    Предпосылки символов были и в Photoshop, в котором можно было импортировать ссылку на другой psd-файл, и при его изменении в одном месте, он менялся во всех файлах. Можно даже управлять его отображением при помощи Layer Comp. Но у Sketch подобная работа выведена на новый уровень.

    Для упорядочивания символов в меню «Symbols» по группам и подгруппам, используются слеши — «/». Например, название артбордов элементов формы должны начинаться с «Form / element_title». Тогда они сгруппируются в разделе «Form». Если артборд назвать «Form / Input / element_title» он будет размещён в подгруппе «Input» группы «Form». Уровень вложенности неограничен.


    image
    Вариант группировки в меню «Symbols»


    Никому не нужен набор элементов-близнецов. Ведь, чаще всего, внешний вид объектов одинаковый, а контент отличается. Редактирование контента символа производится на панели «Overrides». В ней можно легко редактировать текстовые слои.


    image
    Обратите внимание, в панели «Overrides» у заголовков текстовых полей правильные названия и порядок. Для этого в символе упорядочиваем слои сверху вниз и называем их не контекстно, а функционально. Т. е. заголовок инпута в символе должен быть не «Имя», а «Label» и стоять в самом верху.


    В последних версиях Скетча, кроме редактирования текстовых слоёв, можно заменять вложенные символы. Тут нужно помнить 2 момента: символ может содержать вложенные символы. Вложенные символы можно заменять из панели «Overrides», если у них одинаковый размер.


    Пример использования — навигационная панель:
    Для отображения активного пункта меню, редактируем видимость вложенного символа Active.


    image


    Как вариант, можно создать 2 символа одного размера «Active» и «Default» и менять их, чтобы перекрашивать активный пункт меню.


    image


    Чего сейчас, на мой взгляд, не хватает в Скетче — возможности менять цвет у текстовых слоев. Т.е. для того, чтобы перекрасить надпись, нужно создать для неё символ где она чёрная, и символ где надпись красная, только после этого переключать их между собой. Гораздо удобнее было бы сразу указывать цвет текста.

    Если внутри символа есть объект залитый растровой картинкой (например, автарка), то его тоже можно с лёгкостью редактировать.


    image


    Правда, и здесь мне не хватает одной фичи, а именно, скопировать растровую заливку из панели «Overrides» и вставить в другой символ.

    А ещё символы, как и группы, можно делать «резиновыми». В Скетче есть возможность прописать правила, по которым символ растягивается или сжимается, и как при этом должен вести себя контент внутри. Вот 3−минутное видео как это работает, от создателей Sketch. Оно на английском, но там все понятно.



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


    Правило №2: Поддерживать странцу с UI guide


    Если проект предполагает большое количество разделов, форм, текстовых блоков, создаётся отдельная страница, на которой собираются все элементы. Страница называется «UI» и состоит из 4 артбордов:


    1. Элементы форм и их состояний


    image


    2. Текстовые стили документа


    image


    3. Элементы интерфейса


    image


    4. Иконки


    image


    По логике, здесь должны быть ещё и все цвета, которые используются в макетах, но я их добавляю в панель Document Colors, которую могу экспортировать и импортировать в другие скетч-файлы, благодаря плагину Sketch Palettes


    К сожалению, так и не смог заставить себя пользоваться стилями для текстов и объектов, т.к. их нельзя упорядочить в меню. Как только стилей становится больше 10, в них просто невозможно ориентироваться. Если бы разработчики дали возможность упорядочивать стили по группам (как это сделано для символов), возможно, это было бы удобно.


    image


    В настоящее время, если мне нужно вставить какой-либо элемент, который уже использовался в макете, я открываю страницу «UI» и копирую его оттуда, чтобы не искать среди множества артбордов. Если элемент не создан в «UI», значит его нужно создать и обязательно добавить на страницу «UI».


    В заключение этого правила, должен упомянуть плагин «Library», из пакета «Craft», который некоторые из описанных телодвижений делает автоматически (собирает стили текста, используемые шрифты и цвета на отдельной странице). Но и с ним у меня не сложилось. Крафт чёрт-те как упорядочивает текстовые стили и сливает всё в одну кучу. Удобней, когда я вручную создаю библиотеку стилей и элементов, куда не попадёт ничего лишнего и всё упорядочено по моим правилам.

    Правило №3: Правильно называть слои и группы. Соблюдать иерархию


    Это правило касается не только пользователей Скетча, но и работников Фотошопа. С нашими макетами приходится работать верстальщикам, и чем понятней они для них будут, тем быстрее картинка станет отличным сайтом или приложением. Для этого нужно всегда понятно называть слои, логично группировать их и соблюдать последовательность сверху вниз. Т. е. шапка должна быть в самом верху, контент посередине, футер внизу и т. д.


    image


    Да и самому дизайнеру, когда слоёв стало очень много, удобней в них ориентироваться, если они понятно названы. Для быстрого поиска слоя у Скетча есть встроенный функционал. Для того чтобы найти стрелку в макете, которую я всегда называю arrow, достаточно написать в поиске «arr» и Скетч покажет все слои и группы в имени которых есть эти символы.


    image


    Есть удобный плагин, с гораздо большим функционалом, чем у встроенного поиска — Runner. Он тоже может искать слои по имени, но еще и запускать команды из меню, создавать и вставлять символы, применять стили.


    image


    Если для анимирования интерфейсов вы используете редактор Principle, то для него также исключительно важно правильное наименование слоев и грамотное их распределение по группам. Но об этом в другой раз.


    Правило №4: Использовать сетку. Вертикальный и горизонтальный ритмы


    К сеткам приступаю после создания дизайн-макета страницы. Они предназначены для упорядочивания всех элементов на артборде. Благодаря сетке создаются вертикальный и горизонтальный ритмы макета. Дизайн становится упорядоченным и систематизированным. Т. е. вначале всё разрабатывается «на глаз», а в самом конце встраивается в сеточную систему.


    В Скетче за настройку сетки отвечают пункты «Grid Settings…» и «Layout Settings…». Для удобства, есть горячие клавиши, которые покажут или скроют сетку. Control + G — показать или скрыть сетку, Control + L — показывает или скрывает лэйаут.


    image


    Последнее время использую 8−пиксельную сетку. Подробнее о ней написано здесь.


    Если коротко, то просто используйте размеры кратные 8 пикселям. Для блоков, отступов, междустрочных интервалов, иконок и других элементов интерфейса. Когда все элементы подчинены правилу кратности 8, вы получите визуально логичный и последовательный интерфейс.


    Для того, чтобы с восьмипиксельной сеткой стало удобней работать в Скетче, есть плагин nudg.it. Он позволяет установить на сколько пикселей будет смещаться объект при нажатии Shift + Arrow. Если вам удобней работать с сеткой в 5 пикселей, как великолепным Charmerstudio или гениальным Area 17, то nudg.it легко настроить и на пятипиксельный шаг.


    Итог:


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


    P. S. Наверняка, я забыл упомянуть о каких-то важных правилах. Буду раз услышать их от уважаемого коммьюнити в комментариях.

    Share post

    Comments 43

      0
      Советую еще ознакомиться с плагином Craft от Invision. Генерация контента и дупликация символов это просто чудо.
        0
        Полностью с вами согласен! Там еще предусмотрена интеграция с Invision, которую последнее время активно юзаю и, прям, не нарадуюсь! А вот плагин Library из этой библиотеки я так и не смог «вкурить» )))
        0
        eshill
        Если коротко, то просто используйте размеры кратные 8-ми пикселям.

        Давно юзаю такую сетку — взял на вооружение как только ознакомился с Material Design.

        8-пиксельная сетка часто (если не всегда) упоминается в связке с baseline grid кратному четырем пикселям. И вот тут возникают заусенцы. Допустим, интерлиньяж текста равен 20 пикселям, что допускается 4-пиксельной baseline grid (блин, как по-русски-то?). Это зачастую приводит к появлению в дизайне текстбоксов, размер которых не кратен 8 (20, 36, 44 и т.п.). И если замерять от такого текстбокса отступ, кратный 8, то вся стройная 8-пиксельная сетка ниже этого объекта будет испорчена объектами, смещенными на 4 пикселя.

        Надеюсь понятно объяснил… Как быть в такой ситуации?
          0
          Стараюсь не использовать интерлиньяж 20 px. Т.е. он или 16 px, или 24 px, или 32 px. А вот размер шрифта использую любой (не обязательно кратный 8-ми). И уже в зависимости от размера шрифта подбираю интерлиньяж «на глаз». Считается, что высота межстрочного интервала должна приблизительно равняться высоте заглавной буквы шрифта. Вот на это правило и ориентируюсь.
            0
            Стараюсь не использовать интерлиньяж 20 px. Т.е. он или 16 px, или 24 px, или 32 px.

            Это очень неприятное ограничения для дизайна мобильного интерфейса, где часто приходится экономить место. Ну может хоть посоветуете, как быть-то, если все таки приходится совмещать восьми- и четырех-пиксельные сетки?
              0
              Так нет ничего страшного. Если блок получился в высоту 44 пикселя — делаем отступ не 16, а 20 и всё снова станет на 8−пиксельную сетку. Или вообще перестать париться насчёт восьмёрок, а держать в голове 4 пикселя )))
                0
                делаем отступ не 16, а 20

                Ну это понятно, а как это автоматизировать?) То есть, хотим мы сделать символ для компонента «Абзац текста 100500 букв». В него закладываем отступ до следующего компонента. Какой отступ закладывать и как? Ведь текст бывает разный и соответственно отступ может быть как 16, так и 20. Я так понимаю такие нюансы еще не поддаются автоматизации?

                Если формализовать проблему, то получится условие: если строк чётное количество — отступ снизу=16, если нечетное = 20.

                Ну и получается что отступ одного и того же компонента будет разнится, что тоже не есть гуд — разница хоть и в 4 пикселя, а мешать будет.
                  0
                  Ну, вы фактически в последней строке написали сценарий скрипта для разработчиков приложения )))
                  А в Скетче автоматизировать такое не знаю как. Думаю, что пока нельзя и придётся делать вручную.
                    0
                    Кстати просьба со стороны разработки:

                    Все расстояния которые находятся в контексте какого-то текста (например внутренние паддинги кнопки или другого бокса, внешние отступы между параграфами и т.д.), желательно привязывать к размеру шрифта данного текста, чтоб расстояние / размер шрифта = адекватное число (1.4; 1.5; 1.6 и т.д., а не 1.82754).

                    Например есть некий бокс с текстом внутри с шрифтом 24px, так вот внутренний паддинг желательно бы указать с привязкой к данному шрифту, чтоб одно делённое на другое равнялось число с одной цифрой после запятой.

                    Это я к тому, что грамотный верстальщик будет прописывать этот паддинг в em. И допустим если в данном случае паддинг дизайнер нарисует 48px, то верстальщик укажет 2em (и всё будет красиво и адаптивно), а если паддинг будет 50px, то в css надо будет писать 2,08333333em что не есть хорошо.
                      0
                      Ваша просьба понятна, но тут возникает риторический вопрос, чем жертвовать: внешним видом продукта или десятком цифр после запятой?
                        0
                        Вопрос кстати можно и в другое русло направить. Если интерлиньяж и длинна строки — функции от кегля, то почему бы и паддинг не сделать зависимым от него? Ведь красивый паддинг действительно зависит от размера букв.
                          0
                          думаю жертва для дизайна не сильно большая — как правило чтоб получилось адекватное число в em достаточно добавить или убрать 1-2px в паддинге, а вот для браузера переварить 1,857545em уже напряжно и каждый браузер по своему округляет.
              0

              А никак не быть, например из того же Бринхерса следует, что интерлиньяж текстовых блоков может не становиться на сетку, при условии того что, в конечном итоге блок все же войдет в ритм сетки. Там приводится отличная аналогия с ритмом музыки, можно выбрать один ритм для всей композиции, но ничего страшного не случится если внутри композиции будут переходы на более быстрые или медленные фрагменты, главное чтобы в конце они влились в общую композицию. Помимо этого я часто замечаю что многие жертвуют оптической композицией ради математической верности, это проиграшная позиция, не пофиг ли встает ли текстовый блок в пиксельную сетку, или нет, если в общей композиции он будет смотреться ужасно. Моя стратегия такова, 8 пикселей грид обязательное выравнивание по горизонтали, и компромиссное по вертикали.

                0
                Помимо этого я часто замечаю что многие жертвуют оптической композицией ради математической верности, это проиграшная позиция

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

                Моя стратегия такова, 8 пикселей грид обязательное выравнивание по горизонтали, и компромиссное по вертикали.

                Хмм, а вот это странно. Текст спокойно разрушает и горизонтальную сетку, и вертикальную — везде рано или поздно приходится отступать от сетки. Вообще 8рх — это довольно большой кусок доступного пространства; это понимаешь, когда начинаешь дизайнить формы и таблицы (эти компоненты наверное вообще самое сложное в дизайне).

                Чем дальше в лес тем больше сетка начинает выполнять роль клетки, короче :)
                  0
                  На самом деле порой я забиваю и на горизонтальные отступы, просто это намного реже происходит чем на вертикальные. И да сетка это клетка, проблема в том что многие начинают себя изначально в рамки сетки загонять, а потом начинаются всякие приколы., как быть если тут нужно так, а сетка говорит иначе.)) Вобще если так помыслить, то нужно сетку под дизайн делать, а не дизайн под сетку. Тоесть сначала, делаешь дизайн, оптически, а потом если это требуется, подискиваешь сетку которая максимально соизмерима будет с твоим дизайном, и не нарушит его целостности.
              0

              Все классно)
              А вы в процессе делаете UI guide или в конце проекта?

                0
                Именно в процессе, чтобы не создавать новых сущностей и не дублировать существующие.
                  0

                  Кстати насчет стилей. Существует много полезных плагинов которые автоматически генерируют стили
                  Например — https://github.com/lucaorio/sketch-styles-generator

                    0
                    Это да, и я написал про один из них — Library из пакета Sketch. Но пользоваться ими в процессе — не удобно. Они скорее предназначены для генерации страницы UI в самом конце. Я же её создаю в процессе. Для того чтобы не было в проекте, например, 2 разных иконок с конвертиком для поля «E-mail». Или, чтобы не создавать «свистопляску» со шрифтами, когда есть шрифты и 13, 14 и 15 кегля. Лучше остановиться на каком-то одном размере. Новые сущности я ввожу очень осторожно, только в случае если это действительно необходимо.
                    +1
                    Столкнулся со скетчем на одном проекте. Нужно было верстать с него дизайн под основной парк браузеров (включая IE), сверх неудобного редактора просто не встречал. (

                    Есть несколько вопросов которые возникли при открытии:
                    * Как можно порезать дизайн для верстки, к примеру, сложные наложения разных градиентов etc? (Обычного экспорта определенного symbol'a недостаточно).
                    * Где можно найти историю изменений? Как откатить изменения?
                    * Как работать верстальщикам которые работают под Windows?

                    п.с. прошу не минусовать, вопросы серьезные
                      0

                      1) никак
                      2) никак
                      3) никак


                      )))


                      Если по серьезному, то на первый вопрос все же есть ответ. Градиенты вообще не импортируются а создаются прямо в скетче.Существуют плагины, которые экспортируют весь скетч файл в HTML страничку или даже CSS код.

                        0
                        Одного раза, для того чтобы понять всю мощь и продуманность Скетча, конечно, маловато )

                        По поводу ваших вопросов:
                        1. Не до конца понял что именно вы имели в виду, но обращу ваше внимание, что в Скетче есть инструмент «Slice» (S), с функционалом, схожим с Фотошоповским. Вы можете «нарезать» любые нужные вам участки макета и экспортировать в виде png, в любом разрешении. Кроме этого, объекты можно сгруппировать, видимость установить масками и экспортировать группу. Более точный рецепт можно дать при более детальном понимании задачи.

                        2. Скетч использует маковский инструмент, что-то вроде Time Machine, позволяющий откатиться к более ранним версиям. Находится он в «File» → «Revert to...». Но, насколько я понимаю, сама история храниться на той машине, на которой файл разрабатывался. Т.е. если вам достался готовый файл для «нарезки» откатиться в не сможете.

                        Я в проектах последнее время использую Git, поэтому откатиться до любого коммита не составляет сложности на любой машине.

                        3. Для этого есть ряд решений, таких как Invision, Zeplin или плагин Marketch. Фактически, все они включают в себя инспекторы кода, и показывают css информацию по любому объекту (что-то вроде developer tools в Хроме). Сам использую Инвижн. У него в последних версиях появился замечательный «Incpect mode», если макет выгружен при помощи плагина Craft Sync. Для того чтобы познакомиться с ним есть бесплатная версия для одного проекта.
                          +1
                          1. Понимаю, я бы выложил пример, но есть такая вещь как NDA.
                          2. Cmd + Z (Undo) не работает, ковырялся в настройках, требуемый результат не получен (приходиться «не дышать» )) ). Git как вариант для небольших файлов, а вот если файлы Sketch'a ≥ 200mb, при наличии хорошего канала, все равно тянет продолжительное время.
                          3. Спасибо за Marketch. Попробовал использовать avocode (пока trial), жить как-то можно.

                          К сожалению у всех фломастеры разные.
                          Комманда Sketch'a послала все остальные OS, а держать кучу подписок на разные сервисы тоже не вариант как минимум накладно.

                          В результате имеем огромную проблему и приличное кол-во плевков во все стороны.
                          По 3-му правилу нужно очень сильно давайть по рукам. )

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

                          * Masks, Slices.
                          * File → Revert To → Browse All Versions…
                          * invisionapp.com
                          +1
                          Что делать тем у кого нет мака? Копить или есть альтернативы?
                            0
                            Насколько я знаю, многие коллеги используют Adobe Illustrator. Даже упомянутые в статье Area 17 до сих пор на Скетч не перешли. Кстати, если не смущает английский текст, они очень интересно пишут о своём опыте работы с Иллюстратором и подходе к дизайн-процессу.

                            Ещё есть продукт от Adobe — Experience Design CC, пытающийся составить конкуренцию Скетчу, но тут я не могу ничего советовать, т.к. смотрел его поверхностно. Пока он в бета-версии, и там нет такого арсенала плагинов и туториалов, как у Скетча.

                            Ну, и покупка мака — это отличное вложение, на мой взгляд ))
                              0
                              Ещё есть продукт от Adobe — Experience Design CC, пытающийся составить конкуренцию Скетчу, но тут я не могу ничего советовать

                              Могу посоветовать не тратить время на эту мертворожденную программу. Я специально обновился до десятки только чтобы протестить XD — в ней вообще ничего еще нет, только пара прикольных фишек, которые в итоге не помогут вести дизайн-проект в этой программе.
                                0
                                Не согласен насчет мертворожденности. Проект перспективный и со временем потеснит Скетча.
                                  +1
                                  Это не первый перспективный UI/UX-проект от Adobe — вспомним Fireworks и Dreamweaver, которые успешно провалились несмотря на свои какие-то (наверное) преимущества).

                                  Ну и попытка превратить фотошоп в программу для веб-дизайна… На этого франкенштейна нельзя без боли смотреть теперь, а работать в нём — проще себе в ногу выстрелить :)
                                    0
                                    Незнаю за Fireworks, но Dreamweaver бы провалом не называл, лет 10-12 назад он неплохо продавался. Но на сегодня уже не в духе времени, согласен.
                                      0
                                      Какой смысл сравнивать член с пальцем?

                                      Феерверк и Дримвивер проекты Макромедии, а не Адоби. После поглощения было похоронено почти всё наследие первой. На плаву остались только Дримвивер (который в последнем релизе слегка перетряхнули) и Анимейт (бывший Флеш, ныне морвировавший).

                                      ХД пишется с нуля, с учётом текущей конъюнктуры.
                                  0
                                  Иллюстратор не лучший вариант для вебдизайна и UI.
                                  В нём до сих пор (версия 21.1.0) весело маячат три весёлые жопы:
                                  — рассинхрон имён объектов в аутлайнере и ассет экспорте;
                                  — экспорт маскированных объектов с габаритами по маске+контент, а не чисто по маске.
                                  — пьяные размеры у слайсов.

                                  Две первые можно увидеть на этой картинке:

                                    0
                                    Иллюстратор не лучший вариант для вебдизайна и UI.

                                    Под Windows — пока еще лучший. К сожалению. Я этому не рад.
                                      0
                                      Среди моих коллег не знаю ни одного, кто бы макетировал в Иллюстраторе. Обычно Sketch или PS/XD/AD/Figma.
                                  0
                                  Например гуглить «sierra virtualbox»
                                    0
                                    XD от Adobe, но оно очень сильно отстает от Sketch, а вообще копить на мак — отличное вложение. Еще и principle заодно поставите
                                      0
                                      Не обязательно сильно копить. Mac Mini на avito стоит 15-20 т.р. + SSD = 20-25 т.р.
                                        0
                                        Просвятите пожалуйста, как на такой машинке будут крутиться *.ai и *.psd весом в районе гигабайта каждый с сотней или тысячей слоев в каждом?
                                          0
                                          Никак. Мак нужен для работы в Скетче. Скетч запросто крутит файлы с сотнями артбоардов. Adobe XD крутит файлы с тысячами артбоардов. Количество слоёв вообще несчётное.

                                          В 2017 пора уже заканчивать заниматься хернёй (дизайнить в PS).
                                            0
                                            в sketch это будет файл максимум метров 50)
                                          0
                                          .
                                        0
                                        К сожалению, так и не смог заставить себя пользоваться стилями для текстов и объектов, т.к. их нельзя упорядочить в меню. Как только стилей становится больше 10, в них просто невозможно ориентироваться. Если бы разработчики дали возможность упорядочивать стили по группам (как это сделано для символов), возможно, это было бы удобно.


                                        Вынесите кнопку «Styled Text» в тулбар — там стили текста группируются так же как символы. Ещё я добавил туда кнопку «Symbols» и «Fonts», а все лишнее убрал. Мне стало намного удобнее.

                                        Удобный лэйаут инструменов для Скетча

                                          0
                                          Вау, круто, не знал, спасибо!

                                        Only users with full accounts can post comments. Log in, please.