Sketch Wanderer

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

github.com/turbobabr/sketch-wanderer

Если не использовать его, выделять слои с клавиатуры сложно: Tab листает элементы одного уровня иерархии, Enter позволяет войти в группу или артборд, а Esc — выйти на уровень вверх. Постоянно нужно держать в голове, на каком уровне находишься.

Вандерер (от англ. — странник) позволяет использовать Ctrl + Alt + ↓ и ↑ чтобы выделять нижние и верхние слои. И это очень удобно, как будто все элементы находятся на одном уровне. Если нужно развернуть или свернуть группу, можно использовать Ctrl + Alt + ←→.

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

Плагин доступен в Runner.

#плагины

В Скетче есть пара клавиш, которая позволяет сортировать слои — Alt + Cmd + ↑↓. Она замечательно ложится в схему работы Странника: шагаем на Ctrl + Alt + стрелках, тащим на Alt + Cmd + стрелках.

В блоге банка Тинькофф на Хабре появилась вторая часть рассказа о том как они организуют свою дизайн-систему

Цикл «Создание Tinkoff Design System» будет полезен тем, кто пытается организовать дизайн крупного проекта. Если в работе нескольких дизайнеров нет единой системы и правил, возникает бардак. Эти посты рассказывают как удалось упорядочить дизайн в Тинькове.


Часть 1: Первые шаги goo.gl/z2fXFt

В вводной части дизайнер Никита Прилепский рассказывает, почему им нужна была дизайн-система и какие выгоды даёт её построение. Они решили использовать методологию атомарного дизайна. Из этого поста я почерпнул важную мысль, что дизайнеры и разработчики должны иметь одну и ту же систему названий. Дизайн-система — это единая типографика и стиль, компоненты, каркасы макетов (лэйауты), документация и котроль версий.


Часть 2: UI Kit, версионирование и витрина компонентов goo.gl/qb5q35

Вторая часть более конкретная и посвящена трудностям, которые возникли по пути.

Что сделали:
- Уменьшили количество компонентов
- Зафиксировали сетку в пикселах
- Ввели контроль версий через сервис Abstract
- Каждому компоненту в системе дали версию
- Сделали внутренний сайт-витрину.

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

Ждём третью часть про бизнес-процессы.

#дизайн_системы

Вышел Sketch 47

В официальном релизе появились библиотеки символов. Также появилась возможность сглаживать стыки в скруглениях углов.

Подробнее в Медиуме Скетча: goo.gl/tWKkrj

Пока Runner не умеет вставлять символы из библиотек, но вангую, что скоро научится.

Приятность: Новый Скетч 47 обратно совместим с предыдущей версией 46.2. Раньше надо было покупать обновление или идти лесом. Меня удивляет и радует это человеколюбие.

Скрываем вложенные символы

Символ А содержит вложенный символ Б. В макете есть несколько копий А. Если в них нужно скрыть Б, выделяем все А и ставим оверрайд Б в None (Shift + Alt + Cmd + N). #GIF

---


Нахрена?

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


Shift + Alt + Cmd + N скрывает верхний оверрайд

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


Оверрайд группой

Вдвойне красиво, что это можно делать с группой символов. Таким же образом можно прописывать в текстовые объекты символа новые надписи, а в растровые объекты картинок — новые картинки. Главное условие: все выделенные копии символов должны иметь общий мастер.


Убираем лишние поля из блока оверрайдов

Если заблокировать (Shift + Cmd + L) текстовый слой, изображение или символ в мастере, они не появятся в списке полей Overrides.


Глюк с оверрайдами в Зеплине исправили

Оверрайды используются для переключения иконок. Ещё совсем недавно в Зеплине был глюк, который не позволял скачать иконку, если она была установлена оверрайдом. Вместо этого верстальщики загружали оригинальную иконку, прописанную в мастер-символе. Это лишало смысла оверрайды для иконок и я долго не использовал их. Подтверждаю, что в актуальной версии Скетча (47) и Зеплина (1.20) это исправили и коммунизм стал чуть ближе.

#идеология_символов

Раннер обновился и теперь вставляет символы из библиотек. Можно настраивать, какие библиотеки будут показываться в меню. Насколько быстро будет работать список из 1000 символов — вопрос открытый.

#классные_люди №3 Глеб Кузнецов

medium.com/sketchdesigner/glebich-e588a420314c

Глеб Кузнецов — вдохновивший меня дизайн-директор из компании Fantasy Interactive, который сейчас живёт и работает в Сан-Франциско. Я начал эту рубрику на Скетч-дизайнере c Клаудио Гуглиери, который тоже был в этой компании, и это неслучайно. Фэнтези — одна из моих любимых студий. То, что они делают это круто и инновационно. Их клиенты — Google, Facebook, HP, Microsoft, Wacom и др.

Одна из работ Fantasy Interactive: https://vimeo.com/119778835

Дрибл Глеба Кузнецова: dribbble.com/glebich

Лекция Глеба «Как создавать то, чего ещё не было».

Основной её смысл я изложил в посте на медиуме. Немного сложная для восприятия, но полезная.

https://www.youtube.com/watch?v=9I73ryTIUqw

Мобильные UX-паттерны, которые используются неправильно
Пост из блога «Советы по проектированию»

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

1. Ещё раз пнём бедный гамбургер
Хотя, не всё так однозначно. VK недавно отказались от гамбургера в верхнем левом углу и перешли на здоровую пищу. Количество негатива, которое я слышу от обновившихся, зашкаливает. Люди привыкли к ним и хотят скрывать ненужные меню. Видимое меню действительно вовлекает больше, но и отвлекает от контента.

2. Нестандартные иконки без подсказок — феил
Если пользователь не знает предыстории, не читаются.

3. Жестовое управление неочевидно
В разных аппах применяются по-разному. Конвенция использования жестов ещё не сформировалась. В одних аппах свайп вправо помечает письмо как прочитанное, в других — как непрочитанное. Если явно не показывать, что жесты вообще есть, пользователь не одуплит.

4. Туториал на затемнённом экране бесит
Потому что мешает начать использовать продукт. Где тут кнопка Skip? А вот. Ой, а как прогу то использовать?

Вывод: сомневайся, принимай свои решения и исследуй. Что работает в одном продукте, не работает в другом.

По-русски: goo.gl/gmSwXB (сентябрь 2017)

По-английски: goo.gl/ZV19Xd (ноябрь 2015)

#UX_паттерны

Когда создаёшь стайлгайд, полезно разместить HEX-коды цветов в виде текста, чтобы они были сразу видны. Изящный способ сделать это — перетаскивать их прямо из поля в раскрытой палитре и красить. #GIF

HEX-код — обычный текст. Поэтому, когда он попадает на холст, для него сразу создаётся текстовый слой. А следующим же действием можно запипетить цвет пробника (Ctrl + C), чтобы HEX-код сам себя иллюстрировал.

Stark: позаботься о дальтониках

Старк — окно, через которое можно увидеть макеты так, как их видят люди с разными особенностями зрения.

github.com/stark-contrast/stark-sketch-plugin

Ситуация с доступностью (accessibility) в интерфейсах в наши дни традиционно-катастрофическая, прямо как с пандусами для инвалидов в московском метро. Хотя попытки предпринимаются, особенно в крупных проектах. Качественный дизайн = доступный дизайн.

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

Больше по теме дальтонизма: ru.wikipedia.org/wiki/Дальтонизм

Плагин доступен в Runner.

#плагины