UX/UI [by Uprock]

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

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

Бесплатный интенсив: коммерческая 3D-графика в нейросетях 🔥 В Utopy.ai стартует серия интенсивов для дизайнеров и всех, кто хочет лучше разобраться в нейросетях. Уже сегодня в 19:00 МСК начинается бесплатный интенсив по созданию коммерческой 3D-графики. Пошагово разберем весь процесс: от идеи и построения сцены до работы со светом, фонами, текстурами и ракурсами. Также расскажем, как анимировать готовую графику. Что вас ждет: ✦ Теория и пошаговый алгоритм создания объемных объектов; ✦ Инструменты для генерации 3D; ✦ Полезные приемы и промпты; ✦ Практические задания; ✦ Разбор работ участников; ✦ Бесплатные токены Utopy.ai; ✦ Розыгрыш призов. ➡ Регистрируйтесь по ссылке

Почему чем больше разных работ в вашем портфолио, тем лучше?🤔 На старте многие грешат тем, что показывают только то, что у них лучше всего получается. Но сильное портфолио — это то, которое доказывает, что справитесь с любой задачей, даже если она выходит за рамки вашей зоны комфорта. Чем ранообразнее ваши проекты, тем быстрее клиент поймет, что вы не заложник одного удачного проекта, а настоящий профессионал. Но и это еще не все👇

1️⃣ На старте карьеры важно иметь разноплановое портфолио. Вы попробуете больше разных направлений и выберете то, что вам нужно. 2️⃣ У вас появится более глубокое понимание проектов. И, что важно, вы заметите общие закономерности в проектной деятельности разных задач (алгоритм, анализ, обоснования и т. д.). 3️⃣ Плюс на первых местах работы от вас будут требовать знать все и быть мультистаночником. Узкая специализация понадобится потом, когда вы набьете руку и выберете свое направление. 4️⃣ Из-за ИИ сейчас увеличивается скорость работы и требования к вашей универсальности. Теперь вы можете сделать дизайн, иллюстрации, видео и программный код. Это просто становится стандартом.

Исходя из этой логики, мы создали новый пакет «AI-Designer Ultimate», где объединили все курсы в единое комплексное обучение. В него входят: • Веб-сайты • Веб-приложение • Графический дизайн (Плакаты + Инфографика + Креативная айдентика) • AI-видео (рекламный ролик, музыкальный сниппет) • AI 3D-графика • AI-иллюстрации • Анимации интерфейсов

К посту приложили примеры и уровень работ. Длительность программы — 6 мес. Продление поддержки после основного срока обучения — 4900 руб. за месяц. Если покупать эти курсы по отдельности, цена будет 311 600 руб., а пакетом — 99 000 руб. (к такой цене придем с сентября)

📌 Сейчас цена для всех учеников со скидкой 35% и составляет всего 65 000 руб. (от 3542 руб./мес в рассрочку) А для тех, кто еще не студент, цена 79 000 руб. (от 4125 руб./мес в рассрочку) Эта акция приурочена к концу лета и началу учебного года. Наша цель — сделать обучение и повышение вашего уровня до уровня ведущих дизайнеров доступным. Раньше нужно было годами пробовать и экспериментировать, а сейчас я даю свою методику, отточенную за 20 лет личной карьеры и 8 лет развития учебной программы UPROCK. Вы просто получаете выжимку, чтобы не наступать на мои «грабли». В этом мой секрет: мы системно и методично подготовили для вас все программы. ➡️Чтобы получить больше информации и забронировать курс со скидкой, напишите в @uprock_hello

У вас никогда не будет второго шанса произвести первое впечатление 👀 Коллеги, вопрос на миллион: вы уделяете оглавлению столько же времени, сколько обложке? Креативная обложка цепляет взгляд. Но именно оглавление становится тем самым решающим моментом, когда читатель оказывается на распутье: остаться или закрыть вкладку. Как склонить чашу весов в сторону первого варианта?⬇️

➡️Рассказываем в новой статье "Дизайн оглавления: 15 вдохновляющих примеров + советы профессионалов".

Ползунки либо бесят, либо влюбляют в интерфейс с первой секунды. Выбор всегда за дизайнером 😤🆚😍 Есть элементы, которые просто выполняют функцию. А есть те, что создают ощущение. Ползунки (слайдеры) — из второй категории. Когда пользователь двигает слайдер, он взаимодействует с продуктом на интуитивном уровне, почти как с физическим объектом. Это мощный инструмент доверия. Или мощный инструмент раздражения — если сделать его наспех.

🤩 В сегодняшнем лонгриде "Как правильно использовать ползунки в интерфейсе" разберемся, как приручить этот элемент и сделать его своим союзником.

Как создать бренд, который работает 🤔 Частая ошибка новичков в том, что они уделяют слишком много внимания красивой картинке. Крутой логотип, модные цвета, стильный шрифт — кажется, что в этом залог успеха бренда. Но тренды меняются каждые полгода. Так что ни один успешный продукт не может держаться только на визуале. По-настоящему сильный бренд строится на смыслах, которые за ним стоят. Он узнаваем, устойчив к изменениям рынка и вызывает доверие. И всё это закладывается не в Figma, а на этапе стратегии — в ответах на простые, но важные вопросы. Какие именно вопросы нужно задать себе перед стартом? ⬇️

💜Собрали их в статье: "Как создать сильный и запоминающийся бренд: 9 вопросов, которые вам помогут".

Шрифт важнее, чем вы думаете✍️ Начинающие дизайнеры часто думают, что типографика — это про красоту. На самом деле, шрифт несет в себе куда больше, он отражает идентичность бренда. Про то, как ваш продукт видят, слышат и чувствуют другие. Каждый раз, подбирая шрифт, вы невольно решаете вопрос: "Кто мы?". Очертания букв считываются быстрее, чем логотип, и громче, чем слоган. Но сегодня бренды сталкиваются с вызовом, поскольку их аудитория разбросана по десяткам площадок: от гигантского баннера до крошечного экрана часов. И шрифт должен работать везде одинаково сильно. Как этого добиться, если вы только в начале пути?⤵️

➡️ Узнаете в статье "4 характеристики выдающейся типографики: советы от старшего бренд-директора Monotype".

"Мне кажется, тут все интуитивно понятно" — фраза, которая убивает интерфейсы💀 Каждый раз это заканчивается одинаково: пользователи путаются, заказчик недоволен, а вы сидите и перерисовываете экран в пятый раз. Хватит полагаться на свою интуицию, скорее всего, вы промахнетесь (никогда не забывайте, вы — не ваш пользователь). Но что тогда делать? Есть методика, которая за 5 минут дает объективную оценку удобства вашего продукта: без эмоций, без "я думаю, эта кнопка должна быть левее", только реальные данные. Именно поэтому ей доверяют продакты и крупные корпорации. 👇

〰️В лонгриде "Как работает SUS метод для оценки юзабилити" подробно разбираем разбираем все этапы методики: от вопросов до интерпретации результата.