Зачем и как дизайнить кодом вместо Фигмы

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

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

дизайн цифровых продуктов — это дизайн взаимодей­ствия,

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

Ну и что

Важная работа не сделана! На макетах всё вроде бы понятно, но взаимодей­ствие спроектировано на коленке — придумано в уме, показано на пальцах, а в отдельных местах вообще забыто.❿

Большая ли это проблема?

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

Ещё бывает, что из-за чрезмерного фокуса на макетах дизайн оказывается перегруженным. Например, клиенту или команде не заходит минимализм, хочется от дизайна аутентичности и какого-то кайфа, и этот «кайф» просто дорисовывается — вместо того, чтобы проявляться во взаимодействии.

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

И что же делать

Брать и мастерить продукт.

Конечно, не всё так просто. Есть сложные интерфейсы, вроде интернет-банков или картографических сервисов. В них важность взаимодействия и неважность макетов и так для всех очевидны. Но «мастерить» такие продукты — сложная наука. Нужны кроссфункциональные команды, способные работать в тесной связке: начинать хоть с бэкенда, хоть с фронта, макеты рисовать, но не слишком подробно, делать конфиги и прокидывать токены для десятков свойств, мокать данные, работать одновременно всем вместе. Мой курс — не об этом.❿

А есть простые странички с текстом и картинками. Для них — сюрприз! — дизайн взаимодействия тоже важен. Потому что даже простую страничку читатель не наблюдает пассивно, а скроллит, разглядывает частями через окно браузера, тыкает в навигацию, взаимодействует с элементами. Поэтому важно, как она себя ведёт, какая она на ощупь.

Простую страничку мастерить несложно: открываем редактор и пишем код. Но нужно знать кое-какие основы.

Мой курс как раз об этом:

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