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

Онлайн-курс

14 уроков по 25 минут

Женя Арутюнов

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

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

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

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

Ну и что

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

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

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

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

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

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

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

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

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

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

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

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

14 уроков по 25 минут  ·    ⁄  

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

Кому это надо:

Зачем мне писать код, я ж дизайнер, а код пишут разработчики!

У меня всё хорошо и меня устраивает, как верстаются мои макеты

— Ок, вам не надо

Я только учусь, но хочу сразу учиться всяким прикольным фокусам!

Я просто хочу сделать свой сайт, вот ровно какой мне надо, ни на что не похожий, мой

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

— Добро пожаловать! (Вам не кажется.)

Про HTML/CSS всё понятно, мне надо выучить JS

— Да. Но здесь не будет JS. Мейби вам подойдёт Сетка

Курс ведёт Женя Арутюнов — дизайнер, арт-директор, менеджер проектов, автор книги «Сложный дизайнер». Женя пишет дизайнерский код с восьми лет, всю жизнь примерно на одном уровне; не умеет работать в Фигме, потому что дизайнит только кодом; задизайнил кодом без единого макетика вот этот сайт; и этот; и вот на котором мы сейчас.

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

Часть 1. Понимаем веб-вёрстку

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

Урок 1.

В чём смысл и кайф дизайнить кодом.

Почему это сложно, какие нужны компетенции.

Как подготовиться.

Урок 2.

Что умеет браузер сам по себе. Закидываем текст и пробуем теги.

Поток. Почему в браузере всё не как в Фотошопе.

Комментарии в коде.

Урок 3.

HTML и CSS, «содержимое» и «оформление».

Специфичность: где писать стили и какие победят при конфликте. Наследование.

Переменные.

Урок 4.

Размерности: пиксели, проценты и емы.

Как дизайнить, когда не знаешь размеры носителя.

Веб-инспектор.

Урок 5.

Первое из двух самых неочевидных CSS-свойств: position.

Урок 6.

Второе из двух самых неочевидных CSS-свойств: display.

Урок 7.

Своя дизайн-система. Обёртки. Спейсеры.

Подключение шрифта. Текстовые компоненты.

Урок 8.

Мобильная вёрстка. Принцип единого дизайна. Медиавыражения.

Часть 2. Берём и верстаем

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

Урок 9.

Создаём пустой проект, закидываем текст и картинки.

Сразу адаптируем к мобиле.

Урок 10.

Делаем скролл-навигацию.

Дизайним заголовок и плиточки (адаптируем к мобиле).

Урок 11.

Верстаем таблицу, делаем залипающий заголовок (адаптируем к мобиле).

Таблица или просто колонки.

Урок 12.

Верстаем сноску и плашку с большой важной ссылкой.

Отрицательные отступы.

Урок 13.

Принцип обратимости. Анимируем иконки при появлении на экране.

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

Урок 14.

Вставляем SVG в HTML, анимируем по ховеру навигационные карточки и векторную графику внутри иконок.

В результате получается вот такая страница.

Вы можете скачать её и рассмотреть её поближе:

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

Есть два тарифа

Без вопросовС вопросами

14 уроков

14 уроков

Ответы на частые вопросы и ссылки по теме каждого урока

Ответы на частые вопросы и ссылки по теме каждого урока

Телеграм-чат для уточняющих вопросов, безлимитный

Статья «Как перейти от дизайна кодом к вёрстке, которая нормально работает у всех (а значит её можно делать за деньги и публиковать в интернете)»

Загрузка