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