Why and how to design with code instead of Figma

Online course

Here's the why: to develop the product, rather than its image.

When we draw layouts (even when the smartest designers draw the most thorough layouts) we only control their appearance. The problem is

digital product design is primarily a design of user experience,

and when the design process relies on drawing pictures, the most important things end up being in the blind spot.

So what

But the main job is not done! Everything seems clear on the layout, but the interaction is half-baked: once imagined, presented with a skin-deep description, and totally at some points.

Is this a big problem?

Not always. For example, the danger may be waiting for you in project planning: it seems that the user interface was “designed and there is only a bit of layout building”, but in reality it is drawn and its convenience is only a hypothesis.

It also becomes apparent that the design turns out to be overdecorated because of the layouts-focused process. For example, when a client or a team don’t like minimalism, they want authenticity and some sort of getting high from the design, and this “high” is just added to it — instead of manifesting itself in interaction.

But the main problem is the missed opportunities. Working directly with the product you can make it much more interesting!

So what are we going to do

Go and craft the product.

Of course, not everything is a piece of cake. There are complex interfaces, namely online banking or map services. With these, the importance of user experience and the unimportance of layouts for all participants are more or less obvious, but "crafting" such products is a rocket science. You need cross-functional teams that are able to work rubbing shoulders: start with specifications and backend, engage the frontend as soon as possible, draw layouts but not in too much detail, change the design directly in product code, and do everything together at the same time. That's not what my course is

And there are plain pages with text and pictures. In this case — surprise! — interaction design is also necessary. Because even the simplest page is not just observed by the readers inactively: they scroll up and down, see the fragments of the site through the browser window, poke at the navigation, and interact with elements. It does not matter whether it has web forms, filters and all sorts of web components: in any case, the main thing is how the page behaves, what it feels to the touch. And such a page is relatively simple to craft: open the code editor and write the code. But you need to know some basics.

That's what my course all about:

  • it tells you the most important things about HTML;
  • doesn’t waste time on banal stuff that can be googled instantly;
  • is suitable for people with zero experience, but not too annoying for people with experience above zero.

14 lessons  ·    ⁄  

How to design with code instead of Figma

Who needs this:

Why write code, I’m a designer and code is a developers’ job!

I'm totally fine and always happy with what developers do to my design

— Okay, you don’t need it.

I’m just learning, but I want to know all sorts of cool tips right away!

I just want to make my own site, just the way I want it, not like anything else, just mine

I’m a product designer and I know everything about everything. Sometimes I think that things I spend hours setting up could somehow be done in a couple of minutes

— Welcome! (You’re getting it right)

I understand HTML/CSS, I need to learn JS.

— Yeah. But we don’t have JS. Maybe Setka would be a good fit.

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

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

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

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

Урок 1.

В чём смысл и кайф дизайнить кодом. Почему это сложно, какие нужны компетенции.

▶ Посмотреть

Урок 2.

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

Урок 3.

Структура документа, стилизация тегов.

CSS-пиксель и другие странности.

Урок 4.

Классы. Наследование. Специфичность. Единицы. Переменные.

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

Классы. Наследование. Специфичность.

Урок 5.

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

Урок 6.

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

Урок 7.

Единицы: пиксели, проценты и емы.

Урок 8.

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

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

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

Урок 9.

Создаём пустой проект, закидываем текст и картинки. Подключаем шрифт.

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

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

Урок 10.

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

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

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

Урок 11.

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

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

Урок 12.

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

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

Урок 13.

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

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

Урок 14.

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

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

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

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

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

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

14 уроков

14 уроков

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

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

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

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

вроде прикольно

но чё-т я сомневаюсь, надо мне или нет

я не знаю

прикольно это факт 100%

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

это делается в юкассе одной кнопкой

ещё у меня в канале есть серия постов о том, как всё это может быть связано с дизайн-системой, нейросетями и разными карьерными треками

ок

Loading