12 мая 2015, 6:17

Sketch.app

Где рисуют UI, иконки, иллюстрации и буквы

Это статья-мануал в формате действия и его объяснения. Чтобы всё понять, надо разбираться в веб-дизайне, немного в CSS, пользоваться любым графическим редактором для рисования интерфейсов.

Использовала статью “Essential Sketch Plugins For Web Design” и советы из видео-туториалов на сайте SketchCasts.

С чего начать

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

Цена на Sketch привлекательная ($99, и никакой помесячной оплаты). Сообщество Sketch открытое и развивающееся. Количество и качество плагинов подтверждают. Несложно найти готовые наборы иконок, элементов интерфейса, мануалов.

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

Начать лучше со скачивания программы. Создатели скетча Bohemian Coding предусмотрели триал, период бесплатного использования. Чтобы изучить как можно больше в короткий срок, попробуйте нарисовать простое приложение. Ниже ссылки на то, что помогло мне в процессе изучения.

bohemiancoding.com/sketch/support/... Документация Sketch
http://sketchshortcuts.com Горячие клавиши
http://sketchcasts.net Видео-туториалы, немного хороших бесплатных
http://sketchappsources.com Плагины, курсы, исходники
http://sketchresources.com Исходники, курсы, плагины
webdesign.tutsplus.com/courses/... Курс “Practical UI Design With Sketch”

Фичи

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

В 1 документе благодаря Page и Artboard помещаются все страницы и ассеты сайта.

Sketch Mirror дает смотреть свой дизайн на девайсе в реальном времени.

Горячие клавиши

Я люблю запоминать сочетания клавиш, чтобы работать быстрее. Это однажды очень выручило — в путешествии у нас был MacBook Air 11'' с русскоязычным ПО для создания векторной графики. Не было времени фантазировать, как разработчики перевели на русский привычные английские команды и названия в меню. Следовало быстро сориентироваться и по хардкору задизайнить красивую презентацию с нуля в тот же день. Всё получилось даже лучше, чем я планировала. Так появился еще один аргумент в пользу знания шорткатов.

В скетче горячие клавиши отличаются от привычного ПО, но легко запоминаются. Мои любимые связаны с вектором — возможность переключать типы направляющих точек (handlers) клавишами 1 2 3 4 в процессе рисования формы.

Я добавила сочетания клавиш:

⇧ ⌘ ` переводит текст в верхний регистр
⇧ ⌘ ⌥ ` возвращает в нижний
⇧ ⌘ ⌥ P округляет до ближайшего целого пикселя
⌥ ⌘ C схлопывает папки и артборды

Добавьте свои горячие клавиши в Системных настройках: Клавиатура > Сочетания клавиш > Сочетания клавиш программ.

Добавляем свои горячие клавиши в Sketch

Экспорт

Сохраняйте целые страницы, артборды, слои и несколько слоев за раз. Снизу-справа кнопка Make Exportable, выберите несколько типов сохранения — удобно, если разрабатываете для Retina экранов.

Схватите курсором артборд, папку или слой и потяните на рабочий стол или в приложение (почту, слак, скайп, твиттер etc.) — Sketch создаст картинку.

Добавьте перед именем слоя название папки и слэш (Buttons/main-page), и Sketch положит картинку в эту папку.

Плагины

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

Первым делом скачайте Sketch Toolbox, сторонний менеджер плагинов для Sketch (как Package Control в Sublime Text). Он сам установит плагины, выведет их в отдельный список и позволит удалить в случае чего. Умеет искать по названию плагина, описанию или имени автора.

Swap Fill & Border

Нажимаете сочетание ⌘ / и меняете местами Stroke и Fill. Удивительно, почему этого нет в функционале программы.

Sketch Page Switch

Переключаетесь между страницами (Pages) горячими клавишами:

⌘ L следующая
⌘ K предыдущая
⌘ ' окно выбора страницы
⌘ P создать новую

Sketch Dynamic Button

Задаете paddings кнопке (сразу как в CSS) и больше никогда не паритесь насчет ручного масштабирования фона.

Чтобы размер менялся, структура папки должна быть как на картинке.

Создаете текстовый слой для кнопки и нажимаете ⌘ J. Плагин сам создаст структуру, не меняйте её в процессе. Текстовый слой переименовываете как padding в CSS — поля верхнее:правое:нижнее:левое без единиц измерения. После любого изменения текста кнопки жмите ⌘ J, и фон расширится.

Select Child Layer

Скачайте плагин по ссылке, установите двойным кликом по файлу .sketchplugin. Через Sketch Toolbox он не устанавливается.

Выделяете папку или любой из внутренних слоев, нажимаете ⌘ ⌥ A, и плагин выделяет все слои в папке.

Efficiency

Встроенный Типограф Муравьева переносит висячие предлоги, не дает переносить тире, правит кавычки. ⇧ ⌘ ^ T

Bitmap To Pattern Fill делает из картинки прямоугольник с этой же картинкой в виде фоновой заливки. ⇧ ^ Y

Spacing: Character, Line, Paragraph настраивает расстояния между буквами, строками, абзацами (у меня Sketch подглючивает от этих горячих клавиш).

Keep only text layers in selection оставляет выделенными текстовые слови.

Random shift перемещает выделенные слои в случайном направлении (не больше заданного максимального расстояния). ⌘ ⌥ R

Random size меняет размер слоев по заданному фактору. ⌘ ⌥ ⇧ R

Toggle ‘Constrain Proportions’ включает/выключает сохранение пропорций при масштабировании ⌘ ⇧ A

Sketch Measure

Показывает параметры слоев — размеры, расстояния между, поля, у текста кегль, интерлиньяж, трекинг. Удобно, когда надо отправить эти параметры разработчику. Горячие клавиши ⌘ ⌃ 1 2 3 4 5 6

Есть подобное приложение Zeplin. Кроме измерений он создает цветовую палитру на основе использованных в дизайне цветов.

Zeplin визуализирует все расстояния и цветовую гамму проекта

Zeplin визуализирует все расстояния и цветовую гамму проекта

Sketch plugins by Cemre Güngör

UPD от 20 мая

Увеличивает и уменьшает в два раза объект, вставляет изображение в позицию выделенного объекта или в прямоугольник-маску (для аватаров, блоков с фоном-картинкой). Делает из прямоугольника гайд.

Stack Children по прототипу выстраивает объекты в таблице. Прототип задается как символ. ^ ⌥ ⌘ T

Stack Children в Sketch plugins by Cemre Güngör

Больше плагинов

Используйте, если работа докажет необходимость:

  • Color-Copier копирует цвет. ⇧ ⌘ C
  • Dynamic Reposition расставляет элементы по заданным в названиях отступам. Когда надо масштабировать фон блока (под разные разрешения экранов или размеры полиграфии). ⌘ P
  • Generate GIF быстро генерит GIF-анимацию. Графика так себе, зато дизайнер сразу доносит идею до менеджера или разработчика.
  • Sketch-Unlinker убирает связи между слоями/группами и заданными символами/стилями. ⌘ ⌥ U
  • Text to Specs делает из текста комментарий к макету (в заданном вами стиле). ⌘ ^ T
  • Sketch-Scripts делит прямоугольник на меньшие, вы задаете количество колонок, рядов и расстояние между элементами (Columns, Rows and Gutter). Похож на Split Into Grid в иллюстраторе.
  • RenameIt добавляет к имени слоя размеры(пишете %w или %h), номера (%n — button 1, button 2) или буквы (%a — button a, button b).
  • Invert Background Color инвертирует цвет фона.

Есть еще плагины вроде Day Player или Content Generator, но я не любитель Lorem Ipsum и случайных картинок в дизайне.

Ссылки

Sketch для полиграфического дизайна

В 2014 я стала присматриваться к деятельности Бюро Горбунова. Мне понравился их подход к работе, он был «тем самым» — без компромиссов, с высокой требовательностью к себе и постоянным самосовершенствованием. Летом они открыли набор в Школу стажеров, и я решила поступить.



Диплом дизайнера я получила в 2013 и сразу устроилась работать в рекламное агентство. Работала запоями и однажды почувствовала, что без последовательного обучения совершенствоваться всё сложнее.

Процесс

По расписанию школы еженедельно в общей папке на Google-диске появляются лекции. В лекции видео с живого курса, текст-расшифровка, список литературы и тесты с заданиями. Учиться можно в любое время, главное успеть сдать тесты и задания до дедлайна — обычно это пятница, 23:59. Уважительных причин опоздания нет. «Делал, но не сделал» — не про бюро. Баллы просроченного (но сданного) теста или задания делят пополам. Из школы исключают за трижды нарушенный дедлайн.

Баллы нужны для отслеживания своей позиции в рейтинге. На 1 ступени попадание в топ-30 дает возможность учиться на 2 ступени, а в топ-3 — учиться на ней же бесплатно.

Тесты и задания

Тест сдается один раз, заполняется в гугл-форме. Через час приходит письмо с баллами и листинг неправильных ответов без указания правильных — школа рассчитана на высшую степень самостоятельности и сознательности стажеров.

Так выглядит листинг теста

Задание выгружается в специальную папку. Задания вплоть до курсовой не проверяют (ставят максимум баллов), их качество прямо пропорционально желанию чему-то научиться. В конце учебы курсовая, ее надо делать осмысленно, потому что оценка влияет на возможность продолжить обучение на 2 ступени.

Чему учат

В школе 6 дисциплин: Типографика и вёрстка, Интерфейс и информация, Переговоры и отношения, Дизайн и право, Текст и редактура, Управление и результаты.

Типографика и вёрстка

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

Интерфейс и информация

Илья Бирман ведёт самый интересный для меня и сам по себе обширный курс. Не просто про элементы, гайдлайны, визуальную целостность, глубже — про UI для людей, психологию новичка, технозависимость, информативность и отсутствие мусора, слои, параллельное изложение, синтаксис (на примере интерфейсов Яндекса) и, конечно, закон Фиттса. Границы черепа на одном курсе Бирмана расширяются до уровня адекватного UI дизайнера.

Переговоры и отношения

Илья Синельников на основе книг Джима Кэмпа и принципов Бюро Горбунова учит общаться с людьми. Причем, не только с клиентами — общаться в любой ситуации. Полезность курса для меня 200%, личность самого Ильи, его способ доносить информацию и общаться вдохновляет и вызывает чувство «хочу также». Только ради Переговоров стоило учиться в школе.

Дизайн и право

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

Текст и редактура

Максим Ильяхов побил все рекорды по инфонасыщенности курса. Файл лекции однажды включал 44 страницы, не считая литературы и заданий. Максим дал так много информации, что я долго не понимала, почему он не сделает школу только для редакторов. В Бюро, видимо, тоже об этом задумались и придумали школу редакторов. До курса мне казалось, что я неплохо знаю родной язык. В процессе понимаешь, что редактура — это отдельный русский язык. Ильяхов раскрывает информационный стиль, говорит о стоп-словах, информативности, анатомии абзаца, фальши, честности, игре. Он учит писать текст для лендингов, излагать мысли параллельно, писать рассылки. Рассказывает о работе редактора, определении аудитории, цели и задачи. В общем, это мега-курс. Если вы редактор или копирайтер и чего-то из перечисленного не знаете — добро пожаловать в школу.

Управление и результаты

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

Что хорошо бы сделать до поступления

  1. Прочитать литературу на странице школы, с которой, по-хорошему должен быть знаком любой дизайнер.
  2. Завести аккаунт в фейсбуке и в Google+. Общались мы в основном в группе студентов школы в фейсбуке, анонсы заданий получали в школьном Google+.
  3. Сходить на живые советы. Помогает понять образ мыслей бюрошников.

Отступать нельзя поступать

Поступать или не поступать — прежде хорошо подумать. Спросить себя, надо ли это действительно. Потому что в ближайшие полгода школа отожрет от 50 до 80% времени. Для поступления необходимы условия:

  • — сильная мотивация,
    — организованность,
    — самостоятельность,
    — упорство,
    — дотошность,
    — любовь к своей работе (информационному дизайну и интерфейсам),
    — согласие с образом мыслей бюро (для понимания достаточно почитать советы),
    — умение не поддаваться панике,
    — умение доводить дела до конца,
    — возможность поставить школу на 1 место в жизни.

Последний пункт особенно важен. Обратной связи на 1 этапе почти нет, всё изучать и перепроверять самому. Завалишь тест, придется перешагнуть через неуверенность и докопаться, что же не так. Плюс в том, что всегда можно задать вопрос в почту лекторам школы, минус (или неочевидный плюс) — они не разжёвывают.

Впечатления

До школы стажеров я не пробовала основательно учиться онлайн. Совмещать с активной, часто авральной работой можно в режиме «все свободное время и пару часов сна трачу на школу». Поначалу тяжело, потом привыкаешь.

Училась у Вадима Паясу в 2012, но его курсы короткие и бодрящие, можно собраться и неделю похардкорить.

Мой главный вывод — важно идти ровно всё время обучения. Нагрузка всегда равномерно большая, надо планировать время на учёбу. Вариант за час до дедлайна прочитать спешно все материалы и сдать тесты и задания в долгосрочной перспективе работает плохо. Знания усваиваются кое-как, а в следующие недели на них накладываются другие, и пробелы всплывают на первой же проверке.

В целом, учиться мне понравилось. Не хватало живого общения, но это решается личной предприимчивостью. Я заткнула дыры, оставленные высшим образованием, познакомилась с коллегами и открыла близкие дизайну дисциплины. Из всех курсов самым новым для меня были «Переговоры и отношения». Если с типографикой, интерфейсом и даже правом я сталкивалась в институте или на работе, то переговоры были тем самым слепяще-белым пятном, которое хотелось заполнить. Расслабленность и уверенность преподавателя, Ильи Синельникова, — вот чему действительно круто было учиться.

Сходила на живые советы с Ильей Синельниковым

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

После окончания обучения выдали сертификат. А через два месяца я посмотрела на старые проекты и поняла, что польза от учебы есть. Преподавателям спасибо.