Дизайн мобильных приложений *

Кормак Хэйден — владелец Oasis, приложения для iPhone и смартфонов на Android, которое публикует якобы научно обоснованные рейтинги воды и фильтров, опираясь на результаты лабораторных тестов и открытые данные. Плату берут за, как утверждается, доступ к части функций, чтобы финансировать независимые (без рекламы) анализы. На сайте проекта ведётся раздел с рейтингами бутилированной воды и фильтров, поиск по водопроводной воде по городам США, а также возможность заказать домашние тест-наборы для отправки проб в лабораторию.

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

В комментариях Хэйдену указали, что кнопка покупки на Android попросту была сломана. Кормак ответил, что локально на его машине всё работает. На самом деле ситуация ещё более смешная.

Оплата на Android в Oasis действительно сломана, это так. Однако в регионе США всё работает, указывает Хэйден. Это будет относительно легко пофиксить. Забавно именно то, что поправить уже нельзя: база данных данных Oasis крайне похожа на открытую закраудсорсенную базу данных OpenFoodFacts, а схожие же функции даёт бесплатное приложение Yuka. Кстати, Oasis по дизайну UI сильно напоминает Yuka.

Один из комментаторов даже назвал Oasis всего лишь фронтендом OpenFoodFacts. Кормак парировал, что в данных последней тяжёлых металлов и ПФАС нету и что Oasis собирает и публикует лабораторные данные, а Yuka якобы устарела, часто ошибается и не включает лабораторные измерения. Впрочем, в комментариях спросили, не заполняет ли Oasis эти значения случайными числами. Один из микроблогеров заметил, что на двух скриншотах у бренда Fiji стоит разная оценка.

На самом деле часто данные Oasis вводят в заблуждение. В комментариях к твиту нашли ошибки в выставленных предельно допустимых концентрациях: в приложении часто занижены ПДК относительно рекомендуемых властями США, и в реальности представленные количества вредных веществ представлять угрозу не могут. Зато эта дополнительная строгость к чистоте на три–четыре порядка ниже ПДК позволяет резко критиковать разные бренды за наличие в них мышьяка и тяжёлых металлов.

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

Наконец, секретом финансового успеха может быть банальный обман пользователей. Один из комментаторов указывает на тестовый период, который может запутать. Триал длится три дня, а затем начинают списывать по $4,99 в неделю. Возможно, что часть пользователей удаляет приложение и просто забывает отключить эту подписку.

Вызывает вопросы сама цена. Есть ли смысл платить по $30 ежегодной подписки за привилегию сравнивать разные бренды бутилированной воды? И вообще, заслуживает ли статуса отдельного приложения то, что может быть страницей в Интернете?

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

6 книг, которые на меня повлияли. Из 300+ прочитанных

Делюсь подборкой любимых книг. Прочитал я не мало, поэтому было не просто выбрать лучшие. Но я постарался:

Антихрупкость (Нассим Талеб)

Почему не нужно пытаться предсказывать будущее и оценивать риски. Лучше: создать антихрупкую систему, готовую ко всему.

Вспомнить все (Арнольд Шварценеггер)

Биография Арнольда – спортсмена, бизнесмена, политика и актера. Показывает, как ставить цели и добиваться результатов в разных сферах.

Размышления (Марк Аврелий)

Философские заметки римского императора. Читать не просто, но мысли заложены важные, которые помогут жить и в современном мире.

Как работать по 4 часа в неделю (Тим Феррисс)

Помогает вырваться из офисного рабства и зарабатывать не за просиженные часы, а результат работы. 

Легко не будет (Бен Хоровиц)

История создания и развития бизнеса. Не такая красивая, как бывает в биографиях, зато реалистичная – показывает, как устроен мир.

Принципы (Рэй Далио)

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

Есть еще множество другие книг, которые мне близки. В основном биографии: Стив Джобс, Илон Маск, Уилл Смит, Альберт Эйнштейн, Фил Найт, Ричард Брэнсон, Эдвард Сноуден, Говард Шульц, Уоррен Баффетт и др.

А какие книги повлияли на вас?

Вы не просили, но мы это сделали!

Вы когда-нибудь сталкивались с продуктом, который внешне работает безупречно и не вызывает нареканий у пользователей, но внутри команды становится постоянным источником стресса? Вроде все работает, жалоб нет, но столько сил уходит на поддержку, что проще переделать с нуля, чем каждый квартал латать старое. Именно такой кейс мы разобрали в статье: «развернули наизнанку» карты отделений и банкоматов, убрали баги под капотом, избавившись от устаревших паттернов и случайных доработок.

Это история не столько про дизайн, сколько про командные дискуссии, внутреннюю «магию» и вечный поиск баланса между новыми фичами и качеством старого функционала. Читайте полный бэкстейдж в статье «Редизайн, которого никто не просил, — а в итоге все довольны» на Хабре и узнайте, как на практике совершенствовать даже те продукты, которые внешне кажутся идеальными.

Почему ваш новый «гениальный» флоу вызывает тревогу в команде? Всё о психологии сопротивления изменениям — в одной статье!

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

Знакомо? Прежде чем записывать команду в ретрограды и саботажники, давайте разберёмся. То, с чем вы столкнулись — не вредность, а фундаментальный баг (или фича?) человеческой психики. Имя ему — сопротивление изменениям.

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

Надоела плоскость. Прямоугольники, которые притворяются кнопками.

Код.

Часть 2: итоги недели разработки вайбкодинга с агентами

Прошлый пост тут

1️⃣ Текущий прогресс по xsoulspace.dev привел к тому, что обнаружил что есть закономерность какие именно модели хороши для использования в проектировании layout страницы (спойлер - не записал какие 🤦‍♂️ кажется использовал Claude 4.0 thinking + Gemini 2.5 Pro).

Что попробовал сделать : нарисовал простой wireframe image -> сконвертировал в ACSII art, и затем скормил LLM для более корректного восприятия layout.

Оказалось что так проще, но относительно (за счет убирания лишних элементов проще понять что где расположено), но с другой стороны LLM все так же тяжело воспринимать layout (если он чересчур кастомный).

2️⃣обновил все flutter библиотеки, last answer, word by word, budget app до flutter 3.8 - пользовался агентами в окошках. В некоторых случаях правил руками, но в большей части работал по принципу PDSA (Plan Do Study Act), где я разрабатывал план, а агент по нему шел, потому изучал результаты и т.д.
Вывод - нужно сильнее нарабатывать промпты.

3️⃣внезапно получил спам-рассылку-письмо с возможностью потестить on device API для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:

1. Идея и этические принципы

2. Палитра и дизайн система на основе идеи и принципов

3. План работы

4. Имплементация через агентов + доп ресерчи чтобы агенты понимали какую информацию брать.

Удалось собрать прототип за 12 часов (рабочую, включая все экраны и дизайн систему). Следующий этап - буду модифицировать чтобы можно было тестировать на реальных промптах в проектах.

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

Хотелось сделать нечто среднее между игрой и обычным интерфейсом, но пока не получилось.

4️⃣Создал детальный план и начал прорабатывать новую систему сохранения данных. Для меня это оказалось большой проблемой - потому что Hive, Isar на flutter перестали поддерживаться, а другие библиотеки неудобно использовать (где-то перешел на Sembast).

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

Поэтому решил объединить все идеи и написать одну библиотеку которая будет из коробки давать синхронизацию с гитом, github и папками. Так надеюсь удастся побороть проблему долговечности и надежности хранения данных.
Пока агенты имплементировали 4 этапа из 5 (основную логику провайдеров данных), и как итог - собрал отдельное тестовое приложение (todo), чтобы протестировать работу (отдельный скриншот), понять недостатки и как можно быстрее завершить библиотеку чтобы начать интеграцию во все проекты. Это важно, потому что при одновременной интеграции сразу будет понятно что работает, а что нет, и таким образом будет проще получать feedback и развивать библиотеку качественно.

Спасибо за ваше время и хорошего дня!

p.s.:

Бумаги которые claude нашел по теме и одновременно не по теме)

• Towards Aligned Layout Generation via Diffusion Model with Aesthetic Constraints https://arxiv.org/abs/2402.04754

• CreatiLayout: Siamese Multimodal Diffusion Transformer for Creative Layout-to-Image Generation https://arxiv.org/abs/2412.03859

• Future of edge and on-device AI in gaming https://inworld.ai/blog/ml-advancements-that-will-make-on-device-ai-possible

• MobileExperts: A Dynamic Tool-Enabled Agent Team in Mobile Devices https://arxiv.org/abs/2407.03913

• From Cloud to Edge: Rethinking Generative AI for Low-Resource Design Challenges https://arxiv.org/html/2402.12702v1

• Generative Artificial Intelligence-Enabled Facility Layout Design Paradigm https://www.mdpi.com/2076-3417/15/10/5697

Как дизайнеру найти первую работу без опыта и связей

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

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

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

1. Найти подходящую компанию. Рекомендую обратить внимание на стартапы и компании, где еще нет дизайнера. Стартапы можно найти на Product Radar, а с неудобными сервисами мы сталкиваемся по жизни – им и можно предложить свои услуги.

2. Предложить свои услуги. Просто предложить свои услуги даже бесплатно – не всегда сработает, ведь не все понимают, что им нужен дизайнер. Нужно предложить улучшения интерфейса: это покажет вашу экспертизу и слабые места продукта.

3. Упаковка опыта. Не нужно ждать завершения проекта, чтобы упаковать его в портфолио. Лучше публиковать небольшие задачи сразу. Пример: доработка регистрации, улучшение личного кабинета, добавление фильтров в таблицу заказов. 

4. Параллельный поиск. Вместе с работой над проектом нужно делать по 10-20 откликов в день. Регулярно пополняемое портфолио в этом поможет. Откликаться можно на крупных площадках, как HeadHunter и LinkedIn, и более нишевых – Getmatch, каналы и чаты.

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

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

Правда ли, что пользователи фанатеют по темному режиму? Проверяем в своем приложении

Много слышал о том, что темная тема ― это тренд и чуть ли не 100% пользователей на нее переедет.

Мы решили проверить, как обстоят дела с темной темой в нашем мобильном приложении системы управления проектами YouGile. Dark mode у нас просили еще с момента запуска мобильного приложения, темная тема входила в топ-10 запросов. Проверили ― оказалось, 40% регулярно использует dark mode. 

Похоже ли это на то, что светлая тема вообще не нужна? Видимо, нет. Пользователи из России предпочитают и то, и другое ― темную тему ставит 34% пользователей (данные 2023). Опрос Android Authority показывает, что dark mode предпочитает 81% респондентов, но опросу уже пять лет и выборка там менее 3 000 человек.

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

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

А вы на какой стороне?

Несмотря на кадровый голод в IT занято огромное количество лишних людей деятельность которых в общем-то бесполезна. А все что бесполезно как известно приносит только вред. Возьмем к примеру новомодную отрасль UI/UX которая по задумке должна улучшать пользовательский опыт - так называемый "экспириенс". На планете существует целый зоопарк разных форматов дат: 1 ноября 2000, 01.11.2000 и т.д и т.п. Это мелочь, но и в мелочах можно тот самый "экспириенс" взять да и улучшить. И он был повсеместно "улучшен" до формата "3 года назад". Как правило без какой либо возможности вернуть нормальную дату.

Теперь просто хочется простереть руки к небу и крикнуть за что это мне?

Самое печальное в этой ситуации, что исправить ничего нельзя. Этот самый "экспириенс" внедряется крупными корпорациями у которых достаточно ресурса чтобы содержать огромное количество людей не занятых ни какой полезной деятельностью и было бы лучше если бы они вообще ничего не делали. Как в нейросетях лишние веса приносят только вред, так и в индустрии, лишние отрасли приносят пользователям только вред.

Пользователь сообщил, что в клиентском опроснике «Ростелекома» нельзя поставить оценку ниже 7 — кнопка «Далее» становится неактивной.

БИП-FIN - двуязычная клавиатура для быстрого и точного ввода текста одним пальцем

• Никаких AI подсказок и глупой авто коррекции, после которой запаришься исправлять.

• Никаких микроскопических кнопок в которые фиг попадёшь.

• Все кнопки находятся рядом, а не разбросаны по экрану.

• Не занимает много места - можно отображать в углу, не отъедая пол экрана.

• На таче каждая буква вводится одним простым жестом: нажал-провёл-отпустил.

• На пульте каждая буква вводится двумя нажатиями: выбор клавиатуры -> выбор символа.

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

Демка в вебе на попробовать тут. Кто готов реализовать её на Android/iOS - гоу сюда, обсудим детали.

Примитивный уровень токенов цвета

Недавно я опубликовал статью про токены цвета и обещал там написать пост про примитивный уровень токенов цвета. Вот пишу

Примитивный уровень это палитра(ядро) для всей системы. Это как бы набор красок, из которых потом будет собрана остальная система.

Формат названий токенов blue_50, где blue это цвет, а 50 – значение Lightness по HSL. Изначально создаются токены с шагом в 5 или 10 (blue_0, blue_5...), чтобы покрыть все оттенки цвета.

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

Когда такое будет полезно?

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

2. В системах с подходом от элементов (кнопка, обводка), а не групп (primary, secondary). Про это ещё будет пост

Если эти два пункта не про вас, примитивы только усложнят систему. И лучше обойтись только семантикой и компонентами (как это описано в статье)

ВК, Тема, где хотя бы спасибо, щедрым донатом на мой счет?
После моей публикации о Дизайн-дисфункции, лед тронулся и ребята из ВК обновили таки клавиатуру. Вот так и меняем мир.
Теперь сериалы стало смотреть удобнее.

Хотя, признание недуга - первый шаг к выздоровлению, обращайтесь коллеги, у меня еще будут рецепты, например от «свинства».

Такая вот непризнанная победа.

Иконки-кнопки и кнопки-иконки: как дизайнеру не совершить ошибку и не запутать окружающих

Хочу поделиться одним из хороших тонов в работе с нашими любимыми кнопками. Для кого‑то это может быть открытием, а для кого‑то устоявшейся базой. Общее здесь только одно — это успех данного подхода.

Иконки-кнопки

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

Почему иконки-кнопки — это не очень хорошо?

1. Мы искажаем формулировку

   Когда мы говорим «кнопка», мы подразумеваем объект с чёткими паттернами и функциональными требованиями. Иконка же изначально — это графический элемент, а не кликабельный объект. С таким подходом один и тот же элемент может быть как кнопкой, так и просто графикой.

2. Коммуникация

   В данном случае мы не разделяем сущности. Разделение же на «иконку» и «кнопку-иконку» упрощает общение с разработчиками. Иконка — это графика, а кнопка-иконка — кнопка с графическим элементом. Это помогает избежать путаницы, когда рядом находятся кликабельные иконки и просто графические элементы.

3. Размер контейнера

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

4. Дисбаланс

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

5. Исключения

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

Кнопки-иконки

Это всем нам привычные кнопки, которые поддерживают внутри себя атрибут в виде иконок. Кнопки только с иконками (без текста и прочего) могут быть вынесены в отдельные компоненты для удобства.

Почему кнопки-иконки — это мастхэв?

1. Чёткость формулировок

   Нет путаницы: это кнопка с функцией действия, а не просто графический элемент (иконка)

2. Упрощают коммуникацию

   На созвонах с разработчиками мы чётко понимаем, о чём идёт речь: о кнопке или о графическом элементе

3. Системные размеры контейнеров

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

4. Баланс

   Хорошо выстроенная система кнопок-иконок сбалансирована и не требует лишних усилий для выравнивания элементов

5. Ghost кнопки

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

Итого

Использование кнопок-иконок вместо иконок-кнопок предполагает:

— Упрощение коммуникации
— Соответствие логике сущностей
— Соответствие названий элементов интерфейса логике сущностей
— Понятные и простые тачзоны
— Нативная поддержка системно сбалансированных сущностей
— Есть исключение в виде icon info

А вы выносите в отдельные компоненты кнопки с иконками? Или поддерживаете кнопки с полным набором атрибутов: иконки, текст, каунтеры и другим?

Обновил Тинькофф 🟡

Рука не поднимается назвать Т‑Банк 🟨.

Выглядит теперь так, как будто ребята наконец нашли способ продвинуть экосистему. Очень понравилось логическое разделение. Деньги — Дом/Машина (быт) — Путешествия — Шопинг.

Я бы шопинг поднял повыше, по мне покупки бывают чаще, чем путешествия, но может я чего не знаю:)

Внутри каждого раздела вывели «относительно» полезные фичи. Например, у машины можно посмотреть стоимость. Выглядит как солянка из гаража Авто.Ру, сервисов Я.Навигатора и Госуслуг Авто. Мне кажется не я один устаю иметь по 10 приложений для каждого аспекта жизни и когда это пытаются (и в целом «неплохо») упаковать в одно — могу только порадоваться и пожелать удачи.

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

Ребята еще добавили внутрь соц.сеть из инвестиций, но это я уже не оценил, всегда есть риск кринжануть как Озон со своими «моментами».

Если хотите поставить и потыкать, напишите в чат с поддержкой — «Установить приложение банка через учетную запись Apple ID» и бот пришлет вам инструкцию.

Больше постов пишу в тг - https://t.me/nezgovorw

Если вы искали ответ на вопрос «Сколько людей пользуется темной темой?», то вот он, рассказываю. 

На примере букмекерского продукта, в мобильном приложении больше 40% пользователей видят темную тему, когда заходят в приложении. Это может быть как системная настройка переключения темы на устройстве (таких кстати ~85% пользователей), так и вручную переключились и сидят только на темной. 

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

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

Привет, Хабр! 👋 Сегодня говорим про

WCAG и подбор цветов: когда можно сделать исключения и как это влияет на доступность проекта

При проектировании интерфейсов важно учитывать доступность (a11y) и следовать Web Content Accessibility Guidelines (WCAG). Однако иногда возникают ситуации, когда строгие требования контрастности могут мешать эстетике или логике интерфейса. Сегодня разберём, когда можно делать исключения и как это влияет на UX.

Как WCAG регулирует цвет и контраст

WCAG (Web Content Accessibility Guidelines) — набор рекомендаций, который делает цифровые продукты доступными для людей с ограничениями зрения. Основные требования:

✅ Минимальный контраст текста к фону: 4.5:1 для обычного текста и 3:1 для крупного (AAA — 7:1 и 4.5:1 соответственно).

✅ Элементы интерфейса должны иметь контраст 3:1 относительно фона.

✅ Информация не должна передаваться только через цвет (например, ошибки должны сопровождаться иконкой или текстом).

Но есть ситуации, когда эти правила можно гибко адаптировать.

Когда можно отступить от строгих требований?

1. Дизайн под слабовидящих пользователей Если аудитория вашего продукта — пользователи с нарушениями зрения, они часто используют персонализированные настройки контраста и цвета. В таком случае важно дать им возможность адаптировать интерфейс (например, смена темы, поддержка high contrast mode в OS).

2. Декоративные элементы Если текст является неинтерактивным и несёт лишь декоративную нагрузку, требования к контрасту могут быть мягче. Например, логотипы брендов или фоновые иллюстрации не обязаны соответствовать 4.5:1.

3. Темные интерфейсы (Dark Mode) В тёмных темах контрастность воспринимается иначе. Чрезмерный контраст (белый текст на чёрном фоне) может быть утомительным. В таких случаях допускается снижение контраста для улучшения читабельности.

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

5. Игровые и мультимедийные продукты Если цвет является частью художественного замысла (например, в видеоиграх или анимации), строгий контраст может испортить атмосферу. Но в таких случаях лучше давать альтернативные режимы или настраиваемую палитру.

Как сделать интерфейс доступным даже при отклонениях от WCAG

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

🎨 Тестируйте цвета на симуляторах дальтонизма — инструменты вроде Stark или встроенные в Figma помогают оценить восприятие цветов разными группами пользователей.

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

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

Итоги

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

Где почитать:
Самый полный гайд по контрастности интерфейсов от DSGNERS
Про инклюзивность и доступность от AGIMA на Хабре
Руководство по доступности контента от WCAG

До связи 🤝

Привет, Хабр! 👋

Сегодня обсудим:

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

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

Почему правильные названия классов важны?

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

Правильное именование классов:

Быстро передаёт логику интерфейса от дизайна к коду.
Упрощает поиск и правки элементов.
Ускоряет работу всей команды.

Как закладывать названия классов в Figma?

1. Осмысленно именуйте слои

Избавьтесь от названий вроде Rectangle 57. Используйте понятные иерархические названия, отражающие суть элемента:

button/primary вместо Rectangle 3.

card/header вместо Frame 7.

Используйте иерархию через /:

form/input — поле формы.

menu/item, menu/icon — структура меню.

2. Смысл важнее внешнего вида

Названия должны описывать функциональность элемента, а не его внешний вид:

❌ red-button, big-header.

✅ button/primary, header/main.

3. Группируйте элементы в компоненты

Например, карточка:

card/container — внешний фрейм.
card/header — заголовок.
card/description — текст.

4. Добавляйте комментарии

Если элемент сложный, подпишите его в Figma:

У слоя button/primary напишите: «Класс button--primary».

Как формировать названия классов в HTML?

1. Используйте методологию BEM

Методология BEM (Block Element Modifier) позволяет структурировать классы:

Блок — независимый элемент (button, card).
Элемент — часть блока (card__title, button__icon).
Модификатор — состояние или вариация (button--primary, button--disabled).

Пример:

<div class="card">
  <h3 class="card__title">Заголовок</h3>
  <p class="card__description">Описание</p>
  <button class="button button--primary">Подробнее</button>
</div>

2. Не перегружайте классы визуальными характеристиками

❌ card-blue-border.

✅ card--highlighted (если это акцентная карточка).

3. Сократите вложенность

Чем проще структура, тем легче её поддерживать.
Плохой пример:

<div class="container">
  <div class="card">
    <div class="card__header">
      <h3 class="card__title">Заголовок</h3>
    </div>
  </div>
</div>

Лучше так:

<div class="card">
  <h3 class="card__title">Заголовок</h3>
</div>

Практический пример: кнопки

В макете есть три вида кнопок: основная, второстепенная и отключённая.

В Figma:

button/primary.

button/secondary.

button/disabled.

В HTML:

<button class="button button--primary">Купить</button>
<button class="button button--secondary">Подробнее</button>
<button class="button button--disabled" disabled>Недоступно</button>

Если названия в Figma понятные, разработчик легко перенесёт их в HTML.

Частые ошибки

1. Слои без имён
   Rectangle 47 или Frame 8 только замедляют работу.

2. Визуальные характеристики в названиях
   Названия вроде red-button или big-header усложняют масштабирование проекта.

3. Сложные иерархии
   Чрезмерная вложенность в макете или коде создаёт путаницу.

Мини-чеклист для дизайнера

1. Осмысленно и структурировано именуйте слои в Figma.

2. Избегайте визуальных характеристик в названиях.

3. Используйте иерархию через / для группировки элементов.

4. Добавляйте подсказки для разработчиков.

5. Согласуйте с командой принципы именования до старта.

Итоги

Грамотно продуманные названия классов и слоёв:

Упрощают связь между дизайном и кодом.
Экономят время команды.
Делают проект удобным для доработок и масштабирования.

Закладывайте структуру на этапе дизайна, и работа станет проще для всех. 🚀

Где почитать:
BEM для дизайнеров от DSGNERS
Подробно на Хабре про взаимодействие дизайнеров и разработчиков от PIXONIC
Про нейминг слоев от Павла Пономаренко

До связи 🤝

Привет, Хабр! 👋 Сегодня говорим про

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

Что такое дизайн-токены?

Дизайн-токены — это стандарт для передачи визуальных свойств (цвета, отступы, размеры, радиусы и т.д.) от дизайнера к разработчику. Они служат фундаментом для построения масштабируемых и согласованных интерфейсов.

Разделяются на:

Базовые — это минимальные элементы (цвета, отступы, шрифты). Например:

color-primary: #FF5722;   
spacing-base: 8px;   
font-size-base: 14px;  

Сложные — они зависят от базовых и описывают конкретные элементы интерфейса (кнопки, карточки, модальные окна). Например:

button-primary-bg: color-primary;
button-primary-padding: spacing-base * 2;  

Почему важно настраивать зависимости?

Представьте, что вы меняете один базовый токен, например, брендовый цвет. Если сложные токены связаны с базовым, изменения автоматически распространятся на все связанные элементы интерфейса. Это:

🚀 Ускоряет внесение правок.

⚖️ Гарантирует консистентность.

📈 Облегчает масштабирование.

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

Как настроить зависимости между токенами?

1. Начните с базы

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

Пример:

color-primary: #FF5722; 
color-secondary: #2196F3; 
spacing-base: 8px; 
font-size-base: 14px; 
radius-base: 4px;

2. Используйте базовые токены в сложных

При работе с компонентами используйте базовые токены как основу для сложных. Это создаёт гибкую систему, где каждый компонент "наследует" свойства от базовых переменных.

Пример:

button-primary-bg: color-primary;
button-primary-text-color: #FFFFFF;
button-primary-padding: spacing-base * 2;
card-border-radius: radius-base;

3. Структурируйте токены по уровням

Для больших проектов важно организовать токены в логичные группы:

Базовые токены: цвета, размеры, отступы.
Токены компонентов: кнопки, карточки, поля ввода.
Токены состояний: ховер, фокус, отключённые элементы.

Пример структуры:

// Базовые токены 
color-primary: #FF5722; 
color-primary-hover: darken(color-primary, 10%); 
spacing-base: 8px;
// Кнопки 
button-primary-bg: color-primary; 
button-primary-hover-bg: color-primary-hover; 
button-primary-padding: spacing-base * 2;

4. Автоматизируйте процесс

Для упрощения работы с токенами и синхронизации между дизайном и разработкой используйте инструменты:

Figma Tokens — плагин для создания токенов в Figma.
Style Dictionary — инструмент для генерации токенов в разных форматах (CSS, SCSS, JSON).

5. Тестируйте на реальных кейсах

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

Частые ошибки при работе с токенами

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

Отсутствие связи между токенами
Избегайте "хардкода". Например, вместо #000000 используйте базовый токен color-primary.

Игнорирование инструментов
Попытки вручную управлять токенами в большом проекте только усложняют процесс.

Что мы получим, если сделаем всё правильно?

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

Где почитать:
Простыми словами про токены на Хабре
Ультимативный гайд по дизайн-токенам на Хабре от Usetech
Про взаимодействие дизайнеров и инженеров при работе с токенами на DevMaster

До встречи, Хабр!