Следом за Скетчем обновился Зеплин

Теперь хотспоты есть и в нём. Чтобы они были кликабельными, в Зеплине нужно зажимать Shift.

То, что Зеплин стал поддерживать хотспоты, кардинально меняет правила игры. Если нужно сделать быстрый грубый прототип без анимированных переходов и передать его в разработку, теперь это самый удобный вариант. Налепил хотспотов в Скетче, загрузил в Зеплин и готово. Очень желательно при этом придерживаться линейного сценария.

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

Делать прототипы в Скетч Клауде, пока он не обладает всеми измерительными возможностями Зеплина и клёвой анимацией Марвела, я бы тоже не стал.

Это ещё не все классные новости последнего обновления. Про облачные библиотеки поговорим завтра.

#новая_функция #Зеплин #Марвел

Как работает Миррор в новом Скетче

Миррор — полезнейшая функция Скетча (не путать с плагином Magic Mirror).

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

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

А с появлением хотспотов Миррор вообще выводит создание прототипов на новый уровень эффективности. Для мобильного дизайна это гораздо удобнее и правильнее, чем открывать окно Preview в Скетче.

На первый взгляд кажется, что эта функция просто отсутствует в новом Скетче (и это упущение дизайна). Однако, кнопка Connect 'Device name' появляется в верхнем правом углу, если сделать сдедущее:

1. Подключить Айфон к той же вайфай-сети, к которой подключен Мак.

2. Запустить Миррор на мобильном и оставить его экран открытым.

3. Нажать Connect 'Device name' На экране Айфона появится текущий артборд. Если не появился, закрой и заново открой Скетч.

В предыдущих версиях Миррор у меня работал только по проводу. Теперь хорошо работает и по вайфаю. Спасибо @stiques за наводку.

Скачать Миррор: itunes.apple.com/us/app/sketch-mirror/id677296955

#первые_шаги — посты для начинающих

26-31 марта по вечерам пройдёт серия онлайн-трансляций Design Line

Партнёрский материал

Дизайн-лайн — это интенсив с топовыми российскими дизайнерами.

Цена билета до 10 марта: 1500 р.

Тебе как читателю Скетч-дизайнера доступен промо-код, который позволит взять билет за 1275 р. (экономия 225 р.)

Промо-код: SKETCHDESIGNER

Кто выступает
Ветров, mail.ru
Шишкин, Redmadrobot
Мосякин, Выс. шк. брендинга
Башев, Dilletant
Ковальский, Creative People
Квасников, Fantasy Interactive
...и другие крутые спикеры.

Кто разбирает работы
Цыганков, AIC
Медвинский, CreativePeople

Ты сможешь задать им вопросы через телеграм-чат.

Заказать билет: goo.gl/vZxbTh

—
#для_профи — рубрика для прожжённых

#GIF №11 - Каркасы: быстрый способ контролировать отступы

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

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

1. Создаём символ каркаса
Его размер такой же, как у экрана. Серыми блоками на нём размечены основные объекты, такие как шапка или место для иконки.

2. Вставляем каркас на новый артборд
На нём будем делать макет. Используй Runner и назначь клавишу на вставку символов: Ctrl + Y.

3. Поверх каркаса вставляем символы-блоки
Выравниваем их по разметке каркаса.

4. Скрываем каркас
Если не нужен, скрываем его клавишей Shift + Cmd + H. Повторное нажатие показывает каркас обратно.

Если будут правки в каркасе, будет легко обновить положение всех символов, поскольку они перестанут ложиться в обновлённый каркас.

—
#первые_шаги — рубрика для начинающих
#идеология_символов

Скетч-дизайнер / Каналы

Открыл на сайте новый раздел, в котором рассказал о телеграм-каналах, которые читаю сам. В раздел попали каналы про дизайн интерфейсов и смежные с ним темы.

sketchdesigner.ru/channels

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

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

#каналы

#дизайн_паттерны №1: Лендинг

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

sketchdesigner.ru/design/patterns/landing

1. Делать фокус на торговое предложение
Ограничить выбор и дать понятный коробочный продукт, не отягощая лендинг кучей настроек и калькуляторов.

2. Использовать полноэкранные фотографии
Использовать качественную иммерсивную (вовлекающую) графику, особенно, на первом экране.

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

4. Быть готовым к целевому действию
Ничто не убивает доверие пользователя так быстро, как безответственность и ложь. Отвечать на звонки и в чат.

5. Замерять конверсию
Это отношение количества посетителей к количеству совершённых целевых действий.


Ошибки

1. Чаты в углу экрана
Если используются неправильно, очень портят дизайн. Если в них сразу не отвечают консультанты, мгновенно злят пользователей.

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

3. Перегруз информации
Много букв не прочитают. Контента должно быть ровно столько, чтобы продать.

4. Блок «Поделиться»
Никому, кроме заказчика не придёт в голову делиться рекламным лендингом в социальных сетях. Безжалостно избавляйся от мусора.

—
#первые_шаги — рубрика для начинающих

Почему удобно делать прототипы в Скетч Клауде
Пришло время отправить Марвел на пенсию?

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

Плюс: хотспоты привязаны к объектам на макете
Главная сила прототипов в Скетче в том, что хотспоты привязываются к символам. Когда кнопка сдвигается, хотспот тоже сдвигается. В Марвеле же их нужно вручную двигать, когда макет обновился по ссылке.

Плюс: Единство хотспотов во всех ссылках
Хотспоты Скетча видны в Зеплине. Достаточно один раз настроить все переходы и они будут как в Скетч Клауде, так и в Зеплине. Менеджерам, любопытным и копирайтерам — ссылку на Скетч Клауд, разрабам — на секцию сценария в Зеплине.

Плюс: Ссылка на предыдущий артборд
Теперь внутри символа может быть переход на обобщённый предыдущий артборд, и это очень круто. Подсмотрел эту технику в официальной библиотеке UI-компонентов Apple. Идеальное решение для кнопки «Назад».

Мечты: ссылка «Следующий артборд»
Написал Богемцам, чтобы внедрили аналогичную кнопку «Next Artboard». Выбор следующего артборда в сценарии — пока слабое место дизайна Скетча, потому что это надо делать вручную. Если её сделают, это сэкономит время настройки переходов на 70%.

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

Если все сценарии твоего проекта спроектированы линейно и вся тяжёлая растровая графика обёрнута в символы, это не будет проблемой. Сценарий из 20 экранов весит у меня 9 мегабайт.

—
#прототипы
#для_профи — рубрика для прожжённых

#чёрные_паттерны №1: Всплывающий чат

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

sketchdesigner.ru/design/black-patterns/popup-chat

Вывод: Правильный чат доступен по кнопке «Чат» или «Задать вопрос в чате», а не всплывает в лицо пользователю, загораживая контент. Хорошо, когда чат открывается как одна из страниц сайта. В крайнем случае, можно раскрывать попап-чат по клику. Таким образом, мы проявляем уважение и бережём нервы пользователя.

—
#проектирование
#для_профи — рубрика для прожжённых

​​Судя по Android P Developer Preview, нас ждёт обновлённый Material Design — много скруглённых углов, кнопки без теней и капса и новые цвета. В альфу Design Library уже завезли кнопки и скругленные карточки (и ещё много интересных изменений).

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

Обзор Инвижн Студио

Специально для @awdee я написал большой обзор, в котором опробовал в работе новый редактор от розовых хайпожоров. Он оказался небезнадёжным.

awdee.ru/invision-studio-review

Ощущения интересные. С одной стороны, это старый добрый Скетч в урезанном виде. С другой, в нём есть что-то новое и переосмысленное, главным образом, в теме анимации.

В статье сравнил интерфейс Скетча и Инвижна и показал ключевые моменты в гифках.

#Инвижн
—
#для_профи — рубрика для прожжённых

Рекомендую канал UX Notes

Питерский проектировщик Антон Григорьев из бюро «Проекторат» собирает интересные ссылки про интерфейсы и пишет на их базе компактные текстовые выжимки. В ссылках только годнота, отбор строгий.

Подписаться: t.me/uxnotes

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

На сайте vandergrav.ru Антон выпускает дайджест. Характерная особенность проекта — минимум иллюстраций, только тексты. Читаю сам, неплохо пишет.

Последние интересные посты

1. Про гештальт в дизайне интерфейсов
t.me/uxnotes/230

2. Про дофамин и лайки
t.me/uxnotes/232

3. Ильяхов о том, как больше зарабатывать редактору (для дизайнеров тоже актуально)
t.me/uxnotes/236

#GIF №12 Рисуем иконку по сетке за 30 секунд