Дизайн

Рад приветствовать тебя,%username%. В этой статье я поделюсь тем, как создать вращающуюся ручку (в зарубежной литературе именуемой Knob). Далее по тексту я её буду называть «кноб». Перейдём к сути вопроса.

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

Когда‑то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тоот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

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

Привет, Хабр! Это Андрей, продуктовый дизайнер Garage Eight, и мой традиционный дизайн-дайджест под конец уходящего месяца. 

В этот раз у нас 8 новостей:
1. Config 2025
2. Дизайн к 50-летию Microsoft
3. Expressive — обновление дизайн-системы Material Design от Google
4. Обновленное мобильное приложение Airbnb
5. Масштабное обновление брендинга корпорации Amazon
6. Новый значок Гугла
7. Дизайн-студия того самого Джонни Айва
8. Codex — продвинутый ассистент для написания кода от OpenAI

Привет! Мы UX-исследователи из Контура Серёжа и Маша. Этот текст — первый в серии о методах статистического анализа. 

Представьте себе ситуацию: вы замерили удовлетворенность пользователей и получили среднюю оценку в 6.5 баллов из 10. Затем вы упорно и долго работали всей командой над тем, чтобы эту оценку повысить. Через полгода вы с надеждой повторяете опрос и получаете… 6 баллов. Бизнес-начальник врывается к вам в кабинет и начинает ругаться: «Как же так?! Весь год работали, а удовлетворенность упала!».

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

Как выйти на международный рынок в 2025 году и начать зарабатывать в валюте.

Этим гайдом я хочу поставить точку в вопросе, который мне задают с завидной регулярностью: как найти зарубежную удалёнку дизайнеру из СНГ. Без воды, максимально честно и информативно.

Меня зовут Артём Говердовский, я дизайн-директор Домклик Сбера. Год назад я выпустил статью «Шаг за шагом: как добиться синхронности в дизайн-команде за 9 месяцев», где описал структуру нашего отдела, ключевые направления работы и процессы, которые мы выстроили. С тех пор команда и доверие к нам только растут, а значит, пора двигаться дальше. Сейчас мы фокусируемся на стратегических задачах: прокачиваем не только дизайн, но и влияние на продукт в целом. В этой статье подведём итоги 2024 года, расскажем о новых целях и планах, а также о ключевых инициативах, которые мы запускаем. Среди них:

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

Влияние на продукт: через анализ метрик дизайн-системы и единый Look & Feel продукта во всех точках контакта с пользователем.

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

Material 3 Expressive – обновление дизайна ОС Android, после которого он выйдет на новый уровень или всего лишь очередные концепты для Behance и Dribbble?

Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.

Я начала копать дальше и выяснила, что с эффектом обманутого ожидания мы регулярно сталкиваемся в психологической плоскости. Например, рассчитываем на что‑то одно, а потом видим реальность, и вот — наши ожидания не оправдались. Так случается, когда трейлер фильма или сериала обещает захватывающий сюжет и яркие сцены, а сам фильм оказывается скучным или неинтересным. Вы покупаете новый гаджет или одежду, основываясь на ярких рекламных материалах и отзывах, но получаете продукт низкого качества, это вызывает разочарование. И это уже что‑то негативное. А как насчет термина «эффект обманутого ожидания» в дизайне?

Негативный эффект обманутого ожидания в UX/UI дизайне

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

Предлагаю начать с негативной стороны эффекта и рассмотреть ситуации, в которых у пользователя появляется раздражение от невозможности достичь своей цели и возникают вопросы «А что дальше?», «Как получить ожидаемый результат?».

Генеалогическое древо — один из самых древних и устойчивых способов визуализации информации. Сначала — как символическое выражение божественного или королевского происхождения, позже — как аналитический инструмент для науки, политики, биологии, даже искусства. Дерево стало универсальной метафорой: и кровного родства, и интеллектуальной преемственности, и эволюции жизни.

Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.

Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).

Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.

Меня AI не пугает. Серьёзно. Пока кто-то паниковал и пересматривал «Her», я просто ковырялся в GPT и думал: «А как бы тебя пристрастить к написанию документации на меня?» Любопытство — штука коварная. Оно сначала просто задаёт вопросы, а потом вдруг выясняется, что ты уже все время работаете в паре с нейросетью. Ну и неплохо, надо сказать, работаете.

или как подсмотреть лучшее у мира и сделать свой продукт сильнее

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

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

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

Привет, Хабр. Я Илья Сластен, продуктовый дизайнер интерактивной карты ПГК Диджитал. Ранее в своих статьях я рассказывал о ключевых аспектах работы с локальными переменными в Figma и подход Atomic Design и о минимализме в дизайне. Сегодня поговорим о нейминге.

Когда создаешь дизайн-систему, кажется, что главное — создать компоненты, настроить сетки, собрать библиотеку в Figma. Но на деле одна из самых сложных частей — это разобраться с токенами: как их называть, как их организовать, и как всё это выстроить так, чтобы было удобно и дизайнерам, и разработчикам. Без этого система быстро превращается в кашу.

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

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

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

Таблица для цеха отличается от обычной таблицы. Очень сильно:

— «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика.

— Освещение в цехах адаптировано под специфику задач— почти всегда нужна ночная тема.

— Минимум цветов, новый цвет — только привлечь внимание к реально критичной вещи.

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

Есть ещё много принципов, когда вы начинаете делать интерфейс для цеха, и примерно половину нам подсказали сами же заводчане. Мы с командой детально изучали, как работают с таблицами их пользователи в производственных условиях, с какими проблемами они сталкиваются. Ходили в цеха, спрашивали на местах, как они это всё смотрят, что делают, что им удобно, что неудобно.

Cтандартные подходы не всегда решали эти задачи.

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

Применение простых, не зависящих от версии GIMP, или установленных плагинов средств для понижения шума типа "Соль и перец" без повреждения важных контуров.

🍹 А вот и результаты второго челленджа )

Дизайн приложения с рецептами коктейлей по концепту нейронки.

Вам когда-нибудь хотелось, чтобы можно было написать простой CSS для объявления цвета, после чего браузер сам бы определял, чёрный или белый должен сочетаться с этим цветом? Теперь это возможно благодаря contrast-color(). В статье мы объясним, как это работает.

Представьте, что вы разрабатываете веб-сайт или веб-приложение, и в дизайне требуется куча кнопок с разными цветами фона. Для обработки цвета фона можно создать переменную --button-color, а затем присваивать ей разные значения.

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

Магия «правильных» паттернов

Представьте: пользователь заходит в приложение и мгновенно чувствует — здесь всё "на своих местах". Никакого визуального шума, только приятное ощущение порядка. Секрет такого эффекта может крыться во фракталах с размерностью D 1.3–1.7.

Как практикующий UX/UI-дизайнер, я долго искал закономерности между успешными интерфейсами и их визуальными характеристиками. Оказалось, что лучшие работы часто содержат паттерны с определённым уровнем сложности — тем самым "золотым сечением" фрактального мира.