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

UI теории здесь не так много, рекомендую повторить лишь следующие темы:
  1. Базовые принципы в digital-дизайне (статья на моем Дзене)
  2. Типографика (статья на uprock)
  3. Цвет (статья на uprock)
  4. Композиция в вебе (статья от ux-journal)
  5. Гештальт-принципы (статья на моем Дзене)
  6. Про HTML и CSS для дизайнеров (статья на medium)
  7. Доступный и инклюзивный дизайн (статья в моем телеграм канале)

Все остальные доп.материалы для изучения я приложил к самим заданиям. Например, если в задании требуется разработать макеты для SPA приложения, то вы получаете и ссылку на ресурсы с объяснением, что такое SPA-приложения.

А теперь переходим к практике, которую я разделил на следующие части:
  1. Инструменты (софт) - инструменты - это лишь инструменты... Но перед продолжением важно ими обзавестись (в нашем случае изучить), и наш главный инструмент - это Figma. Если вы совсем новичок в дизайне, то настоятельно рекомендую начинать именно с этой части.
  2. Базовая практическая часть - так как ваши обязанности зависят от поставленных задач, то в этой части я собрал кейсы с UI-задачами и разделил их на три категории работ. Рекомендую выполнять все эти задания по порядку.
  3. Больше практики! - на этом этапе вы будете расширять свои умения и в целом улучшать свои дизайн-процессы. в целом после выполнения первых двух пунктов вам останется внедрить в свою работу техники, указанные в этом блоке и больше практиковаться.
  4. Бонус или Ещё больше практики!: больше практики + ресурсы для генерации UI заданий.

Ну и сразу к делу. Поехали.
Вся практика
Инструменты (софт)
Просто оставлю ссылку на один обновленный курс по Figma от Алексея Бычкова на YouTube (обновлен 17 октября 2023), чтобы вы могли ознакомиться с базовым функционалом Figma (самой последней и актуальной версией на момент написания этой статьи). Как только познакомитесь с функционалом программы, можете сразу переходить к кейсам с практикой.
Если считаете, что уже владеете Figma хотя бы на базовом уровне, то можете переходить сразу к кейсам практики.
Создаем макеты - практикуемся!
Все необходимые доп.материалы для изучения я приложил на страницах с самими заданиями.

Как и обещал ранее, я разделил базовую практику на несколько частей. Так как ваши обязанности определяются компанией/заказчиком/и т.д., то по хорошему с моей стороны будет разделить задания на группы, отталкиваясь от часто-встречаемых вариантов UI заданий, а именно:
  1. Вы можете выполнять работу по UX-исследованиям и на основе результатов ваших исследований создавать макеты (UI);
  2. Вы можете работать только по UI на основе чужих UX-исследований;
  3. Вы можете работать без глубокого UX-исследования и рисовать макеты на основе требований заказчика;
  4. Редизайн сайта. Здесь также два направления: либо к вам приходят с четкими требованиями для обновления, либо же вас самих просят "А что можно улучшить?" - в таком случае вы сами определяете, что менять и обосновываете почему.

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

Третий вариант тоже встречается и нельзя сказать, что редко...
Здесь вам предстоит работать со входными данными заказчика, и это либо сайты-лендинги, которые должны быть очень красивыми (и должны продавать!), либо заказчики-знатоки, которые настолько идеально представляют, что им нужно, что вы являетесь просто исполнителем, который рисует то, что требует заказчик. Я не стал включать сюда задания в духе "Сделать продающий лендинг", так как большинство бесплатных и платных онлайн-курсов / видео / и так далее уже закрывают эту потребность. Здесь я решил собрать мудборды заказчиков с определенной вводной информацией о структуре сайта/сервиса. Основаны эти задания на моем собственном опыте работы с зарубежными заказчиками на фрилансе, НО элементы заданий я подобрал сам. Эти кейсы направлены на практику реализации идей заказчиков, что может стать для вас полезным.

Что объединяет первые два пункта перечисленные выше: вы создаете макеты на основе исследований и у вас есть подробные данные. Тут от вас требуется полное включение и ознакомление с результатами UX-исследований. Нельзя исключать, что некоторые результаты исследований могут быть интерпретированы некорректно, поэтому вам стоит крайне детально изучать все результаты и только после этого внедрять новые изменения. Для такой категории работ я подготовил "Кейсы с готовыми исследованиями". Вы берете готовый кейс исследований и требований к функционалу, изучаете все эти исследования и создаете новые макеты. Рекомендую практиковаться с этими кейсами уже после выполнения заданий из предыдущих частей. Эти кейсы будут полезны вам, если хотите работать в больших и/или "дизайн-развитых" компаниях и работать над большими мульти-функциональными продуктами, где регулярно проводятся множество исследований.

Больше практики!
А в этой части вы уже познакомившись с Figma и поработав с некоторыми дизайн-кейсами, начнете улучшать свои дизайн-процессы и расширите список умений. В этой части уклон сделан на ускорение темпов выполнения работы и чуть более грамотную работу с макетами. Используем дизайн-систему.

В этом разделе рассмотрим работу с компонентами, auto-layouts и дизайн-системой. Что это такое и как это все использовать в своей работе...
Учитывайте, что все большие проекты строятся с использованием этих инструментов. Поэтому если хотите расти как дизайнер, то этот этап обязателен для изучения.

Рекомендую изучить следующие материалы, перед выполнением задания из этой части:

Я не стал выводить задания из этой категории на отдельную страницу, так как их всего два и они достаточно просто описаны:

  • Задание №1: "Воссоздайте библиотеку стилей и библиотеку атомарных компонентов по образцу из шаблона в Figma" // возьмите для этого задания любой шаблон здесь (готовую библиотеку)

  • Задание №2: "Создайте свою дизайн-систему, состоящую из атомарных компонентов и библиотеки стилей. За основу можете взять любой существующий сервис или придумать свой."

Может пригодиться для выполнения этих заданий:
После выполнения этих заданий у вас уже имеется (будет иметься) опыт работы с дизайн-системами, что прибавит вам баллов при трудоустройстве и в целом облегчит вам жизнь, избавив процесс работы от некоторой рутины (например, замены одинаковых элементов на разных страницах макетов или соблюдения принципа единой ответственности в макетах проекта).

Ещё больше практики!
и полезностей...