Why and how to design with code instead of Figma
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:
— Okay, you don’t need it.
— Welcome! (You’re getting it right)
— Yeah. But we don’t have JS. Maybe Setka would be a good fit.
Курс ведёт Женя Арутюнов — дизайнер, арт-директор, менеджер проектов, автор книги «Сложный дизайнер». Женя пишет дизайнерский код с восьми лет, всю жизнь примерно на одном уровне; не умеет работать в Фигме, потому что дизайнит только кодом; задизайнил кодом без единого макетика вот этот сайт; и этот; и вот на котором мы сейчас.
Курс адресован в первую очередь дизайнерам, как первый шаг для погружения в веб-разработку. Также может пригодиться редакторам, предпринимателям, менеджерам и всем, кому любопытно.
Часть 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 уроков |
Ответы на частые вопросы и ссылки по теме каждого урока | Ответы на частые вопросы и ссылки по теме каждого урока |
Телеграм-чат для уточняющих вопросов, безлимитный | |
Статья «Как перейти от дизайна кодом к вёрстке, которая нормально работает у всех (а значит её можно делать за деньги и публиковать в интернете)» | |