​​🏦Зачем банкам менять интерфейсы, и как это сделать, если вы тоже хотите

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

Читать...

​​🥷Как появляются дизайн-системы: рассказываем и показываем на собственном примере

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

Читать...

​​😶Без углов и стресса: Формула успешного дизайна, или как правильно скруглить внутренние углы фигур

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

Читать...

​​🎃Как сделать консистентный UX для 40+ продуктов. Уроки, которые я извлекла из перезапуска дизайн-системы

В этой статье я хочу поделиться главными уроками, которые извлекла в процессе.

Читать...

​​😬Это ужасно бесит — подборка косяков, постоянно встречающихся от сайта к сайту, от приложения к приложению

В этой статье мы рассмотрим некоторые из таких наиболее распространённых косяков.

Читать...

​​👀HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

В этой статье мы покажем, как HTML и CSS могут улучшить или ухудшить верстку.

Читать...

​​😎Роль UX/UI-дизайна в процессах автоматизации бизнеса на примере оформления ипотеки

В этой статье мы рассмотрим как можно улучшить юзабилити формы заявки на сайте с точки зрения UX/UI и автоматизации.

Читать...

Запоминайте меньше и достигайте большего с помощью логических свойств

Запомните эту новую блочную модель, и вам больше никогда не придется беспокоиться об изменении левых и правых отступов или полей для различных режимов и направлений документа. Настройте стили от физических свойств к логическим, таким как padding-inline, margin-inline, inset-inline, и теперь всю работу по настройке будет выполнять браузер.

button {
padding-inline: 2ch;
padding-block: 1ch;
}

article > p {
text-align: start;
margin-block: 2ch;
}

.something::before {
inset-inline: auto 0;
}

Поддержка браузерами:

👉 padding-inline: caniuse
👉 margin-block: caniuse
👉 inset-inline: caniuse

Как всегда удачи в экспериментах!

​​😎3 правила в веб-дизайне, которые упрощают жизнь разработчикам

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

Читать...

​​👿HTML: плохие стороны

В этой статье автор расскажет о некоторых проблемах HTML с точки зрения accessibility и usability, таких как использование атрибута multiple элемента select, недостатки элементов <i> и <datalist>, проблемы с кнопками disabled, а также несогласованность в работе нативного проигрывателя видео.

Читать...

​​🧑‍💻Пара HTTP-заголовков, о которых, похоже, не знают разработчики

В этой статье мы рассмотрим что такое HTTP-заголовки, какие их типы бывают и зачем они нужны.

Читать...

​​🎛Проектируем дизайн честного кредитного калькулятора

В этой статье рассказываем, с чего начать, какие практики упростят работу пользователя и сделают калькулятор честным.

Читать...

​​⌨Руководство по проектированию интерфейсов с Drag and Drop

В этой статье я хочу поговорить об особенностях проектирования дизайна и юзабилити интерфейсов с Drag and Drop.

Читать...

​​🤔Как оценивать задачи и подружиться с дедлайнами

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

Читать...

​​👨‍🚀Figma to Frontend: как мы автоматически синхронизируем дизайн и код

В этой статье расскажу, как мы синхронизировали треть нашей дизайн-системы за счет автоматической генерации дизайн-токенов и компонентов.

Читать...

​​🤔UX-мракобесие

В этой статье о проблеме UX-мракобесия, которая заключается в упрощенном понимании пользовательского опыта.

Читать...

​​😎Как в Figma использовать noscript в качестве заливки

В этой статье мы рассмотрим способ, как использовать noscript картинку в качестве заливки векторного объекта.

Читать...

​​🎛11 полезных фичей Chrome DevTools

В этой небольшой статье, я хочу поделиться интересными находками, которыми пользуюсь сам.

Читать...

​​👌UX/UI поисковой строки в интернет-магазине: 177 гайдлайнов

В этой статье мы разберем UX/UI строки поиска в интернет-магазине.

Читать...

​​🤔Как не утонуть продукту в куче мелких UI/UX-багов

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

Читать...

​​👤Чек-лист идеального веб-дизайна

В этой статье я поделюсь некоторыми принципами или общими правилами создания потрясающих веб-сайтов.

Читать...