Получи профессию дизайнера с гарантией стажировки и помощи в трудоустройстве от компаний №1 в выбранном направлении.
ФОРМАТ - 32 модуля
ДЛИТЕЛЬНОСТЬ - 8 месяцев
В ПОРТФОЛИО - 5 проектов
ПО ЗАВЕРШЕНИИ - Диплом с реальным заказчиком
Чему вы научитесь
Чтобы стать настоящим веб-дизайнером, нужно освоить несколько основополагающих навыков. Мы подробно расскажем обо всем, — а вы под руководством личного наставника научитесь создавать крутые сайты.
Делать структурно.
Вы узнаете все о сетках, колонках, композиции и декомпозиции, освоите необычные работающие приемы подачи информации на странице.
Делать эффектно.
Сможете профессионально работать с типографикой, палитрой, создавать и добавлять в макет 3D-элементы, анимацию.
Правильно готовиться к работе.
Научитесь искать идеи, источники вдохновения и референсы, готовить мудборды — быстро и без долгих часов прокрастинации.
Создавать готовый продукт.
Поймете, как правильно готовить макет к верстке, и получите знания, облегчающие вливание в команду продуктовой разработки.
Общаться с заказчиком.
Сможете составить бриф, узнаете, как вести себя на встрече и как понять, что именно нужно клиенту.
Защищать презентацию.
Узнаете, как преподнести свою работу в лучшем виде, и познакомитесь с инструментами для создания презентаций.
Программа курса
(содержит 2 основных блокa)
1. Веб-дизайн с нуля
1.1. Введение и первый результат
Встреча с заказчиком №1:
- первая встреча с заказчиком
- брифинг с заказчиком, обсуждение ТЗ
- важные моменты на первой встрече с заказчиком.
Приветствие:
- приветствие арт-директора
- постановка задачи от арт-директора.
Практика. Основы Photoshop:
- как приступать к работе и чем вдохновляться
- как ориентироваться в Photoshop, основные элементы интерфейса
- функционал основных панелей и их параметры
- создание и настройки документа
- размеры документа, что такое DPI
- панель слоев и управление слоями
- разновидности слоев
- способы организации слоев в документе.
Практика. Разработка первой страницы:
- сразу в бой, делаем первую страницу для заказчика
- фоновое изображение и логотип
- заголовок
- второстепенный текст
- Color Picker и основы работы с ним
- шейпы и кнопки
- особенности форматов и сохранения документа.
Бонус:
- частая ошибка начинающих — размеры в вебе
- основные ошибки в масштабе проекта.
1.2. Тренды, подготовка, мудборды
Встреча с заказчиком №2:
- встреча с заказчиком
- получаем задачу на многостраничный сайт
- брифинг с заказчиком, обсуждение ТЗ
- подмечаем важные моменты на встрече с заказчиком.
Поиск вдохновения:
- любой дизайн начинается с вдохновения
- как сделать предварительный поиск идей
- как искать и выбирать визуальные референсы
- подготовка предварительной презентации для клиента
- об особенностях составления мудборда.
Практика. Подготовка презентации:
- Сборка предварительной презентации по визуальному стилю для клиента.
1.3. Работа со стилями. Создание GUI
Задача от арт-директора:
- получаем задачу на разработку внутренней страницы сайта для заказчика.
Введение в типографику и восприятие информации:
- что такое слои восприятие информации
- почему текст нельзя делать просто блоком
- основы модульной сетки
- как заставлять людей читать текст
- введение в типографику
- шрифтовые пары и как их подбирать
- акциденция (заголовочные шрифты) и наборный текст
- традиции кириллической типографики
- основы работы со шрифтами
- шрифты в вебе: особенности и ограничения.
Практика. Работа с текстом:
- как добавлять заголовки и текстовые блоки
- верстка универсальных текстовых блоков
- шрифтовые слои PS и их свойства
- управление символами в панели Character
- работа с абзацами в панели Paragraph
- принципы красоты и удобства в вебе
- настройка интерлиньяжа и кернинга.
1.4. Главная страница, первые шаги
Задача от арт-директора:
- получаем задачу на разработку главной страницы нашего сайта.
«Лицо сайта» — главная страница:
- какие бывают главные страницы
- в чём различия промостраницы, корпоративных страниц и лендингов
- компоненты главной страницы
- какие есть виды сеток
- как работать с сеткой в 12 колонок
- не забываем про мобильные телефоны. Адаптивность страниц.
Практика:
- работа с сеткой и компонентами
- расположение элементов
- как применять графический стиль
- разработка главной страницы сайта.
1.5. Основы работы с графикой
Задача от арт-директора:
- добавляем на нашу главную страницу графический промобаннер.
Практика. Обтравка изображений:
- способы обтравки изображений
- быстрая обтравка
- обтравка магнитом
- обтравка волшебной палочкой
- обтравка лассо.
Практика. Тени:
- работа с тенями
- через стили слоя
- реалистичные тени
- многокомпонентные тени.
Практика. Фон:
- работа с фоном
- простые и составные фоны
- градиенты.
Практика. Эффекты:
- блики
- рефлексы
- свечение.
1.6. Декомпозиция
Задача от арт-директора:
- потренируемся — теория 10 000 часов
- метод декомпозиции.
Практика декомпозиции:
- декомпозиция главной страницы Morgan Stanley
- принципы декомпозиции
- сетка
- типографика
- цвета
- элементы
- краткий UI-kit.
1.7. Навигация и структура
Задача от арт-директора:
- получаем «сырую структуру» и ТЗ на подбор оптимальной навигации.
Виды навигации:
- горизонтальная
- вертикальная
- бургер
- выпадающее меню
- мегаменю
- нестандартные виды навигации.
Структура сайта:
- информационная архитектура сайта
- ментальные карты
- карта сайта.
Практика. Создание ментальной карты:
- создаём ментальную карту из грубого ТЗ
- оптимизируем информационную структуру.
1.8. Интересная подача информации
Задача от арт-директора:
- разработать лонгрид-отчёт в стиле вложенной страницы Morgan Stanley.
Ключевые элементы контента:
- цитаты
- стили блоков текста
- таблицы
- видеоплеер
- нумерация
- диаграммы.
Дополнительные элементы:
- история и таймлайн
- фотогалерея
- слайдеры
- калькулятор.
Практика. Работа с информацией:
- проходим путь от текста и нескольких фотографий до потрясной страницы.
1.9. Формы и кнопки
Задача от арт-директора:
- разработать полноценную форму заявки для Morgan Stanley в несколько шагов
- сделать её интересной и удобной.
Введение в юзабилити:
- базовые принципы юзабилити
- примеры (что удобно, что хорошо, что работает, что не работает).
Виды элементов интерфейса:
- кнопки
- списки
- табы
- формы
- ползунки.
Практика. Правила разработки макетов форм:
- состояния, которые необходимо прорисовать
- валидация
- сообщения об ошибках
- шаги в формах
- разработка формы.
1.10. Адаптивность и мобильная версия
Задача от арт-директора:
- разобраться в принципах адаптивности
- разработать сет мобильных макетов (4 разрешения).
Responsive и Adaptive — в чём разница?
- теория адаптивности
- примеры.
Сетки и кратность:
- наиболее популярные сетки для адаптива
- кратность компонентов. Примеры.
Размеры шрифтов и элементов:
- основные ошибки при уменьшении макетов.
Практика. Разрабатываем макеты для мобильной версии:
- на примере главной страницы — разработка сета из 4 разрешений.
1.11. Цвета, атмосфера, настроение. Промостраница мероприятия
Встреча с заказчиком №3:
- получаем задачу на разработку промостраницы мероприятия
- брифинг с заказчиком, обсуждение ТЗ
- подмечаем важные моменты на встрече с заказчиком.
Задача от арт-директора:
- по заданному скелету страницы разработать дизайн.
Цвета, атмосфера, настроение:
- теория базовых цветов
- примеры
- приёмы безопасного перекрашивания объектов.
- работа с масками.
Обработка изображений:
- основные моменты
- самые частые проблемы (пересвет, провалы в черном, проблемы с цветом, резкость)
- настройки слоев
- сатурирование изображений
- тонирование изображений.
Практика. Обработка изображений:
- обрабатываем изображения для промостраницы
- работа с уровнями и кривыми
- настройка контрастности изображений
- единство изображений. Работа с цветовым тоном
- устранение мелких дефектов.
1.12. Декомпозиция промостраницы
Задача от арт-директора:
- проработать декомпозицию указанного промосайта
- разработать собственный дизайн промостраницы.
Декомпозиция промостраницы:
- принципы декомпозиции
- сетки
- типографика
- цвета
- элементы
- краткий UI-kit.
Практика. Декомпозиция промостраницы:
- декомпозиция на примере первого экрана.
1.13. 3D-элементы в Photoshop
Задача от арт-директора:
- пришли правки от заказчика,необходимо внести изменения в первый экран нашего макета
- поставить объёмные цифры.
3D-элементы в Photoshop:
- основные принципы.
Практика. 3D-элементы в Photoshop:
- как создать объёмные надписи/цифры на практике.
1.14. Разработка презентации проекта
Задача от арт-директора:
- пришло время готовить презентацию для промостраницы.
Структура презентации:
- как преподнести свою работу — ключевые моменты
- примеры хороших и плохих презентаций.
Инструменты для создания презентации:
- Photoshop
- Keynote
- PowerPoint
- Ludus
- Readymag.
Практика. Мокапы:
- как работать с мокапами.
1.15. Передача проекта в вёрстку
Задача от арт-директора:
- пора передавать проект в вёрстку. Необходимо подготовить архив для передачи.
Что нужно учесть в макетах перед передачей:
- состояние кнопок и форм
- слайдеры
- всплывающие окна.
Практика. Сбор архива для передачи в вёрстку:
- собираем архив для передачи в вёрстку.
1.16. Первый кейс на Behance
Задача от арт-директора:
- сделаем кейс на бехансе из нашей промостраницы.
Behance. Идеальная площадка для дизайнера:
- регистрация
- создание портфолио на Behance
- виды кейсов
- структура идеального кейса
- публикация кейса —хитрости и особенности.
Практика. Создание аккаунта на Behance:
- Создаём и оформляем аккаунт.
Практика. Работа в редакторе Behance:
- Собираем кейс.
2. Веб-дизайн PRO
2.1. Специализация и личное позиционирование
Задача от арт-директора:
- необходимо разобраться с собственным позиционированием и составить карту услуг.
Специализация:
- почему важно специализироваться
- UX
- о мобильном дизайне
- о промосайтах
- как повысить стоимость часа
- примеры узкоспециализированных дизайнеров.
Личный бренд и позиционирование:
- как дизайнеру определиться с нишей, специализацией и позиционированием
- как создать и развивать личный образ
- как использовать свои сильные и слабые стороны
- как привлечь подходящих клиентов и оттолкнуть ненужных.
2.2. Концептуальный дизайн
Встреча с заказчиком №1:
- мы участвуем в тендере на разработку сайта для крупного IT-интегратора
- брифинг с заказчиком, обсуждение ТЗ и критериев выбора подрядчика.
Концептуальный дизайн:
- ассоциативное мышление
- ключевые принципы чистой графики
- подбор уровня визуальных шумов
- центр композиции
- разработка гипотез для концепции.
Практика. Дизайн-концепция:
- подбор референсов
- подбор изображений — ассоциативный ряд
- шрифтовые пары
- дизайн-концепция.
Практика. Работа с мокапами:
- упаковка дизайн-концепции в мокапы для демонстрации клиенту
- поиск мокапов
- работа с ними
- создание фирменного стиля из ничего.
2.3. Введение в UX
Встреча с заказчиком №2:
- заказчик доволен нашей работой и передаёт задачу на разработку формы заказа для клиентов компании
- брифинг с заказчиком, обсуждение ТЗ.
Введение в UX:
- что такое UX и UI
- сферы применения
- роль UX-дизайне в современном проекте
- продуктовый дизайн
- новый процесс на ваших проектах
- разбор кейсов.
Практика. Проектирование форм:
- разбор кейсов в проектировании форм.
2.4. Портреты пользователей и CJM
Встреча с заказчиком №3:
- заказчик передаёт нам задачу на разработку личного кабинета для клиентов компании
- брифинг с заказчиком, обсуждение ТЗ.
Разработка портрета пользователя и Customer Journey Map. Введение:
- разработка портретов пользователей
- стандарты
- инфографика.
Практика — Customer Journey Map:
- разработка CJM
- презентация CJM личного кабинета.
2.5. Стилеобразующие элементы. Иконки
Встреча с заказчиком №4:
- заказчику необходимо разработать иконки для направлений услуг компании, а также разработать уникальный паттерн
- брифинг с заказчиком, обсуждение ТЗ.
Создание уникальных иконок:
- инструменты и их отличия
- настройка инструмента (Illustrator)
- сетки и гайдлайны
- привязка и масштабирование
- характер и стиль
- сопряжённость
- оптическая масса.
Практика:
- генерация образов и их сочетаний
- постановка ограничений и разработка стиля
- отрисовка формы
- работа с цветом
- интеграция в макет
- формирование презентации.
2.6. Типографика PRO
Встреча с заказчиком №5:
- у нас новый заказчик — fashion-бренд, для которого необходимо разработать дизайн, основанный на типографике
- брифинг с заказчиком, обсуждение ТЗ.
Типографика:
- зачем она нужна
- подбор шрифтов для проекта
- правила сочетания шрифтов
- продвинутая работа с типографикой.
Практика. Разработка дизайна, основанного на типографике:
- поиск шрифтов для проекта
- работа с типографическими референсами
- комбинирование трёх и более шрифтовых гарнитур на проекте
- построение дизайн-концепции, основанной на типографике
- разработка концепции для fashion-бренда.
2.7. Когда верстальщик не пригодился. Readymag
Задача от арт-директора:
- «оживить» созданный ранее вами макет для презентации клиенту, используя сервис Readymag.
Сервис Readymag:
- что такое Readymag
- примеры сайтов, созданных на Readymag
- почему Readymag — это удобно.
Практика. Соберем и анимируем страницу:
- работа с сетками
- размещение объектов
- работа с текстом
- работа с изображениями
- создание анимации
- проработка мобильной версии
- публикация проекта.
2.8. Продвинутая презентация
Задача от арт-директора:
- подготовить полноценную презентацию разработанной дизайн-концепции.
Продвинутая презентация:
- аудит
- бенчмаркинг
- как учить клиента? Новые знания для клиента
- тренды веб-дизайна
- проработанные элементы дизайн-концепции (макропланы)
- структура презентации на 50-60 слайдов.
Эмоции в презентации клиенту:
- структура презентации
- как восхитить клиента.
Практика. Разработка презентации:
- разработка презентации для fashion-клиента.
- Разбор лучших презентаций компании AIC.
- Prezi — инструмент для создания эффектной презентации.
2.9. Копирайтинг
Встреча с заказчиком №6:
- новому заказчику (банку) требуется разработка дизайна продуктовой страницы для новой пластиковой карты
- брифинг с заказчиком, обсуждение ТЗ.
Задача от арт-директора проекта:
- заказчик предоставил сухие «банковские» тексты. Необходимо переработать их для продуктовой страницы новой пластиковой карты.
Знакомство с арт-директором проекта (Дмитрий Матвеев — арт-директор WildBerries):
- Небольшое вступительное слово о преподавателе.
Описание задачи и успешные примеры на рынке:
- примеры хорошего копирайтинга банковских карт
- разбор примеров сайтов крупных банков (Тинькофф, Альфа-Банк, Сбербанк, Райффайзен)
- разбор примеров рекламы карт на примере проектов «Вечерний Ургант» (Тинькофф), «ВДудь» (Альфа-Банк).
Правила работы с текстом в веб-дизайне:
- основные тренды
- основы работы с текстом
- контент
- шрифт
- баланс
- контраст
- цвет.
Практика. Работа с проектом заказчика:
- изучение и разбор ТЗ
- правила работы с заказчиком
- написание текста для продуктовой страницы пластиковой карты.
2.10. Погружение в мир 3D. Cinema 4D и Blender
Задача от арт-директора:
- разработать 3D-визуализацию новых карт банка для продуктовой страницы.
Практика. Cinema 4D:
- как устроен интерфейс и виды объектов внутри Сinema 4D, настройки проекта, сцены и рендера
- как импортировать кривые из иллюстратора
- как ставить свет и управлять им
- какие есть источники света, как объекты реагируют друг на друга
- про связь материалов и света.
Бонус — альтернативный 3D-редактор — Blender:
- краткий обзор интерфейса
- построение формы по габаритным размерам
- свет и материалы
- визуализация в перспективе и изометрии.
2.11. Adobe XD
Задача от арт-директора:
- необходимо разработать дизайн продуктовой страницы карты банка, используя редактор Adobe XD.
Практика. Adobe XD:
- знакомство с редактором
- основные инструменты
- Repeat Grid и сетки
- цвета, стили текста и символы
- прототипы
- live preview
- построение простого интерфейсного приложения.
2.12. Кейс на 1000 лайков
Задача от арт-директора:
- сделали хороший дизайн продуктовой страницы — пришло время сделать кейс на Behance.
Упаковка дизайна в кейс:
- как структурировать кейс
- как делать обложку
- как писать макропланы
- о раскладке страниц
- об анимационных вставках
- как сделать кейс, который соберёт 1000 лайков.
Практика. Работа в редакторе Behance:
- подготовка изображений
- работа с видео.
2.13. План развития дизайнера на 3 года
Что делать после курса? Составляем план развития:
- с чего начать путь веб-дизайнера в ТОП-10
- как сделать быстрый левел-ап, если уперся в профессиональный потолок
- как просто и быстро начать зарабатывать деньги веб-дизайном
- как составить для себя личную программу обучения.
Запись на курс
Больше курсов:
YouTube | ВКонтакте | Телеграм-чат | Одноклассники | Instagram | WhatsApp-чат