Для сайта гратара я нарисовал с дюжину таких мелких прототипов.

Например, для анимации из гифки выше был вот такой прототип, сопровождаемый следующим описанием:
-- Переход в серию --
Исчезновение ненужных карточек: 0.2с, cubic-bezier(0.4, 0.0, 1, 1);
Разворачивание карточки во весь экран: 0.6с, cubic-bezier(0.4, 0.0, 0.2, 1);
Появление нового контента: 0.6c, cubic-bezier(0.0, 0.0, 0.2, 1);

-- Возврат на разводящую --
Закрытие страницы: 0.4с, cubic-bezier(0.4, 0.0, 1, 1);
Появление контента: 0.6c, cubic-bezier(0.0, 0.0, 0.2, 1);

Дальше покажу ещё несколько анимаций со ссылками на живые прототипы. Где-то анимация вшита в прототип и отыгрывается сама, а где-то можно потыкать.

Прототип заполнения формы

Открытие карточки товара и просмотр фото

Анимация листания фотографий

Прилипающий к верху экрана заголовок.

Можете поковырять исходник: https://www.dropbox.com/s/rwmef9fdvvr983p/Scroll-StickyHeader.xd?dl=0

Появление заголовка на боковой панели

Самый структурно сложный прототип, который я делал – форма обратной связи.

Нужно хранить состояние трёх полей: имя, электронная почта и галочка согласия – это 8 экранов.

Для заполнений полей надо ещё по два экрана: начало ввода (стоит курсор) и окончание (введено содержимое). Таких вводов надо восемь штук в зависимости от заполненности остальных полей. Это ещё 16 экранов, итого 24.
Для семи из восьми состояний нужно показывать ошибку верификации при попытке нажатия на кнопку «отправить» – это ещё 7 экранов, итого 31.
И ещё пять экранов – анимация отправки данных на сервер. Получается 36 экранов.

Если добавить поле телефона – то для такого полного прототипа потребуется уже 63 экрана.

Упражнение забавное, но именно как упражнение – на внимательность и системность мышления. Для работы же необязательно строить полную сеть возможных состояний и переходов, достаточно показать лишь несколько: ввод в текстовое поле, подсвечивание ошибки, анимацию отправки формы и возврат к начальному состоянию.

Наконец-то иллюстратор научился нормально удалять точки!

Правда, для этого нужно выбрать инструмент Delete Anchor Point Tool (« – ») и удалить точку с зажатым Shift – но по крайней мере такая возможность теперь есть без сторонних плагинов.

Сколько себя помню, всегда был тихим (а иногда и громким) граммар-наци. Если я встречал в тексте или чате орфографические ошибки, я моментально переставал улавливать мысль, видел только косяки, а мысли мои уносились в оценочные суждения о личности автора/собеседника.

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

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

Подтвердить | Отменить

Когда пользователь что-то удаляет, хороший интерфейс должен уберечь его от ошибочного удаления нужных данных. Но как это лучше сделать?

Первый порыв – переспросить: «Точно удалить? Да | Нет».
Это сообщение требует совершить дополнительное действие каждый раз, несмотря на то, что ошибки довольно редки. Т.е. в большинстве случаев интерфейс требует совершать лишние действия. Пользователь может привыкнуть быстро прокликивать «да/удалить/продолжить», и в тот момент, когда он действительно совершит ошибку, он кликнет «да/удалить/продолжить» раньше, чем успеет сообразить, что произошло.

Что делать? Позволить отменить деструктивное действие.
Возможность отмены не отвлекает, не заставляет совершать лишние действия и даёт пользователю время осознать ошибку. Отмена может быть сложнее в реализации, но так надёжнее.

Видели Circe Italic?

А Circe Slab?

Цирцея становится все более самостоятельной и функциональной.

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

Продолжение статьи с картинки

Слои – для слоёв

Иногда (часто) начинающие дизайнеры в иллюстраторе группируют слои по артбордам, как в фотошопе. Но слои могут принести больше пользы, если использовать их для «горизонтальной» группировки.

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

Техническая эстетика

В СССР не приветствовалось слово «Дизайн». Вместо этого было понятие технической эстетики, и был даже целый всесоюзный институт имени её (ВНИИТЭ), который создавал дизайн мирового уровня.

Очень рекомендую к просмотру замечательный фильм про историю отчественного дизайна «Техническая эстетика». Первая часть рассказывает об уральской школе дизайна, вторая – про ленинградскую. Третью – ждём)

В четверг в фигму завезли долгожданное обновление с auto layout.

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

Если вдруг вы ещё не поковырялись, то вот эта же песочница на русском.

Так, всё.
Заканчиваю прокрастинировать и раскачиваться.
Есть что навёрстывать, есть о чём рассказать и что показать.

Я ещё здесь. Спасибо вам, что вы тоже.

В 1970 году математик Джон Конвей придумал игру под названием «Жизнь» (Game of Life). Это сетка из квадратных ячеек, каждая из которых может быть закрашенной (населённой, «живой») или пустой.

На старте игрок определяет, какие клетки живые, какие – нет, и запускает «эволюцию», на каждом шаге которой проверяются два условия:
1) пустая клетка становится живой, если среди восьми окружающих клеток есть ровно три живых, остальные остаются пустыми.
2) живая клетка остаётся живой, если среди восьми соседей есть 2 или 3 живых, остальные становятся пустыми.

Несмотря на простоту правил, эта система проявляет свойства, не присущие её отдельным элементам.

Например, отдельные структуры обладают цикличностью (осцилляторы). Другие могут перемещаться по полю (глайдеры). Третьи генерируют глайдеры (ружья). Четвёртые перемещаются по полю и оставляют за собой след (паровозы).

Более того – из этих небольших структур можно создавать ещё более сложные, способные к генерированию и обработке сигналов, хранению логических состояний, проверке условий – то есть всему тому, что определяет вычислительные машины. «Жизнь» полна по Тьюрингу – то есть на ней можно «запрограммировать» любой алгоритм, доступный компьютерам.

Например, саму «Жизнь»: https://www.youtube.com/watch?v=xP5-iIeKXE8