Size: a a a

2017 October 11
/designer
slashdesigner
Скрываем вложенные символы

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


Нахрена?

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


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

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


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

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


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

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


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

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

#идеология_символов
источник
/designer
slashdesigner
Пока Runner не умеет вставлять символы из библиотек, но вангую, что скоро научится.
Раннер обновился и теперь вставляет символы из библиотек. Можно настраивать, какие библиотеки будут показываться в меню. Насколько быстро будет работать список из 1000 символов — вопрос открытый.
источник
/designer
источник
/designer
#классные_люди №3 Глеб Кузнецов

medium.com/sketchdesigner/glebich-e588a420314c

Глеб Кузнецов — вдохновивший меня дизайн-директор из компании Fantasy Interactive, который сейчас живёт и работает в Сан-Франциско. Я начал эту рубрику на Скетч-дизайнере c Клаудио Гуглиери, который тоже был в этой компании, и это неслучайно. Фэнтези — одна из моих любимых студий. То, что они делают это круто и инновационно. Их клиенты — Google, Facebook, HP, Microsoft, Wacom и др.
источник
/designer
Одна из работ Fantasy Interactive: https://vimeo.com/119778835
источник
/designer
Дрибл Глеба Кузнецова: dribbble.com/glebich
источник
/designer
slashdesigner
#классные_люди №3 Глеб Кузнецов

medium.com/sketchdesigner/glebich-e588a420314c

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

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

https://www.youtube.com/watch?v=9I73ryTIUqw
источник
2017 October 12
/designer
Мобильные UX-паттерны, которые используются неправильно
Пост из блога «Советы по проектированию»

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

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

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

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

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

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

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

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

#UX_паттерны
источник
/designer
Когда создаёшь стайлгайд, полезно разместить HEX-коды цветов в виде текста, чтобы они были сразу видны. Изящный способ сделать это — перетаскивать их прямо из поля в раскрытой палитре и красить. #GIF
источник
/designer
slashdesigner
Когда создаёшь стайлгайд, полезно разместить HEX-коды цветов в виде текста, чтобы они были сразу видны. Изящный способ сделать это — перетаскивать их прямо из поля в раскрытой палитре и красить. #GIF
HEX-код — обычный текст. Поэтому, когда он попадает на холст, для него сразу создаётся текстовый слой. А следующим же действием можно запипетить цвет пробника (Ctrl + C), чтобы HEX-код сам себя иллюстрировал.
источник
2017 October 14
/designer
источник
/designer
Stark: позаботься о дальтониках

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

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

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

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

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

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

#плагины
источник
/designer
Канал иллюстратора Mad Rabbit
Я наткнулся на канал интересного коммерческого иллюстратора Mad Rabbit, в котором он рассказывает, как сделать иллюстрации лучше. Это очень актуально, если ты много проектируешь и мало времени уделяешь отрисовке. Хороший продукт-дизайнер должен уметь всё.

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

Следуй за белым кроликом: @mr_mad_rabbit

Что интересного:
- Мастер-класс: Плоская графика в Иллюстраторе (с вопросами от слушателей): youtu.be/AzrvhpcBWJg
- Фотошоп-трюк: Как добавить плоским иллюстрациям фактуры goo.gl/NcEaCL
- Инструкция по выживанию: Как общаться с иллюстраторами goo.gl/o2KsBq

Но я подозреваю, что никакой он не кролик — как можно писать посты лапками?
источник
2017 October 15
/designer
источник
/designer
источник
/designer
Мои конспекты по Фреймеру на русском
Для Айпада, 120 стр.

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

#конспект  #Фреймер  #анимация  #прототипы
источник
/designer
Если ты хочешь узнать, на что способен Фреймер, посмотри это видео:

youtu.be/ER1TxhMZU18
источник
/designer
Если ты хотел научиться делать такие штуки и тебя не пугает перспектива писать код, обрати внимание на мой конспект. На русском ничего подобного не найти.

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

Подробнее об этом конспекте и Фреймере:

medium.com/sketchdesigner/framer-guide-3c7e0f7a2e53
источник
/designer
Фреймер-чат
Я понимаю, что дизайнеру освоить Фреймер адски сложно и нужна большая воля и поддержка сообщества, чтобы добиться профессионального уровня. В то же время, я верю в этот инструмент.

Я создал @framerchat, в котором можно задавать вопросы. Если ты где-то застрял, не стесняйся писать. Если ты хорошо знаешь Фреймер, приходи и помоги другим.
источник
2017 October 17
/designer
источник