Хотите начать обучение и найти работу в нише дизайна сайтов и интерфейсов? Тогда читайте статью ниже. Тут я собрала must–have для будущего дизайнера.
Материал также будет очень полезен программистам, верстальщикам, менеджерам проектов и всем, кто работает в сфере IT и хочет поближе познакомиться с UX/UI–дизайном.
Когда я только начинала свой путь дизайнера, мне было очень сложно освоиться в десятках терминов, понять, что учить в первую очередь; когда и какую программу использовать. Этот список и последующие уроки я постараюсь написать для таких же начинающих, как я несколько лет назад. Буду знакомить постепенно и объяснять простым языком, показывая все на пальцах.
Отвечаю на главный вопрос – нужно ли уметь рисовать, чтобы стать UX/UI–дизайнером?
—Нет! Дизайнер ≠ художник
Для каждой темы будет написан отдельный материал и если он уже доступен, то будет отмечен зеленой галочкой. Просто кликаем на заголовок с и изучаем.
Пожалуйста оставляйте коментарии, сообщайте об опечатках и неточностях. Буду рада услышать ваши дополнения. Статьи будут в дальнейшем обновляться на основе ваших вопросов и предложений. Приятного чтения!
- Дизайн. Интерфейс. UX и UI
- Процесс создания веб-сайта
- Ежедневные задачи UX/UI–дизайнера. Программы для дизайна
- Основы Figma. Часть 1
- Основы Figma. Часть 2
- Основы Figma. Часть 3
- Основы Figma. Часть 4
- Основы Figma. Часть 5
- Основы UI–дизайна
- Основы UX–дизайна
- Продвинутый уровень Figma
- Портфолио и поиск работы
- Нужен ваш фидбек!
В этой вводной части на наглядных примерах будет рассказано и показано, что такое дизайн вообще и что он в себя включает, познакомитесь с основными терминами, о которых все слышали, но никто не понимает.
- Что такое дизайн? Определение и задачи дизайна. Почему важна среда, обстоятельства и что такое контекст;
- Что такое интерфейс? 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). Горизонтальные ограничители. Вертикальные ограничители;
- Первое знакомство с компонентами;
- Работа с фреймами. Подгонка размера фрейма под содержимое. Изменяем ориентацию фрейма;
- Иерархия проекта. Страницы. Организация страниц. Файлы.
Основы 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