Хотите начать обучение и найти работу в нише дизайна сайтов и интерфейсов? Тогда читайте статью ниже. Здесь я собрала must-have для будущего дизайнера.
Материал также будет очень полезен программистам, верстальщикам, менеджерам проектов и всем, кто работает в сфере IT и хочет ближе познакомиться с UX/UI-дизайном.
Когда я только начинала свой путь дизайнера, мне было очень сложно освоить десятки терминов, понять, что именно учить в первую очередь; когда и какую программу использовать. Этот список и следующие уроки я постараюсь написать для таких же начинающих, как я несколько лет назад. Буду знакомить постепенно и объяснять простым языком, показывая все на пальцах.
Отвечаю на главный вопрос – нужно ли уметь рисовать, чтобы стать UX/UI-дизайнером?
—Нет! Дизайнер ≠ художник
Для кождой темы будет написан отдельный материал и если он уже доступен, то будет отмечен зеленой галочкой. Просто кликаем на заголовок з и изучаем.
Пожалуйста, оставляйте комментарии, сообщайте об ошибках и неточностях. Буду рада услышать ваши дополнения. Уроки будут в дальнейшем обновляться на основе ваших вопросов и предложений. Приятного чтения!
- Урок 1. Дизайн. Интерфейс. UX и UI
- Урок 2. Процесс создания веб-сайта
- Урок 3. Ежедневные задачи UX/UI-дизайнера. Программы для дизайна
- Урок 4. Основы Figma I
- Урок 5. Основы Figma II
- Урок 6. Основы Figma III
- Урок 7. Основы Figma IV
- Урок 8. Основы Figma V
- Урок 9. Основы Figma VI
- Урок 10. Основы Figma VII
- Урок 11. Основы UI-дизайна
- Урок 12. Основы UX-дизайна
- Урок 13. Продвинутый уровень Figma
- Урок 14. Портфолио и поиск работы
- Нужен ваш фидбек!
В этом вводном разделе на наглядных примерах будет рассказано и показано, что такое дизайн в общем и что он включает, вы познакомитесь с основными терминами, о которых все слышали, но никто не понимает.
- Что такое дизайн? Определение и задачи дизайна. Почему важно окружение, обстоятельства и что такое контекст;
- Что такое интерфейс? 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-дизайнера. Створення user flow. Відмальовання wireframes. Створення прототипу. Usability-тестування;
- Інструменти UX-дизайнера. Figma. Moqups. Axure;
- Завдання UI-дизайнера. Підбір палітри кольорів. Робота з типографікою. Вибір, обробка іконок та зображень. Створення UI kit. Відмальовка сторінок. Adaptive та responsive дизайн;
- Інструменти UI-дизайнера. Figma. Sketch. Xd;
- Види графіки. Векторна графіка. Растрова графіка;
- Завдання графічного дизайнера. Створення іконок, ілюстрацій. Відмальовка банерів;
- Інструменти графічного дизайнера. Illustrator. Photoshop.
Переходимо до практичної частини. Як ви вже здогадалися, будемо використовувати Figma. Спочатку розглянемо, які переваги і недоліки є у цього графічного редактора, а потім почнемо вивчення, як з його допомогою створювати дизайн.
Починаємо з азів. Сьогодні ми вивчимо, як відмалювати прямокутник, лінію, стрілку та текстовий блок. Цього буде достатньо для створення таск флоу усіх видів та простих сторінок.
Наприкінці уроку, як завжди, на вас чекає багато практичних завдань для закріплення матеріалу.
- Почему стоит выбрать Figma. Бесплатный. Простой в освоении. Невы要求 к компьютеру. Работает в браузере. Есть все необходимые функции;
- Как начать пользоваться?. Регистрация. Начало работы;
- Обзор интерфейса Figma. Главное меню. Панель инструментов. Рабочая область. Панель свойств. Панель слоев;
- Рисуем прямоугольник. Шаг за шагом;
- Изменение объектов. Выделение. Перемещение. Изменение размеров;
- Навигация. Перемещение по рабочей области. Управление масштабом. Фокус на объекте;
- Настройка свойств объекта. Позиция и размер. Фиксация пропорций. Угол поворота. Закругление углов. Цвет заливки. Параметры обводки;
- Окно выбора цвета. Копирование и вставка значения цвета;
- Добавляем текст. Задаем границы текстового блока. Параметры текста;
- Рисуем линию и стрелку;
- Зачем нужны слои. Упорядочивают и группируют объекты. Помогают выделить объекты. Определяют порядок рисования;
- Полезные команды. Отменить последние действия. Сделать дубликат. Удалить объект. Выделяем несколько объектов сразу.
Продолжаем знакомство с основами Figma. Сегодня узнаем о новых приемах работы с слоями, в том числе как их выделять, перемещать, группировать, блокировать и скрывать.
Научимся вставлять растровое изображение в проект и узнаем, как работать с пипеткой, которая позволяет считывать код цвета из изображений и фигур.
Последний раздел с новыми командами касается выставления точных расстояний между объектами, что важно впоследствии при работе с сетками.
Этот урок расширяет наш арсенал дизайнера новыми приемами, которые ускоряют и упрощают процесс. Например, трудно представить работу с большим проектом без группировки слоев.
- Групи. Создание и удаление группы. Свертывание и разворачивание группы. Вложенные группы. Перегруппировка;
- Выделение слоев. Выбираем вложенный слой. Выбираем несколько слоев (новый способ). Выбираем диапазон слоев. Выбираем перекрывающийся слой. Снимаем выделение;
- Работа с слоями. Блокировка и скрытие слоев. Копирование, вырезание и вставка слоя. Вставка в позицию другого объекта;
- Названия слоев. Переименование слоев. Задавайте названия с содержанием;
- Импорт изображений. Референсы и мудборды. Импорт из буфера обмена. Импорт из файла;
- Инструмент пипетка. Быстрое присвоение цвета. Присвоение цвета пикселей изображения;
- Полезные команды. Точное позиционирование. Как поделиться проектом.
В третьей части по основам Figma научимся работать с фреймами, которые еще называют артбордами, страницами и файлами, чтобы не заблудиться в структуре большого проекта. Посмотрим, насколько мощные возможности скрывает в себе фрейм, как сетки и колонки помогают распределить объекты и выставить отступы. Научимся пользоваться направляющими. Впервые познакомимся с ограничителями (constraints) и компонентами.
Вам больше не будут страшны большие проекты, вы сможете легко структурировать любой файл и быстро перемещаться его частями.
- Фреймы. Сравнение с группами. Создание фрейма. Изменяем размер и заливку. Как поместить объект в середину фрейма. Простая маска – обрезаем содержимое фрейма;
- Сетки и направляющие. Добавление сетки. Добавление и настройка колонок. Добавление рядов. Направляющие и линейка;
- Примеры использования фреймов;
- Поведение содержимого фрейма при изменении размера. Ограничители (Constraints). Горизонтальные ограничители. Вертикальные ограничители;
- Первое знакомство с компонентами;
- Работа с фреймами. Как подогнать размер фрейма под содержимое. Изменяем ориентацию фрейма;
- Иерархия проекта. Страницы. Организация страниц. Файлы.
В очередной части научимся выравнивать объекты и распределять их в пространстве. Изучим новые фигуры: эллипс, полигон, звезду. Они не такие простые, как кажутся на первый взгляд.
Научимся экспортировать фреймы в графические файлы. Это позволит впоследствии поделиться ими с заказчиком или разработчиками. Оглянем популярные форматы изображений и поймем, в каких случаях их использовать.
- Вирівнювання. Одного об'єкта відносно іншого. Кількох об'єктів відносно іншого. Групи об'єктів відносно іншого зі збереженням позиції. Вирівнювання відокремлених об'єктів. Одного всередині фрейму. Рівномірний розподіл;
- Нові примітиви. Еліпс. Полігон. Зірка;
- Приклади використання фреймів;
- Експорт дизайну. Як помітити прошарок для експорту та зберегти його у файл. Формати Png, Jpg, Svg, Pdf.
В пятой части основ Figma мы узнаем о булевых операциях и научимся использовать их на практике. Это незаменимый инструмент для работы с векторной графикой, особенно с иконками и логотипами.
- Про булеві операції. Екскурс в математику і логіку;
- Види булевих операцій. Об'єднання фігур або Union selection. Віднімання фігур або Subtract selection. Перетин фігур або Intersect selection. Виключення фігур або Exclude selection;
- Обробка складних об'єктів. Перетворення у криві або Flatten selection.
В шестой части по основам Figma мы узнаем, как работать с градиентами. А именно поймем, какие существуют виды градиентов, как их создавать и настраивать на практике. Поговорим о плагинах для Figma и установим и используем несколько из них прямо во время урока.
- Про градієнт. Визначення градієнту. Ключові точки градієнту. Заміна заливки кольору на градієнт;
- Види градієнтів. Лінійний градієнт або Linear. Радіальний градієнт або Radial. Кутовий градієнт або Angular. Градієнт у вигляді алмазу або Diamond;
- Налаштування градієнтів. Непрозорість. Колір ключових точок і піпетка. Задаєм код кольору. Додаємо ключові точки. Кут і напрямок градієнту;
- Практичні приклади. Додавання об'єму фігурі. Імітація руху. Об'ємні елементи інтерфейсу. Градієнт на фоні;
- Плагіни у Figma. Як працювати з плагінами. Інструкція по встановленню плагіну;
- Плагіни для градієнтів. Робота з плагіном uiGradient. Плагін Easing Gradients. Плагін Chromatic Figma.
В седьмой части по основам Figma вы научитесь работать с кривыми на продвинутом уровне. И хотя вы уже знакомы с булевыми операциями, которые позволяют создавать сложные векторные фигуры, это лишь вершина айсберга. С помощью инструмента Pen (переводится как перо) можно воспроизвести любую форму.
- Теорія кривих. Криві Безьє. Види кривих;
- Малюємо лінійну криву. Інструмент Pen. Створюємо найпростішу криву з нуля;
- Редагування кривих. Інструмент Move для переміщення точок. Інструмент Bend для управління кривизною. Інструмент Paint Bucket для заливання замкнутих контурів; Додавання та видалення точок;
- Налаштування кривих. Налаштування обводки. Перетворення обводки у криві. Скруглення кутів;
- Сайти з безкоштовними іконками. The Noun Project. Font Awesome. Cursor.in;
- Експорт у Svg. Покрокова інструкція.
Основы UI-дизайна
- Типографика. Виды шрифтов. Основные понятия в типографике. Правила подбора пар шрифта. Сайты с бесплатными шрифтами;
- Цвет. Модели представления цвета (RGB, CMYK). Аниатомия цвета (тон, свет, насыщенность). Цветовое колесо. Комбинирование цветов;
- Композиция. Симметричный и асимметричный баланс. Статика и динамика. Векторы внимания;
- Принципы дизайна. Гештальт-принципы дизайна. Подборка других важных принципов и методик.
- Модульные сетки. Преимущества сетки. Колонковая сетка. Модульная сетка. 8-пиксельная сетка;
- Иконки. Стили иконок. Правила подбора иконок. Сайты с бесплатными иконками. Изменение иконок под проект. Создание уникальных иконок;
- Фотографии. Правила выбора фотографий. Сайты с бесплатными фотографиями. Кадрирование. Коррекция цвета. Удаление объектов;
- Где брать идеи? Вдохновение для дизайнера. Мудборд. Полезные сайты;
- Работа с содержанием. Управление вниманием. Визуальный сторителлинг;
- Дизайн для мобильных устройств. Responsive дизайн. Адаптивный дизайн.
Основы 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 – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов о дизайне.
Последнее обновление 20 апреля 2022
Продолжить обучение
Продолжить обучение
К первому уроку