Sketch: Мощный старт

Вводный пост о главных плагинах и возможностях Скетча от Менга То. Это автор курса Design + Code. Менг подробно написал о том, как сделать рабочий процесс в Скетче эффективным.

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

Поучаствовал в переводе: idzenski.ru/moshchnyi-start-v-sketch/ (пост с гифками)

Оригинал: designcode.io/sketch-start (+аудио)

#первые_шаги

В продолжение темы новых рубрик. Ключевой вопрос:

Какая рубрика будет тебе более интересна?
anonymous poll

#для_профи. Я уже всё давно изучил и знаю Скетч. Мне нужен мясной контент про процесс дизайна, без фокуса на Скетче. – 298
👍👍👍👍👍👍👍 56%

#первые_шаги. Я только присматриваюсь к Скетчу и мне нужны понятные уроки для начинающих, без жести и хакинга. – 234
👍👍👍👍👍 44%

👥 532 people voted so far.

Дизайн-система Акрониса, часть 2

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

goo.gl/xuH9XG

Дизайнеры Акронис активно используют автоматизацию при помощи Gulp и npm, наравне с разработчиками коммитят изменения в git.

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

Все иконки и компоненты были добавлены в Lingo и протегированы. Интересная особенность с изменением цвета иконки через маску. У каждой иконки есть оверрайд, в котором можно задавать её цвет. Увы, с Андроид-разработкой такое не прокатит, поскольку SVG-иконкам запрещено использовать маски. Эта проблема была решена через кастомный скрипт remove-mask, который превращает код SVG в формат, нужный Андроиду.

SVG-шрифты для иконок
Оказались наиболее универсальным решением для всех команд разработки. Для сборки таких шрифтов используют gulp-iconfont.

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

Все ссылки на упомянутые инструменты — в конце поста.

#для_профи #дизайн_системы #автоматизация

Видеокурс: Быстрый старт в основы Фреймера

Руслан Шарипов записал бесплатный видеокурс, в котором на протяжении 4 часов и почти 40 компактных видео рассказал, как освоить Фреймер. Я сделал подробное оглавление курса с описаниями всех видео.

medium.com/sketchdesigner/framer-kickstart-93f9bcd85bb6

Для кого и зачем
Это отличный курс для начала изучения анимации интерфейсов и основ программирования. Я считаю, что умение кодить — очень полезный навык для любого дизайнера интерфейсов, который позволяет расширить кругозор.

В курсе рассматриваются
Переменные, типы данных, операторы, условия, массивы, объекты, циклы, функции, свойства, импорт, кривые, снипеты, утилиты, события, состояния, компоненты, модули и классы.

Практический проект
Во второй части курса Руслан показывает, как сделать сложный прототип приложения для заметок. Он использует реальные данные из интернета и полноценную аналитику.

#для_профи #Фреймер

Курс «Введение в основы Framer», с примерами

3 типичные ошибки в флэт-иллюстрации

Я адаптировал текст статьи @mr_mad_rabbit и добавил кое-что от себя.

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

medium.com/sketchdesigner/flat-illustrations-680247f39c3f

Итак, какие ошибки делают начинающие?

1. Ломают форму объекта, неправильно рисуя тени
Можно научиться хорошо работать с тенями, если рисовать больше базовых геометрических объектов: шар, параллелепипед или цилиндр, а также их тени друг на друге. Привет, академический рисунок.

2. Выбирают невыразительный ракурс
Самый примитивный ракурс — в анфас. Большинство предметов смотрятся скучно и не передают реальной формы. Вариант с перспективой может лучше показать форму объекта, иллюстрацию станет интереснее разглядывать. Но даже если используется ракурс в анфас, можно накладывать объекты друг на друга, показывая объём при помощи теней.

3. Не используют потенциал цвета
Нужно изучить цветовую теорию, чтобы понимать, какие цвета образуют гармоничные композиции. В флэт-иллюстрации можно подкрасить теневые участки объекта его комплиментарным цветом и от этого будет ощущение насыщенной тени.

#первые_шаги #высушено #флэт

Разработчики Скетча выпустили UI-кит Elements

35 экранов для iPhone Х, свёрстанных на символах, по семь штук на каждую из тем: еда, соцсеть, музыка, фото, тревел.

sketchapp.com/elements

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

#скачать

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

Есть две альтернативы странице Symbols:

1. Локальные символы
Выносить символы над каждым экраном и не отправлять их в Symbols. Если некий блок встречается на очередном экране впервые, значит, он будет над ним всегда. Получается ровный горизонтальный ряд экранов и символы над ними. Такой метод хорош для сценариев, состоящих из последовательных экранов. Чтобы символ создавался на той же странице, на которой ты работаешь, снимай галочку Send to Symbols page.

2. Глобальные символы
Формировать внешнюю библиотеку, на которой много страниц, выполняющих функции категорий. В каждой категории однотипные символы. Пример таких категорий: Кнопки, Иконки, Поля, Заголовки, и тд. Подключить такой файл в качестве библиотеки к Скетчу, либо импортировать все элементы в Линго. В первом случае будет больно вставлять символы, потому что Скетч не позволяет перетаскивать нужные символы в макет из библиотеки, а ориентироваться по их названиям муторно. Во втором будет удобно перетаскивать символы в макет прямо из Линго. Но тогда будет другая боль: импорт и экспорт символов в Линго. Он тоже косячит, пусть не так люто, как Крафт.

На январских я планирую раскрыть тему создания и поддержки дизайн-систем более подробно.

#для_профи #дизайн_системы

Дизайнеры из Мэил.ру собрали российские дизайн-системы на сайте Design Systems Club

Юрий Ветров и Андрей Сундиев из открытых источников собрали на этом сайте наработки Мэил.ру, Яндекса, Альфа-Банка, Мегафона, Акрониса, Тинькова и государственной дизайн-системы. Очень рекомендую поразглядывать. Чужие гайдлайны — это концентрированный опыт. Здорово, что у нас есть сильные разработки.

#для_профи #дизайн_системы

Скетч-дизайнер: итоги 2017 года

1. Дизайн-инструменты для создания интерфейсов устроили гонку вооружений

В инструментах для продукт-дизайна за год прошли большие изменения. Гонка инструментов в самом разгаре и компании грызутся между собой за огромный рынок. У Скетча появляются серьёзные конкуренты.

Всё больше дизайнеров пересаживается с продуктов Адоба на Скетч и Фигму, понимая, что Фотошоп не годится для масштабирования дизайна. Адоб сопротивляется, но не слишком успешно: Адоб Экспириенс Дизайн, пусть вышел из бета-версии, убийцей Скетча не стал, потому что был слишком сырой. Фреймер усиленно пытается занять территорию Скетча, вышел первый полноценный видеокурс про Фреймер на русском. Инвижн получил много денег от инвестров и тоже будет оттягивать на себя внимание. Фигма не отстаёт и привлекает тех дизайнеров, у которых нет денег на Мак и которым не так важны кастомные горячие клавиши и плагины.


2. Скетч: библиотеки, клауд, новые плагины и сервисы
Сам Скетч очень здорово развился за этот год: появились библиотеки, которые упрощают работу над большими проектами, Скетч Клауд для шеринга исходников. Стали набирать популярность незаменимые плагины вроде Киc (Keys), Раннер, Дупликатор, Марвел, Линго, Абстракт и другие сервисы, работающие в экосистеме Скетча. Появилась синхронизация символов в Линго.

3. 2017 стал годом телеграм-каналов
Как грибы после дождя, в Телеграме выросли десятки каналов, в том числе, про дизайн. Админы пабликов в Контакте и Фейсбуке поняли, что умная лента в этих соцсетях настолько умная, что даже при большой аудитории лишает их каких-либо просмотров, если если не вкладывать деньги в рекламу каждого поста. В итоге, вовлечённость читателей в контент стала чрезвычайно низкая. Пример из жизни: если в группе 180 000 человек, пост не набирает даже 10 000 просмотров. А читатели поняли, что употреблять неконтролируемый сладкий кефир ленты, где вперемешку с котиками и рекламой попадаются серьёзные посты, тоже не в кайф. Поэтому, наблюдаем отток профессиональной аудитории из соцсетей в Телеграм. Это будет продолжаться из-за системных проблем соцсетей.

Появился сервис tgstat.ru, на котором собран прозрачный рейтинг в категории Дизайн: tgstat.ru/design. Даже крупные студии вроде Чулакова (20 октября), Горбунова (9 июня) и Лебедева (17 ноября 2016) вовремя завели телеграм-каналы. Самым популярным каналом в категории Дизайн стал Костя Горский из Интеркома с 17 000 подписчиков. По меркам цифр соцсетей, аудитория небольшая, но надо учитывать, что канал открыт 16 июля 2017 и в отдельные месяцы рос на 5000 человек в месяц, а вовлечение аудитории каналов несравнимо выше, чем в пабликах.

4. Смотри в сторону VR
Всё более ощутимо чувствуется близящаяся VR-революция. Очки и шлемы становятся более доступны широкой аудитории. Oculus Go за 200$, который выходит в январе 2018, тому пример.

Тема дизайна для VR мне очень близка и я о ней точно буду писать. Поэтому я завёл отдельный канал @vrdesigner, которым пока не занимаюсь из-за Скетч-дизайнера. Те, кто сейчас начинает изучать специфику дизайна для VR и технологии вроде ThreeJS и Unity, будут очень востребованы в будущем. Вообще, чем быстрее дизайнеры начнут писать код, тем им будет лучше. Если занимаешься интерфейсами, знание как минимум связки HTML-CSS-JavaScript даёт большие преимущества.

5. Скетч-дизайнеру 4 месяца
Для меня год был большим прорывом. В феврале я начал работать в банке и нашёл свою нишу. В конце августа открыл Скетч-дизайнер.

Сегодня каналу исполниось всего 4 месяца. За это время я перезнакомился с огромным количеством интересных людей и классных дизайнеров. Написал много материала, придумал кучу идей для новых постов, намонтировал #GIF-уроков, выложил свои конспекты по Фреймеру, открыл @framerchat и зарегистрировал домен sketchdesigner.ru, скоро открою на нём сайт. Я вдохновлён тем откликом, который вызвал мой проект и хочу верить, что это только начало.

Пожелание на Новый год

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

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

Моей нишей стала организация дизайн-систем. Это очень скучная область, требующая дотошности и системного мышления программиста. И она оказалась не занятой. Без порядка немыслим ни один крупный продукт. Я с детства любил всё систематизировать, составлять списки и словари. Мало кто любит наводить порядок в слоях макета, а тем более, сортировать иконки по алфавиту. А мне это всегда доставляло самое большое удовольствие.

С новым годом, скетч-дизайнеры!

#фреймер_кейс №2: Анимация SVG-пути

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

medium.com/sketchdesigner/framer-case-2-d8e2e36ffa5d

В версии 107 в Фреймере произошли важные изменения. До сих пор можно было двигать объекты только по прямой линии от координаты начала до координаты окончания. Теперь можно двигать объекты по произвольной траектории, которая задаётся пером или другим контуром объекта. В Фреймере появились новые инструменты, такие как перо (Path) и шейпы (Oval, Polygon, Star). Теперь можно вставлять иконки из внутренней библиотеки svg-иконок и прямо в режиме дизайна рисовать объекты произвольной формы, которые заключаются в SVG-контейнеры.

Мы научимся использовать SVG-слои, зададим атрибуты SVG через новый метод setAttribute(). На наглядном примере научимся использовать modulate() и привяжем изменение одного значения к другому.

Получившийся проект: framer.cloud/vPUBb/

Вот готовое решение с одним графиком, которое можно быстро разобрать и интегрировать в любой дизайн:
framer.cloud/EwVwU/

#для_профи #лучшее #Фреймер #UI_анимация