INTERLAB
Как делать · 01

UX/UI и продуктовый дизайн

Исследования, аудит, Figma, прототипы, дизайн-системы, сетка, типографика, доступность и моушн.

Прочитано: 0 / 18Основы UXUX-исследованияUX-аудитСетка и раскладкаТипографика и цветUI-компонентыFigmaПрототипированиеДизайн-системыUX-паттерныАдаптивный дизайнДоступностьМоушн-дизайн

Основы UX

  1. Основы✓

    UX и UI: в чём разница и почему продукту нужны оба

    UX (user experience, опыт пользователя) — это путь человека к цели: какие шаги он проходит, где сомневается и что его останавливает. UI (user interface, пользовательский интерфейс) — то, как этот путь выглядит: кнопки, шрифты, цвета, отступы. UX отвечает на вопрос «работает ли это», UI — «понятно ли и приятно ли этим пользоваться», поэтому продукту нужны оба: красивый экран без продуманного сценария не продаёт, а хороший сценарий в невнятной обёртке никто не пройдёт до конца.

    Начальный · 6 мин чтения

UX-исследования

  1. Основы✓

    UX-исследования: как узнать, что нужно пользователям, без большого бюджета

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

    Начальный · 8 мин чтения

UX-аудит

  1. Руководство✓

    UX-аудит: пошаговая проверка пользовательского сценария

    UX-аудит — это экспертная проверка конкретного пользовательского сценария: от входа на сайт до целевого действия, например отправки заявки. Основа аудита — эвристическая оценка по 10 эвристикам Якоба Нильсена, которую 3–5 экспертов проводят независимо, а затем оценивают каждую проблему по шкале серьёзности от 0 до 4. Аудит быстро находит очевидные проблемы, но не заменяет исследований с реальными пользователями.

    Средний · 7 мин чтения · практика ~1–2 ч

Сетка и раскладка

  1. Основы✓

    Визуальная иерархия, сетка и отступы: как интерфейс ведёт взгляд

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

    Начальный · 6 мин чтения

Типографика и цвет

  1. Основы✓

    Типографика и цвет в интерфейсе: читаемость, контраст, доступность

    Читаемый интерфейс держится на нескольких правилах: ограниченная шкала размеров шрифта, строка не длиннее 50–75 знаков, межстрочный интервал около 1,5 для основного текста и шрифт с качественной кириллицей. Цвет распределяется по ролям — нейтральные, фирменный, акцентный и смысловые — и проверяется на контраст: по WCAG не меньше 4,5:1 для обычного текста и 3:1 для крупного текста и элементов управления. Смысл никогда не передаётся одним только цветом.

    Начальный · 5 мин чтения

UI-компоненты

  1. Основы✓

    Анатомия UI-компонента: кнопка, поле, карточка и их состояния

    UI-компонент — повторяемый элемент интерфейса с заранее заданными частями, вариантами и состояниями: кнопку, поле или карточку описывают один раз так, чтобы их можно было сверстать без догадок. Для каждого компонента определяют анатомию (из каких частей он состоит), варианты (primary, secondary, размеры) и все состояния — default, hover, focus, active, disabled, loading и error. Состояние, которого нет в макете, всё равно появится в продукте, только решать, как оно выглядит, будет тот, кто верстает.

    Начальный · 9 мин чтения

Figma

  1. Пошаговый урок✓

    Figma с нуля: фреймы, Auto Layout и компоненты

    Чтобы начать работать в Figma, достаточно четырёх понятий: фрейм — контейнер экрана или элемента; Auto Layout — правила, по которым фрейм сам раскладывает содержимое (направление, отступы, промежутки, Hug и Fill); компонент — мастер-элемент, копии которого обновляются вместе с ним; варианты и свойства компонента — его состояния и настраиваемые части. На этих четырёх кирпичах строятся и кнопка, и карточка, и целый экран, который разработчик потом откроет в Dev Mode.

    Начальный · 12 мин чтения · практика ~1,5–3 ч

Прототипирование

  1. Руководство✓

    Прототипирование: от скетча до кликабельного прототипа

    Прототип — проверяемая версия интерфейса, которая отвечает на конкретный вопрос до того, как написан код: поймёт ли человек, как записаться, найдёт ли нужную кнопку, не застрянет ли на шаге выбора времени. Детализацию выбирают под вопрос: для проверки логики сценария хватает скетча или wireframe, для проверки восприятия и микровзаимодействий нужен кликабельный high-fidelity прототип. Начинают не с экранов, а с user flow, а заканчивают проверкой на пяти пользователях из целевой аудитории.

    Начальный · 8 мин чтения · практика ~30–60 мин

Дизайн-системы

  1. Пошаговый урок✓

    Дизайн-система на практике: токены, компоненты, правила

    Дизайн-система — это общий для дизайна и кода набор именованных решений (токенов), компонентов и правил их использования. Практичный старт — два слоя токенов: базовые хранят палитру и шкалы, семантические называют роли («акцент», «текст второго плана») и переключаются в тёмной теме. Токены записывают в JSON по формату W3C DTCG и генерируют из него CSS-переменные, которые читают компоненты.

    Средний · 9 мин чтения · практика ~1,5–3 ч

UX-паттерны

  1. Руководство✓

    Загрузка, пусто, ошибка: состояния интерфейса, о которых забывают

    У каждого экрана есть не одно, а минимум четыре состояния: загрузка, пусто, ошибка и норма — и макет обычно рисуют только для последнего. Продукт ощущается дорогим, когда ожидание показано честно (skeleton или прогресс), пустой экран подсказывает следующий шаг, ошибка объясняет, как её исправить, а опасные действия можно отменить. Эти состояния стоит заложить в макеты и задание с самого начала — потом они превращаются в белые экраны и «Что-то пошло не так».

    Средний · 5 мин чтения · практика ~30–60 мин
  2. Руководство✓

    Формы без боли: решения, которые повышают число заявок

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

    Средний · 5 мин чтения · практика ~30–60 мин
  3. Пошаговый урок✓

    Проектируем дашборд: от вопросов пользователя к экрану

    Дашборд проектируют от вопросов роли, а не от доступных данных: сначала выясняют, кто смотрит экран и какие решения принимает, затем подбирают для каждого вопроса метрику со сравнением и форму — KPI-карточку, линию, столбцы или таблицу. По рекомендациям Nielsen Norman Group ответ должен считываться с одного взгляда, поэтому на экране остаётся только то, что помогает действовать, а состояния загрузки, пустых данных и ошибки продумывают для каждого виджета.

    Средний · 9 мин чтения · практика ~1,5–3 ч

Адаптивный дизайн

  1. Основы✓

    Адаптивный дизайн: как сайт подстраивается под телефон

    Адаптивный (responsive) дизайн — это когда одна и та же страница перестраивает сетку, размеры текста и картинок под ширину экрана: на компьютере колонки стоят рядом, на телефоне — друг под другом. Работает это за счёт тега viewport, гибкой сетки и CSS-правил для разных ширин (брейкпоинтов). Проверять результат нужно не только в эмуляторе браузера, но и на реальных телефонах.

    Начальный · 5 мин чтения

Доступность

  1. Основы✓

    Доступность интерфейса: WCAG для дизайнеров и продакт-менеджеров

    Доступность — это свойство интерфейса, которое позволяет пользоваться им людям с нарушениями зрения, слуха, моторики и когнитивных функций, а заодно всем, кто временно или ситуативно ограничен. Мерило — стандарт W3C WCAG 2.2: четыре принципа (воспринимаемость, управляемость, понятность, надёжность) и критерии уровней A, AA и AAA; ориентир для большинства сайтов — уровень AA. Контраст, фокус, размеры целей, подписи и сообщения об ошибках закладываются в макет — исправлять их после разработки дороже.

    Средний · 7 мин чтения

Моушн-дизайн

  1. Основы✓

    Микроанимации и моушн: где помогают, а где мешают

    Хорошая анимация отвечает на вопрос пользователя: «нажалось ли?», «что изменилось?», «откуда это появилось и куда делось?». Большинство интерфейсных анимаций укладываются в 100–500 мс, движутся с замедлением в конце, анимируют только transform и opacity и отключаются, если человек попросил систему уменьшить движение. Анимация, которая ничего не объясняет, а только задерживает или отвлекает от кнопки заявки, вредит продукту, каким бы красивым ни был эффект.

    Начальный · 5 мин чтения
  2. Глубокий разбор✓

    Кривые ускорения и длительность: почему одно движение выглядит дорого, а другое — дёшево

    Дорогое движение отличается от дешёвого не эффектом, а кривой ускорения и длительностью: элемент стартует быстро и мягко останавливается, а не едет с постоянной скоростью, как на конвейере. Для появления чаще всего подходит ease-out, для ухода с экрана — ease-in, для перемещения между двумя точками — ease-in-out, а большинство интерфейсных анимаций укладывается в 100–400 мс в зависимости от расстояния и размера элемента. Чтобы весь продукт двигался в одном ритме, команда фиксирует несколько именованных длительностей и кривых как токены дизайн-системы.

    Средний · 7 мин чтения
  3. Глубокий разбор✓

    Анимации при прокрутке: появление блоков, параллакс и видео, которым управляет скролл

    Анимации при прокрутке бывают трёх видов: появление блоков при входе в экран, движение, привязанное к положению скролла, и видео, кадры которого следуют за прокруткой вперёд и назад. Хорошая scroll-анимация двигает только transform и opacity, проигрывает появление один раз и выключается у тех, кто включил в системе «уменьшить движение». Если без анимации текст нельзя прочитать или до кнопки заявки нужно «докрутить» эффект — это ошибка, а не приём.

    Средний · 7 мин чтения
  4. Глубокий разбор✓

    Переходы между экранами и состояниями: как движение объясняет, куда вы попали

    Переход между экранами нужен, чтобы человек понял, куда он попал и как вернуться: шаг вглубь приходит справа или «вырастает» из нажатого элемента, возврат повторяет то же движение в обратную сторону, модальное окно поднимается снизу. Хороший переход короткий (для крупных изменений экрана — около 200–300 мс), не блокирует ввод, сохраняет общий элемент вроде карточки, раскрывающейся в страницу, и превращается в простое проявление, если пользователь включил «уменьшить движение».

    Средний · 8 мин чтения

Траектории с этим направлением

UX/UI-дизайн: от исследования до дизайн-системы · 9 →Моушн и анимация · 4 →Вёрстка: HTML и CSS · 7 →← Все направления
Расскажите о задаче — мы изучим запрос и свяжемся с вами

Есть задача?
Обсудим и оценим — бесплатно.

Расскажите о продукте или проблеме. Предложим архитектуру, срок и стоимость первой версии после изучения задачи.

  • Оценка объёма и рисков до старта
  • NDA — по вашему или нашему шаблону
  • Старт работ в течение недели
Написать в WhatsApp

Не присылайте через форму пароли, ключи доступа и исходный код — безопасную передачу доступа обсудим отдельно.

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