design

Учебник UI/UX-дизайн для начинающих

20 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

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

Курс «UI/UX-дизайн: основы» состоит из 6 разделов и 20 уроков: Что такое UI и UX, Законы и принципы UX, Цвет и типографика, Композиция и сетки, UX-исследования и сценарии и Прототипирование и тестирование. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Что такое UI и UX

    1. UI и UX: в чём разница

      Чем UI отличается от UX простыми словами: интерфейс против опыта, аналогии и роли в команде.

    2. Кто такой пользователь и его задача

      Jobs to Be Done простыми словами: люди «нанимают» продукт ради задачи, а не ради функций.

    3. Принципы хорошего интерфейса

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

  2. 2 Законы и принципы UX

    1. Закон Хика: меньше выбора — быстрее решение

      Закон Хика: чем больше вариантов, тем дольше человек выбирает. Как бороться с параличом выбора.

    2. Закон Фиттса: размер и расстояние до цели

      Закон Фиттса: чем ближе и крупнее цель, тем быстрее по ней попасть. Зоны большого пальца на мобильных.

    3. Закон Миллера и группировка информации

      Закон Миллера (7±2) и чанкинг: как разбивать длинные данные на группы, чтобы их было легче воспринять.

    4. Закон Якоба и сила привычки

      Закон Якоба: люди ждут, что ваш сайт работает как другие. Когда следовать паттернам, а когда нарушать.

  3. 3 Цвет и типографика

    1. Основы цвета: тон, насыщенность, светлота

      Цветовой круг, модель HSL и тёплые/холодные тона: словарь, без которого нельзя собрать палитру.

    2. Как собрать палитру 60-30-10

      Правило 60-30-10, роли цветов (основной, нейтральный, акцент) и семантика статусов в интерфейсе.

    3. Контраст и доступность цвета

      WCAG-контраст 4.5:1, проверка читаемости и почему нельзя кодировать смысл только цветом.

    4. Типографика: шрифты и их характер

      Гротески и антиквы, ограничение числа шрифтов, начертания и характер шрифта в интерфейсе.

  4. 4 Композиция и сетки

    1. Визуальная иерархия: что человек видит первым

      Размер, контраст, цвет и положение управляют вниманием. Как выстроить порядок чтения экрана.

    2. Сетки и колонки

      12-колоночная сетка, гаттеры и поля. Зачем нужна сетка и как она держит макет ровным.

    3. Пространство и ритм отступов

      Негативное пространство и шкала отступов (8-point grid). Почему «воздух» — это не пустая трата места.

  5. 5 UX-исследования и сценарии

    1. Design thinking: пять этапов

      Эмпатия, фокусировка, идеи, прототип, тест — итеративный процесс человекоцентричного дизайна.

    2. Пользовательские интервью

      Как задавать вопросы, чтобы узнать правду: открытые вопросы, про прошлое, без подсказок ответа.

    3. Карта пути и пользовательский поток

      User flow как схема шагов и Customer Journey Map с эмоциями. Где человек спотыкается и злится.

  6. 6 Прототипирование и тестирование

    1. Прототипы: от бумаги до кликабельного

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

    2. Юзабилити-тестирование

      Тест с 5 пользователями, задания вместо вопросов, метод «думай вслух» и почему нельзя помогать.

    3. Дизайн-системы и итерации

      Компоненты и токены, консистентность через переиспользование и цикл «измерь — улучши» после запуска.