Чтобы быть уверенным, что эта статья будет вам полезна рекомендую сначала ознакомиться с предыдущей: Актуальные профессии Digital-дизайнеров 2024
"Я слышу и забываю. Я вижу и запоминаю. Я делаю и понимаю."
- это цитата Конфуция, очень кратко описывающая, почему данный раздел изучения UI основан на практических заданиях.
UI теории здесь не так много, рекомендую повторить лишь следующие темы:
Все остальные доп.материалы для изучения я приложил к самим заданиям. Например, если в задании требуется разработать макеты для SPA приложения, то вы получаете и ссылку на ресурсы с объяснением, что такое SPA-приложения.
А теперь переходим к практике, которую я разделил на следующие части:
- Инструменты (софт) - инструменты - это лишь инструменты... Но перед продолжением важно ими обзавестись (в нашем случае изучить), и наш главный инструмент - это Figma. Если вы совсем новичок в дизайне, то настоятельно рекомендую начинать именно с этой части.
- Базовая практическая часть - так как ваши обязанности зависят от поставленных задач, то в этой части я собрал кейсы с UI-задачами и разделил их на три категории работ. Рекомендую выполнять все эти задания по порядку.
- Больше практики! - на этом этапе вы будете расширять свои умения и в целом улучшать свои дизайн-процессы. в целом после выполнения первых двух пунктов вам останется внедрить в свою работу техники, указанные в этом блоке и больше практиковаться.
- Бонус или Ещё больше практики!: больше практики + ресурсы для генерации UI заданий.
Ну и сразу к делу. Поехали.
Вся практика
Инструменты (софт)
Просто оставлю ссылку на один обновленный курс по Figma от Алексея Бычкова на YouTube (обновлен 17 октября 2023), чтобы вы могли ознакомиться с базовым функционалом Figma (самой последней и актуальной версией на момент написания этой статьи). Как только познакомитесь с функционалом программы, можете сразу переходить к кейсам с практикой.
Если считаете, что уже владеете Figma хотя бы на базовом уровне, то можете переходить сразу к кейсам практики.
Создаем макеты - практикуемся!
Все необходимые доп.материалы для изучения я приложил на страницах с самими заданиями.
Как и обещал ранее, я разделил базовую практику на несколько частей. Так как ваши обязанности определяются компанией/заказчиком/и т.д., то по хорошему с моей стороны будет разделить задания на группы, отталкиваясь от часто-встречаемых вариантов UI заданий, а именно:
- Вы можете выполнять работу по UX-исследованиям и на основе результатов ваших исследований создавать макеты (UI);
- Вы можете работать только по UI на основе чужих UX-исследований;
- Вы можете работать без глубокого UX-исследования и рисовать макеты на основе требований заказчика;
- Редизайн сайта. Здесь также два направления: либо к вам приходят с четкими требованиями для обновления, либо же вас самих просят "А что можно улучшить?" - в таком случае вы сами определяете, что менять и обосновываете почему.
Думаю начинать практику стоит именно с редизайна, потому что функционал приложения/сайта уже понятен, и задачи тут могут быть максимально простые, не требующие изменений на бэке (то есть меняем лишь визуальную оболочку, не внедряя новый функционал). Но некоторые задачи могут включать полный редизайн сервиса с обновлением функционала. Тут все зависит от бизнес-задач редизайна, поэтому я подготовил для вас задания по редизайну разного уровня сложности:
Третий вариант тоже встречается и нельзя сказать, что редко...
Здесь вам предстоит работать со входными данными заказчика, и это либо сайты-лендинги, которые должны быть очень красивыми (и должны продавать!), либо заказчики-знатоки, которые настолько идеально представляют, что им нужно, что вы являетесь просто исполнителем, который рисует то, что требует заказчик. Я не стал включать сюда задания в духе "Сделать продающий лендинг", так как большинство бесплатных и платных онлайн-курсов / видео / и так далее уже закрывают эту потребность. Здесь я решил собрать мудборды заказчиков с определенной вводной информацией о структуре сайта/сервиса. Основаны эти задания на моем собственном опыте работы с зарубежными заказчиками на фрилансе, НО элементы заданий я подобрал сам. Эти кейсы направлены на практику реализации идей заказчиков, что может стать для вас полезным.
Что объединяет первые два пункта перечисленные выше: вы создаете макеты на основе исследований и у вас есть подробные данные. Тут от вас требуется полное включение и ознакомление с результатами UX-исследований. Нельзя исключать, что некоторые результаты исследований могут быть интерпретированы некорректно, поэтому вам стоит крайне детально изучать все результаты и только после этого внедрять новые изменения. Для такой категории работ я подготовил "Кейсы с готовыми исследованиями". Вы берете готовый кейс исследований и требований к функционалу, изучаете все эти исследования и создаете новые макеты. Рекомендую практиковаться с этими кейсами уже после выполнения заданий из предыдущих частей. Эти кейсы будут полезны вам, если хотите работать в больших и/или "дизайн-развитых" компаниях и работать над большими мульти-функциональными продуктами, где регулярно проводятся множество исследований.
Больше практики!
А в этой части вы уже познакомившись с Figma и поработав с некоторыми дизайн-кейсами, начнете улучшать свои дизайн-процессы и расширите список умений. В этой части уклон сделан на ускорение темпов выполнения работы и чуть более грамотную работу с макетами. Используем дизайн-систему.
В этом разделе рассмотрим работу с компонентами, auto-layouts и дизайн-системой. Что это такое и как это все использовать в своей работе...
Учитывайте, что все большие проекты строятся с использованием этих инструментов. Поэтому если хотите расти как дизайнер, то этот этап обязателен для изучения. Рекомендую изучить следующие материалы, перед выполнением задания из этой части:
- Что такое дизайн-системы? Брэда Фроста - перевод статьи; // с этой статьей можно ознакомиться для ввода в тему перед изучением следующей
- Методология атомарного дизайна Брэда Фроста - перевод статьи; // эта статья обязательная для ознакомления в этом разделе
- Работа с компонентами в Figma - перевод статьи от uxpub
Я не стал выводить задания из этой категории на отдельную страницу, так как их всего два и они достаточно просто описаны:
- Задание №1: "Воссоздайте библиотеку стилей и библиотеку атомарных компонентов по образцу из шаблона в Figma" // возьмите для этого задания любой шаблон здесь (готовую библиотеку)
- Задание №2: "Создайте свою дизайн-систему, состоящую из атомарных компонентов и библиотеки стилей. За основу можете взять любой существующий сервис или придумать свой."
Может пригодиться для выполнения этих заданий:
- Сайт, где собраны ссылки на шаблоны библиотек дизайн-систем, доступных в Figma - https://www.designsystemsforfigma.com/
После выполнения этих заданий у вас уже имеется (будет иметься) опыт работы с дизайн-системами, что прибавит вам баллов при трудоустройстве и в целом облегчит вам жизнь, избавив процесс работы от некоторой рутины (например, замены одинаковых элементов на разных страницах макетов или соблюдения принципа единой ответственности в макетах проекта).
Ещё больше практики!
и полезностей...
- 42+ дня UI-практики. Задания на каждый день. И ресурсы для поиска новых заданий (спойлер: можно делать не каждый день, а раз в 2-3 дня по одному экрану)
Всем спасибо за внимание!
Данная статья была написана специально для телеграм-канала "Айрат о дизайне"