Бесплатный курс по UX/UI дизайну с нуля

Хотите начать обучение и найти работу в нише дизайна сайтов и интерфейсов? Тогда читайте статью ниже. Тут я собрала must–have для будущего дизайнера.

Материал также будет очень полезен программистам, верстальщикам, менеджерам проектов и всем, кто работает в сфере IT и хочет поближе познакомиться с UX/UI–дизайном.

Когда я только начинала свой путь дизайнера, мне было очень сложно освоиться в десятках терминов, понять, что учить в первую очередь; когда и какую программу использовать. Этот список и последующие уроки я постараюсь написать для таких же начинающих, как я несколько лет назад. Буду знакомить постепенно и объяснять простым языком, показывая все на пальцах.

Отвечаю на главный вопрос – нужно ли уметь рисовать, чтобы стать UX/UI–дизайнером?

—Нет! Дизайнер ≠ художник

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

Пожалуйста оставляйте коментарии, сообщайте об опечатках и неточностях. Буду рада услышать ваши дополнения. Статьи будут в дальнейшем обновляться на основе ваших вопросов и предложений. Приятного чтения!

•   Дизайн. Интерфейс. UX и UI
•   Процесс создания веб-сайта
•   Ежедневные задачи UX/UI–дизайнера. Программы для дизайна
•   Основы Figma. Часть 1
•   Основы Figma. Часть 2
•   Основы Figma. Часть 3
• Основы Figma. Часть 4
• Основы Figma. Часть 5
• Основы UI–дизайна
• Основы UX–дизайна
• Продвинутый уровень Figma
• Портфолио и поиск работы
• Нужен ваш фидбек!

Дизайн. Интерфейс. UX и UI

В этой вводной части на наглядных примерах будет рассказано и показано, что такое дизайн вообще и что он в себя включает, познакомитесь с основными терминами, о которых все слышали, но никто не понимает.

• Что такое дизайн? Определение и задачи дизайна. Почему важна среда, обстоятельства и что такое контекст;
• Что такое интерфейс? UI (User Interface) пользовательский интерфейс. Элементы пользовательского интерфейса;
• Что такое UX, UI дизайн и в чем разница? UI–дизайн (User Interface Design). UX–дизайн (User Experience) или опыт взаимодействия;
• Виды интерфейсов. Графический экранный интерфейс – основное поле работы UX/UI–дизайнера. Примеры необычных интерфейсов: символьный, жестовый, голосовой. Нейроинтерфейс будущего.

Читать первый урок

Процесс создания веб-сайта

В этой части мы разберемся, в какой последовательности и кем разрабатываются веб–сайты; какое место в этом процессе занимает UX/UI дизайн.

• Аналитика, сбор информации, написание технического задания. В каких случаях проводят исследования, кто такие бизнес–аналитики и кто пишет техническое задание проекта;
• Поиск референсов, moodboards. Зачем угадывать предпочтения заказчиков и как это экономит бюджет. Behance и Dribbble;
• UX–дизайн. Пользователи и их задачи. Экраны и схемы переходов. Отрисовка набросков и создание прототипа. Тестирование;
• UI–дизайн. Визуальный стиль (цветовая гамма, шрифты, сетки). Интерактивный дизайн;
• Презентация проекта. Как показать дизайн заказчику;
• Экспорт ресурсов. Сохранение иконок, картинок и иллюстраций в отдельных файлах;
• Верстка. HTML. CSS. JavaScript. Frontend–фреймворки. Bootstrap;
• Программирование. Технологии backend–разработчиков. PHP. MySQL. Встроенные скриптовые языки графических редакторов;
• Тестирование. Ручное и автоматическое тестирование;
• Deploy. Как происходит развертывание сайта. Системные администраторы и devops–инженеры.

Читать второй урок

Ежедневные задачи UX/UI–дизайнера. Программы для дизайна

Рассматриваем типичные задачи UX/UI-дизайнера и немного затрагиваем смежную область – графический дизайн, с которым вы будете часто пересекаться. Смотрим, какие приложения подходят для конкретного вида дизайна. Знакомимся с новой терминологией, которую мы затрагивали в прошлых уроках, но не называли вещи своими именами.

• Задачи UX-дизайнера. Создание user flow. Отрисовка wireframes. Создание prototype. Usability-тестирование;
• Инструменты UX-дизайнера. Figma. Moqups. Axure;
• Задачи UI-дизайнера. Подбор цветовой палитры. Работа с типографикой. Подбор, обработка иконок и изображений. Создание UI-kit. Отрисовка страниц. Adaptive и responsive дизайн;
• Инструменты UI-дизайнера. Figma. Sketch. Xd;
• Виды графики. Векторная графика. Растровая графика;
• Задачи графического дизайнера. Отрисовка иконок. Отрисовка иллюстраций. Отрисовка баннеров;
• Инструменты графического дизайнера. Illustrator. Photoshop.

Читать третий урок

Основы Figma. Часть 1

• Почему стоит выбрать Figma. Бесплатный. Прост в освоении. Нетребователен к компьютеру. Работает в браузере. Есть все необходимые функции;
• Как начать пользоваться?. Регистрация. Начало работы;
• Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев;
• Рисуем прямоугольник. Шаг за шагом;
• Изменение объектов. Выделение. Перемещение. Изменение размеров;
• Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте;
• Настройка свойств объекта. Позиция и размер. Фиксация пропорций. Угол поворота. Скругление углов. Цвет заливки. Параметры обводки;
• Окно выбора цвета. Копирование и вставка цветового значения;
• Добавляем текст. Задаем границы текстового блока. Параметры текста;
• Рисуем линию и стрелку;
• Зачем нужны слои. Упорядочивают и группируют объекты. Помогают выделить объекты. Определяют порядок отрисовки;
• Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу.

Читать четвертый урок

Основы Figma. Часть 2

• Группы. Создание и удаление группы. Сворачивание и разворачивание группы. Вложенные группы. Перегруппировка;
• Выделение слоев. Выбираем вложенный слой. Выбираем несколько слоев (новые способ). Выбираем диапазон слоев. Выбираем перекрытый слой. Снимаем выделение;
• Работа с слоями. Блокировка и скрытие слоев. Копирование, вырезание и вставка слоя. Вставка в позицию другого объекта. ;
• Названия слоев. Переименовывание слоев. Задавайте названия со смыслом;
• Импорт изображений. Референсы и мудборды. Импорт из буфера обмена. Импорт из файла;
• Инструмент пипетка. Быстрое присваивание цвета. Присваивание цвета пикселей изображения;
• Полезные команды. Точное позиционирование. Как поделиться проектом.

Читать пятый урок

Основы Figma. Часть 3

• Фреймы. Сравнение с группами. Создание фрейма. Изменяем размер и заливку. Как поместить объект внутрь фрейма. Простая маска – обрезаем содержимое фрейма;
• Сетки и направляющие. Добавление сетки. Добавление и настройка колонок. Добавление рядов. Направляющие и линейка;
• Примеры использования фреймов;
• Поведение содержания фрейма при изменении размера. Ограничители (Constraints). Горизонтальные ограничители. Вертикальные ограничители;
• Первое знакомство с компонентами;
• Работа с фреймами. Подгонка размера фрейма под содержимое. Изменяем ориентацию фрейма;
• Иерархия проекта. Страницы. Организация страниц. Файлы.

Читать шестой урок

Основы Figma. Часть 4-7

Уроки уже готовы. Схемы тоже скоро появятся на сайте.

Основы UI–дизайна

• Типографика. Виды шрифтов. Основные понятия в типографике. Правила подбора шрифтовых пар. Сайты с бесплатными шрифтами;
• Цвет. Модели цветового представления (RGB, CMYK). Анатомия цвета (тон, светлота, насыщенность). Цветовой круг. Комбинирование цветов;
• Композиция. Симметричный и асимметричный баланс. Статика и динамика. Вектор внимания;
• Принципы дизайна. Гештальт-принципы дизайна. Подбор других важных принципов и методик;
• Модульные сетки. Преимущества сетки. Колоночная сетка. Модульная сетка. 8-пиксельная сетка;
• Иконки. Стили иконок. Правила подбора иконок. Сайты с бесплатными иконками. Изменение иконок под проект. Отрисовка уникальных иконок;
• Фотографии. Правила подбора фотографий. Сайты с бесплатными фотографиями. Кадрирование. Цветокоррекция. Удаление объектов;
• Где брать идеи? Скевоморфизм (Skeuomorphism). Неоморфизм (Neomorphism). Флэт (Flat). Материал дизайн (Material Design). Флюент (Fluent);
• Где брать идеи? Вдохновение для дизайнера. Мудборды. Полезные сайты;
• Работа со смыслом. Управление вниманием. Визуальный сторителлинг;
• Дизайн для мобильных устройств. Отзывчивый дизайн. Адаптивный дизайн.

Основы UX–дизайна

• Основы дизайн-мышления. UX-стратегия;
• Создание структуры проекта. Mindmapping;
• UX-исследование, часть 1: Анализ конкурентов, Lean Canvas, User Persona;
• UX-исследование, часть 2: Customer journey map;
• Wireframing. Методики и инструменты;
• UX-тестирование: глубинные интервью, опрос, сортировка карт;

Продвинутый уровень Figma

• Дизайн формы регистрации — выполняем настоящее задание, реальные проблемы и их решение;
• Компоненты и стили. Цветовые стили. Текстовые стили. Стили объектов. Компоненты. Делаем UI-kit;
• Ограничения (Constraints). Виды ограничений. Отзывчивые компоненты;
• Автоматическая компоновка (Auto Layout). Автоматическая расстановка. Делаем список комментариев;
• Прототипирование. Триггеры. Переходы. Анимация;
• Подготовка ресурсов. Чего ожидают заказчик и разработчики. Экспорт, поинты. Форматы графических файлов (jpeg, png, svg).

Портфолио и поиск работы

• Портфолио — что это, зачем и сколько работ выставлять? На какой рынок ориентироваться, почему клиенты из США платят в 5-10 раз больше?
• Где взять работы для портфолио — делаем заказы для вымышленных клиентов, выполняем бесплатные тестовые задания на Upwork.
• Где разместить портфолио — соцсети, персональный сайт, Behance, Dribbble.
• Что такое фриланс — удаленная работа на заказчиков из любой точки планеты.
• Обзор популярной фриланс-биржи Upwork.
• Работа на компанию в офисе или удаленно — плюсы и минусы, сайты для поиска работы.

Нужен ваш фидбек!

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

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

Последнее обновление 18 апреля 2022