Графический дизайн для web разработки

Информация о курсе:
Длительность курса: 2 месяца (45 часов)
Вечерние группы: 18 занятий х 2,5 часа
Субботние группы: 10 занятий х 4,5 часа
Веб-дизайнер – профессия интересная и многообразная. Это архитектор веб-сайта, его художник. Он создает красивый и удобный веб-дизайн страницы, от которого будет зависеть восприятие информации посетителем на сайте. Ведь главная задача веб-дизайнера — оформить интернет-проект так, чтобы как можно больше пользователей им заинтересовалось. И здесь нет немаловажных деталей – ведь влияет все: цвет, шрифт, размеры элементов и их расположение. Поэтому квалифицированный web-дизайнер должен иметь соответствующие знания как в сфере дизайнерских компьютерных программ, так и в области графики.
И не забывайте, что у этой профессии имеются несомненные плюсы: постоянная востребованность, возможность удаленной работы, широкие возможности для фриланса, достойная оплата.
Основы web-дизайна
- Кто такой веб-дизайнер. Чем занимается веб-дизайнер. Отличия веб-дизайна от полиграфического и графического дизайна. Фундаментальные принципы веб-дизайна.
- Этапы создания сайта. С чего нужно начать и что нельзя упустить.
- Виды сайтов. Сколько вариантов страниц нужно для создания сайта? Одностраничные и многостраничные сайты. Особенности сайтов в зависимости от их назначения. Информационные сайты и интернет-магазины. Структура и особенности Landing Page.
- Определение целей сайта. Что такое цели для сайта? Как правильно поставить цели сайта? Какова их роль в SEO продвижении?
- Создание структуры сайта. Понятия внешней и внутренней структуры сайта. Важность правильного определения внутренней структуры и оптимальное разделение информации на разделы и категории. Какие бывают структуры сайтов.
- Структурирование информации (юзабилити). Как сделать сайт удобным для пользователей. Определение оптимальной навигации сайта. Основные правила навигации.
- Составление технического задания – что это и для чего необходимо. Что должно обязательно входить в техническое задание.
- Понятие прототипа сайта. Важность создания прототипа. Процесс создания прототипа. Знакомство с программами для создания прототипов.
- Адаптация сайта. Мобильная версия сайта. Зачем нужен адаптивный дизайн. Основные принципы адаптивного дизайна. Особенности дизайна адаптивных страниц и адаптивных логотипов.
Теория дизайна
- Психология цвета и его влияние на восприятие информации. Сочетания цветов. Важность цветовой схемы сайта. Выбор основного цвета и подбор цветовой палитры для будущего сайта. Подбор сочетания цветов текста и цвета фона.
- Основы композиции. Основные элементы дизайна, участвующие в создании композиции. Их влияние на подачу информации и восприятие сайта пользователем.
- Принципы дизайна, определяющие правила взаимодействия всех элементов.
- Части веб-страниц. Варианты компоновки страниц. Как выбрать оптимальную компоновку.
- Основные и дополнительные элементы страниц. Работа с текстом и изображениями. Влияние инфографики. Интерактивные элементы страниц.
- Работа со шрифтами. Особенности выбора шрифтов и оформления текста в веб-дизайне. Подбор шрифтовых пар. Важность хорошей типографики в дизайне сайта.
- Цветовые модели. Понятие цветового тона. Способы указания цвета.
- Понятия растровой и векторной графики. Их отличия, плюсы и минусы. Области применения видов графики.
- Подбор изображений для дизайна. Как гармонично сочетать изображения. Каким должен быть фон сайта. Вопрос приобретения изображений – технический и правовой аспект.
- Понятие авторского права. Как не нарушить чужое и как защитить свое.
- Модульная сетка. Назначение и виды модульных сеток. Как работать с модульными сетками.
Работа с Adobe Photoshop
- Знакомимся с интерфейсом программы. Работа с панелью инструментов и палитрами. Настройка удобного рабочего пространства, установки производительности.
- Изменение масштаба документа, перемещение по документу. Работа с файлами, варианты открытия и сохранения документов. Форматы графических файлов.
- Изучаем основные рисующие инструменты. Кисти, заливки, текстуры, работа с градиентом. Используем готовые, подключаем дополнительные, а также учимся создавать и сохранять свои.
- Работа со слоями и группами. Создание, перемещение слоев. Объединение слоев в группы, разгруппировка. Варианты копирования слоев и их отличия. Варианты объединения слоев. Добавление эффектов к слою (стили слоя). Режимы наложения (смешивания) слоев.
- Учимся правильно создавать структуру макета. Правильное распределение и именование групп и слоев.
- Выделение объекта. Инструменты выделения, их особенности и области применения. Создание коллажей и монтажей. Макетирование. Начинаем рисовать сайт.
- Обработка изображений. Инструменты цветовой и тоновой коррекции изображений. Инструменты для ретуши изображений.
- Применение фильтров к изображению. Учимся применять и сочетать фильтры.
- Работа с масками слоя. Назначение масок. Создание масок, перенос, дублирование. Связь маски со слоем. Особенности применения корректирующих слоев с масками.
- Добавление текста. Виды текстовых слоев. Оформление текста. Особенности параметров текста для веб-дизайна. Что и когда допустимо делать с текстом для дизайна сайта.
- Создание анимации. Как сохранить готовую анимацию. Создаем анимированные элементы и рекламный баннер для сайта.
Работа с Adobe Illustrator
- Интерфейс программы. Базовые навыки работы с программой.
- Знакомство с основными инструментами. Учимся создавать геометрические объекты, линейные объекты, рисуем произвольные фигуры.
- Знакомимся с инструментами Pencil, Pen, работаем с кистями и символами.
- Способы заливки объектов. Добавление обводок к объектам. Работа с градиентами. Декоративные заливки.
- Использование фильтров и эффектов.
- Особенности работы со слоями.
- Копирование, перенос и трансформация объектов.
- Способы выделения объектов. Коррекция контуров.
- Создание простых объектов. Создаем графические элементы. Рисуем иконки для сайта.
- Обмен изображениями между Photoshop и Illustrator.