UX/UI дизайн

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

• понимать специфику UX/UI дизайна и различать UX и UI;
• проводить исследования и анализ/ аудит юзабилити, проектировать структуру и навигацию продукта;
• прототипировать и тестировать контент и логику сайтов, лендингов под десктоп и мобайл;
• разрабатывать визуальный дизайн интерфейсов в современном формате,  понимать принципы композиции, типографики и сочетания цветов;
• мыслить дизайн-системами и разрабатывать адаптацию для разных экранов;
• прототипировать механику и анимацию ui-дизайнов;
• готовить проект для передачи разработчикам;
• презентовать разработку сайта.

• для тех, кто собирается пойти в ux/ui-дизайн и не знает, с чего начать;
• для тех, кто не имеет опыта работы;
• для тех, кто в курсе современных инструментов и хочет быстро их освоить и применять;
• для тех, кто что-то уже умеет, но хочет узнать, как это применять на практике в реальной работе.

Escone – супер-сервис для UX-разработки интерактивных прототипов и тестирования проектов, особенно высоконагруженных и многостраничных, с полной эмуляцией механик и взаимодействия реального сайта, без знания вёрстки и программирования

1. Начало работы: регистрация, версия trial. Интерфейс: панели виджетов, панель свойств, административная панель. Настройки проекта: ширина холста, локальные стили. Масштабирование и навигация. Сетка.
2. Работа с виджетами шейпов: создание, стили, эффекты, ссылки. Таблица. Изображения.
3. Панель иконок: коллекции, избранное. Настройки параметров.
4. Работа с функциональными виджетами: кнопки, меню, аккордеон, вкладки, ссылки.
5. Использование контролов: поле ввода, числовое поле, выпадающий список, checkbox, radiobutton. 
6. Панель страниц: создание, дублирование, переименование, удаление, создание иерархии-структуры. Способы перелинковки.
7. Панель секций: создание, дублирование, удаление, настройки. Сквозные,  фиксированные, скрытые.
8. Сложные интерактивные сценарии: динамические панели, хотспот, настройка события. Создание слайдера. Действие по клику, наведению, двойному клику, фокус, вне элемента.
9. Всплывающие окна: создание, настройки, перелинковка.
10. Безопасная демонстрация заказчику. Доступ по ссылке.
11. Экспорт страниц и выгрузка всего проекта.

Photoshop – основной классический редактор для простой и сложной работы с растровыми изображениями, создания коллажей и иллюстраций, оптимизации для интерфейсов, продвинутой анимации

1. Что должен знать и уметь в Photoshop дизайнер интерфейсов.
2. Базовая настройка рабочего пространства. Параметры файла, изменение.
3. Инструменты рисования. Инструменты заливки. Возможности работы с цветом.
4. Возможности докера Layer. Эффекты (new, copy, paste, clear, scale, global light). Режимы mode.
5. Понятие select. Quick mask, magic wand. Дополнительные инструменты. Режимы создания. Параметры. Инверсия. Трансформации. Вырезание сложных объектов.
6. Использование mask (layermask, clippingmask, vectormask )
7. Векторные инструменты: понятие paths, понятие shape, режимы работы, функции и переназначение, логические операции.
8. Текст: виды текстов, ввод, конвертация, деформации и растеризация. Параметры текстов. Обтекание текстом объектов. Что нельзя сверстать на сайте.
9. Smart-объекты. Возможности и применение для веб-дизайна.
10. Цветовые модели файлов. Channel.
11. Основы коррекции изображений: тоновая и цветовая. Инструменты. Локальная коррекция. Обратимая коррекция. Азы ретуши.
12. Индексация, оптимизация для веб-задач. Экспорт.
13. Создание анимации в Photoshop: покадровая и на Timeline (*.gif, *.mp4)

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

1. Начало работы в Figma: регистрация, браузерная версия, приложение для настольного ПК. Интерфейс: слои, панель свойств, панель инструментов, инспектор. Привязки, линейки. Масштабирование и навигация.
2. Group и Frame, логика построения макета, иерархия слоев.
3. Векторные объекты: создание, параметры, n-свойства. Режим редактирования. Булевские операции. Организация. Заливки, обводки.
4. Система стилей.
5. Работа с текстом: создание, параметры, стили, шрифты, локальные шрифты. AutoLayout: логика, возможности.
6. Работа с Image: форматы, импорт, экспорт, возможности редактирования, обрезка.
7. Маски: создание, редактирование, нюансы.
8. Эффекты: применение, многослойность, режимы наложения.
9. Адаптивный дизайн в Figma: логика constraints.
10. Сетки: Interface Grid, Column Gird, Module Gird.
11. Основы дизайн-системы: component. Сложные компоненты. Объединения Variants.
12. Прототипирование интерактивного взаимодействия.
13. Анимация в Figma и плагины.
14. Работа с файлами: импорт, экспорт, хранение копий, показ Заказчику.
15. Организация проекта для разработчика: дизайн-система, подготовка макета, оглавление и перелинковка. Полезные плагины.
16. Инспектор code для разработчиков. Работа в команде. Контроль версий.

Тема 1. Введение в веб-дизайн
UX/UI дизайн. Особенности работы веб-дизайнера. Лидогенерация. Конверсия. Usability. Алгоритм создания сайта. Этапы проектирования сайта и интерфейса.

Тема 2. Классификация и назначение веб-сайтов.
Виды современных веб-технологий и устройств. Адаптивные сайты. Мобильные версии и мобильные приложения.

Тема 3. Начало UX: предпроектное исследование.
Брифинг и работа с заказчиком. Бенчмаркинг. Product Vision.

Тема 4. Проектирование: пользовательские исследования.
Семантика сайта: ключевые запросы, сервисы для анализа. Конкурентная разведка. Сегментирование аудитории и кластеризация.

Тема 5. Моделируем ключевые Персоны ЦА.
Эмпатия. Дизайн-мышление. Психология.

Тема 6. Погружение в User Experience.
Роли персон. Пользовательские сценарии: основной, альтернативные.
Сбор пользовательских требований. Сбор функциональных требований.

Тема 7. Информационная архитектура
Структурирование, релевантность, юзабилити. Базовый состав. Инструменты и сервисы для визуальной разработки структуры.
Логическая структура контента. Учимся делать и читать структурный проект.

Тема 8. Проектирование навигации.
Логическая и рекламная. Ошибки навигации и User Experience. Юзабилити.
Основная, вторичная, внутренняя навигации. Базовая перелинковка.
Виды навигаций. Обзор элементов навигации: терминология, разновидности.
Паттерны поведения пользователей.

Тема 9. Разработка содержания.
Релевантность, работа на SEO. Анализ точек входа и выхода.
Работа на конверсию: маркетинг-модель АИДА, триггеры, СTA.

Тема 10. Прототипирование
Риски в работе над web-проектами. Прототип: понятие, цели, разновидности. Инструменты и облачные сервисы. Делаем интерактивный прототип.

Тема 11. Usability тестирование.
Методы, инструменты. Сплит-тесты. Чек-лист тестировщика. Выводы, результаты, устранение ошибок. Адаптация.

Тема 12. Эффективный маркетинг.
Сателлиты, дорвеи. Landing Page: цели, задачи, преимущества. Особенности структуры. Оффер. Прототип.

Тема 1. Начало UI.
Психология восприятия цвета: стереотипы, ассоциации для web-аудитории. Представления заказчика. Moodboard. Цветовые схемы и  инструменты для создания.
Подбор цветовой атмосферы.

Тема 2. Типографика.
Шрифт и текст на сайте: адекватность, сочетаемость, отображение. Правила работы с шрифтами: иерархия, шрифтовые пары, выбор шрифта для проекта. Форматы, конвертация, проблемы рендера.
Usability блоков текста. Калькулятор расчета.

Тема 3. Логотип. Иконографика.
Понятие. Способы создания. Инструменты и сервисы для разработки. Этапы работы, рекомендации по процессу
Брендбуки. Логобуки. Гайдлайны.
Favicon.

Тема 4. Неожиданные страницы.
Заглушка: цели, структура, дизайн. Ошибка 404.

Тема 5. Основы дизайна применительно к вебу.
Теории дизайна, принципы композиции, критерии завершенной работы. Создаем не картину. Ошибки и устранение. Головная боль: неизбежное разрушение композиции. Понятие первого экрана. Аудит конкурентов.

Тема 6. Не искусство. Плохой и хороший дизайн. Красивый и конверсионный.
Usability визуала. Уникальный, стандартный, шаблонный.
Концептуальный дизайн для целей проекта.
Риски в работе над крупными проектами. Тренды, креатив и стандартизация элементов.
Творческий поиск: design reference. Ассоциации, вдохновение, генерация идей.

Тема 7. Разработка концепции.
Лоскутный прототип на основе UX-прототипа. Разработка дизайна. Варианты концепт-макета.  Аудит и доработка. Проблемы согласования и утверждения дизайна у заказчика. Акцепт. Система страниц.

Тема 8. Особенности и трудности современного веб-дизайна.
Modular Grid. Дисплеи Retina, решения проблемы. SVG-технологии. Рекомендации по созданию векторных иллюстраций, форматы, svg-конвертации в Ai. Оптимизация растров.

Тема 9. Адаптивность сайта.
Breakpoints. Нюансы визуализации дизайна. Юзабилити. Touchscreen. Эргономика. Практика адаптации под Mobile.

Тема 10. Динамика в интерфейсах.
Анимация в веб-дизайне. Микровзаимодействия. Способы разработки.
Интерактивный прототип дизайна.

Тема 11. Лендинг.
Визуализация по прототипу. Практика адаптации под Mobile.

Тема 12. Выходные материалы для разработчиков.
Подготовка итогового макета к верстке: структурирование, семантика, система компонентов.
Создание UI Style Guide. Архив для верстальщика.

Тема 13. Презентация проекта (итоговое занятие).
Презентация skills.

Esc.one(его англоязычный брат-близнец framic.io)

Отличный облачный инструмент для автоматизации создания интерактивного прототипа сайта без знания программирования с возможностью шаринга проектов и выгрузкой в разные форматы.

Список возможностей впечатляет: реакции на взаимодействие с элементом, якоря, динамические панели, свозные и фиксированные секции, всплывающие окна, вкладки, аккордеоны, поля ввода и дерево страниц… и многое другое для создания действующей модели продукта для тестирования и согласования с клиентом.

Также содержит отдельные инструменты для блок-схем и ментальных карт

Photoshop

Как и много лет назад, Photoshop способен справиться с любой задачей, которая имеет отношение к растровой графике. Его место в современном дизайне интерфейсов и интернет-рекламе – создание коллажей, баннеров и обработка фото для сайтов и приложений с учетом специфики веб-разработки, адаптивности, оптимизации и других нюансов веб-сферы.
Возможности его безграничны, но нужно заранее планировать, для каких целей будет создаваться макет и учитывать нюансы для веб или мобильных интерфейсов.

Figma

Сегодня занимает позицию №1 в списке инструментов современного UI-дизайнера: это визуализация дизайна интерфейсов сайтов и мобильных приложений, система  компонентов для создания гайдов и Ui-kit, адаптивные дизайны и интерактивный прототип взаимодействия дизайн-макетов, моделирование и тестирование анимации и микровзаимодействий в интерфейсах, колоссальное ускорение и облегчение последующей работы с макетом для верстальщика и программиста, командная работа, контроль версий и многое другое.

Figma имеет как браузерную версию, так и десктопное приложение. И доступен на любой платформе.

Макет, сделанный в figma, позволяет верстальщику сверстать его с ускорением в 2-3 раза по сравнению с другими исходниками.