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

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

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

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

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

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

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

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

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

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

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

Дизайн. Интерфейс. 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. Часть 1

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

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

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

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

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

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

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


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

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

Урок уже готов. Схема будет скоро будет добавлена.


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

Основы Figma. Часть 5 (в процессе написания)

  • Кривые. Создание кривых. Виды углов. Управление углами;
  • Булевые операции. Объединение, вычитание, пересечение, исключение фигур. Преобразование в кривые;
  • Работа с кривыми. Управление сглаживанием кривых. Преобразование текста в кривые. Преобразование обводки в кривые. Экспорт в SVG;

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

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

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

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

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

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

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

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

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

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

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

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

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

Последнее обновление 12 октября 2020


Обучение дизайну
Февраль 2020


Что ещё почитать

Основы Figma. Часть 2. Группы. Работа с слоями. Пипетка. Импорт изображений. Делимся проектом

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

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

Основы Figma. Часть 1. Регистрация. Интерфейс. Первые шаги. Навигация и свойства объектов

Основы Figma. Часть 3. Фреймы. Сетки. Направляющие. Знакомство с компонентами

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


Оставьте комментарий



Комментарии

Таня · 27 марта 2020 19:18  
Спасибо большое за такое подробное и понятное раскрытие тем! Жду следующих уроков.
Люба Фурсеева · 27 марта 2020 21:25  
Таня, спасибо! Следующие уроки уже в процессе написания.)
Вика · 3 апреля 2020 01:24  
Круто структурированная информация, все просто и понятно)
Люба Фурсеева · 3 апреля 2020 01:27  
Вика, спасибо
Илья · 2 июня 2020 19:13  
Потрясающая работа, Спасибо Вам большое!
Люба Фурсеева · 2 июня 2020 20:52  
Илья, спасибо за ваш отзыв!
Alex · 3 июня 2020 13:50  
Спасибо Вам за структурированную информацию!Всё очень понятно)
Люба Фурсеева · 3 июня 2020 14:49  
Alex, спасибо!
Ольга · 26 августа 2020 16:14  
Спасибо Вам ОГРОМНОЕ за такой подробный и структурированный ввод в профессию! Очень помогает в освоении. Подскажите пожалуйста, когда будут доступны для изучения другие ваши части?
Люба Фурсеева · 26 августа 2020 16:23  
Ольга, большое спасибо за комментарий! Следующий урок в процессе написания, постараюсь закончить его в первой половине следующего месяца.
Вероника · 11 ноября 2020 20:05  
Большое спасибо за доступные уроки!
жду 7 ой урок уже)
Вам удачи и успехов в работе !)
Люба Фурсеева · 15 ноября 2020 00:35  
Вероника, большое спасибо!
Елена · 15 февраля 2021 23:04  
Люба, спасибо Вам за Ваш труд и подробное описание, нахожусь на пути выбора, изучаю материалы по разным профессиям, у Вас нашла все ответы на мои вопросы.
Люба Фурсеева · 16 февраля 2021 09:20  
Елена, спасибо за отзыв!
Илья · 16 февраля 2021 16:14  
Спасибо за статьи. Интересна статья "Основы UX/UI–дизайна". Когда примерно она будет выпущена не подскажите?
Oksana · 18 февраля 2021 19:39  
Очень разжевано и понятно. Для новичка - супер!
С нетерпением жду новых уроков.
Елизавета · 22 февраля 2021 20:55  
Огромная благодарность за такой прекрасный структурированный материал. Четко и становится понятно в каких направлениях двигаться. В ожидании новых уроков!:)
Люба Фурсеева · 22 февраля 2021 23:05  
Илья, спасибо! Сейчас, к сожалению, очень мало времени, буду стараться как можно быстрее написать новый урок. Следите за обновлениями
Люба Фурсеева · 23 февраля 2021 23:08  
Оксана, спасибо за отзыв! Стараюсь подавать материал максимально доступно
Люба Фурсеева · 23 февраля 2021 23:10  
Елизавета, спасибо большое! Приятно, что вы ждете новые уроки. Все будет, следите за обновлениями