Профессия Веб-дизайнер (UX/UI) от Бруноям

О школе

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

О професии

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

Базовые навыки UX/UI дизайнера:

1. Знание принципов проектирования пользовательского интерфейса и взаимодействия с пользователем;
   
2. Умение создавать прототипы и макеты интерфейсов для различных устройств и платформ;
   
3. Опыт работы с инструментами для создания макетов, такими как Figma, Sketch или Adobe XD;
   
4. Понимание принципов юзабилити и эргономики;
   
5. Навыки работы с анимацией и интерактивными элементами;
   
6. Знание основных трендов и тенденций в дизайне интерфейсов;
   
7. Умение работать в команде и общаться с разработчиками и другими специалистами;
   
8. Владение английским языком на уровне, достаточном для чтения технической документации.

Средняя зарплата UX/UI дизайнера:

1. Уровня Junior - в России составляет около 50 000 - 60 000 рублей в месяц;
   
2. Уровня Middle - в России составляет около 60 000 - 170 000 рублей в месяц;
   
3. Уровня Senior - в России составляет от 170 000 рублей в месяц.

В среднем в России в месяц публикуется около 1 700 вакансий.

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

5 месяцев обучения
1 год поддержки наставника после обучения
10 самых полезных навыков

Блок 1. Введение в профессию веб-дизайнер

• Чем занимается веб-дизайнер
• Где работает, какие могут быть проекты
• Этапы работы над проектом
• В чём роль дизайнера на всех этапах проектах
• UX, UI-дизайнеры: в чём разница
• Знания из каких областей нужны веб-дизайнеру

Блок 2. Аналитика

• Артефакты UX
• Исследование бизнеса
• Исследование пользователей
• Персонажи
• Сценарии
• Карта эмпатии

Блок 3. Типы сайтов и насмотренность

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

Блок 4. Основы Figma

• Обзор интерфейса и всех возможностей программы
• Сетка. Что это такое, какие они бывают и как используются
• Много практики с сеткой

Блок 5. Типографика

• Определение
• Основные понятия о шрифтах
• Сочетания шрифтов
• Приемы в работе со шрифтами
• Примеры хорошо подобранных шрифтов
• Текст на сайте. Инфостиль
• Типографика в вебе
• Тренды в веб-дизайне
• Работа с контентом и текстами

Блок 6. Колористика

• Композиция и цвет
• Подбор цветовой гаммы относительно ЦА
• Визуальные акценты. Управление вниманием пользователя

Блок 7. Прототип

• Создание мудборда в Figma
• Создание скетча в Figma
• Создание прототипа в Figma
• Создание интерактивного прототипа в Figma
• Подготовка прототипа к отправке клиенту

Блок 8. Композиция и цвет

• Композиция. Принципы
• Композиционный центр (доминанта)
• Ошибки. Примеры хороших композиций
• Контраст. Равновесие. Ритм. Взгляд
• Z и F паттерны. Сетка (примеры, силовая линия), правило третей
• Цвет. Цветовые модели (HSB, RGB, HEX коды, CMYK)
• Параметры. Цветовой круг Иттена. Как выбрать цвет
• Психофизиология интерфейсов. 7±2 (пример — навигация в шапке), какие данные лучше воспринимаются и запоминаются, геометрическая память, закон края, правило близости, группировка, контраст

Блок 9. Создание макета сайта

Создание полностью готового макета сайта для портфолио

Блок 10. Адаптивный дизайн

• Адаптивный дизайн. Предпосылки
• На каких устройствах может просматриваться сайт
• Варианты решения адаптивности
• Примеры. Точки разлома
• Mobile First
• Особенности прототипирования в Figma
• Компоненты, фиксация при скроле, подвижная карта
• Работа с Figma Mirror

Блок 11. Работа с фото и иллюстрациями в Photoshop

• Цветокоррекция
• Кадрирование
• Портретная ретушь. Лайфхаки
• Фильтры семейства “Размытие”: по Гауссу, в движении, радиальное и т.д.
• Покадровая анимация
• Настройки векторных объектов (заливка, градиент)
• Перо. Работа с точками, узлами и кривыми
• Разница между Фигурой и Контуром

Блок 12. Перенос макета из Figma в Tilda

Дополнительный модуль с разбором не очень популярной, но полезной функции по переносу готового макета из Figma в Tilda

Блок 13. Карьера и развитие

• Портфолио
• Площадки для размещения
• Обзор Behance
• Требования к оформлению
• Оформление на Behance
• Принципы хорошего кейса
• Кейсы и примеры на Behance и Dribbble
• Поиск работы. Где брать заказы