Коммерческий web-дизайн. Программа курсов
| Вернуться назад |
Учебная программа курсов «Web-дизайн. Front-end»
Объём программы: 32 академических часа
Итоговая работа: макет сайта в Photoshop, свёрстанная html-страница
Введение в веб-разработку. Понятие HTML
Создание простого документа. Основные понятия в веб-разработке:
Что представляет собой веб-страница;
виды сайтов; процесс разработки сайта;
что такое гипертекст, теги и атрибуты;
подготовка рабочего места;
структура HTML- документа; основные теги оформления текста;
простой пример HTML странички;
пример сложной веб-страницы;
горячие клавиши для перемещения по документам.
Основы языка разметки документов HTML
Спецсимволы; комментарии в HTML;
гиперссылки; типы изображений для web;
загрузка изображений на страницу;
списки, формы и их элементы. HTML5
Семантические элементы:
Обзор HTML5, Новые семантические элементы HTML5
Новый способ структурирования страниц
Семантика текстового уровня. Настройка редактора
практические примеры применения семантических тегов
для создания структуры сайта
Добавление аудио и видео на страницу
Усовершенствование традиционных форм
(добавление подсказок, фокусировка на элементе и т.д.)
Проверка форм на ошибки заполнения
Основы языка оформления стилей документа CSS
Что такое CSS; синтаксис CSS; способы объявления CSS;
селекторы (id, class, tag); селекторы атрибутов.;
основные свойства стилей; вложенность;
наследование и группирование свойств;
проверка подключения файла стилей.
Блочная верстка Понятие потока документа: блочные и строчные элементы
Основные теги для верстки (div и span); отступы элементов (margin и padding);
обтекаемые элементы; позиционирование блоков
Использование SVG Работа с текстом: Веб-шрифты GOOGLE.
Размещение текста в несколько колонок.
Механизмы представления текстовой информации: оформление, выравнивание, отступы
Создание прозрачных рамок, теней, скругленных углов, градиентов
Параметры CSS для фона. Использование SVG
Создание множественного фона для сайта
Задание фоновых изображений. Создание градиентного фона для сайта
Знакомство со спрайтами и иконочными шрифтами
Начало работы. Прототипирование
Прототипирование сайта. Формирование идеи
Проектирование взаимодействия с пользователем
Устоявшиеся принципы и тенденции
Программы и способы прототипирования
Практические основы композиции
Приёмы и средства композиции
Контраст, ритм, метр и др. средства
Композиционное равновесие
Композиционные привязки
Динамика и статика. Работа с формой и массами
Работа с цветом и изображением
Психология цвета. Цветовые гармонии
Ключевые характеристики цветов
Сочетание цветов для передачи нужных эмоций
Понятие цветового колорита
Применение Moodboard на стадии идеи
Типографика. Работа со шрифтами
Типы и виды электронных шрифтов
Параметры шрифта (кернинг, интерлиньяж и др.)
Принципы сочетания шрифтов
Удобочитаемость текста. Приёмы достижения
Свободные шрифты. Источники
Применение иконочных шрифтов
UI/UX-дизайн
Понятие UI и UX дизайна
Ключевые элементы интерфейса
Алгоритмы проектирования взаимодействий
Визуальные коммуникации
Разбор частых ошибок на примерах
Дизайн-макет сайта
Понятие дизайн-макета сайта. Способы выполнения
Адаптивная вёрстка. Форматы устройств
Модульная сетка в web-дизайне
Современные стили и тренды web-дизайна
Основы вёрстки макета в Photoshop
Ключевой инструментарий для вёрстки
Алгоритм и этапы выполнения вёрстки
Обработка изображений сайта. Smart-объекты
Применение векторной графики для вёрстки
Сохранение результатов вёрстки
| Вернуться назад |