Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.Generated with Avocode.
Образовательный онлайн-курс

Веб-дизайн с 0 до PRO

Получи профессию дизайнера с гарантией стажировки и помощи в трудоустройстве от компаний #1 в выбранном направлении.

скидка
20%
первым 20
набор на курс
до
28
Июля

Курс идеально подойдет

Начинающим дизайнерам

У которых за плечами есть несколько работ и которые хотят существенно прокачать свой скилл в сфере веб-дизайна и добавить пару дюжин ярких работ в свое портфолио. А кроме того, — научиться зарабатывать серьезные деньги в этой профессии и создавать по-настоящему выдающиеся проекты.

Новичкам

Далеким от сферы дизайна, которые хотят освоить прибыльную и востребованную профессию и окунуться в мир веб-дизайна. Научиться с помощью графических редакторов создавать внешний вид и оформление сайтов, мобильных приложений, интернет-сервисов. ​

Сегодня профессия веб‑дизайнера позволяет

Зарабатывать более 100 000 рублей в месяц.
Работать из любой точки мира
Для работы тебе совершенно не обязательно находиться в одной точке. Достаточно ноутбука, планшета (они поместятся в любой рюкзак) и приемлемой скорость интернета. Вадим Паясу (один из преподавателей курса) 3 года жил в Тайланде и работал удаленно.
Участвовать в самых интересных проектах
Трудно представить себе более творческую профессию, в которой есть столько вариантов решений одной и той же задачи. Онлайн формат позволяет работать с интересными заказчиками и агентствами по всему миру и реализовывать свой творческий потенциал.

Как проходит обучение

Обучение проходит в формате пошаговых интернет-семинаров с индивидуальным разбором домашних работ
1
Посмотрели видеолекцию
записанную в студии с отличным качеством видео и звука
2
Сделали задание и отправили на проверку
в любое удобное время через личный кабинет
3
Получили видеоразбор вашей работы
от персонального куратора.
С описанием всех ошибок и инструкцией как их исправить
4
Исправили ошибки
если их было много — проходим проверку еще раз. Халтуру мы не любим, так дизайнером не стать.
После проверки двигаемся дальше

Топ ошибок
начинающих дизайнеров

  • Error page
  • Error page
  • Error page
Учиться у теоретиков дизайна
Дизайн совершенно не такой, как был даже 3 года назад. Задачи и особенности меняются очень быстро. Именно поэтому, — часто после 5 лет университета надо переучиваться заново. У наших преподавателей нет педагогического образования. Каждый из них, — практик своего дела, который ежедневно «варится» в среде дизайна и выполняет коммерческие заказы, пристально следя за трендами в дизайне.
Учиться самостоятельно
Это самый долгий и тяжелый путь, который не гарантирует хорошего результата. В процессе самостоятельного обучения глаз «замыливается», работы становятся однообразными и скучными, обилие информации и различных видео уроков только добавляет нервозности в процесс обучения. В нашей системе ты получаешь индивидуального наставника, который проведет тебя через весь курс и не даст «заблудиться», или потерять силы на середине пути.
Учиться без системы
Есть ряд знаний и навыков, которые профессиональный дизайнер должен знать и уметь. Обучаясь бессистемно на разных лекциях, вебинарах, по ютуб-урокам, вы рискуете пропустить фундаментальные основы, наверстывать которые будет крайне сложно. Именно поэтому, — наша программа длится целых 12 месяцев. За 2-3 месяца вырастить достойного дизайнера, просто, невозможно.

Программа курса

Курс длится 8 месяцев
и состоит из 2 основных блоков
1. Введение
  • Приветствие
  • Что вас ждёт в курсе
  • Как проходит курс (организационные моменты)
  • Как добавиться в чат курса
2. Первый результат

Встреча с заказчиком #1

  • Первая встреча с заказчиком
  • Брифинг с заказчиком, обсуждение ТЗ
  • Важные моменты на первой встрече с заказчиком

Приветствие

  • Приветствие арт-директора
  • Постановка задачи от арт-директора
Практика

Основы Photoshop

  • Как приступать к работе и чем вдохновляться
  • Как ориентироваться в Photoshop, основные элементы интерфейса
  • Функционал основных панелей и их параметры
  • Создание и настройки документа
  • Размеры документа, что такое DPI
  • Панель слоев и управление слоями
  • Разновидности слоев
  • Способы организации слоев в документе

Разработка первой страницы

  • Сразу в бой, делаем первую страницу для заказчика
  • Фоновое изображение и логотип
  • Заголовок
  • Второстепенный текст
  • Color Picker и основы работы с ним
  • Шейпы и кнопки
  • Особенности форматов и сохранения документа
Бонус
  • Частая ошибка начинающих — размеры в вебе
  • Основные ошибки в масштабе проекта
3. Тренды, подготовка, мудборды

Встреча с заказчиком #2

  • Встреча с заказчиком
  • Получаем задачу на многостраничный сайт
  • Брифинг с заказчиком, обсуждение ТЗ
  • Подмечаем важные моменты на встрече с заказчиком

Поиск вдохновения

  • Любой дизайн начинается с вдохновения
  • Как сделать предварительный поиск идей
  • Как искать и выбирать визуальные референсы
  • Подготовка предварительной презентации для клиента
  • Об особенностях составления мудборда
Практика

Подготовка презентации

  • Сборка предварительной презентации по визуальному стилю для клиента
4. Работа со стилями. Создание GUI

Задача от арт-директора

  • Получаем задачу на разработку внутренней страницы сайта для заказчика

Введение в типографику и восприятие информации

  • Что такое слои восприятие информации
  • Почему текст нельзя делать просто блоком
  • Основы модульной сетки
  • Как заставлять людей читать текст
  • Введение в типографику
  • Шрифтовые пары и как их подбирать
  • Акциденция (заголовочные шрифты) и наборный текст
  • Традиции кириллической типографики
  • Основы работы со шрифтами
  • Шрифты в вебе: особенности и ограничения
Практика

Работа с текстом

  • Как добавлять заголовки и текстовые блоки
  • Верстка универсальных текстовых блоков
  • Шрифтовые слои PS и их свойства
  • Управление символами в панели Character
  • Работа с абзацами в панели Paragraph
  • Принципы красоты и удобства в вебе
  • Настройка интерлиньяжа и кернинга
5. Главная страница, первые шаги

Задача от арт-директора

  • Получаем задачу на разработку главной страницы нашего сайта

«Лицо сайта» — главная страница

  • Какие бывают главные страницы
  • В чём различия промостраницы, корпоративных страниц и лендингов
  • Компоненты главной страницы
  • Какие есть виды сеток
  • Как работать с сеткой в 12 колонок
  • Не забываем про мобильные телефоны. Адаптивность страниц
Практика
  • Работа с сеткой и компонентами
  • Расположение элементов
  • Как применять графический стиль
  • Разработка главной страницы сайта
6. Основы работы с графикой

Задача от арт-директора

  • Добавляем на нашу главную страницу графический промобаннер
Практика

Обтравка изображений

  • Способы обтравки изображений
  • Быстрая обтравка
  • Обтравка магнитом
  • Обтравка волшебной палочкой
  • Обтравка лассо

Тени

  • Работа с тенями
  • Через стили слоя
  • Реалистичные тени
  • Многокомпонентные тени

Фон

  • Работа с фоном
  • Простые и составные фоны
  • Градиенты

Эффекты

  • Блики
  • Рефлексы
  • Свечение
7. Декомпозиция

Задача от арт-директора

  • Потренируемся — теория 10 000 часов
  • Метод декомпозиции
Практика

Практика декомпозиции

  • Декомпозиция главной страницы Morgan Stanley
  • Принципы декомпозиции
  • Сетка
  • Типографика
  • Цвета
  • Элементы
  • Краткий UI-kit
8. Навигация и структура

Задача от арт-директора

  • Получаем «сырую структуру» и ТЗ на подбор оптимальной навигации

Виды навигации

  • Горизонтальная
  • Вертикальная
  • Бургер
  • Выпадающее меню
  • Мегаменю
  • Нестандартные виды навигации

Структура сайта

  • Информационная архитектура сайта
  • Ментальные карты
  • Карта сайта
Практика

Создание ментальной карты

  • Создаём ментальную карту из грубого ТЗ
  • Оптимизируем информационную структуру
9. Интересная подача информации

Задача от арт-директора

  • Разработать лонгрид-отчёт в стиле вложенной страницы Morgan Stanley

Ключевые элементы контента

  • Цитаты
  • Стили блоков текста
  • Таблицы
  • Видеоплеер
  • Нумерация
  • Диаграммы

Дополнительные элементы

  • История и таймлайн
  • Фотогалерея
  • Слайдеры
  • Калькулятор
Практика

Работа с информацией

  • Проходим путь от текста и нескольких фотографий до потрясной страницы
10. Формы и кнопки

Задача от арт-директора

  • Разработать полноценную форму заявки для Morgan Stanley в несколько шагов
  • Сделать её интересной и удобной

Введение в юзабилити

  • Базовые принципы юзабилити
  • Примеры (что удобно, что хорошо, что работает, что не работает)

Виды элементов интерфейса

  • Кнопки
  • Списки
  • Табы
  • Формы
  • Ползунки
Практика

Правила разработки макетов форм

  • Состояния, которые необходимо прорисовать
  • Валидация
  • Сообщения об ошибках
  • Шаги в формах
  • Разработка формы
11. Адаптивность и мобильная версия

Задача от арт-директора

  • Разобраться в принципах адаптивности
  • Разработать сет мобильных макетов (4 разрешения)

Responsive и Adaptive — в чём разница?

  • Теория адаптивности
  • Примеры

Сетки и кратность

  • Наиболее популярные сетки для адаптива
  • Кратность компонентов. Примеры

Размеры шрифтов и элементов

  • Основные ошибки при уменьшении макетов
Практика

Разрабатываем макеты для мобильной версии

  • На примере главной страницы — разработка сета из 4 разрешений
12. Цвета, атмосфера, настроение. Промостраница мероприятия

Встреча с заказчиком #3

  • Получаем задачу на разработку промостраницы мероприятия
  • Брифинг с заказчиком, обсуждение ТЗ
  • Подмечаем важные моменты на встрече с заказчиком

Задача от арт-директора

  • По заданному скелету страницы разработать дизайн

Цвета, атмосфера, настроение

  • Теория базовых цветов
  • Примеры
  • Приёмы безопасного перекрашивания объектов
  • Работа с масками

Обработка изображений

  • Основные моменты
  • Самые частые проблемы (пересвет, провалы в черном, проблемы с цветом, резкость)
  • Настройки слоев
  • Сатурирование изображений
  • Тонирование изображений
Практика

Обработка изображений

  • Обрабатываем изображения для промостраницы
  • Работа с уровнями и кривыми
  • Настройка контрастности изображений
  • Единство изображений. Работа с цветовым тоном
  • Устранение мелких дефектов
13. Декомпозиция промостраницы

Задача от арт-директора

  • Проработать декомпозицию указанного промосайта
  • Разработать собственный дизайн промостраницы

Декомпозиция промостраницы

  • Принципы декомпозиции
  • Сетки
  • Типографика
  • Цвета
  • Элементы
  • Краткий UI-kit
Практика

Декомпозиция промостраницы

  • Декомпозиция на примере первого экрана
14. 3D-элементы в Photoshop

Задача от арт-директора

  • Пришли правки от заказчика,необходимо внести изменения в первый экран нашего макета
  • Поставить объёмные цифры

3D-элементы в Photoshop

  • основные принципы
Практика

3D-элементы в Photoshop

  • Как создать объёмные надписи/цифры на практике
15. Разработка презентации проекта

Задача от арт-директора

  • Пришло время готовить презентацию для промостраницы

Структура презентации

  • Как преподнести свою работу — ключевые моменты
  • Примеры хороших и плохих презентаций

Инструменты для создания презентации

  • Photoshop
  • Keynote
  • PowerPoint
  • Ludus
  • Readymag
Практика

Мокапы

  • Как работать с мокапами
16. Передача проекта в вёрстку

Задача от арт-директора

  • Пора передавать проект в вёрстку. Необходимо подготовить архив для передачи

Что нужно учесть в макетах перед передачей

  • Состояние кнопок и форм
  • Слайдеры
  • Всплывающие окна
Практика

Сбор архива для передачи в вёрстку

  • Собираем архив для передачи в вёрстку
17. Первый кейс на Behance

Задача от арт-директора

  • Сделаем кейс на бехансе из нашей промостраницы

Behance. Идеальная площадка для дизайнера

  • Регистрация
  • Создание портфолио на Behance
  • Виды кейсов
  • Структура идеального кейса
  • Публикация кейса —хитрости и особенности
Практика

Создание аккаунта на Behance

  • Создаём и оформляем аккаунт

Работа в редакторе Behance

  • Собираем кейс
1. Введение
  • Приветствие
  • Что вас ждёт в курсе
  • Как проходит курс (организационные моменты)
  • Как добавиться в чат курса
2. Специализация и личное позиционирование

Задача от арт-директора

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

Специализация

  • Почему важно специализироваться
  • UX
  • О мобильном дизайне
  • О промосайтах
  • Как повысить стоимость часа
  • Примеры узкоспециализированных дизайнеров

Личный бренд и позиционирование

  • Как дизайнеру определиться с нишей, специализацией и позиционированием
  • Как создать и развивать личный образ
  • Как использовать свои сильные и слабые стороны
  • Как привлечь подходящих клиентов и оттолкнуть ненужных
3. Концептуальный дизайн

Встреча с заказчиком #1

  • Мы участвуем в тендере на разработку сайта для крупного IT-интегратора
  • Брифинг с заказчиком, обсуждение ТЗ и критериев выбора подрядчика

Концептуальный дизайн

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

Дизайн-концепция

  • Подбор референсов
  • Подбор изображений — ассоциативный ряд
  • Шрифтовые пары
  • Дизайн-концепция

Работа с мокапами

  • Упаковка дизайн-концепции в мокапы для демонстрации клиенту
  • Поиск мокапов
  • Работа с ними
  • Создание фирменного стиля из ничего
4. Введение в UX

Встреча с заказчиком #2

  • Заказчик доволен нашей работой и передаёт задачу на разработку формы заказа для клиентов компании
  • Брифинг с заказчиком, обсуждение ТЗ

Введение в UX

  • Что такое UX и UI
  • Сферы применения
  • Роль UX-дизайне в современном проекте
  • Продуктовый дизайн
  • Новый процесс на ваших проектах
  • Разбор кейсов
Практика

Проектирование форм

  • Разбор кейсов в проектировании форм
5. Портреты пользователей и CJM

Встреча с заказчиком #3

  • Заказчик передаёт нам задачу на разработку личного кабинета для клиентов компании
  • Брифинг с заказчиком, обсуждение ТЗ

Разработка портрета пользователя и Customer Journey Map. Введение

  • Разработка портретов пользователей
  • Стандарты
  • Инфографика
Практика

Customer Journey Map

  • Разработка CJM
  • Презентация CJM личного кабинета
6. Стилеобразующие элементы. Иконки

Встреча с заказчиком #4

  • Заказчику необходимо разработать иконки для направлений услуг компании, а также разработать уникальный паттерн
  • Брифинг с заказчиком, обсуждение ТЗ

Создание уникальных иконок

  • Инструменты и их отличия
  • Настройка инструмента (Illustrator)
  • Исетки и гайдлайны
  • Привязка и масштабирование
  • Характер и стиль
  • Сопряжённость
  • Оптическая масса
Практика
  • Генерация образов и их сочетаний
  • Постановка ограничений и разработка стиля
  • Отрисовка формы
  • Работа с цветом
  • Интеграция в макет
  • Формирование презентации
7. Типографика PRO

Встреча с заказчиком #5

  • У нас новый заказчик — fashion-бренд, для которого необходимо разработать дизайн, основанный на типографике
  • Брифинг с заказчиком, обсуждение ТЗ

Типографика

  • Зачем она нужна
  • Подбор шрифтов для проекта
  • Правила сочетания шрифтов
  • Продвинутая работа с типографикой
Практика

Разработка дизайна, основанного на типографике

  • Поиск шрифтов для проекта
  • Работа с типографическими референсами
  • Комбинирование трёх и более шрифтовых гарнитур на проекте
  • Построение дизайн-концепции, основанной на типографике
  • Разработка концепции для fashion-бренда
8. Когда верстальщик не пригодился. Readymag

Задача от арт-директора

  • «Оживить» созданный ранее вами макет для презентации клиенту, используя сервис Readymag

Сервис Readymag

  • Что такое Readymag
  • Примеры сайтов, созданных на Readymag
  • Почему Readymag — это удобно
Практика

Соберем и анимируем страницу

  • Работа с сетками
  • Размещение объектов
  • Работа с текстом
  • Работа с изображениями
  • Создание анимации
  • Проработка мобильной версии
  • Публикация проекта
9. Продвинутая презентация

Задача от арт-директора

  • Подготовить полноценную презентацию разработанной дизайн-концепции

Продвинутая презентация

  • Аудит
  • Бенчмаркинг
  • Как учить клиента? Новые знания для клиента
  • Тренды веб-дизайна
  • Проработанные элементы дизайн-концепции (макропланы)
  • Структура презентации на 50-60 слайдов

Эмоции в презентации клиенту

  • Структура презентации
  • Как восхитить клиента
Практика

Разработка презентации

  • Разработка презентации для fashion-клиента
Бонус
  • Разбор лучших презентаций компании AIC
Бонус
  • Prezi — инструмент для создания эффектной презентации
10. Копирайтинг

Встреча с заказчиком #6

  • Новому заказчику (банку) требуется разработка дизайна продуктовой страницы для новой пластиковой карты
  • Брифинг с заказчиком, обсуждение ТЗ

Задача от арт-директора проекта

  • Заказчик предоставил сухие «банковские» тексты. Необходимо переработать их для продуктовой страницы новой пластиковой карты

Знакомство с арт-директором проекта (Дмитрий Матвеев — арт-директор WildBerries)

  • Небольшое вступительное слово о преподавателе

Описание задачи и успешные примеры на рынке

  • Примеры хорошего копирайтинга банковских карт
  • Разбор примеров сайтов крупных банков (Тинькофф, Альфа-Банк, Сбербанк, Райффайзен)
  • Разбор примеров рекламы карт на примере проектов «Вечерний Ургант» (Тинькофф), «ВДудь» (Альфа-Банк)

Правила работы с текстом в веб-дизайне

  • Основные тренды
  • Основы работы с текстом
  • Контент
  • Шрифт
  • Баланс
  • Контраст
  • Цвет
Практика

Работа с проектом заказчика

  • Изучение и разбор ТЗ
  • Правила работы с заказчиком
  • Написание текста для продуктовой страницы пластиковой карты
11. Погружение в мир 3D. Cinema 4D и Blender

Задача от арт-директора

  • Разработать 3D-визуализацию новых карт банка для продуктовой страницы
Практика

Cinema 4D

  • Как устроен интерфейс и виды объектов внутри Сinema 4D, настройки проекта, сцены и рендера
  • Как импортировать кривые из иллюстратора
  • Как ставить свет и управлять им
  • Какие есть источники света, как объекты реагируют друг на друга
  • Про связь материалов и света
Бонус

Альтернативный 3D-редактор — Blender

  • Краткий обзор интерфейса
  • Построение формы по габаритным размерам
  • Свет и материалы
  • Визуализация в перспективе и изометрии
12. Adobe XD

Задача от арт-директора

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

Adobe XD

  • Знакомство с редактором
  • Основные инструменты
  • Repeat Grid и сетки
  • Цвета, стили текста и символы
  • Прототипы
  • Live preview
  • Построение простого интерфейсного приложения
13. Кейс на 1000 лайков

Задача от арт-директора

  • Сделали хороший дизайн продуктовой страницы — пришло время сделать кейс на  Behance

Упаковка дизайна в кейс

  • Как структурировать кейс
  • Как делать обложку
  • Как писать макропланы
  • О раскладке страниц
  • Об анимационных вставках
  • Как сделать кейс, который соберёт 1000 лайков
Практика

Работа в редакторе Behance

  • Подготовка изображений
  • Работа с видео
14. План развития дизайнера на 3 года

Что делать после курса? Составляем план развития

  • С чего начать путь веб-дизайнера в ТОП-10
  • Как сделать быстрый левел-ап, если уперся в профессиональный потолок
  • Как просто и быстро начать зарабатывать деньги веб-дизайном
  • Как составить для себя личную программу обучения
Бонус-модуль Работа с иностранными заказчиками

Как получить иностранный заказ

  • Как составлять CV
  • Как рассчитать нормочас
  • Как заводить аккаунт paypal
  • Как структурировать проект
  • О проектной документации
  • Примеры проектов

Дипломный проект
c реальным заказчиком

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

Разработка информационного портала

Ticketland.ru

Разработка страницы
заказа подарочной карты

Что вы получаете, участвуя
в курсе «Веб-дизайн с 0 до PRO»?

  • функциональная система обучения
  • быстрый старт и практика
  • пожизненный доступ
  • система мотивации
  • готовое портфолио
  • возможность уйти в академ отпуск
  • Собственный график
  • персональный менеджер
  • кураторы-практики
  • диплом
  • профессиональные преподаватели
  • профессиональные видеоролики
  • структурированные курсы
  • Интересные уроки
  • стажировка

Преподаватели — практикующие дизайнеры с огромным опытом

После такой школы вы будете готовы к проекту любой сложности
Сергей Попков

основатель AIC

Игорь Коропов

основатель Skillbox

Филипп Соломин
Филипп Соломин

руководитель

Михаил Никипелов
Михаил Никипелов

арт-директор

Инесса Шилло
Инесса Шилло

арт-директор

Вадим Паясу
Вадим Паясу

дизайнер

Михаил Розов
Михаил Розов

арт-директор

Дмитрий Матвеев
Дмитрий Матвеев

арт-директор

SkillBoх это:

Опыт
8 лет
Студенты
5 000 +
Курсы
100 +
Хотите проверить свой уровень знаний?
С помощью теста мы поможем определить ваш текущий уровень знаний
Финансовый партнер проекта – Альфа-банк
В случае необходимости мы можем предложить вам участвовать в курсе в рассрочку благодаря сотрудничеству с Альфа-банком. Оставьте заявку на сайте, и менеджер свяжется с вами для уточнения деталей.
Возврат денег в течение 14 дней без любых вопросов
Оставить заявку

Популярные стереотипы о профессии веб‑дизайнера

1
Главное - хорошо уметь рисовать от руки
На сегодняшний момент умение рисовать от руки потеряло актуальность в профессии дизайнера. А в сфере веб‑дизайна умение рисовать не требуется вовсе, так как главным критерием становится именно функциональность дизайна и удобство для пользователя. Умение рисовать необходимо для иллюстраторов, но это уже совсем другая профессия.
2
Нужно освоить массу компьютерных программ
В действительности по-настоящему хорошо вам необходимо будет знать только Photoshop, именно его изучению будет посвящена большая часть занятий. В 95% случаях другие программы вам не понадобятся. Заниматься можно на  любой операционной системе Windows или Mac, принципиальной разницы нет, кому что нравится.
3
Необходимо разбираться в искусстве
Здорово, если вы можете отличить картины Босха от работ Веласкеса, это хороший повод поддержать беседу в высшем обществе, но на практике эти знания не дают каких-то очевидных преимуществ в эру современного digital-дизайна.
4
Нужно уметь программировать
На самом деле хорошим бонусом для любого веб‑дизайнера является умение верстать проекты, т.е. соединять графическую и функциональную часть сайта. Мы рассказываем, как можно создавать сайты самостоятельно. Навык программирования для дизайнеров не нужен совсем.

Итоги курса

Итого

1 год

Обучения веб‑дизайну с нуля до профессионала

Портфолио

Готовое портфолио для дальнейшей работы

Домашнее задание

Индивидуальная проверка каждого домашнего задания преподавателем и разбор ошибок

Стажировка

Стажировка в ведущих агентствах с возможностью дальнейшего трудоустройства

Доступ

Пожизненный доступ к системе обучения

Диплом

Диплом о прохождении обучения

Посмотреть