UX/UI [by Uprock]

Текст-невидимка, от которого зависит судьба вашего интерфейса🫥 Мы привыкли судить об интерфейсе по картинке: красивые кнопки, удобные формы, стильные иконки. Но непонятная подпись на кнопке или слишком сухое уведомление могут разрушить даже самый гениальный дизайн. И наоборот — точная фраза способна спасти даже неудачный визуал. Этот "невидимый" текст, который сопровождает пользователя повсюду (от подсказок в полях до сообщений об ошибках) называется микрокопией. В новой статье разбираем, как работать с этим, на первый взгляд, крошечным по объему, но супер-мощным по влиянию инструментом👇

➡️ Читать лонгрид: "Микрокопия в интерфейсах".

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

💬 В статье "Как визуализировать состояния системы" расставим все точки над "и".

Как убедить пользователя подписаться на рассылку? 📩 Что вы сделаете, увидев "Подпишитесь и получайте новости первыми!"? Правильно, начнете искать иконку с крестиком, чтобы поскорее закрыть этот попап. Почему так происходит? Потому что пользователю не объяснили ценность. В погоне за базой email-адресов компании часто забывают о здравом смысле и начинают давить на пользователя. Но как сделать форму подписки, которая не бесит, а помогает?👇

➡️ Разбираем в новом лонгриде: "Форма подписки на рассылку: как привлечь пользователя".

Секретное оружие вашего дизайна🤫 Попробуйте вспомнить шрифт на кнопке "Купить" или в меню сайтов, которые вы открываете каждый день. Сложно, правда? Мы не замечаем хорошую типографику, но именно она управляет нашим восприятием информации. Шрифты помогают передать индивидуальность бренда и повысить читабельность. Многие новички используют стандартные Arial или Times New Roman, потому что так безопаснее. И в итоге их сайты выглядят так же, как тысячи других. Как этого не допустить?👇

➡️ Читайте в новой статье: "24 лучших шрифта для веб-сайтов. Подборка от Figma".

Вечная классика: почему ар-деко снова в моде? 💎 Роскошь, элегантность и геометрия — синонимы ар-деко. Стиль, который родился в начале XX века, но до сих пор диктует правила в интерьерах, графике и веб-дизайне. Насыщенные цвета, симметрия и дорогие материалы — его визитная карточка. Как использовать принципы ар-деко в своих проектах, чтобы они выглядели дорого и современно?👇

↗️ Узнаете в новом лонгриде: "Ар-деко в дизайне".

Красиво ≠ Правдиво 📊 Мы живем в мире, где информации больше, чем когда-либо, но доверия к ней все меньше. И часто виноваты в этом дизайнеры. Когда мы выбираем "красивую картинку" вместо точности, визуализация превращается в инструмент манипуляции. Как не стать тем самым дизайнером, чьи работы вводят в заблуждение? Разбираем типичные ошибки и правила честной визуализации в новой статье👇

👉 Читать статью: "Цифры не должны обманывать: обзор типичных ошибок при визуализации данных".

Красивый интерфейс ≠ удобный интерфейс🙅‍♂️ Мы все на это попадались: сайт выглядит как произведение искусства, эффектные анимации, красивая типографика, а потом 5 минут ищешь кнопку оформления заказа. Красивый визуал продаёт первое впечатление. Но удерживает пользователя на сайте совсем другое👇👇

➡️ Читайте в новом лонгриде: "Почему «красивый» UI-дизайн может быть плохим и не наступайте на грабли, которые уже прошли другие".

Завтра в 19:00 МСК собираемся на вебинаре по вайбкодингу Соберем сайт (прикрепили пример выше☝️) без опыта работы с кодом — только Claude Code и правильные задачи для нейросети. В прямом эфире пройдем весь процесс от идеи до публикации вместе с Евгением 👋 и Артемом 👋 (продуктовый дизайнер, 6+ лет в Альфа-банке). Разберем:

• как использовать Claude Code для верстки и топовых анимаций • что такое «скиллы» и как они упрощают работу с нейросетями • как выстроить работающую связку Figma → Claude Code • что учитывать в макете для быстрой публикации в вебе • и с чего начинать дизайнеру, который только слышал о вайбкодинге.

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

И сайт красивый, и анимации эффектные, но люди уходят. Почему так происходит? ❓ Потому что красиво — не значит понятно. Пользователь заходит и не понимает: куда смотреть и где нажать, чтобы быстро получить то, за чем пришел. Мозгу нужно всего пару секунд на расшифровку, и если за это время не успел разобраться, то просто покидает сайт. Если так происходит, значит вы нарушили законы визуальной иерархии. Это не вкусовщина и не мимолетный тренд, а психология восприятия. Поэтому знать их должен каждый дизайнер.

👉 Читать статью: "Основы дизайна: руководство по визуальной иерархии (с инфографикой)".

Как потерять пользователя раз и навсегда🙅‍♂️ Коллеги, а вы сталкивались с приложениями, где кнопку "Отписаться" возможно найти только через поддержку? Или нажимаешь "Попробовать бесплатно", а через пару дней списание. Оказывается, галочка "Продлить автоматически" стояла по умолчанию. Это не ошибка и не случайность. Это манипулятивный дизайн — когда интерфейс намеренно подталкивает человека к действиям, которые ему не выгодны. Тёмные паттерны работают в краткосроке: конверсия и метрики растут. Но в долгую — это медленная смерть продукта. Пользователь не жалуется, он просто уходит навсегда. Как этого не допустить?👇

➡️ Узнаете в новом лонгриде "Манипулятивный дизайн".

🔵Сегодня в 19:00 мск встречаемся на бесплатном вебинаре по Claude Code Будем разбираться, как дизайнеру собирать сайты в Claude Code без полноценного погружения во фронтенд. Подробно рассмотрим на практике, как устроены такие сайты, как грамотно составлять задачу для Claude и создавать сложные эффекты и анимации. Отдельно разберем, что важно понимать самому, а что можно делегировать нейронке. Покажу не просто возможности инструмента, а сам процесс работы. Если давно хотели разобраться, как это работает, то самое время подключиться. ⏰ Уже сегодня в 19:00 по МСК 🤠 Зарегистрироваться на вебинар

⚙ Как собирать сайты в Claude Code Совсем недавно для создания сайта со сложными анимациями и эффектами нельзя было обойтись без разработчика. Сейчас все стало гораздо проще: дизайнеру уже не обязательно осваивать фронтенд целиком. Достаточно разобраться, как работать с Claude Code, и можно самостоятельно собирать и верстать такие проекты. 🔵 17 сентября в 19:00 по МСК проведу открытый вебинар и покажу вам на практике, как это работает в Claude Code.

Что разберем: 🔵как устроены такие сайты внутри; 🔵как правильно ставить задачи Claude Code; 🔵как собирать сложные анимации и визуальные эффекты; 🔵как двигаться от идеи к готовому проекту шаг за шагом.

Мы не будем уходить в сложную разработку и терминологию. Разберем сам процесс с точки зрения дизайнера: что нужно понимать, что можно делегировать ИИ и как контролировать результат. И это будет только первая часть цикла открытых вебинаров про создание сайтов и приложений с помощью ИИ. Дальше будем углубляться в процесс и и постепенно расширять возможности использования нейронок в ваших проектах. ➡ Зарегистрироваться на вебинар

Рецепт создания объёмной графики: 6 шагов, 0 страданий👩‍🍳 Объёмная графика придает интерфейсу глубину, выделяет CTA и повышает вовлечённость. Крупные фигурные иконки, разборные схемы, визуализации продукта — всё это объясняет пользователю быстрее и доступнее, чем текст. Но есть нюанс. Обычно за такой картинкой стоят долгие часы рутинной работы: сетки, углы, выравнивание каждой грани. Именно на этом этапе многие сдаются. Хорошая новость в том, что сегодня мы готовы поделиться способом, как создавать объемные иллюстрации гораздо проще и быстрее👇

✨ Читайте в статье: "Как освоить новое измерение: туториал по созданию изометрических иллюстраций".

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

Узнаете в новом лонгриде: "Как развивать насмотренность в UX/UI-дизайне".

Коллеги, давно у нас не было вебинаров в теплой ламповой обстановке Хочу завтра поделиться новыми методиками UPROCK и прямо по шагам рассказать, как создавать топовые сайты, которые получают награды. В конце расскажу про новый-старый курс «ULTRA UI: Завоевываем AWWWARDS». А основую часть посвящу мякотке: как создаются раскадровки анимаций, прорабатываются идеи и референсы, как строится работа с ИИ.

Разбор проведем на примере проекта студентки Марьяны (приложил к посту)

↗Все будет завтра в 19:00 по МСК, регистрация на мероприятие в этом боте Ставьте – 🤗, если тоже соскучились по нашим милым встречам

Контекстное меню: инструкция по применению 📐 Коллеги, поднимите руку, кто из вас сталкивался с ситуацией, когда клиент просил спрятать все лишнее, а потом жаловался, что пользователи не находят нужную функцию? 🙋‍♂️ Контекстное меню — это всегда компромисс. С одной стороны, оно убирает визуальный мусор и экономит клики, но… платой становится низкая информационная наглядность. Пользователь просто не видит, что за ним скрыто. Как использовать этот инструмент правильно?😂

Читай в сегодняшней статье "Проектируем контекстные меню: 10 рекомендаций".

Страница, которую часто рисуют в последнюю очередь ❌ Коллеги, давайте начистоту: когда вы начинаете проектировать сайт, раздел "Помощь" идёт где-то в конце списка задач, да? Но правда в том, что именно эта страница чаще всего определяет, вернётся пользователь или нет. Пока вы любуетесь красотой главного экрана, ваш клиент блуждает по тёмным лабиринтам FAQ и уходит к конкуренту, не находя ответа на свой вопрос. И все ваши усилия идут насмарку.

➡️ В новом лонгриде "Дизайн раздела поддержки на сайте", разбираемся, как правильно спроектировать эту страницу.

Чем меньше экран, тем больше ответственность 📲 Частая история: на большом экране макет выглядит как конфетка, а на телефоне превращается в тыкву. Особенно, когда дело касается текста. На небольших экранах каждый пиксель на счету. Выбор шрифта влияет на читаемость, настроение и даже на доверие к продукту, поэтому цена ошибки слишком высока.

➖ В статье "Мастерство мобильной типографики: советы по использованию шрифтов и лучшие практики" рассказали 5 базовых принципов: от выбора гарнитуры до расстановки символов.

Сигнал, который пользователь считывает за 0,1 секунды🟩 Мы не читаем уведомления — мы их чувствуем. За долю секунды мозг ставит диагноз: красный = кровь/огонь, зелёный = трава/безопасность. Без текста, без иконок — один только цвет. Так работает наше подсознание Поэтому, когда дело доходит до системных уведомлений, забудьте про "хочу красиво". Нужно сделать так, чтобы пользователь получил верный сигнал. Как это сделать?👇

➡️ Разбираемся в лонгриде "Как цвет системных уведомлений влияет на ощущение безопасности".