Узнать подробности и записаться на сайте школы на пробный бесплатный урок Сайт школы

Курс "UX & UI Designer"

Школа LevelUp

Базовых знаний для наших курсов не требуется,мы научим всему с нуля

  • Срок обучения
    3,5 месяца

В результате курса Вы научитесь: 

  1. Изучать аудиторию, хорошо понимать ее при помощи профессиональных методик и «попадать в яблочко ее ожиданий»
  2. Проектировать на основе исследований
  3. Мыслить процессами, а не картинками
  4. Создавать пользовательские роли, персоны, персонажи, составлять сценарии их взаимодействия с продуктом
  5. Проводить юзабилити-аудит
  6. Проверять решения при помощи юзабилити-тестирования
  7. Улучшать пользовательские характеристики уже существующих сайтов
  8. Повышать конверсию и увеличивать эффективность продукта
  9. Создавать продукты, которые восхищают пользователей
  10. Рисовать живые прототипы 
  11. Работать с Figma на профессиональном уровне
  12. Делать адаптивный дизайн
  13. Рисовать UI для мобильных приложений 
  14. Сделать красивый, информативный дизайн для рассылки 
  15. Работать со всем актуальным на данный момент инструментарием дизайнера

Практика: 

  • В результате курса у Вас минимум будет 1-2 проекта с прототипами, дизайн-концепцией и отрисованными и в идеале свёрстанными страницами сайта / проекта

Требования к участникам курса: 

  • Начальных знаний не требуется, всему учим с нуля

Программа обучения

Модуль 1. UX 

Занятие 1. Знакомство. Введение в юзабилити.

  • Знакомство с преподавателями курса. Краткое содержание курса. Цели, итоги, домашние задания, работа над проектами, вопросы.
  • Понятия юзабилити, UX.
  • Отличие UX от UI.
  • Примеры кейсов пользы UX.
  • Этапы и подэтапы UX.
  • User Centered Design, Task Centered Design. Основные задачи UX.
  • Стандарт ISO/DIS 9241-210, описывающий методологию человекоориентированного подхода к проектированию интерфейсов.
  • С чего начинается UX.
  • Изучение целей и задач бизнеса.
  • План беседы с представителями заказчика.
  • Домашнее задание.

Занятие 2. С чего начинается UX.

  • Планирование процесса проектирования.
  • Дизайн как решение поставленной задачи.
  • Data-driven design.
  • Формирование гипотетических представлений о пользователях.
  • Методика профилей пользователей.
  • Практика: Формирование гипотетических представлений о пользователях.

Занятие 3. Юзабилити аналитика.

  • Изучение предметной области.
  • Изучение конкурентов.
  • Методы сбора информации.
  • Интервью, опросы, эксперименты, контент-анализ.
  • Выбор метода сбора информации.
  • Работа с экспертами.
  • Каким результатам исследований можно верить.
  • Домашнее задание.

Занятие 4. Юзабилити аналитика.

  • Исследование пользователей.
  • Инструменты анализа.
  • Систематизация и интерпретация полученных данных.
  • Карты эмпатии.
  • Методика пользовательские ролей и ситуаций использования.
  • Практика: Подготовка к получению данных о пользователях.
  • Домашнее задание.

Занятие 5. Юзабилити аналитика.

  • Методика персонажей.
  • User Stories.
  • Концептуальные сценарии.
  • Конкретные сценарии.
  • Use cases.
  • Метод волшебной палочки.
  • ПрактикаСоставление персонажей и ситуаций использования.

Занятие 6. Юзабилити аналитика.

  • Анализ полученных данных.
  • Customer Journey Map.
  • Написание сценариев взаимодействия (методика).
  • Составление требований к интерфейсу.
  • Практика: Написание сценариев.
  • Практика: Составление требований к интерфейсу.

Занятие 7. Тонкости проектирования процессов взаимодействия. 
Концептуальное проектирование.

  • Подходы гуру юзабилити. Стив Круг. Якоб Нильсон. Алан Купер. Джеф Раскин.
  • Концептуальное проектирование.
  • Направление внимания пользователя.
  • Золотые правила юзабилити.
  • Кодировка цветом, акцентирование, объем внимания, закон Фиттса.
  • Метод карточной сортировки.
  • Юзабилити элементов cta, веб-форм, страниц товаров.
  • Ясность, приветливость и обаяние интерфейса.
  • Практика: Концептуальное проектирование.
  • Домашнее задание.

Занятие 8. Базис проектирования процессов взаимодействия. Написание спецификации на интерфейс.

  • Информационная архитектура.
  • Детальное проектирование.
  • Инструменты для прототипирования.
  • Participatory design.
  • Проектирование на основе паттернов. Библиотеки паттернов.
  • Гайдлайны.
  • Написание спецификации на интерфейс.
  • Практика: Детальное проектирование.
  • Домашнее задание.

Занятие 9. Тестирование интерфейса.

  • Цель тестирования.
  • Аналитика CJM.
  • Юзабилити-тестирование.
  • Разработка сценариев тестирования.
  • Рекрутинг респондентов.
  • AB тестирование. Инструменты для АВ тестирования.
  • Eye – треккинг.
  • Представление прототипов заказчику.
  • Практика: Планирование, подготовка к юзабилити-тестированию.

Занятие 10. Повышение эффективности продукта.

  • Работа с конверсией и другими показателями проектов.
  • Стратегия экспериментов.
  • Разбор кейсов.
  • Библиотеки кейсов повышения конверсии.
  • Оформление работы в своем портфолио.
  • Практика: Проведение юзабилити-тестирования.
  • Домашнее задание.

Занятие 11. Экспертная оценка (юзабилити-аудит).

  • Эмпирическая оценка.
  • Оценка по сценариям.
  • Оценка по чек-листам.
  • Выбор способа проверки эффективности продукта.
  • Типичные ошибки интерфейсов. «Best practices». Примеры интересных решений в интерфейсах.
  • Практика: Юзабилити-аудит критичных проблем интерфейса по сценариям.
  • Практика: Юзабилити-аудит критичных проблем интерфейса по эмпирикам.
  • Подведение итогов курса. Ответы на вопросы. Куда двигаться дальше?

Модуль 2. UI

Занятие 1. Основы визуального дизайна

  • Краткое знакомство с проектами участников, результатами 1-го модуля
  • Базовые элементы дизайна
  • Цвет
  • Дизайн-концепция
  • Домашнее задание: изучить список полезных ресурсов/лекций/книг для вдохновения. Подготовить мудборд, дизайн-концепцию и цветовая схема для своего проекта

Занятие 2. Типографика

  • Шрифтовые традиции
  • Текст как базовый элемент вёрстки
  • Виды шрифтов
  • Интерлиньяж, кегль, поля, отступы и модульность
  • Технические возможности программ. Какой инструмент выбрать?
  • Знакомство с Figma, Sketch, Adobe XD
  • Подбор шрифтовых пар
  • Вёрстка своего проекта
  • Домашнее задание: продолжаем работу над проектом

Занятие 3. Основы работы с макетом

  • Закон Фиттса, теория близости, визуальная структура
  • Примитивы вёрстки
  • Принцип модульности
  • Якорные объекты
  • Чередование ритма
  • Собираем свою страницу
  • Как работать с сеткой в 12 колонок
  • Домашнее задание: продолжить собирать страницу

Занятие 4. Поведение интерфейса

  • Основные элементы контента
  • Как показать состояние интерфейса
  • Как оформить ссылки
  • Как сделать хорошую кнопку
  • Домашнее задание: нарисовать нужные элементы контента в разных состояниях

Занятие 5. Векторная графика в UI

  • Растровая и векторная графика
  • Иконки и пиктограммы
  • Размеры в вебе
  • Сетки и гайдлайны
  • Экспорт иконок. SVG формат
  • Домашнее задание: сет из 7 иконок

Занятие 6. Навигация и структура

  • Виды навигации
  • Информационная архитектура сайта
  • Интерфейс интернет-магазина
  • Удобная регистрация
  • Домашнее задание: навигация по своему проекту

Занятие 7. Адаптация под Mobile

  • Концепция Mobile first
  • Резиновый дизайн, респонсив и адаптив
  • Популярные сетки для адаптива
  • Разработка сета из нескольких разрешений

Занятие 8. Передача проекта в вёрстку

  • Учитываем: состояния кнопок и форм, слайдеры, всплывающие окна
  • Передача графики и иконок
  • Как взаимодействовать с разработчиком? Zeplin
  • Домашнее задание: подготовить архив для передачи разработчику

Занятие 9. Собрать страницу без вёрстки и программирования

  • Что такое визивиг-редакторы
  • Readymag, Tilda, Webflow
  • Примеры сайтов на Readymag
  • Оживляем свой проект с помощью Readymag
  • Домашнее задание: подготовить проект и презентацию заказчику

Занятия 10-11. Работа над проектами

Занятия 12. Презентации проектов заказчику

  • Презентация и разбор макетов
  • Подготовка портфолио 
  • Как попасть на работу в компанию мечты?

Модуль 3. Основы фронт-енд разработки для дизайнеров

Занятие 1. Введение (Git, VS Code, HTML)

  • Краткое знакомство с проектами участников, результатами модуля 1-2.
  • Основы работы с системой контроля версий на примере git (установка, основные команды) + Github Desktop 
  • Знакомство с VS Code
  • Знакомство с HTML 
  • Структура страницы
  • Основные теги

Занятие 2. CSS

  • Знакомство с CSS 
  • Подключение, Селекторы, Свойства
  • БЭМ
  • Позиционирование элементов

Занятие 3. Адаптив, препроцессоры, Flexbox, CSS Grid

  • Виды вёрстки (фиксированная, адаптивная, резиновая) 
  • Flexbox
  • CSS Grid
  • Знакомимся с препроцессорами (SASS)

Занятие 4. Элементы управления

  • Знакомимся с основными элементами управления
  • Разбираем принципы работы самых популярных элементов на примере элементов Bootstrap

Занятие 5. Практическое занятие 

  • Выбираем макет для вёрстки (либо свой, либо берём на просторах интернета)
  • Рассматриваем варианты экспорта (в Zeplin и в Figma)
  • Разбираем все практические вопросы
  • Pixel Perfect
  • Разбираем возникающие вопросы

Занятие 6. Основы JavaScript

  • Очень коротко о Node.js
  • Переменные и типы данных
  • Функции
  • Работа с DOM
  • События

Занятие 7. Практическое занятие

  • Применяем знания, полученные на предыдущем занятии и делаем свою реализацию нескольких элементов управления
  • Разбираем возникающие вопросы

Занятие 8. Финальная презентация курсовых проектов

  • Презентации проектов 
  • Разбираем возникающие вопросы
  • Подготовка к собеседованию