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.
Образовательный онлайн-курс

Веб-дизайн с нуля до PRO

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

скидка
25%
первым 20
набор на курс
до
15
ноября

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

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

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

Новичкам

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

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

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

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

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

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

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

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

Курс длится 12 месяцев
и состоит из 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
Нужно уметь программировать
На самом деле хорошим бонусом для любого веб‑дизайнера является умение верстать проекты, т.е. соединять графическую и функциональную часть сайта, этому навыку посвящены последние 2 месяца обучающей программы. Навык программирования для дизайнеров не нужен совсем.

Итоги курса

Итого

1 год

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

Портфолио

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

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

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

Стажировка

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

Доступ

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

Диплом

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