Векторная графика для начинающих: теория и практика технического дизайна — страница 11 из 31

Оглавление

К карточке книги

• Описание курса векторной графики
• Теоретическая часть
• Лекция № 1 Глифы в композиции иллюстраций
• Введение
• Иллюстрирование объекта в действии
• Сложности и ошибки в техническом дизайне иллюстраций
• Баланс в композиции рекламного макета
• Роль глифов в иллюстрации объектов действия
• Визуализация глифов в рекламных целях
• Примеры иллюстраций с пояснениями
• Глифы для визуальной идентификации рекламного сообщения
• Глиф как сигнал для потребителя
• Качество исполнения рекламной иллюстрации
• Масштабирование рекламной иллюстрации
• Размеры шрифта для рекламных носителей
• Выбор оптимального размера шрифта для дизайн-макета рекламы
• Краткость передачи рекламного сообщения
• Навыки технического дизайна иллюстрации и глифов в композиции визуального ряда
• Рекомендуемая литература
• Лекция № 2 Веб-интерфейсы с применением глифов
• Ключевые факторы оценки качества исполнения веб-интерфейсов
• Функциональная роль глифов в веб-интерфейсах
• Визуальные подсказки для пользователя веб-интерфейса
• Анимированные векторные элементы интерфейса
• Анимирование статических векторных элементов
• Технологический стек для анимации № 1. HTML + SVG + CSS3
• Равнозначные инструкции для стилей CSS
• Технологический стек для анимации № 2. HTML + SVG + JavaScript
• Технологический стек для анимации № 3. HTML + SVG + SMIL
• О выборе стека для анимации SVG-графики
• Особенности использования SVG-графики для мультиплатформенных систем
• Архитектура файловой структуры для размещения графики
• Потребительская и экспертная оценки качества исполнения веб-интерфейсов
• Рекомендуемая литература
• Лекция № 3 Изометрия в иллюстрировании: наглядные композиции и технические решения
• Что такое изометрия
• Визуальное сравнение стилей: flat design, 3D и isometric design
• Предпосылки для использования изометрического дизайна в иллюстрировании цифровых продуктов
• Особенности изометрического дизайна с технической точки зрения
• Цветоделение в иллюстрации
• Цветовой круг Иттена
• Основные цветовые схемы по методу Иттена
• Генерация градиента для каскадных таблиц стилей CSS
• Технический дизайн изометрической проекции для рекламной иллюстрации
• Использование форматов для экспорта, хранения и воспроизведения иллюстрации изометрического дизайна
• Заключение
• Рекомендуемая литература
• Лекция № 4 Многоплановая композиция иллюстрации для веба
• Применение, технология и композиция сложной многоплановой иллюстрации
• Иллюстративный визуальный ряд: от простого к сложному
• Примеры многоплановой иллюстрации в оформлении промо-сайтов
• Преимущество – в уникальности многоплановой иллюстрации
• Ключевые вопросы применения сложной многоплановой иллюстрации
• Технологии для многоплановой иллюстрации в применении к веб- и мобильным приложениям
• Трудности и ограничения реализации сложной мног оплановой иллюстрации для веб- и мобильных браузеров
• Многоплановая композиция иллюстрации
• Глубина слоев в многослойной веб-иллюстрации
• Золотое сечение композиции иллюстрации
• Примеры реализации сложной многоплановой иллюстрации для визуализации объектов в промо-сайтах
• Сложная иллюстрация на основе слогана или названия продукта
• Критерий успешности иллюстрации для рекламы товаров и услуг
• Применение A/B-тестов для прогноза успеха сложной коммерческой иллюстрации
• Рекомендуемая литература
• Лекция № 5 Детализация и масштабирование растров ых и векторных изображений для веба
• Адаптивное меню веб-интерфейса
• Техническое решение визуализации пунктов меню в веб-интерфейсе
• Выводы
• Отличие мобильного от адаптивного меню
• Скругление углов пиктограмм для меню
• Вариант № 2. Использование спрайта для визуализации элементов навигации
• Выводы о методах воспроизведения меню навигации с графикой
• Визуальная интерпретация возможностей веб-ресурса
• Слой № 1. Инфоблок в коде HTML
• Слой № 2. Графический спрайт с пиктограммами приложений на Android
• Слой № 3. Радиальное освещение блока иллюстрации
• Слой № 4. Слой маска с выемкой глифа загрузки
• Слой № 5. Слой вывода центрального графического элемента
• Рекомендуемая литература
• Лекция № 6 Обработка, хранение, воспроизведение каталога векторной графики
• Сложности при работе со значитель ными объемами графики
• Базовые требования к пакетной обработке графики для масштабных веб-ресурсов
• От сложного к простому методом декомпозиции
• Типовая структура хранения данных в веб-разработке
• Рекомендации для дизайнера по обработке, организации хранения и воспроизведению каталога векторной графики
• Как решать сложные задачи веб-разработки
• Рекомендуемая литература
• Лекция № 7 Оптимизация по весу и качеству векторных и растровых изображений для веб-разработки
• Зачем на практике нужна оптимизация графики
• Технические задачи процедуры оптимизации
• В чем отличие сжатия без потерь и с потерям и
• Форматы и программные инструменты оптимизации графики
• Факторный анализ основных графических форматов для применения в реше нии задач веб-разработки
• Выводы
• Рекомендуемая литература
• Лекция № 8 Фирменный и торговый знаки. Фирменный стиль и особенности работы с корпоративной продукцией
• Фирменный знак
• Базовые требования к разработке фирменного знака
• Сложности утверждения логотипа для крупных корпоративных компаний
• Как формируются требования к разработке логотипа для крупной корпоративной компании
• Торговый знак
• Как проверить фирменный знак на уникальность
• Рекомендация графическим дизайнерам
• Форматы хранения, редактирования и воспроизведения логотипов и других атрибутов фирменного стиля
• Фирменный стиль компании
• Зачем нужен фирменный стиль
• Чем отличаются гайдлайн и брендбук?
• Элементы фирменного стиля
• Выбор оптимального размера шрифта для дизайн-макета рекламы
• Цифровая и офсетная печать корпоративной продукции
• Чем отличается цифровая печать от офсетной
• От ошибок невозможно застраховаться
• Рекомендуемая литература
• Лекция № 9 Применение иллюстраций для адаптивного дизайна веб-ресурса
• Что такое адаптивный дизайн веб-ресурса
• Применение адаптивного дизайна в разработке и внедрении веб-ресурсов
• Что такое адаптивный дизайн
• Определение ширины экрана в основе адаптивного дизайна сайтов
• Интерфейс адаптивного дизайна
• Визуальное представление сайтов
• Популярные разрешения экранов среди пользователей сети Интернет в России
• Анализ качественных и количественных показателей дизайна сайта
• Проверка качества адаптивного дизайна и верстки сайтов
• Google Mobile Friendly
• Конверсия целевой аудитории на сайте с адаптивным дизайном
• Выбор технического решения для разработки промо-иллюстрации
• Пример подготовки адаптивного дизайна и верстки рекламного блока с промо-иллюстрацией
• Критерии оценки качества промо-иллюстрации
• Иллюстрация как часть стратегии нативной рекламы
• Что такое нативная реклама
• Как различить нативную рекламу
• Эффективность применения нативной рекламы
• Лицензионное использование коммерческих изображений для иллюстрирования веб-ресурсов
• Что такое коммерческая графика
• Целевое действие в иллюстрации как инструмент конверсии рекламы
• A/B-тест конверсии промо-иллюстрации по целевому действию
• Ключевые метрик и A/B-теста промо-иллюстрации
• Рекомендуемая литература
• Лекция № 10 Визуальные динамические эффекты с векторными элементами
• Программные инструменты для задач технического дизайна
• Горячие клавиши для работы с графикой в редакторе Corel Draw
• Элементарная визуализация векторных элементов веб-интерфейса
• Пример № 1. Loading в формате SVG с индикацией загрузки и вращением графического элемента
• Пример № 2. Loading в форме цветка (SVG) с индикацией и вращением
• Выводы по визуализации прелоадеров
• Иллюстративные блоки для контента веб-сайта Пример № 3. Иллюстрирование алфавита
• Пример № 4. Иллюстрирование надписи с эффектом проявления (Fade In)
• Пример № 5. Фиксированное меню горячих функций адаптивного веб-ресурса
• Пример № 6. Фиксированная панель горячих функций с вызовом по событию (по запросу пользователя)
• Рекомендуемая литература
• Практическая часть
• Предисловие к практикумам
• Практикум № 1 Построение композиции в иллюстрации с применением глифа
• Практикум № 2 Дизайн и верстка меню веб-интерфейса с применением глифов в нескольких дизайн-системах
• Самостоятельная часть практикума
• Практикум № 3 Дизайн изометрической иллюстрации в горизонтальном и вертикальном исполнении
• Практикум № 4 Дизайн и верстка многоплановой иллюстрации для веб-сайта
• ***
• ***
• Практикум № 5 Построение масштабируемой иллюстрации на основе векторных изображений для в еб-сайта
• ***
• Практикум № 6 Организация хранения, оптимизации, воспроизведения каталога растровой и векторной графики и поиска по каталогу в веб-интерфейсе
• ***
• ***
• ***
• ***
• Практикум № 7 Оптимизация загрузки векторной графики для веба
• Практикум № 8 Дизайн иллюстрации для вертикального и горизонтального форматов на основе заданного фирменного знака и стиля
• Практикум № 9 Подготовка иллюстрации для адаптивного дизайна под экраны пользовательских устройств всех форматов
• ***
• ***
• ***
• Практикум № 10 Проектирование визуальных динамических эффектов анимации для рекламной веб-страницы
• ***
• ***
• Заключение к практикумам
• Примечания