Веб-дизайн *

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

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

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

Привет друзья! Меня зовут Тима, я дизайнер в дизайн-системе Альфа-Бизнес.  Когда в крупном финтех-продукте заходит речь об обновлении иконок, со стороны это кажется легкой творческой задачей на пару недель: сел, порисовал в Figma, выгрузил — готово. Но в реальности бигтеха любая попытка просто «освежить визуал» моментально сталкивается с суровой инфраструктурой, сотнями легаси-компонентов и хаосом, который годами копился в коде и макетах.

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

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

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

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

Привет, меня зовут Николай Разумовский, я дизайнер в команде цифровой трансформации Ареал. Как дизайнер я регулярно сталкиваюсь с задачей: нужно быстро получить уникальные изображения для интернет-магазинов, корпоративных сайтов, лендингов и презентаций. Если опираться только на стоки, процесс затягивается, а визуально проекты становятся похожими друг на друга.

Генерация через нейросети решает сразу несколько задач:

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

Смотреть на это спокойно я не мог — и не из брезгливости. Я видел, сколько это стоит. Нарисовал флоу KYC один раз — иди рисуй его ещё семь, и каждый раз почти с нуля, потому что переиспользовать нечего. Вот где горело время.

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

Не совсем пятничное чтиво, но…

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

Кажется, что в ИИ чатах интерфейс довольно вторичен: ты пишешь, модель тебе отвечает, особо больше ничего и не надо (если модель отвечает хорошо). Но интерфейс очень влияет на то, насколько правильное решение вы примете, и насколько легко будет найти ошибку модели. Я собрала несколько научных исследований, которые могут пригодится тем, кто делает ИИ фичи в своих продуктах.

Разработали promo-проект ALIKOR PREMIUM, который объединит премиальные коллекции бренда в одном цифровом пространстве.

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

Что я испытывал раньше при получении правок:

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

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

Проведём небольшой тест. Откройте свой сайт и посмотрите на него глазами не живого пользователя, а ИИ-агента.

Не на красивую кнопку «Записаться». А на то, что получает ChatGPT или браузерный агент, когда ваш клиент просит его: «запиши меня на стрижку вот в эту студию». Чаще всего там каша из HTML. Смысл спрятан в вёрстке, кнопка нарисована картинкой, а цену подгружает скрипт через пару секунд после открытия.

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

Вот это и есть Agent Experience — опыт, который ваш продукт даёт ИИ-агенту.

Я написал статью на Хабре и опубликовал в открытый доступ свою дизайн-систему. Многие сказали, что было бы круто получить ещё и инструкцию к ней. Вот я и решил написать статью о том, как вообще пользоваться дизайн-системами или UI-китами.

Также, в статье есть небольшой запрос на обратную связь от читателей

Несколько лет, я экспериментирую с генераторами картинок. Меня интересует один вопрос: можно ли из нейронок получить приемлемые концепт-дизайны сайтов,приложений, интерфейсов? Не с точки зрения кода, а хотя бы лэйаутов, цветовых схем и баланса текста/графики.

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

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

Практически в каждой свой статье, в которой прямо или косвенно идёт речь о важности соблюдения Закона о персональных данных, я упоминаю риск получения административного штрафа по ст. 13.11 КоАП РФ. Теперь давайте поговорим не про «очередные страшилки для бизнеса», а про реальную судебную практику.

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

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

Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять.

1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт»

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

Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

Делюсь большой крутой дизайн-системой, которую мы используем на реальных проектах.🎨

Изначально в своей студии веб-дизайна я сам отрисовывал сайты. Поскольку я не считаю себя альтернативно одарённым человеком, быстро пришёл к выводу: нет смысла каждый раз рисовать одни и те же элементы. Кнопки, поля ввода, табы, аккордеоны – это из раза в раз повторяется, не особо нуждается в уникальности, но жрёт уйму времени.

Заготовил не только UI-kit, но и библиотеку с UX-логикой, анимациями и шаблон интернет-магазина.

Если вы из тех владельцев сайтов / интернет-сервисов, которые:
• взяли образец пользовательского соглашения из интернета 
• разработали пользовательское соглашение самостоятельно без привлечения юриста
• считаете, что публикация пользовательского соглашения на сайте – это формальность
то этот материал точно для вас!

Благодаря ему вы сможете:
01 понять, в каких случаях нужно использовать пользовательское соглашение, а в каких иной документ
02 понять реальную цель и ценность данного документа
03 проверить, насколько хорош ваш документ с юридической точки зрения и требуется ли его замена / доработка.

Несколько лет назад я стал соавтором курса по UX/UI-дизайну и записал для него модуль про анимацию интерфейсов. Я давно занимаюсь обучением своей команды дизайнеров, но видеоуроки готовил впервые и не знал, как технически устроено производство онлайн-курса.

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