Программа курсов «Веб-дизайн. Front-end вёрстка»
| Вернуться назад |
Учебная программа курсов «Web-дизайн и Front-end вёрстка»
Объём программы: 43 академических часа
Количество занятий: 16 занятий
Предпроектная подготовка
Получение исходных данных. Анкетирование клиента
Деловые отношения с клиентом. Техническое задание
Техника работы с аналогами (референсами)
Прототипирование будущего веб-сайта
Ключевые элементы интерфейса
Photoshop для веб-дизайна.
Базовые функции программы. Интерфейс
Разметка макета. Работа со слоями. Векторная графика
Редактирование и трансформация изображений
Работа с масками. Применение обтравочной маски
Профессиональная обрезка фона изображений
Основы UX/UI дизайна. Часть I
Модульная сетка в web-дизайне
Отличие UX от UI дизайна. Особенности проектирования
Разработка пользовательских сценариев
Понятие Usability. Алгоритм проведения аудита
Приёмы и правила проектирования интерфейсов
Визуальные коммуникации
Примеры частых ошибок UI UX
Принципы создания Landing page
Photoshop. Основы express цветокоррекции
Редактирование текста. Шрифт, цвет, типографика
Трансформация текста инструментами трансформирования
Основы UX/UI дизайна. Часть II
Простой интерфейс для призыва к действию
Сложный интерфейс (каталог, интернет-магазин)
Элементы интерфейса: кнопки, меню, ссылки и т.д.
Проектирование мобильного интерфейса
Обзор устоявшихся шаблонов и решений
Photoshop. Фильтр Camera RAW. Корректирующие слои
Нарезка макета для web-вёрстки. Инструмент «Раскройка»
Принципы создания миниатюрной графики: иконки, кнопки, favicon
Illustrator для веб-дизайна.
Базовые функции программы. Интерфейс
Рабочие среды. Настройка собственной рабочей среды
Особенности работы со слоями, группировка объектов
Настройка и разметка документы: сетка, линейка и т.д.
Инструменты выделения. Командная панель
Основы композиции Часть I
Графический контент
Применение Moodboard на стадии идеи
Приёмы и средства композиции
Контраст, ритм, метр и др.
Композиционное равновесие
Композиционные привязки
Динамика и статика. Работа с формой и массами
Illustrator. Кривые Безье. Основы криволинейной графики
Инструменты рисования: перо, геометрия, кисть и др.
Трансформация объектов: поворот, масштаб и т.д.
Основы композиции. Часть II
Художественный образ, концепция, идея
Работа с символами для выражения нужных образов
Подчинение средств композиции концепции дизайна
Масштаб композиции. Отличия для мобильных устройств
Современные композиционные тренды веб дизайна
Illustrator. Типографика в Illustrator. Текстовые возможности
Автоматическая и ручная трассировки изображений.
Эффекты. Работа с градиентом
Оформление, обработка контуров, выравнивание
Понятие (кривые)
Работа с цветом в веб-дизайне
Работа с цветом и изображением
Психология цвета. Цветовые гармонии
Ключевые характеристики цветов
Сочетание цветов для передачи нужных эмоций
Понятие цветового колорита
Типографика. Работа со шрифтом
Типы и виды электронных шрифтов
Параметры шрифта (кернинг, интерлиньяж и др.)
Принципы сочетания шрифтов
Удобочитаемость текста. Приёмы достижения
Свободные шрифты. Источники
Применение иконочных шрифтов
Адаптивный веб-дизайн
Понятие дизайн-макета сайта. Способы выполнения
Адаптивная вёрстка. Форматы устройств.
Подгонка макетов под форматы устройств. (Десктоп, ноутбук, планшет, телефон)
Оптимизация сайта на уровне разработки дизайна
Front-end вёрстка. Знакомство
HyperText Markup Language. Суть понятия
Веб-страница, веб-сервер. Перечень всех HTML-элементов
Разметка обычного текста. Атрибуты HTML-элементов
Символы авторского права и торговой марки на странице
Синтаксис и семантика HTML-элементов
Блочная вёрстка. Гиперссылки
Теги для верстки (div и span)
Отступы элементов (margin и padding)
Обтекаемые элементы. Позиционирование блоков
Гиперссылки на HTML-страницах. Атрибуты гиперссылок
Работа с каскадной таблицей стилей
Подключение стилей через внешний файл
Селектор, свойство, каскад, наследование, единицы измерения
Селекторы псевдоклассов и псевдоэлементов
Изменение цвета фона страницы и её текста
Оформление отдельных частей тексты, шрифт
Таблицы. Медиа-файлы. Оформление
Размещение медиа-файлов на странице (изображения)
Неупорядоченный и упорядоченный списки
Создание таблиц. Объединение ячеек. Управление свойствами
CSS-свойства для оформления HTML-элементов
Работа с формами. Вёрстка форм
HTML-элементы формы: текстовые поля, радио-кнопки
Флажки/чекбоксы, элемент выбора select и их атрибуты
Обработка результатов заполнения формы
HTML5 формы и их элементы
Элементы форм: подсказки, фокусировка на элементе и т.д.
Проверка форм на ошибки заполнения
Новые типы элементов (адреса электронной почты, URL-адреса и т.д.)
Работы с отступами HTML-элементов
Изменение внутренних и внешних отступов HTML-элементов
Ширина и высота элементов. Свойство элементов float
Видимость HTML-элементов. Применение отдельные значения свойства display
Работа со шрифтами. Границы элементов
Веб-шрифты GOOGLE. Текст в несколько колонок
Оформление, выравнивание, отступы
Переключаемые вкладки для создания меню
Границы в CSS, способы создания рамок элементов
Создание прозрачных рамок, теней, скругленных углов, градиентов
Список практикумов:
1. Найти по 5 достойных примеров с точки зрения дизайна сайтов (ориентируясь на современные тренды).2. Найти и изучить 2-3 анкеты на разработку дизайна сайта, составить свою анкету.
3. Выбрать тематику курсовой работы.
4. Составить и утвердить техническое задание на разработку сайта.
5. Разработать прототип сайта (на бумаге или в Photoshop).
6. Выбрать шрифт для макета.
7. Создание макета сайта в Photoshop. Создание сетки для макета в Photoshop.
8. Создание мобильной версии макета сайта в Photoshop.
9. Создать макет сайта в Illustrator. Создание сетки для макета в Illustrator.
10. Создание мобильной версии макета сайта в Illustrator.
11. Создание фирменного стиля.
12. Создание простого документа в HTML.
13. Подготовка рабочего места.
14. Загрузка изображений на страницу.
15. Создание гиперссылок.
16. Добавление аудио и видео на страницу.
17. Создание форм и валидация форм.
18. Подключения файла стилей к странице. Подключение шрифтов.
19. Размещение текста на странице в несколько колонок.
20. Создание прозрачных рамок, теней, скругленных углов, градиентов.
21. Использование SVG-анимации.
22. Использование CSS-анимации.
23. Задание фоновых изображений. Создание градиентного фона для сайта.
24. Применение иконочных шрифтов.
25. Верстка сайта по дизайн-макету.
26. Верстка мобильной версии сайта.
27. Подключение CMS к сайту.
Объём программы: 43 академических часа
Количество занятий: 16 занятий
Предпроектная подготовка
Получение исходных данных. Анкетирование клиента
Деловые отношения с клиентом. Техническое задание
Техника работы с аналогами (референсами)
Прототипирование будущего веб-сайта
Ключевые элементы интерфейса
Photoshop для веб-дизайна.
Базовые функции программы. Интерфейс
Разметка макета. Работа со слоями. Векторная графика
Редактирование и трансформация изображений
Работа с масками. Применение обтравочной маски
Профессиональная обрезка фона изображений
Основы UX/UI дизайна. Часть I
Модульная сетка в web-дизайне
Отличие UX от UI дизайна. Особенности проектирования
Разработка пользовательских сценариев
Понятие Usability. Алгоритм проведения аудита
Приёмы и правила проектирования интерфейсов
Визуальные коммуникации
Примеры частых ошибок UI UX
Принципы создания Landing page
Photoshop. Основы express цветокоррекции
Редактирование текста. Шрифт, цвет, типографика
Трансформация текста инструментами трансформирования
Основы UX/UI дизайна. Часть II
Простой интерфейс для призыва к действию
Сложный интерфейс (каталог, интернет-магазин)
Элементы интерфейса: кнопки, меню, ссылки и т.д.
Проектирование мобильного интерфейса
Обзор устоявшихся шаблонов и решений
Photoshop. Фильтр Camera RAW. Корректирующие слои
Нарезка макета для web-вёрстки. Инструмент «Раскройка»
Принципы создания миниатюрной графики: иконки, кнопки, favicon
Illustrator для веб-дизайна.
Базовые функции программы. Интерфейс
Рабочие среды. Настройка собственной рабочей среды
Особенности работы со слоями, группировка объектов
Настройка и разметка документы: сетка, линейка и т.д.
Инструменты выделения. Командная панель
Основы композиции Часть I
Графический контент
Применение Moodboard на стадии идеи
Приёмы и средства композиции
Контраст, ритм, метр и др.
Композиционное равновесие
Композиционные привязки
Динамика и статика. Работа с формой и массами
Illustrator. Кривые Безье. Основы криволинейной графики
Инструменты рисования: перо, геометрия, кисть и др.
Трансформация объектов: поворот, масштаб и т.д.
Основы композиции. Часть II
Художественный образ, концепция, идея
Работа с символами для выражения нужных образов
Подчинение средств композиции концепции дизайна
Масштаб композиции. Отличия для мобильных устройств
Современные композиционные тренды веб дизайна
Illustrator. Типографика в Illustrator. Текстовые возможности
Автоматическая и ручная трассировки изображений.
Эффекты. Работа с градиентом
Оформление, обработка контуров, выравнивание
Понятие (кривые)
Работа с цветом в веб-дизайне
Работа с цветом и изображением
Психология цвета. Цветовые гармонии
Ключевые характеристики цветов
Сочетание цветов для передачи нужных эмоций
Понятие цветового колорита
Типографика. Работа со шрифтом
Типы и виды электронных шрифтов
Параметры шрифта (кернинг, интерлиньяж и др.)
Принципы сочетания шрифтов
Удобочитаемость текста. Приёмы достижения
Свободные шрифты. Источники
Применение иконочных шрифтов
Адаптивный веб-дизайн
Понятие дизайн-макета сайта. Способы выполнения
Адаптивная вёрстка. Форматы устройств.
Подгонка макетов под форматы устройств. (Десктоп, ноутбук, планшет, телефон)
Оптимизация сайта на уровне разработки дизайна
Front-end вёрстка. Знакомство
HyperText Markup Language. Суть понятия
Веб-страница, веб-сервер. Перечень всех HTML-элементов
Разметка обычного текста. Атрибуты HTML-элементов
Символы авторского права и торговой марки на странице
Синтаксис и семантика HTML-элементов
Блочная вёрстка. Гиперссылки
Теги для верстки (div и span)
Отступы элементов (margin и padding)
Обтекаемые элементы. Позиционирование блоков
Гиперссылки на HTML-страницах. Атрибуты гиперссылок
Работа с каскадной таблицей стилей
Подключение стилей через внешний файл
Селектор, свойство, каскад, наследование, единицы измерения
Селекторы псевдоклассов и псевдоэлементов
Изменение цвета фона страницы и её текста
Оформление отдельных частей тексты, шрифт
Таблицы. Медиа-файлы. Оформление
Размещение медиа-файлов на странице (изображения)
Неупорядоченный и упорядоченный списки
Создание таблиц. Объединение ячеек. Управление свойствами
CSS-свойства для оформления HTML-элементов
Работа с формами. Вёрстка форм
HTML-элементы формы: текстовые поля, радио-кнопки
Флажки/чекбоксы, элемент выбора select и их атрибуты
Обработка результатов заполнения формы
HTML5 формы и их элементы
Элементы форм: подсказки, фокусировка на элементе и т.д.
Проверка форм на ошибки заполнения
Новые типы элементов (адреса электронной почты, URL-адреса и т.д.)
Работы с отступами HTML-элементов
Изменение внутренних и внешних отступов HTML-элементов
Ширина и высота элементов. Свойство элементов float
Видимость HTML-элементов. Применение отдельные значения свойства display
Работа со шрифтами. Границы элементов
Веб-шрифты GOOGLE. Текст в несколько колонок
Оформление, выравнивание, отступы
Переключаемые вкладки для создания меню
Границы в CSS, способы создания рамок элементов
Создание прозрачных рамок, теней, скругленных углов, градиентов
Список практикумов:
1. Найти по 5 достойных примеров с точки зрения дизайна сайтов (ориентируясь на современные тренды).2. Найти и изучить 2-3 анкеты на разработку дизайна сайта, составить свою анкету.
3. Выбрать тематику курсовой работы.
4. Составить и утвердить техническое задание на разработку сайта.
5. Разработать прототип сайта (на бумаге или в Photoshop).
6. Выбрать шрифт для макета.
7. Создание макета сайта в Photoshop. Создание сетки для макета в Photoshop.
8. Создание мобильной версии макета сайта в Photoshop.
9. Создать макет сайта в Illustrator. Создание сетки для макета в Illustrator.
10. Создание мобильной версии макета сайта в Illustrator.
11. Создание фирменного стиля.
12. Создание простого документа в HTML.
13. Подготовка рабочего места.
14. Загрузка изображений на страницу.
15. Создание гиперссылок.
16. Добавление аудио и видео на страницу.
17. Создание форм и валидация форм.
18. Подключения файла стилей к странице. Подключение шрифтов.
19. Размещение текста на странице в несколько колонок.
20. Создание прозрачных рамок, теней, скругленных углов, градиентов.
21. Использование SVG-анимации.
22. Использование CSS-анимации.
23. Задание фоновых изображений. Создание градиентного фона для сайта.
24. Применение иконочных шрифтов.
25. Верстка сайта по дизайн-макету.
26. Верстка мобильной версии сайта.
27. Подключение CMS к сайту.
| Вернуться назад |