Подборка материалов · Junior

109 статей для Junior UX/UI-дизайнера: большая подборка

Материалы для старта в UX/UI-дизайне: исследования, пользовательские сценарии, прототипы, композиция, типографика, Figma, доступность, портфолио и передача макетов в разработку.

109 статей · 10 тем · материалы на русском языке

Профессия и процесс работы

  1. Чем роль продуктового дизайнера отличается от роли UX/UI-дизайнера. Показываю на практике

    Чтобы понять этапы работы и ожидания от роли.

  2. Кем работать в IT в 2022: UI/UX-дизайнер

    Чтобы понять этапы работы и ожидания от роли.

  3. Что не так с дизайнерами интерфейсов. Есть ли разница между UX/UI и продуктовым дизайнером?

    Чтобы понять этапы работы и ожидания от роли.

  4. Как UX/UI-дизайнеру достичь взаимопонимания с разработчиками и проджектами: комбинируем UX-фреймворки

    Чтобы понять этапы работы и ожидания от роли.

  5. План действий на 2024 для UX/UI-дизайнера и ссылки на статьи

    Чтобы понять этапы работы и ожидания от роли.

  6. От копирайтера к UX/UI-дизайну: карьерная история дизайнера из команды персонального управления финансами

    Чтобы понять этапы работы и ожидания от роли.

  7. Провалившийся стартап: уроки для UX/UI-дизайнера

    Чтобы понять этапы работы и ожидания от роли.

  8. Основы BDUI для продуктовых дизайнеров. Шпаргалка

    Чтобы понять этапы работы и ожидания от роли.

  9. Как найти работу продуктовому и UX/UI дизайнеру в 2025 году?

    Чтобы понять этапы работы и ожидания от роли.

  10. Что внутри портфолио продуктовых и ux/ui-дизайнеров из Figma, Notion, Яндекс, Тинькофф и Ozon?

    Чтобы понять этапы работы и ожидания от роли.

  11. 12 советов для Junior UX/UI дизайнера от самого себя из будущего

    Чтобы понять этапы работы и ожидания от роли.

  12. Как UX/UI дизайнеру успешно пройти собеседование и получить крутой оффер

    Чтобы понять этапы работы и ожидания от роли.

Исследования пользователей

  1. Почему пользователи врут на интервью и что мы увидели, когда начали за ними наблюдать

    Чтобы выявлять реальные потребности пользователей.

  2. Нейроисследования в работе UX-редактора: выводы учёных, которые улучшат тексты вашего продукта

    Чтобы выявлять реальные потребности пользователей.

  3. UX-исследования в T2.Digital. Советы по популяризации исследований в команде

    Чтобы выявлять реальные потребности пользователей.

  4. UX-исследование в Китае: как обойти культурные барьеры и собрать полезные инсайты

    Чтобы выявлять реальные потребности пользователей.

  5. Как тестировать UX-сценарии в сложных продуктах? Метод «домашки» для пользователей

    Чтобы выявлять реальные потребности пользователей.

  6. Как проводить качественные исследования: интервью, UX-тестирование и фокус-группы

    Чтобы выявлять реальные потребности пользователей.

  7. Ошибки при проведении интервью с пользователями

    Чтобы выявлять реальные потребности пользователей.

  8. Темная сторона исследований пользователей: как когнитивные искажения портят результаты

    Чтобы выявлять реальные потребности пользователей.

  9. Айтрекинг в UX-исследованиях

    Чтобы выявлять реальные потребности пользователей.

  10. Дизайнер – не журналист. Как проводить интервью с пользователем

    Чтобы выявлять реальные потребности пользователей.

  11. Как спроектировать базу данных регулярного UX-исследования. Полный гайд на примере одного продукта

    Чтобы выявлять реальные потребности пользователей.

  12. Маркетинговые исследования и UX-исследования. В чем разница?

    Чтобы выявлять реальные потребности пользователей.

Сценарии, CJM и структура

  1. Динамический CJM в Дзене: от данных к решениям через разметку, агрегацию и визуализацию

    Чтобы увидеть весь путь пользователя в продукте.

  2. Как построить CJM: лучший способ посмотреть на продукт глазами пользователя

    Чтобы увидеть весь путь пользователя в продукте.

  3. Как мы построили две версии CJM и синхронизировали всю команду Ozon Банка с продуктом

    Чтобы увидеть весь путь пользователя в продукте.

  4. Гайд: зачем нужна CJM (Customer Journey Map) и как ее правильно построить

    Чтобы увидеть весь путь пользователя в продукте.

  5. CJM для сайта НПФ «Национальный»: реальный кейс, нереальные персонажи

    Чтобы увидеть весь путь пользователя в продукте.

  6. User flow. Как проектировать и зачем

    Чтобы увидеть весь путь пользователя в продукте.

  7. Как автоматизировать создание CJM с помощью ИИ?

    Чтобы увидеть весь путь пользователя в продукте.

  8. База знаний по разработке CJM

    Чтобы увидеть весь путь пользователя в продукте.

  9. CJM для аналитика: что это, зачем нужно и как строить на данных (с примерами SQL скриптов)

    Чтобы увидеть весь путь пользователя в продукте.

  10. Информационная архитектура и технология DITA. По мотивам лекции в Яндексе

    Чтобы увидеть весь путь пользователя в продукте.

  11. Как составить сценарий юзабилити-тестирования

    Чтобы увидеть весь путь пользователя в продукте.

  12. User Story Mapping или Карты Пользовательских сценариев

    Чтобы увидеть весь путь пользователя в продукте.

Прототипы и проверка идей

  1. От макетов до кода: как AI-прототипы упростили жизнь разработчикам и тестировщикам

    Чтобы проверить решение до дорогой разработки.

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

    Чтобы проверить решение до дорогой разработки.

  3. Модерирование юзабилити-тестирования

    Чтобы проверить решение до дорогой разработки.

  4. Не UX-тест, а UX-квест: как отойти от стандартных юзабилити-тестирований, когда они совсем наскучили

    Чтобы проверить решение до дорогой разработки.

  5. Юзабилити-тестирование: как формулировать гипотезы

    Чтобы проверить решение до дорогой разработки.

  6. Планирование юзабилити-тестирования. Часть 2

    Чтобы проверить решение до дорогой разработки.

  7. NinjaMock — бесплатное приложение для прототипирования интерфейсов

    Чтобы проверить решение до дорогой разработки.

  8. Модерируемое юзабилити-тестирование: от идеи до задачи в таск-трекере

    Чтобы проверить решение до дорогой разработки.

  9. Планирование юзабилити-тестирования. Часть 1

    Чтобы проверить решение до дорогой разработки.

  10. Юзабилити-тестирование: хотите ли вы узнать правду о своих пользователях?

    Чтобы проверить решение до дорогой разработки.

  11. Проведение юзабилити-тестирований или опыт набитых шишек

    Чтобы проверить решение до дорогой разработки.

  12. Тестирование прототипов при разработке программного продукта

    Чтобы проверить решение до дорогой разработки.

Композиция, сетки и адаптивность

  1. Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

    Чтобы строить адаптивные макеты без костылей.

  2. Можно ли собрать работающий интерфейс на ИИ за час?

    Чтобы строить адаптивные макеты без костылей.

  3. Заменит ли умная строка традиционные графические интерфейсы? История смены парадигм в интерфейсостроении

    Чтобы строить адаптивные макеты без костылей.

  4. Цвет в дизайне интерфейсов: инструкция по применению

    Чтобы строить адаптивные макеты без костылей.

  5. Тренды в дизайне интерфейсов: от любви до ненависти

    Чтобы строить адаптивные макеты без костылей.

  6. Хороший дизайн интерфейсов. Часть 3

    Чтобы строить адаптивные макеты без костылей.

  7. UX и ограничения памяти: как принципы геймдева помогают проектировать интерфейсы

    Чтобы строить адаптивные макеты без костылей.

  8. Интерфейсы, когнитивная нагрузка, «простыни»

    Чтобы строить адаптивные макеты без костылей.

  9. Руководство по Jobs to Be Done и Desired Outcomes для дизайна интерфейсов

    Чтобы выявить реальные мотивы пользователей.

  10. Как оформлять текст в игровых интерфейсах

    Чтобы строить адаптивные макеты без костылей.

  11. Принципы гештальта в дизайне пользовательского интерфейса

    Чтобы строить адаптивные макеты без костылей.

  12. Когда своровали дизайн интерфейса: 5 судебных процессов и чем это закончилось

    Чтобы строить адаптивные макеты без костылей.

Типографика, цвет и визуальный язык

  1. Бенто-дизайн: как японские ланч-боксы завоевали мир интерфейсов

    Чтобы улучшить читаемость и визуальную иерархию.

  2. Пользовательские интерфейсы в упадке

    Чтобы улучшить читаемость и визуальную иерархию.

  3. Поймут ли ваши иконки пользователи из других стран? Обзор научных исследований

    Чтобы улучшить читаемость и визуальную иерархию.

  4. Инструменты Figma: как работать с типографикой, цветами и компонентами правильно

    Чтобы улучшить читаемость и иерархию текста.

  5. Как облегчить работу дизайнера с помощью ИИ и сохранить визуальный стиль

    Чтобы улучшить читаемость и визуальную иерархию.

  6. Первые 40 часов UX/UI‑дизайна: как я собираю вводные и формирую основу интерфейса

    Чтобы улучшить читаемость и визуальную иерархию.

  7. 7 правил создания красивых интерфейсов. Часть 2

    Чтобы улучшить читаемость и визуальную иерархию.

  8. Веб-типографика: создаем таблицы для чтения, а не для красоты

    Чтобы улучшить читаемость и иерархию текста.

  9. Bento в модульных интерфейсах: почему компании их выбирают и нужны ли вашему продукту

    Чтобы улучшить читаемость и визуальную иерархию.

  10. КОГДА УМЕСТЕН CAPS LOCK, как расставить акценты и другие заметки о типографике

    Чтобы улучшить читаемость и иерархию текста.

  11. Почему AI-generated UI стоит изучать как источник визуальных мутаций

    Чтобы улучшить читаемость и визуальную иерархию.

  12. Мегатренды в дизайне интерфейсов. Часть 1. Культура и общество

    Чтобы улучшить читаемость и визуальную иерархию.

Figma, компоненты и Auto Layout

  1. Разработка возвращает макет: базовая гигиена Figma‑макетов

    Чтобы быстро собирать и изменять макеты.

  2. Как сделать универсальный компонент List Cell в Figma

    Чтобы быстро собирать и изменять макеты.

  3. Автоматизируем локализацию макетов в Figma

    Чтобы быстро собирать и изменять макеты.

  4. Автоматизируем рутинные задачи и сокращаем бюджет на дизайн: Figma Variables в создании макетов мобильных приложений

    Чтобы быстро собирать и изменять макеты.

  5. Figma to Frontend: как мы автоматически синхронизируем дизайн и код

    Чтобы быстро собирать и изменять макеты.

  6. Скажи что-нибудь на разрабском, Figma

    Чтобы быстро собирать и изменять макеты.

  7. Почему в интерфейсах со сложной логикой недостаточно показать макеты в Figma?

    Чтобы быстро собирать и изменять макеты.

  8. Публикуем дизайн-библиотеки компонентов VKUI в Figma

    Чтобы быстро собирать и изменять макеты.

  9. Как UX/UI-дизайнеру не потеряться в тысяче макетов в Figma: новый инструмент контроля версий

    Чтобы быстро собирать и изменять макеты.

  10. Как грамотно оформленная структура макетов в Figma помогает экономить время и деньги

    Чтобы быстро собирать и изменять макеты.

  11. Правила подготовки макетов в Figma

    Чтобы быстро собирать и изменять макеты.

  12. Как дизайнеру с помощью макетов оптимизировать процессы и сэкономить время

    Чтобы быстро собирать и изменять макеты.

Доступность и удобство

  1. Интерфейсы без экрана: как разговаривают голосовые ассистенты, когда никто не слышит

    Чтобы сделать интерфейс понятным для всех.

  2. Доступность — это просто, Или 5 смертных грехов доступности

    Чтобы сделать интерфейс понятным для всех.

  3. О цифровой доступности: как постигать интернет без визуальных интерфейсов

    Чтобы сделать интерфейс понятным для всех.

  4. Инклюзивность и цифровая доступность в дизайне: почему это важно для всех

    Чтобы сделать интерфейс понятным для всех.

  5. Доступность интерфейсов. Лекция Яндекса

    Чтобы сделать интерфейс понятным для всех.

  6. Инклюзивность без галочки: как мы внедряли доступность в большой продукт и не развалили архитектуру

    Чтобы сделать интерфейс понятным для всех.

  7. Тенденции адаптивного и инклюзивного дизайна: доступность для всех пользователей

    Чтобы сделать интерфейс понятным для всех.

  8. Применение айтрекинга в тестировании юзабилити интерфейсов веб-сайтов

    Чтобы сделать интерфейс понятным для всех.

  9. О важном: инклюзивность интерфейсов, в которой нуждаются

    Чтобы сделать интерфейс понятным для всех.

  10. Люди и интерфейсы. Рассказ незрячего тестировщика о том, как сервисы Яндекса становятся доступнее

    Чтобы сделать интерфейс понятным для всех.

  11. Как писать UX-тексты: изучаем интерфейсы мессенджеров

    Чтобы сделать интерфейс понятным для всех.

  12. Проектирование пользовательского интерфейса Windows 95

    Чтобы сделать интерфейс понятным для всех.

Портфолио и передача в разработку

  1. «Это не игра, это моё портфолио» — 20 ярких сайтов-портфолио дизайнеров и разработчиков

    Чтобы показать ход мысли и результат работодателю.

  2. Кейсы: разработка спецификаций и гайдлайнов (web ui kit)

    Чтобы показать ход мысли и результат работодателю.

  3. Мобильный опыт Яндекса в трех видеокурсах: дизайн, разработка, интерфейсы

    Чтобы показать ход мысли и результат работодателю.

  4. Дизайн-спецификация к интерфейсу

    Чтобы показать ход мысли и результат работодателю.

  5. Сделай удобно: подборка UI/UX-кейсов из цифровых и нецифровых продуктов (#22)

    Чтобы показать ход мысли и результат работодателю.

  6. Принципы и адаптация практик разработки UX/UI для промышленного ПО

    Чтобы показать ход мысли и результат работодателю.

  7. От хаоса к порядку | Как систематизировать макеты UX/UI-дизайнеру

    Чтобы показать ход мысли и результат работодателю.

  8. Что внутри КЕЙСОВ продуктовых и ux/ui‑дизайнеров из Т‑Банка, Яндекса, Альфы, РСХБ и Сбера?

    Чтобы показать ход мысли и результат работодателю.

  9. UX/UI портфолио. Часть 5: Культура отвратительных образцов

    Чтобы показать ход мысли и результат работодателю.

  10. UX/UI портфолио. Часть 2: «Ковристость» или ничего не понятно, но очень интересно

    Чтобы показать ход мысли и результат работодателю.

  11. Портфолио дизайнера, когда нет клиентов: с чего начать и обосновать свои решения

    Чтобы показать ход мысли и результат работодателю.

  12. UX/UI портфолио. Часть 3: Как прокачать насмотренность?

    Чтобы показать ход мысли и результат работодателю.

Портфолио дизайнера

  1. Как сделать портфолио с WEEEK

    Чтобы показать ход мысли и результат работодателю.

Все подборки для UX/UI-дизайнера →