Программа курсов «Основы web-дизайна»

 Вернуться назад 

Объём программы: 32 ак.ч
Количество занятий: 12 занятий

Предпроектная подготовка
Получение исходных данных. Анкетирование клиента
Деловые отношения с клиентом. Техническое задание
Техника работы с аналогами (референсами)
Прототипирование будущего веб-сайта
Ключевые элементы интерфейса

Photoshop для веб-дизайна.
Базовые функции программы. Интерфейс
Разметка макета. Работа со слоями. Векторная графика
Редактирование и трансформация изображений
Работа с масками. Применение обтравочной маски
Профессиональная обрезка фона изображений

Основы UX/UI дизайна. Часть I
Модульная сетка в web-дизайне 
Отличие UX от UI дизайна. Особенности проектирования
Разработка пользовательских сценариев
Понятие Usability. Алгоритм проведения аудита
Приёмы и правила проектирования интерфейсов
Визуальные коммуникации 
Примеры частых ошибок UI UX 
Принципы создания Landing page 

Photoshop. Основы express цветокоррекции
Редактирование текста. Шрифт, цвет, типографика
Трансформация текста инструментами трансформирования

Основы UX/UI дизайна. Часть II
Простой интерфейс для призыва к действию
Сложный интерфейс (каталог, интернет-магазин)
Элементы интерфейса: кнопки, меню, ссылки и т.д.
Проектирование мобильного интерфейса
Обзор устоявшихся шаблонов и решений

Photoshop. Фильтр Camera RAW. Корректирующие слои
Нарезка макета для web-вёрстки. Инструмент «Раскройка»
Принципы создания миниатюрной графики: иконки, кнопки, favicon

Основы Figma для веб-дизайна
Работа с фигурами и изображениями
Организация макета. Компоненты
Фреймы, текст, стили, гриды
Библиотеки и мультикомпоненты
Прототипирование и девайс превью
Адаптация макета под платформы

Illustrator для веб-дизайна. 
Базовые функции программы. Интерфейс
Рабочие среды. Настройка собственной рабочей среды
Особенности работы со слоями, группировка объектов
Настройка и разметка документы: сетка, линейка и т.д.
Инструменты выделения. Командная панель

Основы композиции Часть I 
Графический контент 
Применение Moodboard на стадии идеи
Приёмы и средства композиции
Контраст, ритм, метр и др. 
Композиционное равновесие 
Композиционные привязки 
Динамика и статика. Работа с формой и массами 

Illustrator. Кривые Безье. Основы криволинейной графики
Инструменты рисования: перо, геометрия, кисть и др.
Трансформация объектов: поворот, масштаб и т.д.

Основы композиции. Часть II
Художественный образ, концепция, идея
Работа с символами для выражения нужных образов
Подчинение средств композиции концепции дизайна
Масштаб композиции. Отличия для мобильных устройств
Современные композиционные тренды веб дизайна

Illustrator. Типографика в Illustrator. Текстовые возможности
Автоматическая и ручная трассировки изображений. 
Эффекты. Работа с градиентом
Оформление, обработка контуров, выравнивание
Понятие (кривые) 

Работа с цветом в веб-дизайне 
Работа с цветом и изображением
Психология цвета. Цветовые гармонии
Ключевые характеристики цветов
Сочетание цветов для передачи нужных эмоций
Понятие цветового колорита

Типографика. Работа со шрифтом
Типы и виды электронных шрифтов
Параметры шрифта (кернинг, интерлиньяж и др.)
Принципы сочетания шрифтов
Удобочитаемость текста. Приёмы достижения
Свободные шрифты. Источники
Применение иконочных шрифтов

Адаптивный веб-дизайн 
Понятие дизайн-макета сайта. Способы выполнения
Адаптивная вёрстка. Форматы устройств.
Подгонка макетов под форматы устройств. (Десктоп, ноутбук, планшет, телефон)
Оптимизация сайта на уровне разработки дизайна

Список практикумов:
1. Найти по 5 достойных примеров с точки зрения дизайна сайтов (ориентируясь на современные тренды).
2. Найти и изучить 2-3 анкеты на разработку дизайна сайта, составить свою анкету.
3. Выбрать тематику курсовой работы.
4. Составить и утвердить техническое задание на разработку сайта.
5. Разработать прототип сайта (на бумаге или в Photoshop).
6. Выбрать шрифт для макета.
7. Создание макета сайта в Photoshop. Создание сетки для макета в Photoshop.
8. Создание мобильной версии макета сайта в Photoshop.
9. Создать макет сайта в Illustrator. Создание сетки для макета в Illustrator.
10. Создание мобильной версии макета сайта в Illustrator.
   
 Вернуться назад 
Миссия нашего центра — давать людям систематичное понимание и практические навыки в компьютерной графике и дизайне.