Программа курсов «Веб-дизайн и Front-end вёрстка»
Раздел I. Форкурс «Искусство дизайна»
Дизайн-аналитика
Практика: ментальная карта проекта
Практика: сбор и аналитика аналогов
Композиция в веб-дизайне
Практика: эмоции и формы
Практика: композиционный сторителлинг
Практика: подбор аналогов композиции
Цветоведение. Сочетание цветов
Практика: цветовое решение сайта
Шрифты. Типографика в веб-дизайне
Практика: подбор шрифтов для веб-сайта
Раздел II. UX/UI дизайн
Проектирование взаимодействия
Практика: сценарий взаимодействия
Практика: список требований к проекту
Ментальная эргономика
Практика: логическая структура сайта
Практика: навигация и поведение сайта
Визуальный дизайн интерфейсов
Практика: подбор пиктограмм сайта
Проектирование деталей интерфейса
Раздел III. Вёрстка дизайн-макета
Основы Photoshop для веб-дизайна
Обработка изображений в Photoshop
Основы Figma для веб-дизайна
Раздел IV. Front-end вёрстка
Знакомство с HTML-вёрсткой
Веб-страница. Веб-сервер
Хостинг. Домен. FTP-загрузка
HTML. Суть понятия. История
Перечень всех HTML-элементов
Разметка обычного текста
Атрибуты HTML-элементов
Теги спец-символов в HTML
Синтаксис и семантика HTML
Практика: простейшая HTML-страница
Блочная вёрстка. Гиперссылки
Теги для верстки (div и span)
Отступы (margin и padding)
Обтекаемые элементы
Позиционирование блоков
Гиперссылки на HTML-страницах
Атрибуты гиперссылок
Практика: вёрстка блоков ссайта
Практика: создание гиперссылок
Разметка сайта. Bootstrap
Overflow и clear в вёрстке
Заполнение разметки частями нарезанного макета
Приёмы позиционирования элементов
Обзор фреймворка Bootstrap
Практика: подключение Bootstrap
Практика: применение элементов Bootstrap
CSS (Каскадные таблицы стилей)
Подключение CSS через внешний файл
Селектор, свойство, каскад
Наследование, единицы измерения
Селекторы псевдоклассов
Селекторы псевдоэлементов
Изменение цвета фона страницы
Оформление частей текста, шрифт
Практика: внешний файл CSS
Таблицы. Медиа-файлы. Оформление
Размещение изображений на странице
Неупорядоченные и упорядоченные списки
Создание таблиц. Объединение ячеек
Управление свойствами таблицы
CSS-свойства для HTML-элементов
Практика: вёрстка и заполнение таблицы
Практика: размещение картинок на сайте
Практика: вёрстка списков
Работа с формами. Вёрстка форм
HTML-элементы формы:
текстовые поля, радио-кнопки
Флажки/чекбоксы, элемент select
Обработка результатов формы
HTML5 формы и их элементы
Подсказки, фокусировка и т.д.
Проверка форм на ошибки заполнения
Новые типы элементов (адреса электронной почты, URL-адреса и т.д.)
Практика: вёрстка формы
Отступы HTML-элементов
Внутренние и внешние отступы
Ширина и высота элементов
Свойство элементов float
Видимость HTML-элементов
Обзор свойства display
Практика: работа с отступами
Шрифты. Границы элементов
Обзор Веб-шрифтов GOOGLE
Текст в несколько колонок
Оформление, выравнивание, отступы
Меню из переключаемых вкладок
Границы в CSS. Рамки элементов
Тени, градиенты, скругление и т.д.
Практика: подключение шрифтов
Практика: создание меню сайта
Семантические элементы HTML5
Обзор новой семантики HTML5
Структурирование страниц в HTML5
Семантика текстового уровня
Практика: работа с HTML5-тегами
Haml. Sass. Flexbox. Финал
Haml. Упрощённая разметка
Flex. Гибкая структура блоков
Обзор свойств Flexbox. Применение
Препроцессор Sass. Ситуации применения
Sass: переменные, вложенности
Фрагменты, импорт, миксины
Расширение, наследование. Операторы
Кроссбраузерная проверка сайта
Проверка на Android и iOs
Устранение ошибок вёрстки
Практика: подключение Flexbox, Haml, Sass
Практика: работа со стилями через Sass
Практика: итоговая доработка сайта
Дизайн-аналитика
- Ключевые компетенции веб-дизайнера
- Постановка задачи на проектирование
- Сбор и аналитика исходных данных
- Ментальная карта проекта
- Оформление проектного задания
- Источники идей в дизайне
- Применение Moodboard на стадии идеи
Практика: ментальная карта проекта
Практика: сбор и аналитика аналогов
Композиция в веб-дизайне
- Средства: линия, точка, пятно и др.
- Приёмы: контраст, ритм, метр и др.
- Достижение равновесия композиции
- Динамика и статика. Передача эмоций
- Художественный образ, концепция, идея
- Обзор трендов в веб-дизайне
Практика: эмоции и формы
Практика: композиционный сторителлинг
Практика: подбор аналогов композиции
Цветоведение. Сочетание цветов
- Основные характеристики цвета
- Цветовой круг Иттена. Гармонии
- Психология восприятия цветов
- Цветовой колорит веб-сайта
- Обзор цветовых трендов веб-дизайна
Практика: цветовое решение сайта
Шрифты. Типографика в веб-дизайне
- Типы и виды электронных шрифтов
- Параметры и характеристики шрифта
- Принципы сочетания шрифтов
- Достижение удобочитаемости текста
- Свободные шрифты. Источники
- Применение иконочных шрифтов
Практика: подбор шрифтов для веб-сайта
Раздел II. UX/UI дизайн
Проектирование взаимодействия
- Обзор этапов проектирования
- Ментальные модели проектирования
- Методы исследований поведения
- Персонажи и цели в проектировании
- Алгоритм разработки персонажа
- Разработка сценариев и требований
Практика: сценарий взаимодействия
Практика: список требований к проекту
Ментальная эргономика
- Гармоничное взаимодействие
- Оптимизация трудозатрат
- Принципы проектирования навигации
- Тактичное поведение интфрейса
- Метафорическая парадигма
- Идиоматическая парадигма
- Парадигма реализации
Практика: логическая структура сайта
Практика: навигация и поведение сайта
Визуальный дизайн интерфейсов
- Средства (форма, цвет, размер и др)
- Принципы (иерархия, связи и т.д.)
- Выравнивание и сетка
- Использование пиктограмм
- Текст в графических интерфейсах
- Визуальный информационный дизайн
Практика: подбор пиктограмм сайта
Проектирование деталей интерфейса
- Оптимизация поиска. Функция отмены
- Манипуляции. Элементы управления
- Меню. Панели инструментов
- Диаологовые окна. Поведение окон
- Ошибки, уведомления. Модальность
Раздел III. Вёрстка дизайн-макета
Основы Photoshop для веб-дизайна
- Логика интерфейса. Блоки функций
- Разметка макета. Работа со слоями
- Перемещение и редактирование объектов
- Применение векторной графики
- Редактирование и форматирование текста
- Smart-объекты. Работа с изображениями
- Маска слоя. Обтравочная маска
Обработка изображений в Photoshop
- Принципы неразрущающей коррекции
- Обработка изображений в Camera RAW
- Применение корректирующих слоёв
- Техники обрезки фона изображений
- Приёмы цветокоррекции изображений
- Быстрая ретушь. Устранение дефектов
Основы Figma для веб-дизайна
- Работа с фигурами и изображениями
- Организация макета. Компоненты
- Фреймы, текст, стили, гриды
- Библиотеки и мультикомпоненты
- Прототипирование и девайс превью
- Адаптация макета под платформы
Раздел IV. Front-end вёрстка
Знакомство с HTML-вёрсткой
Веб-страница. Веб-сервер
Хостинг. Домен. FTP-загрузка
HTML. Суть понятия. История
Перечень всех HTML-элементов
Разметка обычного текста
Атрибуты HTML-элементов
Теги спец-символов в HTML
Синтаксис и семантика HTML
Практика: простейшая HTML-страница
Блочная вёрстка. Гиперссылки
Теги для верстки (div и span)
Отступы (margin и padding)
Обтекаемые элементы
Позиционирование блоков
Гиперссылки на HTML-страницах
Атрибуты гиперссылок
Практика: вёрстка блоков ссайта
Практика: создание гиперссылок
Разметка сайта. Bootstrap
Overflow и clear в вёрстке
Заполнение разметки частями нарезанного макета
Приёмы позиционирования элементов
Обзор фреймворка Bootstrap
Практика: подключение Bootstrap
Практика: применение элементов Bootstrap
CSS (Каскадные таблицы стилей)
Подключение CSS через внешний файл
Селектор, свойство, каскад
Наследование, единицы измерения
Селекторы псевдоклассов
Селекторы псевдоэлементов
Изменение цвета фона страницы
Оформление частей текста, шрифт
Практика: внешний файл CSS
Таблицы. Медиа-файлы. Оформление
Размещение изображений на странице
Неупорядоченные и упорядоченные списки
Создание таблиц. Объединение ячеек
Управление свойствами таблицы
CSS-свойства для HTML-элементов
Практика: вёрстка и заполнение таблицы
Практика: размещение картинок на сайте
Практика: вёрстка списков
Работа с формами. Вёрстка форм
HTML-элементы формы:
текстовые поля, радио-кнопки
Флажки/чекбоксы, элемент select
Обработка результатов формы
HTML5 формы и их элементы
Подсказки, фокусировка и т.д.
Проверка форм на ошибки заполнения
Новые типы элементов (адреса электронной почты, URL-адреса и т.д.)
Практика: вёрстка формы
Отступы HTML-элементов
Внутренние и внешние отступы
Ширина и высота элементов
Свойство элементов float
Видимость HTML-элементов
Обзор свойства display
Практика: работа с отступами
Шрифты. Границы элементов
Обзор Веб-шрифтов GOOGLE
Текст в несколько колонок
Оформление, выравнивание, отступы
Меню из переключаемых вкладок
Границы в CSS. Рамки элементов
Тени, градиенты, скругление и т.д.
Практика: подключение шрифтов
Практика: создание меню сайта
Семантические элементы HTML5
Обзор новой семантики HTML5
Структурирование страниц в HTML5
Семантика текстового уровня
Практика: работа с HTML5-тегами
Haml. Sass. Flexbox. Финал
Haml. Упрощённая разметка
Flex. Гибкая структура блоков
Обзор свойств Flexbox. Применение
Препроцессор Sass. Ситуации применения
Sass: переменные, вложенности
Фрагменты, импорт, миксины
Расширение, наследование. Операторы
Кроссбраузерная проверка сайта
Проверка на Android и iOs
Устранение ошибок вёрстки
Практика: подключение Flexbox, Haml, Sass
Практика: работа со стилями через Sass
Практика: итоговая доработка сайта