Дизайнеры из Мэил.ру собрали российские дизайн-системы на сайте 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_анимация

FontRapid

Гениальный плагин, который позволяет делать файлы шрифтов прямо в Скетче.

Нет в Раннере, только по ссылке: fontrapid.com

1. Рисуем каждый глиф в виде комбинированного шейпа (combined shape) и называем его так же как глиф («А» для заглавной «А», «b» для строчной «b»).

2. Включаем панель плагина Plugins → Toggle Font Rapid.

3. Подстраиваем высоту глифа и базовую линию во вкладке Editor.

4. Во вкладке Metadata заполняем название и начертание.

5. Импортируем OTF-файл.

6. Устанавливаем его как новый шрифт через Font Book или другой менеджер шрифтов.

Со специализированным софтом вроде FontLab и Glyphs этому плагину не конкурировать, но если нужно быстро набросать шрифт, например, для набора иконок, он будет очень полезен. Протестировал работу с русскими буквами, узнаёт без всяких проблем.

Спасибо за ссылку Dean Rie из чата @teamsketch.

#плагины  #для_профи

#GIF Демо плагина FontRapid

Диаграмы в ПФМ: круговые против линейных

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

Что такое ПФМ
Во всех адекватных приложениях банков есть функция ПФМ (персональный финансовый менеджер). Эта функция помогает сравнить, на что были слиты кровные, и показывает визуализацию трат в виде диаграм. Цель ПФМ — дать пользователю ощущение контроля за расходами и показать, на что он тратит больше всего.

Банки очень любят показывать круговые диаграммы (пайчарты), потому что они яркие, их можно модно анимировать. От этого приложение будет смотреться дороже и вкуснее, как UI-киты в Дрибле.

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

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

Как сделать пайчарт ещё хуже?
Проблема невизуальности усугубляется, когда средствами Пауэрпоинта пайчарт делают объёмным, потому что можно. Тогда вообще нихрена непонятно, потому что 3D-перспектива вносит свои искажения. Ближние сегменты кажутся визуально больше, а дальние меньше. Лучший способ солгать, когда одну величину нужно приуменьшить, а другую приувеличить.

Когда всё-таки стоит использовать пайчарт?
Это уместно, когда нужно сравнить 2-3 значения, при условии, что они радикально отличаются друг от друга. Например, пайчарт хорошо покажет, как 30% отличается от 70%.

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

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

Источники
yulyakondratyeva.ru/blog/all/statistika-rashodov/
(за ссылку спасибо @mosinkru)

Хорошая ссылка по теме: The Worst Chart In The World (англ)
businessinsider.com/pie-charts-are-the-worst-2013-6

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

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

Меньше воды, больше жира: только про Скетч
Формат тот же, что и в @framerchat: вопросы по теме → компетентные ответы. Высушенные ответы собираются в @sketchanswers.

Я наблюдал за несколькими чатами в телеграме и видел везде одну и ту же проблему: когда начинается неконтролируемое живое общение, теряется содержательность. Если в счётчике пушей 400 непрочитанных, от чата пора отписываться. Я считаю, что содержательность важнее милой болтовни, поэтому часто удаляю сообщения.

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

Что обсуждаем и что можно постить
Вопросы про Скетч, на которые ты не нашёл ответ в @sketchanswers. Свежие новости, связанные со Скетчем. Действительно классные лонгриды, которые ты дочитал до конца, а также плагины, которые ты сам используешь.

Чтобы поддерживать структуру, в обязательном порядке используем функцию Reply (не через @!). Мы на «ты» и рады помочь. Велкам: @sketchchat.

Для обсуждения других инструментов и просто общения мы также создали второй чат: @sketchfree.

@okunev и @deanrie.

Сайт туристического бренда России

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

russia-brand.com

Я хотел бы сказать о нём пару слов. Это очень метко и универсально. Супрематизм и авангард действительно ассоциируются с Россией в мировом сознании и при этом отходят от опостылевших кокошников, медведей и косовороток. Это именно то, о чём говорила Катя Соломеина в интервью для Бэнг Бэнга: русские дизайнеры должны гордиться русским дизайном прошлого.

medium.com/sketchdesigner/solomeina-e52d98c772ce

В этом знаке есть красота мысли и культурный бэкграунд. Когда нужна секунда, чтобы понять идею и восхититься ей. Нагромождённые простые геометрические формы в форме России + авангард. При кажущейся простоте на знаке нашлось место даже Уралу, Байкалу и Транссибу.

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

midnightsketch.com #плагины

Плагин Midnight научится перекрашивать другие популярные плагины

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

midnightsketch.com (8$ на 3 компа)

Причина моего скепсиса была в том что такое явное внедрение в интерфейс рискует замедлить Скетч. Кроме того, Миднайт не перекрашивает другие плагины в тёмный цвет. Марвел остаётся светлым и сильно выбивается из общей расцветки:

В следующем апдейте Миднайта разработчик обещает, что Марвел, Анима и Крафт тоже засияют ночной чернотой.

Через Миднайт можно тонко настраивать расцветку Скетча.
Об этом @true21 написал инструкцию:

telegra.ph/Kak-kastomizirovat-cveta-interfejsa-v-Sketch-01-13