Курс: “Основы веб дизайна”

Автор курса: Карачевцева Н.А.
Преподаватель курса: Карачевцева Н.А.

Часов академических: 42 часов
Стоимость, грн: 6000 грн.

Краткое описание:
Из всего многообразия веб-технологий, весьма бурно развивающихся в наш динамичный век, веб дизайн является, чуть ли не самой молодой дисциплиной. Официально появившись лишь в конце 90-х годов прошлого века, в то время когда уже существовали и верстка и веб-программирование, веб дизайн заявил о себе как о технологии абсолютно необходимой, и, более того, объединяющей столь разнообразные по задачам и выражению дисциплины; своего рода мостиком, проложенным между дизайном и программированием сайтов. Сейчас нам уже совершенно очевидно и неоспоримо: невозможно создать хороший, продающий сайт, не зная основ веб дизайна.

Цели курса:
В настоящем курсе для изучения предусмотрены следующие основные разделы:

В настоящем курсе для изучения предусмотрены следующие основные разделы:
Знакомство с разнообразием веб-технологий, их взаимосвязью;
Изучение основных видов сайтов, их функциональных стилей;
Рассмотрение особенностей композиции и построения сайта;
Колористика и типографика в веб дизайне, особенности цвета и шрифтов в веб;
Основы и понятия об информационной архитектуре сайтов;
Модульные сетки. Их значение в дизайне и верстке;
Adobe Photoshop – как мощный инструмент для верстки макетов сайтов;
Adobe Illustrator – векторная графика и форматы - модный тренд в разработке дизайна сайта.

Преимущества курса:
В ходе изучения курса «Основы веб дизайна» слушатель получит информацию о роли веб дизайна в процессе создания профессионального, продающего, успешного веб-проекта, о том, какие факторы нужно учитывать при создании полноценных веб-страниц, отвечающих современным требованиям. Узнает о многообразии стилей и видов сайтов, особенностях веб-колористики и типографики, а также о композиции и структуре веб-страниц. Кроме того, мы видим данный курс как совокупность трех взаимодополняющих друг друга частей: теоретические основы веб дизайна, практическая верстка макета страницы средствами Adobe Photoshop, и создание интерактивных векторных элементов сайта посредством работы с Adobe Illustrator.

Для кого предназначен:
Курс предназначен для слушателей, которые хотят постичь основы веб дизайна, научиться различать стили и функциональные отличия современных сайтов, работать с цветом и шрифтами, а главное - создавать несложные прототипы и макеты сайты с нуля в графическом редакторе.
Курс рассчитан как на новичков в этой сфере, которые хотят научиться создавать дизайн сайтов, так и на дизайнеров, которые решили расширить свои горизонты и освоить столь интересную и интенсивно развивающуюся область компьютерной графики.
По окончании курса вы сможете создавать дизайн посадочных страниц (landing page), типовой страницы блога и различных веб-элементов. Также курс может быть рассмотрен как логическое продолжение курса HTML/CSS. Основы верстки сайтов. Начальные навыки работы в редакторах Adobe Photoshop и Adobe Illustrator приветствуются.

По окончании курса слушатели будут знать:
По окончании курса учащиеся будут разбираться в современных направлениях и тенденциях веб дизайна, многообразии видов сайтов и их стилей; обладать знаниями по веб-типографике и веб-колористике. Будут знать традиции и устоявшиеся принципы оформления веб-страниц и веб-сайтов, грамотно использовать стандартные приёмы оформления и элементы интерфейса а также ориентироваться в информационной архитектуре сайтов, правильно группировать и размещать элементы сайта.

По окончании курса слушатели будут уметь:

Различать, сравнивать и анализировать сайты различных видов;
Работать с различными шрифтами и цветовыми решениями на странице;
Научатся правильно размещать и компоновать основные элементы веб-страниц;
Уметь проектировать веб-страницы и интерфейсы, ориентированные на удобство пользования посетителей сайта;
Разрабатывать оформление веб-сайтов с использованием профессиональных техник, (прототипирование, эскизы);
Использовать модульные сетки в дизайне макета;
Создавать несложные макеты страниц с помощью Adobe Photoshop;
Создавать элементы интерфейса сайта в векторном пакете Adobe Illustrator.

Преподаватель курса:

Карачевцева Наталья Алексеевна

Образование: высшее педагогическое. Восточно-Украинский Университет имени
Т.Г. Шевченко
Стаж работы преподавателем: более 20-ти лет.
Опыт преподавания в сфере IT-технологий: более 12-ти лет. В активе – работа с 2D графикой (векторные и растровые пакеты), работа в области Web-дизайна – создание, администрирование, настройка и наполнение сайтов. Работаю с группами различного возраста и уровня подготовки, а также в режиме индивидуального обучения.

Краткая программа курса “Основы веб дизайна”

№ п/п	Темы	Занятия (содержание, подтемы)	Часы
1	Введение в web design.	ЧАСТЬ I. Теоретические основы веб-дизайна. Дизайн как направление в графическом дизайне. Круг задач, решаемых веб-дизайнером. Связка: макет сайта – верстка сайта – программирование сайта. Веб-сайт как приложение. Этапы разработки веб сайта. Функциональные стили в веб-дизайне. Тренды в веб-дизайне. Практическое занятие №1 Практическое рассмотрение и анализ сайтов различного типа и стилей. Сравнение стилей, функциональных особенностей сайтов, и области их применения. Домашнее задание Подобрать самостоятельно минимум по два примера различного вида сайтов из сети Интернет. Приготовить анализ типичных свойств каждого стиля.	2
2	Типографика и колористика в веб.	Изучение особенностей подхода к типографике при дизайне веб-страниц. Ограничения в типографике для веб. Стандартные шрифты ОС и подключаемые шрифты. Акцидентность. Иерархия заголовков. Адаптация к беглому просмотру страниц. Контраст фона и цвета шрифта. Колористика в веб дизайне. Особенности цвета на сайтах. Ограниченная палитра. Психология цвета (кратко). Практическое занятие №2 Работа с онлайн сервисами по настройке шрифта и подбору цветов. Рассмотрение цветовых таблиц и особенностей сочетания цветов. Анализ психологических особенностей воздействия того или иного цвета на человека. Домашнее задание Подобрать в сети примеры сайтов различного функционала, например сайта в американском бизнес-стиле и в промо-стиле. Приготовить краткий письменный анализ данных сайтов.	4
3	Композиция и визуальная иерархия на веб-страницах.	Кратко о психологии восприятия. Необходимость визуальной иерархии на сайте. Понятие модульной сетки. Модульные сетки в графических пакетах и в верстке. Frameworks – сеточные структуры (обзорно). Прототипы сайта и эскизы. Начальные понятия о различных способах верстки и responsive (адаптивном дизайне). Практическое занятие №3 Практическое рассмотрение различных элементов сайта в их иерархии и положении относительно друг друга. «Правильные» и «неправильные» сайты – анализ и сравнение. Работа с образцом модульной сетки. Создание эскиза главной страницы сайта-визитки. Домашнее задание Создать эскиз («от руки») главной страницы интернет-магазина торговой компании по выбору слушателя.	4
4	Эргономика сайтов. Информационная архитектура сайтов. Навигация.	Начальные понятия об эргономике (юзабилити) сайтов и информационной архитектуре. Определение интерфейса. Взаимодействие человек – компьютер. Особенности взаимодействия. Понятие об ИА (Информационной архитектуре) сайта. Необходимость разработки структуры сайта при создании профессионального, продающего веб-проекта. Кратко о системе навигации на сайте. Области навигации и виды меню. Рекомендации по разработке навигационных элементов. Главная страница и ее особенности. Практическое занятие №4 Практическое рассмотрение различных элементов сайта, обсуждение их функционального назначения. Рассмотрение примеров ошибок в проектировании и реализации интерфейсов. Домашнее задание Самостоятельно найти в сети примеры сайтов с «плохим юзабилити». Приготовить обсуждение ошибок, разбор их и пути исправления. Найти примеры ресурсов с тремя и более областями навигации. Проанализировать их особенности и цели.	4
5	Графика в веб дизайне.	Особенности веб-графики. Форматы, сжатие, уменьшение скорости загрузки страниц. Источники изображений для сайтов. Фотостоки, бесплатные ресурсы. Рекомендации по поиску необходимой графики для сайта. Подбор по цвету. Рекомендации по выбору цветовой гаммы сайта. Ограничения по количеству используемых цветов и графики в целом. Практическое занятие №5 Практическое рассмотрение сайтов с преимущественно графическим контентом. Сайты-галереи. Поиск изображений для макета сайта по заданной темы. Подбор цветовой гаммы для данного макета. Домашнее задание Подобрать 5-6 изображений для будущего корпоративного сайта (компания - продавец автомобилей) - логотип, картинку для фона, несколько фото для слайдера и фотографии сотрудников по заданным размерам.	2
6	Итоговое занятие. Работа по брифу.	Понятие брифа и технического задания. Особенности работы с заказчиком. Обозначение идеи, ЦА, сбор сведений и анализ сайтов компаний конкурентов. Создание и детальная проработка структуры сайта. Отрисовка варфрейма (прототипа) сайта. Понятие о посадочных страницах. Их особенности. Практическое занятие №6 Практический разбор брифа от реального заказчика. Прохождение основных ступеней этапа прототипирования сайта. Решение задач в сфере ответственности веб дизайнера. Домашнее задание Доработка домашнего задания из занятия №3. Прорисовка детального прототипа сайта интернет-магазина с элементами навигации и корзиной. Подготовить эскиз главной страницы и страницы карточки товара. 2	2
7	Знакомство с растровой графикой. Интерфейс программы Adobe Photoshop.	ЧАСТЬ II. Создание макета сайта в Adobe Photoshop. Знакомство с Adobe Photoshop. Палитры, навигация, инструментарий. Особенности растровой графики. Форматы документов, создание, открытие, сохранение. Размер документа в пикселях. Управление размером. Холст. Работа с холстом. Линейки, сетки, направляющие. Направляющие как вспомогательный инструмент веб-дизайнера при работе с модульными сетками. Основные цвета. Работа с цветовыми образцами. Практическое занятие №7 Практическая работа с холстом. Настройка интерфейса программы «под себя». Сохранение образца цвета. Работа с библиотеками цветов. Домашнее задание Установить на домашнем ПК Adobe Photoshop. Создать документ размером 1024х1000 пикселей. Создать направляющие для будущего макета сайта по заданным координатам. Сохранить собственный цвет как фон для сайта.	2
8	Способы выделения в Adobe Photoshop. Слои.	Основные инструменты выделения. Группа Лассо, Волшебная палочка, области выделения простой формы. Модификация выделения. Трансформация выделенной области. Быстрая маска как способ создания сложной формы выделения. Концепция слоев. Макет сайта – как многослойное и сложное построение. Прозрачность и режимы наложения. Группировка слоев, связывание, слияние. Стили слоев (обзорно). Создание собственного стиля и модификация существующего. Практическое занятие №8 Создание первых коллажей из различных участков выделения. Практическая работа по созданию области навигации на сайте – ряда кнопок меню. Домашнее задание Создать форму для регистрации на сайте. Использовать растровую подложку под форму. Создать поля для логина и пароля и кнопку входа.	4
9	Работа с текстом. Экспорт.	Основные понятия в типографике. Особенности работы с текстом в растровом редакторе. Палитра настройки текста и шрифтовых свойств. Модуль Safe for Web. 3 формата растровых изображений для веб-страниц. Практическое занятие №9 Практическая работа по созданию блока с текстом для макета и стилизованных заголовков. Оптимизация растровых изображений. Домашнее задание Сделать макет рекламного баннера с использованием растровой подложки и текстового заголовка. Добавить контактные данные. Подготовить картинки в 3-х форматах для веб.	2
10	Векторный инструментарий.	Векторные фигуры в Photoshop как основа для макета сайта. Слои-формы и их особенности. Создание веб элементов. Маски. Обтравочные маски. Практическое занятие №10 Практическая работа по созданию блока контента для сайта с использованием стиля слоя. Добавление текстового блока и обтравочной маски для растрового изображения. Домашнее задание Создать макет «шапки» сайта с векторным логотипом. Можно использовать стандартные фигуры. создать собственные или скачать в Интернете. Украсить шапку сайта стилизованным текстовым заголовком.	2
11	Ретушь и коррекция.	Немного о ретуши и коррекции. Инструменты ретуши в Photoshop. Клонирующий штамп. Корректировочные и заливочные слои и их роль в создании макета сайта. Коротко о текстурах в Photoshop. Практическое занятие №11 Практическая работа по созданию собственной текстуры в программе. Работа с клонирующим штампом. Создание заливочных слоев для фона сайта. Используем корректировочные слои для стилизации макета. Домашнее задание Отретушировать заданное изображение. На предложенных изображениях провести коррекцию цвета, заменить цвет на противоположный и изменить цветовой баланс.	2
12	Верстка макета посадочной страницы.	Особенности дизайна landing page. Последовательность верстки. Создание элементов веб страницы: шапка, контент, сайдбар, футер. Практическое занятие №12 Практическая работа по верстке макета посадочной страницы для коммерческого сайта в режиме мастер-класс. Проработка деталей. Домашнее задание Завершить верстку макета, добавить стили слоев, добавить контактные данные в футере.	4
13	Векторная графика. Интерфейс программы Adobe Illustrator.	ЧАСТЬ III. Создание векторных элементов в Adobe Illustrator. Особенности и назначение векторной графики. Знакомство с программой Adobe Illustrator. Векторные форматы. Создание, сохранение файлов. Создание простых объектов (примитивы, линии). Настройки инструментов. Выделение, перемещение объектов в стопке, группировка, копирование и дублирование, выравнивание и распределение, базовая трансформация объектов. Трансформации: масштаб, поворот, зеркальное отражение, скос, деформация объектов. Практическое занятие №13 Практическая работа по созданию векторной иллюстрации – создание логотипа компании из простых фигур. Домашнее задание Установить на домашнем ПК Adobe Illustrator. Создать документ заданного размера и в модели RGB. Создать несложную векторную иллюстрацию - персонаж для будущего рекламного веб-баннера.	2
14	Заливки и обводки в Adobe Illustrator.	Заливка векторного объекта. Виды заливок. Настройка библиотек, создание собственных образцов цвета.Градиенты. Виды градиентов. Создание и настройка градиента. Узорные заливки. Сохранение собственной текстуры и модификация существующей. Обводки. Виды обводок. Настройка и сохранение образца обводки. Палитра Оформление. Создание многослойной заливки и обводки. Стили в Adobe Illustrator. Создание, сохранение, использование. Прозрачность. Практическое занятие №14 Создание векторной иконки для сайта или мобильного приложения. Использование готовых стилей и загрузка стилей из сети. Домашнее задание Создать векторный значок корзины и кнопку входа в личный кабинет пользователя для интернет-магазина. Создать и сохранить свой стиль для данного элемента, используя градиентную и сплошную заливку, а также многослойную обводку.	2
15	Работа с текстом. Символы в Adobe Illustrator.	Текст в Adobe Illustrator.Инструмент Текст. Заголовочный и блочный текст. Текст в контуре и по контуру. Настройка блоков текста, работа с фреймами, вставка изображений с обтеканием. Повторение понятий «гарнитура шрифта», «интерлиньяж», «трекинг» и т.д. Символы в AI. Символ как веб-элемент. Палитра символов. Создание и модификация символа. Экспорт. Немного о формате SVG. Практическое занятие №15 Создание векторной кнопки как повторяющегося элемента макета сайта. Сохранение ее в формате символа с использованием текста. Изменение массива через редактирование главного образца. Домашнее задание Создать набор векторных элементов сайта по выбору в двух разных стилях дизайна. Желательно использовать стиль flat и web 2.0. Сохранить в библиотеку стиль элемента, преобразовать его в символ, экспортировать в формат SVG.	2
16	Экзамен.	Итоговая экзаменационная работа. Сдача практической части экзамена состоит в представлении и защите макета сайта-визитки, созданного слушателем на протяжении обучения. Возможен вариант макета корпоративного сайта, интернет-магазина или блога по желанию слушателя. В ходе экзамена необходимо ответить на ряд вопросов об особенностях данного макета, его основных элементов и его юзабилити.	2

Итого базовых академических часов по курсу "Основы Веб дизайна" - 42.
Рекомендуется проведение занятий с частотой 2-3 раза в неделю по 2 часа (1 пара).

Список раздаточного материала:
В процессе обучения слушателям выдаются дополнительные материалы в электронном виде: электронный уроки в pdf формате, а также видеоуроки по пройденным темам для лучшего усвоения материала и дальнейшего его закрепления.
Также слушателю рекомендуется вести собственный конспект (электронный либо бумажный) при прослушивании лекции. Практические пособия для работы на уроке и дома выдаются преподавателем непосредственно перед занятием в электронном виде. Приветствуется работа с собственными файлами студента, принесенными им на занятие.

Где можно использовать полученные знания:
Полученные в течение данного курса знания и навыки слушатель может реализовать в собственных будущих веб-проектах. Объема знаний, полученных при обучении, хватит для того чтобы создавать несложные макеты сайтов различного типа в Photoshop (сайт-портфолио, сайт-визитка, корпоративный сайт, интернет-магазин, lending page и т.д), разобрать и сделать редизайн существующего макета. Слушатель получит необходимые знания о структуре сайта, этапах его разработки, особенностях работы со шрифтами и цветом, а также правильном способе организации всех его элементов.

Поддержка выпускников преподавателем:
По окончании курса преподаватель остается на связи со слушателем. Вы в любое время можете получить помощь в своей работе и квалифицированный ответ на любой вопрос, расширить свои знания и усовершенствовать навыки с помощью индивидуальных занятий с преподавателем. А также, мы предлагаем углубленные курсы для профессионалов, на которых вы сможете освоить такие технологии как: Usability – Эргономика сайтов, SEO - раскрутка и продвижение сайтов, освоить профессию верстальщика в курсе «HTML/CSS.Основы верстки сайтов», а также углубленно овладеть навыками работами с пакетами Adobe Photoshop и Adobe Illustrator.

Дополнительная информация:
Занятия проводятся как в группах, так и индивидуально в удобное слушателю время. Время предварительно согласовывается с менеджером учебного центра.
На занятиях рекомендуется иметь тетрадь для составления конспекта и электронный носитель (флешку) для записи электронных уроков и практических пособий.

Иллюстрации и примеры выполненных заданий к данному курсу

Пример задания к практическому занятию № 1
Введение в веб дизайн