Программа курсов «Основы 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.
Количество занятий: 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.
Вернуться назад |