ОЧНЫЙ КУРС
В МОСКВЕ И ПЕТЕРБУРГЕ
Профессия
«Веб-дизайнер»
С практическими заданиями, созданием портфолио, возможностью трудоустройства и стажировок.
ДЛИТЕЛЬНОСТЬ
ПРАКТИКА
4 месяца
48 академ. часов
4 месяца

85 часов
практ. работы
ТРУДОУСТРОЙСТВО
Рекомендуем
в компании партнеры
Для трудоустройства
или выхода на фриланс
ТЕОРИЯ
48 акад. часов
Программа курса
Введение в дизайн. Практика и инструменты
Основы веб-дизайна, развитие навыка, процесс создания
Зона ответственности дизайнера.
Cайты, приложения, процесс создания и что делает дизайнер.

Как развивать в себе дизайнера.
Что делать для развития дизайнерских навыков.

Как и где вдохновляться?
Сайты для вдохновения.

Процесс создания дизайна.
Показываем как создается дизайн.
Освоение программы Figma. Практика
Практические уроки по Figma
Знакомство с Figma.
Как и где скачать, как установить, как пользоваться.

Фреймы, шрифты и картинки.
Работаем с основными инструментами.

Группы и Маски.
Как использовать маски и правильно работать с группами.

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

Делаем всю страницу сайта.
Какие стадии разработки проходит сайт до публикации его в сети.

Переносим в планшетные устройства.
Два разрешения, показываем механику, повторяете за преподавателем.
Модульная сетка и композиция
Как работает модульная сетка и как ее построить. Композиция
Модульная сетка 1. Что такое модульная сетка?
Как работает, как делать в Фигме.

Модульная сетка 2. На мобильных устройствах.
Как создавать сетку на мобильных устройствах.

Модульная сетка 3. Как располагать элементы, опираясь на сетку.
Расположение элементов, не подходящих по размеченной сетке.

Композиция 1. Что такое композиция, как устроена.
Систематизация красоты.

Композиция 2 (практический). Доминанта.
Что есть доминанта, как выстроить ее самостоятельно.

Композиция 3. Цвет, подбор цвета, теория цвета.
Работа с колористикой.

Композиция 4. Фотографии, картинки, влияние их на дизайн.
Как найти и выбрать изображения, хорошо вписывающиеся в дизайн.

Композиция 5. Подбор контента, лицензирование и использование.
Правовые аспекты использования и подбора контента.
Типографика
Свойства шрифтов, шрифтовые пары, использование в вебе
Настроение, классификация шрифта.
Как шрифт передает настроение, на какие виды делятся шрифты.

Анатомия шрифта.
Кёрнинг, трекинг, интерлиньяж.

Редактура.
Дефис, тире, кавычки, висящие союзы.

Сервисы, коммерческие шрифты и некоммерческие, тарификация шрифтов, цены.
FontFaceninja, Google Fonts, Typetoday. Где посмотреть трендовые шрифты.

Верстка текста.
Нюансы абзацев, переносов и прочего в вебе.

Шрифтовые пары.
Как подобрать шрифты, которые пользователь посчитает красивыми.

Какие шрифты использовать.
Трендовые шрифты, поиск и использование.

Ошибки в типографике.
Как не стоит делать. Какие ошибки совершаю большинство дизайнеров.

Практический урок. Рисуем страницу Рубенса.
Повторяя за преподавателем, освойте работу с типографикой в Figma.
UX и аналитика
О том, как сделать интерфейс понятным и удобным
Что такое UX. Из чего состоит?
Введение в UX, на какие составные части делится.

Информационная архитектура. Иерархия.
Создание архитектуры для логичного перехода между разделами на сайте.

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

Метод персоны.
Разделение пользователей на персонифицированные группы и исследование каждой отдельно.

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

Формы и интерфейсы с полями. Часть 1.
Как упрощать, конкретные примеры.

Формы и интерфейсы с полями. Часть 2.
Кнопки, выпадающие меню и прочие элементы интерфейса.

Визуальный дизайн и UI-кит.
Создание стиля и сбор элементов интерфейса в разных состояниях.

Разбор ошибок в визуальном дизайне.
Какие ошибки чаще всего совершают дизайнеры при отрисовке интерфейса.

Готовые диджитал-гайдлайны. Примеры, объяснение, когда их применять надо и когда не надо.
Что такое guideline. Как создать свой и как использовать готовый. В каких ситуациях применять.

UX-аналитика 1. Юзабилити тестирование.
Проверка интерфейса на удобство для пользователя через тестирование самих пользователей.

UX-аналитика 2. Как работают карты кликов и карты ссылок в Яндекс.Метрике.
Какую информацию можно получить с помощью простых инструментов и как ее использовать для улучшения интерфейса.

UX-аналитика 3. Сегменты в Яндекс.Метрике и объяснение поведения пользователей в каждом сегменте.
Аналитика того, как разные пользователи с разными устройствами ведут себя на сайте.

Уровни по Джеймсу Гаррету.
Пирамида Гаррета в UX.

Создание mind-map.
Что это, зачем и как применять.

Прототипирование.
Создание логической блок схемы сайты, в которой показаны смысловые блоки и их расположение.
UX-практика
Работает над UX в программах
Создаём mind-map интернет-магазина.
Определяем структуру магазина, схемы и выполняем ее за преподавателем.

Создаём прототип главной страницы интернет-магазина по шаблону.
Прототипируем главную страницу интернет-магазина вместе с преподавателем.

Создаём прототип страницы каталога.
В каталоге определяем, нужны ли фильтры и сортировка. Если фильтры нужны, то с какими параметрами. Повторяем за преподавателем.

Создаём прототип страницы карточки товара.
Определяем, какая информация в карточке максимально важная и ставим ее на первый план, а какой можно пренебречь.

Создаём прототип страницы корзины.
Интерфейс корзины — количество товара, удаление товара, изменение данных пользователя, оплата.
Адаптивный дизайн
Как создавать дизайн под планшеты и смартфоны
Что такое адаптивный дизайн.
Изменение поведения элементов и разрешений.

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

Под какие разрешения надо рисовать.
И под какие делать сетку.

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

Типы верстки.
Резиновая, фиксированная, адаптивная фиксирована и адаптивная резиновая (responsive).

Адаптируем интернет магазин. Практический урок 1.
Каждую страницу. Объясняем как изменились элементы и почему именно так.

Адаптируем интернет-магазин. Практический урок 2.
Адаптируем остальные страницы.
Технические особенности
Этапы разработки сайта и особенности разработки
Этапы разработки сайта 1. Исследование.
И работа с заказчиком.

Этапы разработки сайта 2 Структура, прототип и макет.
Этап, до которого сайт был только в мыслях, а после — на руках макет для производства.

Этапы разработки сайта 3 Техническое производство.
Превращение дизайн макета в код.

Технические особенности 1. Как сайт попадает в интернет.
Этапы от замысла до конечной реализации проекта и публикации в интернете.

Технические особенности 2. Что такое фронтенд. Как работает код?
Фронтенд — то, что вы видите в своем браузере. HTML, CSS, Javascript.

Технические особенности 3. Что такое бекенд? Какие функции он умеет?
CMS, самописные движки. Что делает backend в веб-сайте.

Технические особенности 4. Домен и хостинг.
Как пользователь найдет ваш сайт в интернете.

Технические особенности 5. Как сдавать макет в разработку? Что нужно приложить, в каком формате и зачем?
Как дизайнеру подготовить свой макет так, чтобы программист реализовал его быстрее.

Технические особенности 6. Как можно реализовывать фронтенд и бекенд. Программисты vs Тильда.
Методы разработки. Какой в каких ситуация более эффективен.
Брендинг и позиционирование
Логотипы и фирменные стили, влияние их на восприятие бренда клиентом
Что такое бренд. Составляющие бренда.
На какие составляющие дизайнер может влиять, а на какие нет.

Как бренд влияет на голову человека.
Как бренд заставляет человека верить в легенду, используя готовые стереотипы.

Какую роль в этом играет выкладка товаров, дизайн витрин и дизайн сайтов/баннеров/приложений.
Цвета, настроение и конгруэнтность потребителю.

Что такое фирменный стиль бренда. Из чего состоит?
Что содержится в расширенных guidline бренда и как применяется.

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

Учимся делать простые шрифтовые логотипы.
Создаем логотипы для собственных проектов.
Трудоустройство и защита проекта
Модуль для построения карьеры или выхода на фриланс
Трудоустройство. Какие компании нанимают дизайнеров и какие зарплаты и задачи.
В разных компаниях дизайнеры рисуют разные проекты. А еще им по-разному за это платят и предъявляют разные требования. Этот урок ответит на щекотливые вопросы.

Основные форматы работы дизайнеров.
Фриланс, постоянка в офисе, постоянка удаленная.

Как составить резюме
Что в резюме писать не стоит, а что нужно вынести на первый план.

Как составить сопроводительное письмо.
Оставьте описание вашей "стрессоустойчивости" и "коммуникабельности" при себе. Лучше расскажите, чем вы увлекаетесь.

Как и где искать работу постоянную.
HH.ru — не единственный ресурс. Есть еще множество путей, не всегда очевидных.

Как искать заказы для Фриланса.
Найти высокооплачиваемые заказы, схватить их и при этом найти их у адекватного заказчика.

Как искать субподрядчиков для фриланса.
Часто заказывают проекты под ключ (дизайн+разработка). Как найти партнера для таких проектов.

Как защищать проект перед клиентом на фрилансе.
На фрилансе и в компании защиты разные, как и мотивация принимающей стороны. Изучим в этом уроке.

Как проходит защита в компании перед заказчиком.
Особенности корпоративных презентаций.
Анимация. Protopie, Principle, Figma, After Effects.
Анимация в веб-дизайне.
Что такое анимация в вебе.
Микро и макро анимация.

Анимация взаимодействия.
Ховеры, активы, переходы, как это работает.

Макро анимация, разбор примера.
Когда анимация — неотъемлима от стиля и смысла проекта.

Разбор софта для анимации.
Protopie, Principle, Figma, After Effects.

Как передавать анимацию в разработку.
Как показать разработчику, какую анимацию, с какими переходами и временными задержками вы хотите.

Анимируем элементы на главной странице интернет-магазина.
Анимация при загрузке и после нее.

Анимируем кнопки, поля. Прилёт элементов.
Анимация микровзаимодействий.

Анимируем элементы при скролле.
Учимся делать анимацию при скролле в достаточном количестве. Не так, чтобы заполонить ей все внимание пользователя.

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

Анимируем переход от страницы к странице.
Страницы могут меняться не со стандартной загрузкой элементов, а с приятной анимацией.

Анимируем форму регистрации.
Форма сбора контактов пользователя и регистрации.

Делаем макроанимацию. Часть 1.
Создаем анимацию с сюжетом. Планируем ее, создаем ключевые кадры.

Делаем макроанимацию. Часть 2.
Отрисовываем и анимируем элементы для макроанимации, согласно собственному плану.
Оформление портфолио
Секреты создания портфолио дизайнера, с которым легко найти работу или фриланс
Что такое портфолио дизайнера и как оно может быть представлено.
Порталы, собственные сайты, новые методы.

Как создать кейс проекта.
Из чего состоит кейс. Что надо показать и как объяснить пользователю.

Разбор примеров кейсов хороших и плохих.
Как не нужно оформлять свое портфолио — разбор примеров.

Создаём кейс из ДЗ2.
Оформляем свою домашнюю работу для портфолио.

Выкладываем свой кейс, видеоинструкция.
Публикация собственной работы.
Практика. Воркшопы. Портфолио
Домашние задания и создание портфолио
Домашнее задание: сделать первую страницу сайта «портфолио», учитывая весь материал.
Первая домашняя работа для разминки.

Домашнее задание: сделать майндмеп и прототип самостоятельно и сдать на проверку.
Учимся делать понятный интерфейс.

Домашнее задание: отрисовать по прототипу 4 страницы интернет-магазина: главная, каталог, карточка, корзина.
Переходим к отрисовке, учимся создавать стиль, UI-киты и анимацию.

Адаптировать свой интернет-магазин и сдать ментору на проверку.
Самостоятельно адаптируем свой макет под планшеты и смартфоны.

Домашнее задание: создать дизайн сайта известной личности или исторического события.
На выбор предоставляются темы и уровень сложности. Можно предложить свою тему.

Создать простой логотип для ДЗ-2 и защитить его.
Базовые уроки графического дизайна.
Записаться на очный курс
«Профессия веб-дизайнер»
4 158
02 : 11 : 59 : 00
Стоимость обучения в Москве или Петербурге:
Даты проведения в Москве: cтарт 1 сентября
Даты проведения в Петербурге: старт 1 сентября
₽/мес.
на 12 мес.
Часто задаваемые вопросы
Как проходит обучение?
В зависимости от выбранного формата, обучение может проходить как очно, так и в формате онлайн-курса. Онлайн-курс подразумевает изучение видеоуроков, консультации преподавателей и выполнение практических занятий. Курс вживую в Москве и Санкт-Петербурге подразумевает формат живых лекций, консультаций и также практические занятия. Мы рекомендуем посещать занятия вживую, если вы из Москвы, Санкт-Петербурга или имеете возможность приехать из другого региона. Если же возможности приехать у вас нет, то онлайн-курс специально для вас.
Когда и где будет проходить обучение и сколько оно продлится?
Занятия проходят в Москве по адресу: Москва, Лубянский проезд, 19 стр. 1 и в Санкт-Петербурге, улица Чайковского, 79. Актуальные даты начала занятий и место проведения указываются в блоке с расписанием. Одно занятие длится около двух часов, но стоит закладывать чуть больше времени на то, что занятие может растягиваться из-за разбора практических работ студентов.
Вы действительно оплачиваете проживание и перелет своим студентам на время обучения?
Да, это действительно так. Чтобы узнать подробные условия, напишите нам на почту hello@m-d-a.ru с темой «Проживание и перелет» и мы проконсультируем вас. Также вы можете написать нам в окно Jivosite или позвонить по телефону 8-800-30-100-97.
Что нужно иметь при себе на занятиях?
На всех программах крайне необходимо ваше желание учиться и познавать новое, а также хорошее настроение. Очень хорошо иметь при себе тетрадь или большой блокнот, куда вы будете записывать и зарисовывать важную информацию. Технические средства — по желанию.
Что делать, если я не смог прийти на занятие?
Пропускать занятия крайне нежелательно, потому что все темы курса очень важны. В таком случае, вы можете взять практическое задание по пропущенной теме и попытаться выполнить его самостоятельно, а на следующем занятии обратиться к преподавателю за подробной информацией. Также вы сможете скачать запись онлайн лекции, которая позволит вам изучить пропущенную тему.
Как получить сертификат?
Для того чтобы получить сертификат об окончании Moscow Digital Academy, вам необходимо сделать итоговую работу. Чтобы собрать кейсы, нужно выполнить не менее 70% всех практических заданий. Вам будет назначен руководитель, который будет помогать вам оформлять итоговый проект.
Что делать, если возникла проблема или срочный вопрос?
Вы всегда можете задать вопрос в нашей группе в Фейсбуке или Вконтакте, написать нам на электронную почту hello@m-d-a.ru, написать напрямую преподавателю или позвонить нам по телефону.