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

Старт — 21 ноября

Шаг 1: Введение

Эллина Сафронова
Эллина Сафронова
1

Рассказ об агентстве

Кто такие агентство Email Soldiers и что оно делает — расскажем о клиентах и покажем свои работы.

2

Что вас ждёт на курсе

Полная программа курса и описание всех модулей.

3

Как будут проходить занятия

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

4

Кто такой веб-дизайнер

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

Шаг 2: Анализ задачи

Эллина Сафронова
Эллина Сафронова
1

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

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

2

Целевая аудитория и что нужно о ней знать

Как знание целевой аудитории помогает в дизайне. Почему страшно не «попасть» в целевую аудиторию.

3

Оценка трудозатрат

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

4

Защита и аргументация своего решения

Разберём, как понять, почему клиент предлагает переделать макет и что он имеет в виду. Как доказать свою экспертность, убедить коллег или клиента.

Шаг 3: Отличия веб-дизайна от графического

Эллина Сафронова
Эллина Сафронова
1

Особенности вёрстки

Какие виды вёрстки существуют. Правильно передаём макет на вёрстку.

2

Адаптация

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

3

Доступная анимация

Шаг 4: Акценты и правила сочетаемости в веб-дизайне

София Скоробогатова
София Скоробогатова
домашнее задание
1

Якорные объекты

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

2

Визуализация контента

Правильно подбираем картинки. Почему нельзя использовать слишком распространённые на Shutterstock фотографии. Взаимосвязь текста и иллюстрации.

3

Шрифтовые пары

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

Шаг 5: Что нужно знать начинающему веб-дизайнеру

Юлия Козловская
Юлия Козловская
1

Правило внутреннего и внешнего 

Что это такое и как грамотно применять его на практике.

2

Базовые элементы в веб-дизайне

Из чего состоит веб-страница — обязательные и необязательные элементы.

3

Модульная сетка

Для чего она нужна и как ей пользоваться.

Шаг 6: Выключка и ритмичность макета

София Скоробогатова
София Скоробогатова
домашнее задание
1

Выключка

По левому флангу, по центру, по правому флангу и по ширине.

2

Ритмичность

Как сделать макет нескучным. Основные и вспомогательные иллюстрации.

Шаг 7: Создаём первый креатив в Figma

Эллина Сафронова
Эллина Сафронова
домашнее задание
1

Особенности работы в Figma, её отличие от других графических редакторов 

Преимущества и недостатки Figma.

2

Разбор интерфейса программы

Разбор инструментов программы. Алгоритм работы над проектом: от начала и до передачи в вёрстку.

3

Создаём первый креатив с нуля

Шаг 8: Анимация

София Скоробогатова
София Скоробогатова
1

Для чего это нужно и как это работает

Основы и цель анимации. Знакомство с интерфейсом программы After Effects.

2

С чего начать

Что нужно знать для создания анимированного ролика.

3

Включаем воображение и анимируем иллюстрации в After Effects

Фотошоп — не лучшее средство для создания анимации. Учимся пользоваться After Effects.

Шаг 9: Email-рассылки: особенности и специфика

Юлия Козловская
Юлия Козловская
домашнее задание
1

Особенности и ограничения в email-рассылках

Чем дизайн email-рассылок отличается от веб-дизайна и посадочных страниц. Градиенты, шрифты и прочие тонкости.

2

Динамический контент

Каким он бывает и что нужно о нём знать.

3

Подготовка макетов под Retina-дисплеи

Чем этот дисплей отличается от других и почему его нужно всегда учитывать.

4

AMP уже реальность

Занятие на основе нашего реального кейса. Возможности AMP в будущем и как это скажется на email-рассылках.

Шаг 10: Landin Page. Принципы создания

Эллина Сафронова
Эллина Сафронова
домашнее задание
1

Понимание принципов создания

Что такое лендинг и чем он отличается от сайта. Виды лендинга. Когда нужна посадочная страница и в чём её цель.

2

Этапы создания лендинга

Анализ конкурентов и целевой аудитории, под которую создаётся лендинг. Прототипирование, финальный результат.

3

Структура лендинга

Из каких типовых элементов состоит посадочная страница.

4

Принципы дизайна

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

5

Увеличение эффективности

Что такое эффективность и как на неё влиять

Шаг 11: Твоё первое портфолио на Behance

Эллина Сафронова
Эллина Сафронова
1

Behance vs Dribbble: что выбрать

Рассказываем про порталы и их преимущества.

2

Зачем дизайнеру портфолио на портале

Почему нельзя присылать портфолио архивами. Как грамотно оформить портфолио.

3

Как отобрать лучшие работы

Почему не стоит выкладывать все свои работы, а отбирать только лучшие.

4

Обложка для проекта

Как сделать яркую и интересную обложку. Чего стоит избегать.

5

Оформление кейса

С чего начать и какой структуры придерживаться.

6

Цепляющие картинки и предыстория кейса

Почему важны интересные картинки и рассказ о вашем проекте.

7

Настройки проекта

Что обязательно нужно указать при публикации проекта.

8

Как попасть в курируемые галереи и заработать шильдик Featured

Несколько лайфхаков, как это сделать.