#чёрные_паттерны №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 секунд

1. Создаём артборд, A. Выбираем заранее приготовленный пресет артборда 24 х 24. Сразу же приближаем его в полный экран, Cmd + 2.

2. Включаем сетку Ctrl + G. Должна быть настроена на 8px.

3. Выбираем Vector Tool, V. Рисуем по клеткам сетки половину стрелки, стараясь попасть в те точки, где перекрещиваются линии сетки. Чтобы линия рисовалась на 45°, зажимаем Shift. Выходим из режима редактирования, Enter.

4. Получившийся путь выравниваем по пиксельной сетке функцией Round To Pixel. Я настроил Ctrl + Cmd + R. Это гарантирует, что иконка не будет мазаться в масштабе 1х.

5. Делаем второе крыло: Дублируем путь, отражаем горизонтально, смещаем. В будущем такой стрелке можно будет безболезненно менять толщину линий и она не разъедется.

6. Выделяем оба пути, группируем Cmd + G, чтобы выровнять группу по центру артборда.

7. Выравниваем группу функцией Align → Horizontally и Vertically. Я настроил на Cmd + [ и Cmd + ].

8. Снова выделяем оба пути и настраиваем свойства скругления для концов и углов, делаем их скруглёнными. Группировка больше не нужна, разгруппируем Shift + Cmd + G.

Стрелка готова. Чтобы использовать её в сайте в виде SVG, нужно сделать ей аутлайн функцией Convert to outlines, у меня Shift + Cmd + O.

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

Наблюдения о гифках

Telegram Desktop (desktop.telegram.org) всем хорош, но выкладывает гифки в ужасном качестве 320 х 320, так что ничего разобрать нельзя. В остальном он идеален: позволяет настраивать темы и хорошо работает с форматированием текста через код.

Telegram for macOS (macos.telegram.org) позволяет загружать гифки в хорошем качестве, если при загрузке выбирать Drop Files In a Quck Way. Можно делать гифки 720 х 720. Однако, у него другие косяки: он не позволяет видеть код оформления в режиме редактирования поста.

Думал, что в первом пофиксили эту ошибку и загрузил гифку через него, получился феил. Выгрузил в хорошем.

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

#дизайн_паттерны №:2 Баннер

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

sketchdesigner.ru/design/patterns/banner/

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

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


Чтобы сделать эффективный баннер, нужно:

1. Выделить информацию в отдельный от окружающего пространства контрастный блок

2. Сделать в нём понятное конкретное предложение

3. Сделать призыв к действию

4. Показать баннер тому, кому он нужен. И всё.


Вопросы, на которые должен отвечать баннер:

1. Что рекламируют?

2. Что делать?

3. Опционально: Кто рекламирует?

Баннер портят: крик, шок-контент, кликбейт, плохой таргет, плохая адаптация, слишком много баннеров на одной странице, слишком много контента в баннере, увод вникуда.

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

Обновились дизайн-гайдлайны Альфа-Банка

На сайте про дизайн-систему Feather появились новые разделы и UI-kit Альфы.

Кому полезны: дизайнеры в крупных продуктовых командах могут найти для себя много ценного и неочевидного. Сайт позволяет заглянуть в кухню Альфа-Банка, посмотреть на их философию и дизайн-материалы.

Интересная деталь, что дизайнеры Альфы работают в тандеме с фронтенд-разработчиками. Это значит, что дизайнеры знают JavaScript и React, либо стремятся их выучить. Это позволяет разговаривать с разработчиками на одном языке.

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

На сайте:

Принципы
design.alfabank.ru/principles

Альфа задумывается о едином пользовательском опыте и базе паттернов, которые можно применять многократно, использует Mobile First, а дизайн для мобильных платформ делает единым, оставляя системные контролы и паттерны стандартными.


Принципы / Метод
design.alfabank.ru/method

Статья про последовательность шагов при работе над проектом. Даёт самое базовое представление о том, что такое дизайн-мышление.

Кратко: Понять задачу, определить метрики, сформулировать гипотезы решения, составить CJM, протестировать решение.


Компоненты
design.alfabank.ru/components

Библиотека компонентов на Реакте — основной инструмент фронтенд-разработчиков Альфы. Её можно развернуть у себя.

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


Иконки
design.alfabank.ru/style/icons

Более 250 svg-иконок оформлены в виде витрины, по которой удобно искать иконку по названию, цвету и размеру.


Паттерны
design.alfabank.ru/patterns

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


Инструкции для разработчиков и UI-kit для дизайнеров
design.alfabank.ru/usage

Как установить библиотеку компонентов на Реакте через npm. Два скетч-файла, для iOS и Android, в которых надо разбираться. О них поговорим отдельно.

#дизайн_системы
—
#для_профи — рубрика для тех, кто уже нашёл работу

И да, конечно, они завели телеграм-канал.

t.me/alfabankdesign

Москва: нужен сильный продуктовый дизайнер нам в Газпромбанк

Наша команда расширяется. У нас есть одна крутая позиция для синьёра. Фултайм, секси условия.

Нам нужен реально прокачанный злой визуальный дизайнер, чтобы делать новую систему ДБО для одной из крупнейших финансовых структур России.

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

Обязательно: Скетч, Шоп, Люстра, уметь рисовать, подбирать фото как батя.

Плюсом будет: хороший АЕ, HTML-CSS, Framer.

С нас: опенспейс в комфортном бизнес-центре на выходе из Добрынинской, хорошая белая зарплата и премии, ДМС, классные люди, свежее яблоко на выбор (ноут или моноблок).

Присылай резюме, портфолио и сопроводительное письмо Андрею: @vitrage

Кстати, у нас красиво: