Веб-дизайн от Moscow Digital Academy

2. Освоение программы Figma. Практика

• Знакомство с Figma.
  Как и где скачать, как установить, как пользоваться.
• Фреймы, шрифты и картинки.
  Работа с основными инструментами.
• Группы и Маски.
  Как использовать маски и правильно работать с группами.
• Первый экран сайта.
  Освоение инструментов. Повторение за преподавателем при помощи заготовленных материалов.
• Вся страница сайта.
  Какие стадии разработки проходит сайт до публикации его в сети.
• Перенос в планшетные устройства.
  Два разрешения, изучение механики, повторяете за преподавателем.

3. Модульная сетка и композиция

• Модульная сетка 1. Что такое модульная сетка?
  Как работает, как делать в Фигме.
• Модульная сетка 2. На мобильных устройствах.
  Как создавать сетку на мобильных устройствах.
• Модульная сетка 3. Как располагать элементы, опираясь на сетку.
  Расположение элементов, не подходящих по размеченной сетке.
• Композиция 1. Что такое композиция, как устроена.
  Систематизация красоты.
• Композиция 2 (практический). Доминанта.
  Что есть доминанта, как выстроить ее самостоятельно.
• Композиция 3. Цвет, подбор цвета, теория цвета.
  Работа с колористикой.
• Композиция 4. Фотографии, картинки, влияние их на дизайн.
  Как найти и выбрать изображения, хорошо вписывающиеся в дизайн.
• Композиция 5. Подбор контента, лицензирование и использование.
  Правовые аспекты использования и подбора контента.

4. Типографика

• Настроение, классификация шрифта.
  Как шрифт передает настроение, на какие виды делятся шрифты.
• Анатомия шрифта.
  Кёрнинг, трекинг, интерлиньяж.
• Редактура.
  Дефис, тире, кавычки, висящие союзы.
• Сервисы, коммерческие шрифты и некоммерческие, тарификация шрифтов, цены.
  FontFaceninja, Google Fonts, Typetoday. Где посмотреть трендовые шрифты.
• Верстка текста.
  Нюансы абзацев, переносов и прочего в вебе.
• Шрифтовые пары.
  Как подобрать шрифты, которые пользователь посчитает красивыми.
• Какие шрифты использовать.
  Трендовые шрифты, поиск и использование.
• Ошибки в типографике.
  Как не стоит делать. Какие ошибки совершает большинство дизайнеров.
• Практический урок. Рисуем страницу Рубенса.
  Повторяя за преподавателем, освойте работу с типографикой в Figma.

5. Брендинг и позиционирование

• Что такое бренд. Составляющие бренда.
  На какие составляющие дизайнер может влиять, а на какие нет.
• Как бренд влияет на голову человека.
  Как бренд заставляет человека верить в легенду, используя готовые стереотипы.
• Какую роль в этом играет выкладка товаров, дизайн витрин и дизайн сайтов/баннеров/приложений.
  Цвета, настроение и конгруэнтность потребителю.
• Что такое фирменный стиль бренда. Из чего состоит?
  Что содержится в расширенных guidline бренда и как применяется.
• Логотип. Что это, его цель. Как отличить хороший логотип от плохого.
  Как создаются хорошие логотипы, как сделать узнаваемый логотип.
• Учимся делать простые шрифтовые логотипы.
  Создаем логотипы для собственных проектов.

6. Этапы разработки проекта

• Этапы разработки сайта 1. Исследование.
  И работа с заказчиком.
• Этапы разработки сайта 2 Структура, прототип и макет.
  Этап, до которого сайт был только в мыслях, а после — на руках макет для производства.
• Этапы разработки сайта 3 Техническое производство.
  Превращение дизайн макета в код.

7. Технические особенности проектов

• Технические особенности 1. Как сайт попадает в интернет.
  Этапы от замысла до конечной реализации проекта и публикации в интернете.
• Технические особенности 2. Что такое фронтенд. Как работает код?
  Фронтенд — то, что вы видите в своем браузере. HTML, CSS, Javascript.
• Технические особенности 3. Что такое бекенд? Какие функции он умеет?
  CMS, самописные движки. Что делает backend в веб-сайте.
• Технические особенности 4. Домен и хостинг.
  Как пользователь найдет ваш сайт в интернете.
• Технические особенности 5. Как сдавать макет в разработку? Что нужно приложить, в каком формате и зачем?
  Как дизайнеру подготовить свой макет так, чтобы программист реализовал его быстрее.
• Технические особенности 6. Как можно реализовывать фронтенд и бекенд. Программисты vs Тильда.
  Методы разработки. Какой в каких ситуация более эффективен.

8. UX и аналитика

• Что такое UX. Из чего состоит?
  Введение в UX, на какие составные части делится.
• Информационная архитектура. Иерархия.
  Создание архитектуры для логичного перехода между разделами на сайте.
• Пользовательские сценарии.
  Проведение исследования: как разные группы пользователей используют сайт, куда нажимают и как улучшить их пользовательский опыт.
• Метод персоны.
  Разделение пользователей на персонифицированные группы и исследование каждой отдельно.
• Проектирование взаимодействия.
  Определение того, куда и как нажимает пользователь и подготовка прототипа согласно этим данным.
• Формы и интерфейсы с полями. Часть 1.
  Как упрощать, конкретные примеры.
• Формы и интерфейсы с полями. Часть 2.
  Кнопки, выпадающие меню и прочие элементы интерфейса.
• Визуальный дизайн и UI-кит.
  Создание стиля и сбор элементов интерфейса в разных состояниях.
• Разбор ошибок в визуальном дизайне.
  Какие ошибки чаще всего совершают дизайнеры при отрисовке интерфейса.
• Готовые диджитал-гайдлайны. Примеры, объяснение, когда их применять надо и когда не надо.
  Что такое guideline. Как создать свой и как использовать готовый. В каких ситуациях применять.
• UX-аналитика 1. Юзабилити тестирование.
  Проверка интерфейса на удобство для пользователя через тестирование самих пользователей.
• UX-аналитика 2. Как работают карты кликов и карты ссылок в Яндекс.Метрике.
  Какую информацию можно получить с помощью простых инструментов и как ее использовать для улучшения интерфейса.
• UX-аналитика 3. Сегменты в Яндекс.Метрике и объяснение поведения пользователей в каждом сегменте.
  Аналитика того, как разные пользователи с разными устройствами ведут себя на сайте.
• Уровни по Джеймсу Гаррету.
  Пирамида Гаррета в UX.
• Создание mind-map.
  Что это, зачем и как применять.
• Прототипирование.
  Создание логической блок схемы сайты, в которой показаны смысловые блоки и их расположение.

9. Адаптивный дизайн

• Что такое адаптивный дизайн.
  Изменение поведения элементов и разрешений.
• Исследования для адаптивного дизайна.
  Исследуем цели пользователя, самого пользователя, ситуации и устройства. Определяем какие элементы оставить, а какие убрать.
• Под какие разрешения надо рисовать.
  И под какие делать сетку.
• Как устроены экраны. Логическое и физическое разрешения.
  Как определить разрешения, под которые нужно рисовать, чтобы был правильный масштаб.
• Типы верстки.
  Резиновая, фиксированная, адаптивная фиксирована и адаптивная резиновая (responsive).
• Адаптируем интернет магазин. Практический урок 1.
  Каждую страницу. Объясняем как изменились элементы и почему именно так.
• Адаптируем интернет-магазин. Практический урок 2.
  Адаптируем остальные страницы.

10. Защита проекта

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

11. Трудоустройство

• Трудоустройство. Какие компании нанимают дизайнеров и какие зарплаты и задачи.
  В разных компаниях дизайнеры рисуют разные проекты. А еще им по-разному за это платят и предъявляют разные требования. Этот урок ответит на щекотливые вопросы.
• Основные форматы работы дизайнеров.
  Фриланс, постоянка в офисе, постоянка удаленная.
• Как составить резюме
  Что в резюме писать не стоит, а что нужно вынести на первый план.
• Как составить сопроводительное письмо.
  Оставьте описание вашей "стрессоустойчивости" и "коммуникабельности" при себе. Лучше расскажите, чем вы увлекаетесь.
• Как и где искать работу постоянную.
  HH.ru — не единственный ресурс. Есть еще множество путей, не всегда очевидных.
• Как искать заказы для Фриланса.
  Найти высокооплачиваемые заказы, схватить их и при этом найти их у адекватного заказчика.
• Как искать субподрядчиков для фриланса.
  Часто заказывают проекты под ключ (дизайн+разработка). Как найти партнера для таких проектов.

12. Анимация. Protopie, Principle, Figma, After Effects.

• Что такое анимация в вебе.
  Микро и макро анимация.
• Анимация взаимодействия.
  Ховеры, активы, переходы, как это работает.
• Макро анимация, разбор примера.
  Когда анимация — неотъемлима от стиля и смысла проекта.
• Разбор софта для анимации.
  Protopie, Principle, Figma, After Effects.
• Как передавать анимацию в разработку.
  Как показать разработчику, какую анимацию, с какими переходами и временными задержками вы хотите.
• Анимируем элементы на главной странице интернет-магазина.
  Анимация при загрузке и после нее.
• Анимируем кнопки, поля. Прилёт элементов.
  Анимация микровзаимодействий.
• Анимируем элементы при скролле.
  Учимся делать анимацию при скролле в достаточном количестве. Не так, чтобы заполонить ей все внимание пользователя.
• Анимируем прелоадер.
  Иногда сайту нужно время для загрузки. Делаем анимацию загрузки, чтобы скрасить ожидание пользователя.
• Анимируем переход от страницы к странице.
  Страницы могут меняться не со стандартной загрузкой элементов, а с приятной анимацией.
• Анимируем форму регистрации.
  Форма сбора контактов пользователя и регистрации.
• Делаем макроанимацию. Часть 1.
  Создаем анимацию с сюжетом. Планируем ее, создаем ключевые кадры.
• Делаем макроанимацию. Часть 2.
  Отрисовываем и анимируем элементы для макроанимации, согласно собственному плану.

13. Оформление портфолио

• Что такое портфолио дизайнера и как оно может быть представлено.
  Порталы, собственные сайты, новые методы.
• Как создать кейс проекта.
  Из чего состоит кейс. Что надо показать и как объяснить пользователю.
• Разбор примеров кейсов хороших и плохих.
  Как не нужно оформлять свое портфолио — разбор примеров.
• Создаём кейс.
  Оформляем свою домашнюю работу для портфолио.
• Выкладываем свой кейс, видеоинструкция.
  Публикация собственной работы.

14. Тильда

• Уроки по работе на платформе Тильда

15. Фотошоп

• Несколько уроков, которые помогут вам разобраться в базовых инструментах, которые понадобятся веб-дизайнерам

16. UX-копирайтинг

• UX-копирайтинг, чем он отличается от обычного копирайтинга, рассмотрены примеры.

17. Библиотека

• Книги для веб-дизайнера