Moscow Digital Academy. Профессия «Веб-дизайнер»

Оставить заявку

Продолжительность курса

6 месяцев

54900 руб. за курс

Записаться
Метро

Метро

Уровень подготовки

Уровень подготовки

Начальный, Продвинутый, Профессиональный

slide 1

Возраст

Взрослые

О курсе веб-дизайна

Кому подходит курс?
Если вы не связаны с IT средой, никогда
не делали дизайн и пришли из другой сферы —
то этот курс отлично подойдет вам. Вы прокачаетесь с нуля до уровня junior-дизайнера.
На курсе вы научитесь делать дизайн сайтов и подготовите свое портфолио для фриланса или трудоустройства.
Если вы были связаны с дизайном до курса, то вы сможете подтянуть знания веба, прокачать стилевой навык и полностью перейти
в digital среду, продолжив карьеру.
На курсе вы научитесь делать дизайн сайтов и подготовите свое портфолио для фриланса или трудоустройства.
Какие навыки
вы получите на курсе?

Проектирование интерфейсов (UX)
Аналитика, инструменты проектирования, прототипирование.

Отрисовка интерфейса (UI)
Овладеете стилевым навыком, научитесь рисовать красивый дизайн.

Изучите дизайнерские
программы
Figma, Photoshop, Principle, Protopie, After Effects.

Композиция и типографика
Научитесь работать со шрифтом, освоите модульную сетку и композицию.
Адаптивный
дизайн
Подходы к UX, методы создания удобного интерфейса под все устройства.

Защита проектов и трудоустройство
Презентация, менеджмент, подготовка портфолио и резюме.

Технические особенности
Код, что такое frontend и backend, как они работают в связке.

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

01
Смотрите обучающие видео и задаете вопросы
Смотрите видеоуроки c телефона, планшета или ноутбука, когда вам удобно.

02
Делаете домашние задания и отправляете на проверку
Выполняете задания и отправляете на проверку через личный кабинет.

03
Получаете комментарии от личного ментора
Индивидуальные разборы ваших проектов в видеорецензиях.


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

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

Заказать звонок

Программа курса веб-дизайна

Программа курса Moscow Digital Academy. Профессия «Веб-дизайнер»
  • Введение в дизайн. Практика и инструменты. Основы веб-дизайна, развитие навыка, процесс создания. Зона ответственности дизайнера 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 интернет-магазина Определяем структуру магазина, схемы и выполняем ее за преподавателем. Создаём прототип главной страницы интернет-магазина по шаблону Прототипируем главную страницу интернет-магазина вместе с преподавателем. Создаём прототип страницы каталога В каталоге определяем, нужны ли фильтры и сортировка. Если фильтры нужны, то с какими параметрами. Повторяем за преподавателем. Создаём прототип страницы карточки товара Определяем, какая информация в карточке максимально важная и ставим ее на первый план, а какой можно пренебречь. Создаём прототип страницы корзины Интерфейс корзины — количество товара, удаление товара, изменение данных пользователя, оплата.
  • UX-практика Работает над UX в программах. Создаём mind-map интернет-магазина Определяем структуру магазина, схемы и выполняем ее за преподавателем. Создаём прототип главной страницы интернет-магазина по шаблону Прототипируем главную страницу интернет-магазина вместе с преподавателем. Создаём прототип страницы каталога В каталоге определяем, нужны ли фильтры и сортировка. Если фильтры нужны, то с какими параметрами. Повторяем за преподавателем. Создаём прототип страницы карточки товара Определяем, какая информация в карточке максимально важная и ставим ее на первый план, а какой можно пренебречь. Создаём прототип страницы корзины Интерфейс корзины — количество товара, удаление товара, изменение данных пользователя, оплата.
  • Технические особенности Этапы разработки сайта и особенности разработки Этапы разработки сайта 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 и защитить его. Базовые уроки графического дизайна.
Читать подробнее Скрыть

Отзывы о курсе

Рейтинг: 5 (31 отзывов)
Качество обучения
Программа курса
Преподаватели
Расположение
Помещение и инфраструктура школы
Соотношение цена/качество

Остались вопросы?

Оставьте свой номер и мы вам перезвоним!

Оставить заявку
Фотографии, видео, текст взяты из открытого источника - https://m-d-a.ru/design_online_alt/. Автор произведений не известен. Данные материалы используются исключительно в информационных, учебных и новостных целях.
Оставьте ваши контактные данные и мы перезвоним в течение 12 минут!
Нажимая на кнопку, вы соглашаетесь с Политикой конфиденциальности и даете согласие на обработку персональных данных.