Что за курс.

Обучающий онлайн тренинг по веб-дизайну.

Автор Юлия Первушина.

Что вошло в курс.

Содержание.

Лекция 1 «Профессия веб-дизайнер. Знакомство с программой AdobePhotoshop»

1.1 Профессия веб-дизайнер.

• Что такое веб-дизайн;
• Приемущества работы веб-дизайнера;
• Заработок веб-дизайнера;
• Чему вы научитесь после прохождения данного курса;
• Инструменты веб-дизайнера;

1.2 Adobe Photoshop.

• Интерфейс Photosop - базовый обзор;
• Панель инструментов;
• Панель меню;
• Работа со слоями (выделение слоя, объединение слоев, группы слоев, смарт объект, обтравочная маска, слой-маска);
• Горячие клавиши;

1.3 Начало работы.

• Какие бывают сайты, модульные сетки, структура сайта, область контента;
• Создание документа и модульной сетки (линейки, grid, направляющие);
• Быстрые направляющие;
• Работа с текстами;
• Работа с фигурами (примеры фигур, создание фигур);
• Трансформирование объектов;
• Работа с заливкой и инструментом градиент;

Лекция 2 «Стили слоя. Работа с изображениями. Цвет и атмосфера сайта».

2.1 Стили слоев.

• Паттерны;
• Стили слоя;

2.2 Работа с изображениями.

• Как искать изображения и фото для сайта. Размеры изображений и разрешение;
• Инструменты для обтравки изображений;
• Фильтры;
• Режимы наложения;

2.3 Цвет и атмосфера сайта.

• Выбор цветовой гаммы и составление палитры;
• Сочетаемость цветов;
• Создание градиента;

Лекция 3 «Шрифты для Web. Шрифтовые пары. Типографика. Графика для сайта».

3.1 Шрифты для Web. Типографика.

• Выбор шрифтов для Web;
• Как скачать и установить шрифт;
• Сочетаемость шрифтов и шрифтовые пары;
• Какие шрифты не применять вообще;
• Какие шрифты не применять в меню и в заголовках;
• Размеры шрифтов для сайта;
• Оформление текста;
• Интерлиньяж;
• Отступы и расстояния;
• Определить шрифт;
• Разбор моих удачных и неудачных примеров;

3.2 Графика для сайта.

• Adobe Illusrator - базовый и необходимый обзор;
• Векторная графика и где ее взять;
• Как использовать векторную графику в фотошопе;

Лекция 4 «UI, GUI, создание UI. Стили сайтов и GUI»

4.1 UI интерфейс пользователя / GUI графический интерфейс пользователя.

• Что такое UI Kit;
• Как создать UI в стиле Flat, Material design;
• Элементы интерфейса сайта (кнопки, ховеры, меню, формы, навигация, пагинация, чебоксы, радиобаттоны, поиск);

4.2 Обзор стилей сайтов и их отличия.

• Flat;
• Material design;
• Объем;
• Игровой;
• Стилизованный;
• Какие делать и какие уже не в тренде и почему;
• Разбор моих удачных и не удачных примеров;

Лекция 5 «Иконки и пиктограммы. Инфографика».

5.1 Иконки и пиктограммы.

• Где скачать иконки;
• Формат иконок;
• Виды и стили иконок;
• Размеры иконок и пиктограмм;
• Удачные и неудачные примеры;

5.2 Инфографика.

• Что такое инфографика и где ее взять;
• Как инфографика используется на сайтах и для чего;
• Хорошая и плохая инфографика на стоках;
• Чувство меры в использовании инфографики;
• Удачные и неудачные примеры;

Лекция 6 «Проектирование сайта. Поиск вдохновения. Теснота и ее влияние на макеты».

6.1 Проектирование сайта.

• Что значит проектирование сайта, этапы, задачи;
• Прототип сайта;
• Варианты создания прототипа и сервисы для их создания;
• Создание прототипа в фотошоп;

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

• Сайты для дизайнеров - базовый обзор;
• На что обращать внимание в работах;

6.3 Теснота в макетах.

• Теснота в макетах - что это?
• Как теснота влияет на восприятие сайта?
• Как избавиться от тесноты;
• Избавление от тесноты на этапе проектирования;

Лекция 7 «Единство стиля. Создание сайта. Виды сайтов».

7.1 Единство стиля.

• Выбор стиля сайта, работа с ТЗ заказчика;
• Создаем мудборд. Что это? Как сделать? Как пользоваться?
• Создание композиции сайте, если она еще не создана на этапе проектирования;
• Дизайн-концепция;
• Создание палитры;
• UI Kit;
• Иконки и инфографика и подбор необходимых фото;
• Чек-лист для создания сайта;

7.2 Виды сайтов и их задачи.

• Корпоративные сайты;
• Сайт-визитка;
• Блог-журнал;
• Лендинг;
• Интернет-магазин;

Лекция 8 «Адаптивность сайтов. Подготовка макета к верстке».

8.1 Адаптивность сайтов.

• Что такое адаптивность?
• Размеры макетов под разные виды устройств;
• Главное и второстепенное в мобильной версии;
• Размеры шрифтов, ui элементов и на что стоит обратить внимание;

8.2 Подготовка макета к верстке.

• Сетка;
• Папки и названия;
• Цвета и UI;
• Сохранение и архивирование;
• Отправка исходников;

Лекция 9 «Создание портфолио. Поиск работы».

9.1 Создание портфолио.

• Что такое mock-up;
• Использование mock-upдля презентации работы;
• Шапка для презентации работы;
• Оформление блоков для презентации работы;
• Какие блоки обязательно должны быть в презентации работы;
• Привью - что это такое? И как его создать;
• Упрощенный вариант для портфолио;

9.1 Поиск работы.

• Где искать работу начинающему дизайнеру?
• Офис или удаленная работа?
• Обзор бирж фриланса;
• Как отвечать на проекты на фрилансе;
• ТЗ для дизайнера, каким оно должно быть и главные пункты;
• Вопросы, которые обязательно нужно задать заказчику.

   Карточка курса: *
   Другие курсы автора(ов), издателя: