Дизайн

Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для 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-дизайнер, я долго искал закономерности между успешными интерфейсами и их визуальными характеристиками. Оказалось, что лучшие работы часто содержат паттерны с определённым уровнем сложности — тем самым "золотым сечением" фрактального мира.

Почему мозг любит деревья, а пользователи — простые интерфейсы

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

Для дизайнеров, разработчиков и всех, кто хочет сделать интерфейсы естественными и удобными.

Моему ТГ-каналу про веб-дизайн из нейронок уже больше двух лет.

И я запустил челлендж для себя и всех желающих дизайнеров :-)

Захотелось рассказать про один из своих старых концептов. Уже можно, NDA закончилось.
На 2023 год задачка была и правда не тривиальной.

А еще, визуально закрепить, что идея не обязана выглядеть как вылизанный проект на Dribbble.

В «GIMP: изменение размера изображения с соблюдением правил RIS» был рассмотрен рецепт масштабирования изображений с устранением «дефекта» (размытия смешением цветов). Но в основном дело приходится иметь с изображениями, полученными из сети. То есть изображения получаем «как есть». Они могут быть многократно масштабированы каким то образом и без соблюдения каких то правил.

Можно ли использовать ту же концепцию, что заложена в RIS, для постфильтрации изображения?

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

А как «угадать» то характеристики?

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

Для угадывания масштабного фактора могла бы помочь утилита resdet. Но её сборок под Windows я не видел, а альтернатив не знаю. Возможно существуют онлайн сервисы для определения/оценки исходных размеров масштабированных изображений.

Реализация?

Чтобы не производить муторные однотипные операции к скрипту «resize‑ris.scm» был добавлен скрипт «ris‑undefect.scm» в последнем релизе «gimp‑plugin‑resize‑ris 0.20 250 518». После копирования данного файла в папку со скриптами GIMP, в меню «Изображения» → «Преобразования» рядом с пунктом «Resize RIS» появится пункт «RIS undefect».

Для тестирования будем традиционно использовать изображение «Лена».

Текстовая инверсия (Textual Inversion) – это метод, который позволяет добавлять новые объекты или стили к имеющейся у нас модели. Файлы текстовой инверсии с объектами обычно имеют небольшой размер с расширением .pt или .safetensors. По сути, эти файлы являются дополнительными модулями для Stable Diffusion WebUI Forge и используемой нами модели FLUX.1 (например, flux1-dev-bnb-nf4-v2.safetensors), которые отображаются на закладке Txt2img / Textual Inversion.

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

В прошлом году мы объявили до добавлении в наше приложение для работы с изображениями фотографий с HDR, или «High Dynamic Range». Большинство пользователей это порадовало, кого-то сбило с толку, а некоторые проявили откровенное беспокойство. Это связано с тем, что HDR может означать два разных, хотя и близких, понятия.

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

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

Начнём с того, что при создании версии схемы на иностранном языке не совсем корректно говорить о переводе. Перевод подразумевает замену слов одного языка на другой с сохранением смысла. Но карты и, в частности, транспортные схемы., полностью никогда не переводятся. Основная задача карт — упрощение навигации. Перевод топологических имен, например, таких как Красносельская, Сокольники или Новослободская задачу навигации никак не упрощает, а только усложняет. Поэтому для названий большинства объектов используют транслитерацию или транскрибация — запись слов с использованием символов другого алфавита для точной передачи звучания слова (без передачи значения). Помимо замены подписей есть ряд вопросов с адаптацией условных обозначений и графических элементов, о которых мы тоже поговорим. Таким образом, создание схемы на иностранном языке — это не просто перевод всех текстовых строк на иностранный язык, а задача, скорее, промышленного дизайна по выбору наиболее удобных форм представления различных видов информации с целью упрощения навигации.

У нас есть внутренний плагин для Фигмы, который проверяет макеты на соответствие техническим параметрам. За несколько лет он сэкономили нашим дизайнерам много сил, а компании — денег.

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