Начни отсюда

Привет! Меня зовут Илья. Я занимаюсь UX/UI-дизайном и делюсь своим путём перехода в профессию.

Ты найдешь тут:
- Подходы к разработке дизайна сайтов.
- Разборы проектов и ошибок.
- То, что реально поможет на пути в UX/UI.
- Реальные шаги по поиску заказов и работы
- Мысли вслух и немного личного

Рекомендую начать с этих постов:
- Изучаю UX/UI на реальных примерах
- Как люди на самом деле читают сайты
- Chat GPT и Deepseek — тестирую две нейросети на популярных задачах
- Как UX/UI-наблюдения помогают мне прокачиваться

Ссылки на портфолио:
Behance - кейсы сайтов

Связь со мной: тут

Добро пожаловать!

Почему дизайн?

Несколько лет назад я начал замечать, что многие сайты и приложения неудобны в использовании и визуально перегружены. Меня мучили вопросы: Почему тут такой нечитаемый шрифт? Зачем сделали кнопку там, где её сложно найти?
Например, захожу на сайт — а там хаос: яркие цвета, куча фотографий, заголовки разбросаны. Куда смотреть? Тогда я просто замечал это, но не думал, как бы исправил.

Сначала это ощущалось интуитивно, но чем глубже я погружался в дизайн, тем яснее становилось: хороший интерфейс — это продуманная система, которая помогает пользователю решать его задачи без лишних сложностей.

Сейчас я понимаю, что UX/UI-дизайн — это не только делать красиво, а сочетание аналитики, творчества и работы с пользователями. Именно это привлекает меня больше всего. Теперь, заходя на сайты или в приложения, всё чаще замечаю, насколько удобно или неудобно они устроены.

Изучаю UX/UI на реальных примерах

Сейчас я учусь на UX/UI-дизайнера и стараюсь прокачивать насмотренность: разбираю интерфейсы, которые вызывают эмоции. Сегодня — Додо Пицца.

Что подметил как пользователь:
- Фото пиццы теперь на весь экран. Я как будто не просто читаю описание, а уже пробую глазами. Это крутой визуальный триггер, который реально подталкивает к заказу.
- Тактильная отдача. При нажатии кнопок ощущается вибрация — мелочь, а создает ощущение отклика, будто приложение чувствует меня.

Что смутило:
Чат с поддержкой трудно найти. Он спрятан в профиле. Если бы что-то пошло не так с заказом — я бы долго искал куда писать.

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

Такие разборы помогают мне лучше понимать, как UX/UI-дизайн влияет на поведение пользователя.

Не заставляйте меня думать

Начал читать книгу «Не заставляйте меня думать» Стива Круга. Есть несколько моментов, которыми хочу поделиться.

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

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

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

На самом дело это все очевидно и понятно, и все мы это знаем, но описанное выше все равно встречается.

Изучаю UX/UI на реальных примерах

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

Что за фишка ?
При оплате:
1. Сразу запоминается дата и сумма платежа
2. Процесс настройки автоплатежа происходит буквально в один клик переключателя.
3. Не нужно ждать смс для подтверждения создания автоплатежа.

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

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

Сбербанк тестирует новый дизайн главной страницы

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

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

Интересно, какие еще фишки появятся в ближайшем будущем.

Кейс корпоративного сайта

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

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

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

Посмотреть кейс можно по ссылке:
Behance | Dprofile

Про удобство

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

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

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

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

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

Куда хочется двигаться дальше?
— В сторону коммерческих проектов
— Глубже в UX-исследования
— Разобраться в дизайне мобильных интерфейсов.

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

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

Что такое информационная архитектура?
Это про то, как логично и понятно структурировать информацию, чтобы пользователь без лишних шагов дошёл до цели.

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

Как строится?
1. Проведение интервью для получения списка услуг, задач, товаров, которые важны для пользователя.
2. Карточная сортировка:
Открытая - карточки услуг, задач выдаются пользователю, цель объединить их в группы по своему усмотрению.
Закрытая - пользователь распределяет карточки по заданным категориям.
3. Построение структуры сайта.

Всю информацию беру из этого видео. Руслан очень понятно и доступно объясняет информацию.
Также можно прочитать тут.

Я просто хотел выложить кейс, зашёл в предварительный просмотр на Behance и увидел: пунктирная линия выходит за границу объекта, а заголовок — не по центру.

Ну, думаю, быстро поправлю.
Исправил. Заметил ещё одну мелочь. А потом ещё. В итоге — час на правки.
Знакомо?

Это вроде и внимание к деталям, и перфекционизм. Хочется, чтобы всё было идеально и при этом никто не ткнул: «А вот тут косяк».

Но правда в том, что 90% зрителей этого даже не заметят.
Делать хорошо — важно.
Делать идеально — необязательно.

Заканчиваю читать «Не заставляйте меня думать» от Стива Круга. Очень крутая и простая книга по UX, которая реально помогает взглянуть на интерфейс глазами пользователя. Делюсь тем, что зашло.

Зачем вообще читаю?
Хочу лучше понимать, как думают люди, когда заходят на сайт. Эта книга отличный старт, особенно для начинающих в UX/UI-дизайне.

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

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

Первая часть заметок по этой книге — здесь.

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

Выделю топ-5 горячих клавиш Figma (Ctrl, Alt— для Windows; Cmd, Opt— для Mac):

1. Приблизить/удалить рабочую область:
Ctrl (Cmd) + "+" или "-"

2. Копирование /вставка свойств объекта:
Ctrl (Cmd) + Alt (Opt) + C/V

3. Сквозной выбор элемента сквозь группы:
Ctrl (Cmd) + ЛКМ

4. Выбрать все элементы внутри группы:
Enter

5. Передвинуть элемент на один уровень ниже/ выше в слоях:
Ctrl (Cmd) + [
Ctrl (Cmd) + ]

У кого есть свои горячие клавиши Figma, которыми пользуетесь постоянно?