Web дизайн

Основы интерфейса, единицы измерения, привязки и направляющие. Создание нового файла. Открытие существующего файла. Сохранение файла. Окна с открытыми файлами. Настройки программы. Инструмент прямоугольник, эллипс, многоугольник. Общие клавиатурные сокращения. Настройки документа для web.

Типы и особенности слоев, особенности группировки и названия слоев для web. Способы выделения и выравнивания слоев. Связывание и совмещение слоев. Видимость и прозрачность слоев, фильтры по типу слоя, блокировка слоя. Типы корректирующих слоев. Создание каркаса Wireframe.

Классификация, виды и особенности сочетания шрифтов для web, безопасные шрифты, особенности сглаживания шрифтов. Базы шрифтов. Основы типографики и верстки. Примеры и основные правила. Вопросы легального использования шрифта. Применение Font awesome.

Типы и форматы изображений, подбор и подготовка изображений для webдизайна. Смарт объекты и связанные файлы, особенности работы, отличия, форматы. Типы смарт фильтров, настройки и редактирование. Трансформация смарт объектов.

Возможности инструментов Photoshop, цветовые каналы, выделение области с помощью инструментов lasso, polygonallasso, magneticlasso, magicwand, quickselection, quickmask. Послойная обработка цветовых блоков. Послойная коррекция с помощью корректирующих слоев.

Основы системы, особенность построения колонок, настройка сетки и направляющих. Допустимые размеры и интервалы. Примеры применения системы. 

Адаптивность и мобильная версия сайта на основе колоночной системы. Знакомство с графической составляющей на основе Googlematerialdesign.

Построение колоночной системы под Googlematerialdesign. Углубленный анализ Googlematerialdesign, динамические элементы, таблицы, меню, формы, слайдеры.

Виды композиции на плоскости, композиционные направляющие, примеры композиционной разметки. Формат в композиции, деление форматов, сложная разметка формата.

Основные типы математических прямоугольников, принципы их деления. Принципы построение золото сечения (математический и геометрический), применение золотого сечения в композиции, ряд Фибоначчи, построение логарифмической спирали.

Основы системы, особенность построения колонок, настройка сетки и направляющих. Допустимые размеры и интервалы. Примеры применения системы.  Использование системы для Bootstrapframework. 

Адаптивность и мобильная версия сайта на основе колоночной системы.  Углубленный анализ Bootstrapframework, динамические элементы, таблицы, меню, формы, слайдеры. Библиотека элементов для Photoshop.

Применение колоночной системы совместно с Pureframework, gumby framework. Динамические элементы: таблицы, меню, формы, слайдеры. Библиотека элементов для Photoshop.

Особенности цветовых моделей, аддитивная и субтрактивная схема формирования цвета, безопасные цвета для web. Hex кодирование цветов в web дизайне, web инструменты для определения и кодирования цветов.

Основные приемы сочетания цветов, дополнительные цвета, родственные цвета, монохромные цвета, понятие спектра и световой волны. Применение круговой палитры для формирования цветовых блоков.

Создание иконок на основе простых геометрических форм, работа с инструментами shape, булевы логические операции. Редактирование узлов.

Создание иконок на основе произвольных форм, редактирование иконок, библиотеки и форматы иконок, создание сложных (многослойных) иконок. Векторизация логотипов.

Построение простых и сложных векторных масок, редактирование масок, применение маски к слою, многоуровневые контейнеры. 

Типы формообразующих линий, построение формообразующих в графическом редакторе, комбинированные формы, применение формообразующих в web дизайне.

Особенности применения растровых масок к слоям, маски для групп, растровые маски для смарт объектов, применение масок к корректирующим слоям, построение масок на основе кистей, векторных форм, выделенной области, слоя.

Растровые эффекты Photoshop, панель liquify, панель camera raw, панель vanishing point. Основные фильтры деформации, фильтры фотоэффектов, глубина резкости.

Понятие импринтинг, особенности восприятия и запоминания, анализ web сайтов и рекламных материалов, основные правила применения.

Компоненты пользовательского интерфейса, структура документа. Описание пользовательских потребностей и сценариев, на что стоит обращать внимание при проектировании сервиса, типичные ошибки. Изучение и использование UI-китов на конкретном примере.

Особенности статичных сайтов, концепции размещения информации, анимационные переходы. Микро взаимодействия элементов с пользователем. Анализ примеров, построение wireframe.

Адаптивность статичных сайтов, принцип восприятия статического сайта потенциальными покупателями с точки зрения дизайна и техник увеличения продаж.

Виды контрастов и нюансов, особенности построения в Photoshop. Акценты их влияние на общее восприятие проекта. Баланс и гармония в работе. 

Симметрия как способ упорядочивания информации. Лучевая и зеркальная симметрия, группы симметрии, построение симметрии в Photoshop. Метричность и ритмичность симметричных групп. Асимметрия, особенность применения.

Особенности вертикальных сайтов, концепции размещения информации, анимационные переходы. Микровзаимодействия элементов с пользователем. Анализ примеров, построение wireframe.

Адаптивность вертикальных сайтов, принцип восприятия вертикального сайта потенциальными покупателями с точки зрения дизайна и техник увеличения продаж.

Особенности работы с модульными сетками. Понятие модуля. Построение базовой сетки в Photoshop. Синхронизация модульной сетки с системной сеткой Photoshop. Проектирование графических элементов на основе модульной сетки. 

Виды и возможности прямолинейных модулей, правила построения бесконечных блоков. Инструмент дизайнера “куб Метатрона”. Платоновы тела.

Волновое строение мира, построение криволинейных модульных сеток в Photoshop. Отличия криволинейных сеток от круговых, виды круговых модулей, построение круговых сеток.

Особенности горизонтальных сайтов, концепции размещения информации, анимационные переходы. Микро взаимодействия элементов с пользователем. Анализ примеров, построение wireframe.

Адаптивность горизонтальных сайтов, принцип восприятия горизонтального сайта потенциальными покупателями с точки зрения дизайна и техник увеличения продаж.

Основы ретуши фотографий, очистка дефектов, артефактов сжатия, устранение самых распространённых проблем снимка. Инструменты:healing brash, clone stamp, patch tool, history brush

Многослойная ретушь фотографий, вырезание сложных объектов (волосы, шерсть, трава). Работа кистями. Инструменты:blur, sharpen, smudge, dodge, burn, sponge. 

Особенности сайтов с двойной прокруткой, концепции размещения информации, анимационные переходы. Микровзаимодействия элементов с пользователем. Анализ примеров, построение wireframe.

Адаптивность сайтов с двойной прокруткой, принцип восприятия сайта с двойной прокруткой потенциальными покупателями с точки зрения дизайна и техник увеличения продаж.

Понятие перспективы, построение одноточечной и двухточечной перспективы. Анализ перспективы на примерах. Построение куба в одноточечной и двухточечной перспективе.

Распределения света и тени на прямых и округлых объектах, рефлексы и отражения. Построение теней в перспективе. Построение цилиндра и шара.

Построение сложных форм в перспективе, построение множественных объектов, распределение света и теней. Анализ сложных объектов на примерах. Измерения в перспективе.

Стандартные геометрические фигуры куб, конус, цилиндр, пирамида. Расстановка света. Построение объектов на основе выдавливания.

Импорт 3Dобъектов в Photoshop, создание и назначение материалов. Формирование сцены, визуализация объектов.

Сбор референсов, изучение бизнеса клиента. Особенности landing страниц. Основные элементы маркетинга. Основные приемы построения Landing page. Анализ примеров.

Адаптивность Landing page, принципы построения прототипов для мобильных устройств, инструменты адаптивного прототипирования. Работа с mock-up.

Подбор изображений для коллажа. Определение общей перспективы и источников света. Масштаб и деформация объектов. Инструмент puppet warp. Изучение примеров.

Matte painting: основные приемы. Изменение освещенности, построение теней, добавление прозрачности и отражений объектам. Деление на планы проработка мелких деталей. Эмоциональное наполнение работы.

Особенности и функционал форума.  Сценарии поведения пользователей. Структура страниц, административная часть форума, понятие ВВ-коды. Изучение примеров. Основные системы форумов и комментариев.

Адаптивность форума, принципы построения прототипов для мобильных устройств, инструменты адаптивного прототипирования. Принципы восприятия сайта пользователями и потенциальным клиентом.

Создание sprite-изображений. Разрезание изображений автоматически и вручную. Вывод и сжатие изображений. Создание изображений для retina экранов. Форматы и особенности файлов.

Особенности и отличия интернет магазинов.  Анализ структуры типового интернет магазина, основные страницы внешней и административной части. Анализ бизнеса клиента, анализ подачи товаров. Сценарии поведения пользователей. Изучение примеров.

Адаптивность интернет магазина, принципы построения прототипов для мобильных устройств. Принципы восприятия сайта пользователями и потенциальным клиентом.

Создание бесшовных текстур из фотографии (растровая текстура). Создание текстур на основе векторных элементов, создание паттернов для Photoshop. Создание библиотечных элементов.

Внедрение псевдодинамики, использование анимации, разработка покадровой анимации. Gif анимация из видео ролика.

Назначение финального проекта, обсуждение идей и принципов создания работы. Подготовка финального проекта, помощь в работе над проектами учащихся.

Подготовка портфолио, правила презентации работ. Размещение портфолио на популярных дизайнерских ресурсах.

Подробная обратная связь по проектам. Общие правила коммуникации с клиентом. Тренируемся на своих проектах презентовать работу клиенту. 

Сдача проектов, оценивание, ответы на вопросы.