Векторная графика для начинающих: теория и практика технического дизайна
Векторная графика для начинающих: теория и практика технического дизайна
Егор Юрьевич Поляков
Российский компьютерный бестселлер
Этот самоучитель позволит вам освоить основные принципы создания векторной графики – познакомиться с теорией технического дизайна, рабочими инструментами и приемами и закрепить пройденный материал на практике. В книге вы найдете десять лекций и десять практикумов, составляющих тридцать два академических часа – каждый урок посвящен различным областям технического дизайна и содержит всю необходимую для работы в описанной области информацию.
В формате PDF A4 сохранен издательский макет.
Егор Поляков
Векторная графика для начинающих: теория и практика технического дизайна
© Поляков Е.Ю., текст, 2022
© Поляков Е.Ю., иллюстрация, 2022
© ООО «Издательство «Эксмо», 2023
Описание курса векторной графики
В данном издании представлен базовый курс по теории и практике прикладной векторной графики. Это учебное пособие позволит углубить ваши знания и практические навыки, если вы занимаетесь графическим дизайном, иллюстрацией, рекламой.
Курс состоит из 10 лекций и 10 практикумов, всего 34 академических часа с учетом экзамена или зачета, по часу на лекцию и по два часа на практикум.
Особое внимание автор уделил правилам и приемам дизайна для пошагового выполнения типовых технических заданий. Освоившие этот курс смогут начать работать в должности графического (технического) дизайнера в рекламе, разрабатывать веб- и мобильные интерфейсы.
Изучая теорию, ведите конспекты: они очень пригодятся вам, когда начнется практическая часть, будут важным подспорьем и в будущей профессиональной практике.
Это учебное пособие не случайно названо базовым: здесь представлены основные этапы рабочего процесса технического дизайнера, проектировщика интерфейсов и веб-дизайнера.
Как выбрать оптимальный путь решения технической задачи с точки зрения трудозатрат, сложности исполнения, чтобы результат оказался качественным и устраивал бы заказчика? На этот вопрос также дается ответ в учебном пособии.
Какие методы используются при изучении материала?
Декомпозиция – разложение сложных задач на составные простые для понимания и последовательного решения.
Факторный анализ для сравнения вариантов решения и выбора среди них оптимального по времени исполнения и трудоемкости. Примеры применения факторного анализа, неопытному специалисту это поможет выбрать путь при решении комплексных заданий.
A/B-тестирование на фокус-группе целевой аудитории поможет выбрать наилучший вариант логотипа или дизайн-макета с учетом мнения целевой аудитории продукции.
Эти методы развивают критическое мышление студентов, что, в свою очередь, формирует способность комплексно оценивать качество исполнения продуктов графического дизайна, помогает выбрать дальнейший путь в сфере технического дизайна: веб-дизайн, разработка приложений, иллюстрирование, реклама и др.
Книга будет интересна как начинающим графическим дизайнерам, так и веб-разработчикам: расширит кругозор, расскажет об актуальных темах в области графического и веб-дизайна, современных требованиях к качеству исполнения работ с применением векторной и растровой графики.
Этот курс можно найти в электронном (дистанционном) формате – http://highcourses.ru.
Теоретическая часть
Лекция № 1
Глифы в композиции иллюстраций
Введение
Без рекламной иллюстрации сегодня нет ни продажи, ни покупки. Современная рекламная иллюстрация – это сложный дизайн-макет, отвечающий особым требованиям.
Векторные символы имеют специальное наименование (в технических источниках и рекламе) – глифы, или глифовые изображения. Они используются для визуальной связи между рекламодателем и потребителями товаров и услуг.
Плоские символы с заливкой или контурным обозначением форм используются для визуализации меню, функций интерфейсов, являются основой для иллюстраций. Они нужны, чтобы зацепить, остановить внимание человека на центральном объекте композиции – простом, понятном для восприятия и запоминания.
Умение работать с глифами – одно из главных требований к графическому дизайнеру.
Иллюстрирование объекта в действии
Цель лекции – показать, что навыки иллюстрации объектов в действии можно освоить при пошаговом решении типовых задач технического дизайна.
В технических заданиях по работе с графическим дизайном для рекламных носителей есть типовая задача: проиллюстрировать представленный объект в действии (это может звучать так: проиллюстрировать работу Wi-Fi в метрополитене и т. п.).
Визуальное представление композиции напрямую зависит от требований к макету в техническом задании (сокр.ТЗ):
• размеры макета;
• визуальный образ (символ объекта для иллюстрации);
• фирменные цвета и шрифты;
• визуальные приоритеты в рекламном сообщении и т. д.;
• палитра цветопередачи;
• разрешение (количество точек на единицу измерения: мм или дюйм) и т. п.
Сложности и ошибки в техническом дизайне иллюстраций
Основная сложность для новичков в техническом дизайне – понять, как начать, как выполнить задачу максимально правильно, четко, без потерь времени.
Размеры иллюстрации определяют ориентацию изображения на макете печатной страницы (или веб-страницы). Горизонтально или вертикально будет расположена иллюстрация? Это важно решить до начала работы.
По умолчанию формат иллюстрации задается в метрических единицах (мм, см или пикселях), обычно в виде пропорции [ширина ? высота] единиц измерения, например [24 ? 20] см.
Схема расположения объекта для визуализации может быть смещена от центральной точки пересечения оси OY (середины по вертикали) и OX (центра по горизонтали).
Баланс в композиции рекламного макета
В процессе работы важно сбалансировать композицию. Если дизайнер располагает заголовок (рекламный слоган) поверх иллюстрации, допустимо диагональное размещение. Например, слоган смещен к верхнему левому углу композиции, иллюстрируемый объект к правому нижнему углу (или зеркально наоборот, в зависимости от положения иллюстрации на макете).
Вариант A. Диагональное размещение заголовка и объекта иллюстрации
Вариант B. Параллельное размещение заголовка и объекта иллюстрации
Рисунок 1.1 – Сбалансированные композиции в рекламной иллюстрации
Рекомендация студентам и действующим техническим и графическим дизайнерам: просматривайте актуальные и архивные визуальные решения (рекламные макеты) известных российских и западных брендов. Это поможет получить и накопить визуальный опыт, будет подсказкой при выборе композиции и модульной сетки.
Роль глифов в иллюстрации объектов действия
Основные требования к созданию иллюстративной рекламы:
• рекламное сообщение должно быть простым для понимания;
• рекламное сообщение должно запоминаться на подсознательном уровне.
В этих требованиях роль символов (глифов) – основа семантического звена в содержании рекламного макета. Простым языком, роль глифов – установить связь между потребителем (т. е. зрителем) и рекламным сообщением с помощью визуально понятного (зрительного) символа и побудить к действию (купить, сделать и т. п.).
К примеру, наскальные рисунки содержали символы природных явлений и ярких событий в жизни человека. С течением времени техника воспроизведения примитивных рисунков неоднократно менялась.
Компьютерные технологии значительно обогатили всемирную коллекцию глифов, понятных всем людям – вне зависимости от пола, возраста, расы и культуры. Рекламные иллюстрации действуют на подсознание человека так, что все запоминается просто.
Рисунок 1.2 – Примеры глифов для орнамента. Элементарные части фонового изображения в дизайн-макете
Сложность и детализация глифа зависят от технологии воспроизведения и необходимой толщины линий (от масштаба воспроизведения в дизайн-макете).
Визуализация глифов в рекламных целях
В качестве примеров рассмотрим визуализацию следующих узнаваемых знаков.
Для визуализации объектов в полиграфической и цифровой рекламе (в сегменте B2C) рекомендуется использовать устоявшиеся символы (глифы). B2C (сокр. от business to consumer, т. е. бизнес для потребителя) – модель взаимодействия компании и потребителя, когда с помощью продукта потребителю проще решить повседневные задачи.
Примеры иллюстраций с пояснениями
Эти иллюстрации показывают популярные глифы. Рекламное сообщение (слоган) быстро запоминается.
Рисунок 1.9 – Рекламный баннер Мегафон о самом быстром мобильном интернете
Графическая идея:
знак спидометра с указателем высокой скорости – устойчивый образ для рекламы.
Рисунок 1.10 – Рекламный баннер Альфа-Банка о потребительских кредитах
Графическая идея:
знак вызова (телефона) для мотивации к звонку по короткому номеру в рекламе.
Рисунок 1.11 – Рекламный баннер TINKOFF о пакете услуг для автовладельцев
Графическая идея:
знак беспроводной связи для бесконтактной оплаты водителем (не выходя из транспортного средства).
Когда человек видит рекламу с глифами, использованные в ней образы соединяются в его сознании с известными символами из повседневной жизни. Понятные, близкие на бытовом уровне символы мотивируют потребителя к действию – и мы покупаем товар или услугу.
Этот рекламно-графический трюк нужно взять на вооружение каждому, кто работает в рекламном дизайне.
Глифы для визуальной идентификации рекламного сообщения
Использование одного или нескольких глифов упрощает восприятие рекламного сообщения. Их число должно быть условно минимальным, т. к. цель дизайнера – упростить восприятие, а не замедлить его или усложнить. Это важно взять на заметку.
Стиль, детализация и цветопередача символа определяются ТЗ. Главное – визуальная простота (высокая скорость передачи рекламного сообщения), чтобы потребитель смог даже в потоке автомобилей, за рулем быстро воспринять рекламное сообщение в иллюстрации (например, на билборде).
Рисунок 1.12 – Иллюстрация на билборде
Выбор визуального решения по композиции определяется следующими правилами:
• требования к размерам и композиции в брендбуке (гайдлайне) рекламодателя;
• требования типографии (цветопередача, палитра, разрешение для печати);
• требования Роскомнадзора согласно ФЗ № 38-ФЗ «О рекламе» и т. д.
В итоге заказчик утверждает выбранный вариант. Дизайн-макет согласуется дизайнером или менеджером по рекламе с отделом печати в типографии. Важно выполнить задание в полном соответствии со всеми пунктами требований. Это минимизирует количество итераций корректировок рекламного модуля.
Выполнение всех требований гарантирует:
• графическому дизайнеру – высокое качество результата (дизайн-макета);
• заказчику – конверсию из зрителей в потребителей рекламируемого продукта (услуги).
Глиф как сигнал для потребителя
Правильное использование глифа в рекламной иллюстрации – сигнал для потребителя, мотивация его к действию в соответствии с рекламным сообщением.
Рисунок 1.13 – Реклама с предостережением об опасности костров в лесном массиве. Устоявшийся глиф огонь от костра
Цвет в рекламе тоже дает визуальный сигнал потребителю: позитивный, нейтральный или агрессивный (негативный). Сообразно этому будет и реакция человека.
Рисунок 1.14 – Рекламная наклейка о важности защиты кожи от прямых солнечных лучей. Глиф солнце
Рекомендация дизайнеру
Излишняя детализация визуального ряда – недостаток в работе. Руководствуйтесь принципом необходимое и достаточное. Это позволит:
• сократить время на подготовку иллюстрации;
• сократить время на восприятие потребителем рекламного сообщения.
Дизайн наклейки с предостерегающим сигналом о защите от солнца – яркий тому пример.
Качество исполнения рекламной иллюстрации
Визуальное качество исполнения иллюстрации не всегда напрямую связано с высокой детализацией. Рекламная векторная графика выполняет утилитарную транспортную функцию для передачи потребителю сообщения без потерь скорости восприятия и в соответствии с авторским замыслом.
Языком технического дизайна: визуализация плоской графикой (flat design) в рекламе выглядит лучше и эффективнее, чем детализированная полноцветная композиция (скорость создания, восприятие человеком, запоминаемость).
Достаточно сравнить в формате A/B-теста два примера рекламных иллюстраций. Проведем A/B сравнение полноцветной детализированной и плоской минималистичной иллюстраций.
Вариант A
Полноцветная детализированная рекламная иллюстрация
Рисунок 1.15 – Реклама туристического направления от СберБанка
Графическая идея:
передать яркие впечатления от отпуска в конкурсе историй.
Вариант B
Плоская минималистичная рекламная иллюстрация
Рисунок 1.16 – Первая помощь в туристических походах. Выполнена американским дизайнером Филом Монсоном (штат Юта, США)
Графическая идея:
обратить внимание (желтый фон) и передать важность (красный крест) первой помощи в турпоходах.
Результат параллельного сравнения иллюстраций
Вариант A. Пожалуй, не самая удачная реклама СберБанка. Слишком ярко подсвечена, зрителю подсознательно тяжело долго смотреть на высвеченный визуальный ряд. Тяжела для восприятия и слабо запоминается из-за смазанности визуального ряда.
Вариант B. Всего 5 цветов и грамотное манипулирование толстыми и тонкими линиями для выстраивания визуальных приоритетов. Легко прочитывается и запоминается рекламное сообщение, смоделированное в стиле flat design.
Масштабирование рекламной иллюстрации
Каким должно быть расстояние от рекламного щита до человека, которому реклама адресована? Точно никто не скажет. Среднестатистическое, ориентировочное значение – от двух до тридцати метров.
Дизайнеру предстоит найти оптимальное решение, проверяя его, что называется, на себе: изменяя масштаб в графическом редакторе, чтобы понять, как потребитель будет видеть это с определенного расстояния.
Рисунок 1.17 – Моделирование реальной ситуации восприятия потребителем рекламного сообщения на билборде с расстояния 10–15 м
Масштабирование позволяет техническому дизайнеру отладить визуальный ряд, обозначить приоритеты восприятия отдельных элементов композиции.
Векторная иллюстрация зачастую лучше по сравнению с растровым аналогом по ряду причин.
1. При подготовке векторного макета с высоким разрешением для крупноформатного рекламного размещения (например, билборд [6 ? 3] м) время обработки и передачи дизайн-макета значительно ниже – по сравнению с растровым аналогом (с аналогичным разрешением, т. е. количеством точек на дюйм).
2. Масштабирование векторной композиции в ± 5x возможно почти без потерь в детализации по сравнению с растровым изображением (действие механизма масштабирования пикселей и векторов).
3. Векторная иллюстрация не уступает в визуальном ряде полноцветному фото, но композиционно проще (редактирование объектов, их положение в композиции, проекции и т. д.).
Рисунок 1.18 – Фирменная папка формата A4 компании GT Auto Lab с полноцветной подложкой в растровом виде.
Размер файла: 100 Мб (из-за высокого разрешения фонового изображения – 300 dpi).
В практикуме студентам будет предложено разработать аналогичную фирменную папку по заданному формату в векторном виде (без использования растрового фона) и сравнить размеры и качество исходного и результирующего дизайн-макетов.
Размеры шрифта для рекламных носителей
Для удобного чтения информации с рекламного носителя необходимо точно измерять размер шрифта для дизайн-макета в зависимости от расстояния между зрителем и объектом.
Рисунок 1.19 – Пример расчета размера шрифта в зависимости от удаленности рекламного носителя от зрителя
Выбор оптимального размера шрифта для дизайн-макета рекламы
В специальной литературе приводится следующая формула для расчета оптимальной высоты шрифта:
Высота символа (мм) = 5 ? расстояние до зрителя (м).
Лучшим соотношением высоты и ширины рекламного текста считается пропорция 5:3.
Рассмотрим формулу расчета оптимальной длины строки.
Длина = количество символов ? высоту символов.
Для оптимального интерлиньяжа (межстрочного расстояния) используем рекомендованное (экспертами в области верстки) соотношение 1.5 em при размере шрифта условно в 1 em. Соответственно, расчет зависит от размера шрифта в соотношении 1.5 условных единиц.
Краткость передачи рекламного сообщения
Реклама должна быть краткой и емкой: всего в десяти словах.
• Уберите тексты-пояснения (кроме необходимых по закону о рекламе): лишние фразы раздражают и не раскрывают подробной информации о продукте.
• Оставьте один контакт для связи с рекламодателем: телефон, ссылку, QR-код.
• Проверяйте читаемость рекламного сообщения в дизайн-макете на цветных и черно-белых распечатках с учетом контраста текста и фона (как в правиле «черным по белому» или, наоборот, «белым по черному»).
Запомните: на чтение вашей рекламы у проезжающих и прохожих есть не более 7 секунд.
В качестве эксперимента возьмите половину листа А4 и посмотрите на рекламу с расстояния вытянутой руки. Если сообщение воспринимается комфортно, в большинстве случаев аналогичный эффект будет на улице.
В наружной рекламе мелочей не бывает. Рекламная иллюстрация и сообщение должны быть простые, понятные, хорошо читаться с любого расстояния.
Навыки технического дизайна иллюстрации и глифов в композиции визуального ряда
Для закрепления материала лекции в практикуме студенты смогут самостоятельно отформатировать текст и размеры глифа. Метрические установки будут предложены.
Навыки технического и графического дизайна – это следствие крепких теоретических знаний, визуального опыта и практики работы. Опыт складывается из знакомства с успешными и провальными кейсами по верстке текста, визуализации для рекламы, собственной работы с векторной графикой.
Теория необходима для обоснования выбора визуальных и технических решений при согласовании дизайн-макета с заказчиком – особенно если в ТЗ были неточности.
Практика помогает быстро формировать композицию, выстраивать визуальный ряд с корректировкой размеров элементов в балансе текста и графики на ограниченной плоскости дизайн-макета – с учетом масштабирования и читаемости при различных расстояниях между зрителем и рекламным макетом.
Рекомендуемая литература
1. Гордон Ю. О языке композиции. Изд. 2-е. – Латвия. – 208 с.
2. Чихольд Я. Новая типографика. Руководство для современного дизайнера. Изд. 6-е. – 248 с.
3. Шклярук А., Снопков П. Советский политический плакат. 1918–1940. – «Контакт-Культура», 2021. – 320 с.
4. Руководство по интерфейсам Apple. Раздел «Глифы». Источник на англ. языке. Режим доступа: https://developer.apple.com/design/human-interface-guidelines/glyphs/overview/
5. ФЗ «О рекламе». Режим доступа: http://www.consultant.ru/document/cons_doc_LAW_389115/
Лекция № 2
Веб-интерфейсы с применением глифов
Мы все чаще решаем повседневные задачи с помощью Сети. Это экономит время и деньги – в том числе при поиске лучшего предложения товаров и услуг. В науке это направление описывается следующими терминами:
• системы массового обслуживания (сокр. СМО, с точки зрения механизмов управления очередью заявок на обработку);
• веб-сервис (с точки зрения точки доступа и взаимодействия с пользователем);
• service on demand (англ. услуга по запросу, описывает процессы обработки заявок из веб- и мобильных приложений).
Рассмотрим роль веб-интерфейсов и применение глифов для решения задач функционального диалога между пользователем и системой.
Рисунок 2.1 – Дизайн-макет главной страницы корпоративного сайта CIS. Local Counsel Forum для всероссийского юридического форума в Сочи.
Источник: http://sochilegal.com/en/
Цифровые устройства с наиболее удобными интерфейсами имеют наивысший рейтинг по отзывам клиентов. Он напрямую соотносится с маркетинговым показателем – индексом потребительской лояльности (сокр. англ. NPS). С помощью этого индекса руководство компании-производителя эконометрически оценивает отношение потребителей к коммерческому продукту. Это влияет на развитие цифрового продукта (с расширением функционала для заинтересованных пользователей).
Ключевые факторы оценки качества исполнения веб-интерфейсов
Начнем с основ технического дизайна по специализации user interface.
Рассмотрим ключевые критерии оценки качества исполнения веб-интерфейса с применением масштабируемой векторной графики.
1. Простота восприятия интерфейса.
2. Адаптивность интерфейса.
3. Масштабируемость функционала в интерфейсе.
4. Детализация визуальной оболочки и интеллектуальных решений интерфейса.
5. Доступность для мультиплатформенного использования.
6. Мультиязычность интерфейса.
7. Уникальность или наследуемость интерфейса.
Последовательно детализируем каждый критерий.
Простота восприятия интерфейса – это самое сложное для дизайнера: уместить композиционно по заданным приоритетам (в спецификации продукта или в ТЗ) весь представленный функционал веб-приложения — последовательно и логично, не потеряв при этом визуальной целостности и простоты.
Мартин ЛеБланк, основатель популярного графического веб-сервиса IconFinder.com, как-то сказал: «Interface like a joke. No needs to explain» («Интерфейс, как и шутка, не требует объяснений»). Либо просто и понятно, либо плохо сделано.
Как достичь такой простоты? Это интересный с технической точки зрения вопрос, имеющий ряд визуальных и логических шагов решения – над ним студенты смогут поработать в ходе практикума к этой лекции.
Адаптивность интерфейса – интуитивно более легкий критерий для реализации и оценки. Заявленный функционал веб-интерфейса должен четко укладываться в один (первый) экран до прокрутки (скроллинга) с учетом изменяемой ширины любого экрана (вертикальная и горизонтальная ориентации).
Есть визуально-технические решения (трюки), позволяющие до прокрутки уложить сложный функционал в малый экран смартфона – что-то вроде слоеного пирога, где начинка правильно приготовлена по слоям, и потребитель получает ее по мере использования (потребления) готового продукта.
Уровень требований заказчика ограничивается согласно спецификации к продукту. Допустимо выбирать версии браузеров не старше трех лет: иначе могут возникнуть проблемы на старых версиях Android и iPad (iOS).
Масштабируемость функционала в интерфейсе – это важный критерий с точки зрения развития продукта: потребительские запросы могут вырасти, будут добавляться новые функции (фичи, от feature). Достигается с помощью раскрывающихся панелей, всплывающих окон, виртуального помощника и других подобных инструментов.
Детализация визуальной оболочки и интеллектуальных решений интерфейса – критерий, сходный с адаптивностью интерфейса. Но есть дополнительный смысл: возможность надстройки визуальных эффектов (в развитие продукта), детализация с визуальной точки зрения (под retina экраны). Здесь применяется масштабируемая SVG графика, построение визуального диалога (с иллюстрациями) для связи между пользователем и системой (по реакции на логический выбор пользователя). Такая связь (система – пользователь) должна быть понятна и эмоционально окрашена.
Рисунок 2.2 – Форма заявки для клиентов компании Platinum Data Recovery выполнена в виде последовательных шагов при заполнения анкеты. Вспомогательные вопросы и ответы сделаны в виде раскрываемого аккордеона с детализацией ответа по выбору из списка FAQ (сокр. от Frequently Asked Questions – часто задаваемые вопросы)
На рис. 2.2 слева используется глиф комментария с подписью FAQ для подсказки пользователю. Источник: https://platinumdatarecovery.com/request-a-quote
Доступность для мультиплатформенного использования – сложный критерий оценки, сходный с адаптивностью интерфейса. Требует правильного решения для масштабирования продукта на другие платформы – с веб-версии в мобильные приложения iOS, Android и стационарные touchscreen-системы информационных помощников (например, в аэропортах). Речь идет о стандартизации файловой структуры и взаимозаменяемости форматов графических файлов с SVG на аналогичные форматы (без потерь): PDF, PNG и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.
Мультиязычность интерфейса важна при переводе функционала с одного языка на другой.
Этот критерий напрямую влияет при переходе пользователя с международной англоязычной версии на региональную. К примеру, в немецком лексиконе слова длиннее, чем в английском.
Уникальность веб-интерфейса важна, если на рынок выходит новый, технологически революционный продукт. Интерфейс должен быть визуально новым, привлекательным для потребителя, но в какой-то части и наследовать веб-интерфейс. Наиболее сложная задача – уложить максимум функционала, системно сгруппированного по блокам функций одного назначения — в рамках экрана до прокрутки, удобно и логично для пользователя.
Рисунок 2.3 – Варианты дизайна веб-интерфейса авторизации для приложения Lillup
Функциональная роль глифов в веб-интерфейсах
Перейдем к роли глифов в создании визуальной оболочки цифровых продуктов. Веб-интерфейс обеспечивает диалог между пользователем и ИТ-системой. Приведем несколько доступных примеров из повседневной жизни.
Рисунок 2.4 – Меню стиральной машины на дисплее для управления программами стирки
Рисунок 2.5 – Интерфейс мобильного приложения для заказа такси с выбором типа кузова автомобиля на основе представленных глифов
Рисунок 2.6 – Интерфейс адаптивного меню корпоративного сайта с векторными глифами для визуализации разделов веб-сайта.
Источник: https://n-trade.spb.ru/
Визуальный анализ интерфейсов на рисунках 2.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).
На практике роль глифов – это визуальные подсказки в диалоге между пользователем и системой: запуск, приостановка, изменение, остановка системы.
Например, получив сообщение на панели (красный знак Внимание), пользователь видит, что нужно добавить бумагу в принтер для запуска электронного документа в печать.
Визуальные подсказки для пользователя веб-интерфейса
Форма, стиль и техническое исполнение глифовых подсказок трактуются дизайнером в прототипе интерфейса строго по согласованной спецификации и ТЗ.
Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.
Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.
Рисунок 2.7 – Примеры визуальных подсказок и их значения на экране смартфона.
Слева направо: отключение сигнала вызова (тихий режим); разблокировка доступа к устройству
Дизайнер переносит сообщения о взаимодействии пользователя с системой на экран веб-интерфейса с помощью анимированной или статичной графики – в зависимости от состояния СМО после вызова, паузы или остановки/отказа функции.
Анимированные векторные элементы интерфейса
На смену статичным элементам постепенно приходит анимированная графика. Диалог между пользователем и цифровым продуктом получает яркую красочную визуализацию и поднимается на новый уровень взаимодействия. Пользователь подсознательно привыкает к высокому уровню визуального комфорта. Это определяет качество сервиса компании – поставщика услуг.
Анимирование статических векторных элементов
Требуется анимировать статические векторные элементы. У этой задачи несколько путей решения. Например, для веб-интерфейсов можно применять следующие технологические стеки (проще говоря, связки технологий):
• HTML + SVG + CSS3 (опционально + PNG/JPG);
• HTML + SVG + JavaScript (опционально + CSS);
• HTML + SVG + SMIL.
Рассмотрим детально каждый вариант.
HTML во всех трех вариантах применения анимации SVG – это веб-страница для вывода графики в содержание источника.
Технологический стек для анимации № 1. HTML + SVG + CSS3
Графика в формате SVG по определению есть масштабируемая векторная графика (Scalable Vector Graphics): отличная четкость отображения при любом масштабе, простота редактирования и легкость кода с точки зрения хранения в каталоге N изображений в SVG с возможностью оптимизации (сжатия) кода для минимизации потерь при загрузке на клиентском устройстве.
• Анимировать глиф в формате SVG можно, применяя каскадные таблицы стилей (CSS). Рассмотрим визуальные эффекты в стилях CSS – согласно спецификации CSS версии 3, актуальной на 2021 г.
• Анимация движения (изменение координат объекта и размеров – приближение или удаление объекта относительно формата макета).
• Поворот rotate.
• Проявление fade in / out.
• 3D-трансформация.
Совмещение фильтров и их последовательное использование (запуск с задержкой в миллисекундах) в цикле воспроизведения анимации в стилях CSS позволяют добиться интересных визуальных эффектов при выборе и нажатии на выбранную функцию в интерфейсе.
Рисунок 2.8 – Пример анимации по клику на кнопку
Технически при нажатии (состояние: target) или при наведении (состояние: hover) происходит обработка стилями в CSS и предоставляет инструкции для вывода графики и анимации в заданных параметрах:
• ширина (width) и высота (height) анимированного блока задаются в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;
• цвет заливки блока:
– однотонная сплошная и плоская заливка:
1. в шестнадцатеричной (НЕХ) палитре:*
background-color: #CCDD33
2. в палитре RGB:*
background-color: rgb(255,255,255)
3. с добавлением полупрозрачности путем включения альфа-канала:*
background-color: rga(255,255,255,0.5)
– многоцветный градиент:
background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);
Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:
background: #fff,
background-color: rgb(255,255,255),
background-color: rgb(255,255,255).
Равнозначные инструкции для стилей CSS
Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.
Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.
Технологический стек для анимации № 2. HTML + SVG + JavaScript
В случае выбора технологии JavaScript в качестве способа визуализации анимации открывается ряд дополнительных возможностей:
• подключение внешних библиотек отрисовки векторной графики;
• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).
Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.
Источник: http://markup.inmotus-design.ru/rk/index.php
Особенности этого функционального решения:
• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);
• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).
В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.
Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.
Технологический стек для анимации № 3. HTML + SVG + SMIL
Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).
Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели
О выборе стека для анимации SVG-графики
Выбор технологического решения (стека) для анимации веб-интерфейса по умолчанию за исполнителем, если в ТЗ не прописаны четкие требования по выбору библиотек JS-скриптов и сопутствующих технологий.
Технический дизайнер может самостоятельно выбрать вариант реализации для анимации элементов веб-интерфейса, если не заданы жесткие ограничения со стороны заказчика.
Если требования заданы только по формату и цветопередаче изображений, исполнитель может предложить заказчику варианты решения задачи, указав их преимущества и недостатки – желательно в формате A или B, так проще понять и сделать выбор.
Особенности использования SVG-графики для мультиплатформенных систем
Разработка единой экосистемы электронных устройств для удовлетворения основных потребительских запросов – ключевое направление в развитии крупных федеральных ИТ-компаний (Яндекс и Mail.ru).
Сложности в адаптации веб-интерфейсов для мультиплатформенных систем возможны в спецификациях (поддержка форматов графики и т. д.). Необходимо выбирать стандартные решения с минимальными ограничениями по поддержке на устройствах. Использование абсолютного или фиксированного позиционирования в HTML стилями CSS для блоков относительно друг друга может смещаться на разных платформах и экранах по причине точности задания пиксельной матрицы и точки отсчета относительно видимой области экрана.
Это возможно отладить путем добавления стилей и вывода их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1 - Задание стилей отладки в блоке в HTML-документе для фиксации ошибок в определенных версиях браузеров выполняется следующим образом на примере IE 9.0: .] документа ).
Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре RGB или HEX и наследоваться на всех типах платформ: устройства на iOS, Android, Windows и т. д. с фиксированными параметрами. Это требование и к цветовой схеме глифовых элементов интерфейса в формате SVG. Оно обеспечивает единый визуальный образ продуктов компании-производителя, фирменный стиль на всех поддерживаемых платформах.
Рисунок 2.11 – Наглядная демонстрация смещения элементов веб-интерфейса целевой страницы веб-сайта компании Platinum Data Recovery при адаптивном дизайне (слева – широкий экран компьютера, справа – адаптивный мобильный веб-интерфейс)
Архитектура файловой структуры для размещения графики
Структура цифрового продукта может отличаться в зависимости от архитектуры платформы. Рассмотрим следующие примеры размещения стилей CSS и элементов графики SVG в различных продуктах.
Пример A
Рисунок 2.12 – Архитектура интернет-магазина в CMS Bitrix
Пример B
Рисунок 2.13 – Архитектура корпоративного сайта в CMS WordPress
Имплементирование (проще, вставка) анимации в код цифрового продукта для тестирования и в итоговую версию происходит при участии фронтенд-специалиста, отвечающего за внешнюю часть продукта (оболочку в виде веб-интерфейса и визуализации обратной связи).
Потребительская и экспертная оценки качества исполнения веб-интерфейсов
Умение работать с графическими форматами растровой и векторной графики, владение анимацией формируют навыки технического дизайнера (designer’s skills) и делают его востребованным для заказчиков. Особенно в профессиональной среде ценятся работы в портфолио, не только имеющие статус прототипа, но именно доведенные до серийного и единичного (под заказчика) использования. Эти работы характеризуют дизайнера как аналитика, художника, творца – одним словом, профессионала.
В качестве кратких выводов обозначим ключевые моменты в работе с векторной графикой для визуализации интерфейсов.
• Знания и умения из области верстки, цветоделения по приоритетам и контрасту элементов композиции, понимание баланса между визуальными и текстовыми элементами в интерфейсе позволяют дизайнеру сбалансировать поставленные в ТЗ задачи.
• Правильное понимание ключевых факторов оценки качества веб-интерфейса позволяет исключить лишнее в работе и оптимизировать труд, сравнивая требования ТЗ и общую практику по дизайну UI.
• Потребительская и экспертная оценки качества исполнения веб-интерфейсов могут не совпадать. Пользователям важны простота и удобство, компания-разработчик может ставить цели значительно шире.
• Цель технического дизайнера – найти баланс интересов и получить положительные отзывы о готовом цифровом продукте.
• Цифровые продукты, получившие наивысший рейтинг потребительских оценок и/или награды экспертов, имеют значительную коммерческую ценность для компании-производителя: высокий индекс потребительской лояльности конвертируется в прибыль. Важно это и для дизайнеров – как публичная оценка профессионального уровня.
Рекомендуемая литература
1. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Якоб Нильсен, Кара Перниче. На англ. языке.
2. Принципы разработки пользовательского интерфейса. Ненси Понг. Статья. Изд. Medium.com. 2017 г. Статья Дж. Портера «Principles of User Interface Design». Перевод: О. Жолудова, Р. Шайхутдинов.
3. Эвристические правила Якоба Нильсена. Источник на англ. языке: https://www.nngroup.com/articles/ten-usability-heuristics/
4. Веб-дизайн. Элементы опыта взаимодействия. Дж. Гаттер.
5. Проектирование веб-интерфейсов. Билл Скотт, Тереза Нейл.
6. Спецификации стандарта анимации SMIL 3.0. Источник на англ. языке: https://www.w3.org/TR/smil/smil-animation.html
7. Официальная спецификация компании Mozilla по поддержке формата SVG в анимации SMIL. Источник на англ. языке: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
8. Ознакомительный урок по использованию векторной графики для виртуальной клавиатуры. Источник на англ. языке: https://bundlespace.com/lessons/lesson-design-of-virtual-keyboard-for-atm-devices
9. Ознакомительный урок по анимации процесса загрузки в веб- и мобильном интерфейсе. Источник на англ. языке: https://bundlespace.com/lessons/lesson-animation-for-svg-loader-using-css3
Лекция № 3
Изометрия в иллюстрировании: наглядные композиции и технические решения
Что такое изометрия
Изометрическая проекция (с греч. ???? равный + ?????? измеряю) – это разновидность аксонометрической проекции, при которой в отображении объемного трехмерного объекта на плоскость коэффициент искажения (отношение длины спроецированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трем осям один и тот же.
Простыми словами, это частный случай объемной визуализации объекта на плоскости по заданным геометрическим параметрам.
Определяющая характеристика слова изометрическая в описании проекции в греческом языке, в сущности, означает равный размер: в этой проекции масштабы по всем осям – OX, OY, OZ – равны. В других видах проекций это условие не действует.
Рисунок 3.1 – Схема представления осей OX, OY, OZ в изометрической прямоугольной проекции
Наряду с прямоугольной изометрической проекцией также применяются косоугольная фронтальная и косоугольная горизонтальная проекции (см. на рис. 3.2).
В эволюции визуальных решений для рекламы и интерфейсов изометрический стиль (isometric) дизайна иллюстраций пришел на смену привычным решениям flat design и 3D.
Рисунок 3.2 – Косоугольная фронтальная и косоугольная горизонтальная проекции (слева направо)
Изометрический дизайн – это псевдообъемный стиль визуального изложения композиции физических объектов (в развернутой изометрической проекции), предлагающий иллюстративный ряд, аналогичный трехмерному воспроизведению, но с фиксированной или движущейся по направляющим объектам композицией (на переднем или заднем плане).
Рисунок 3.3 – Рекламная иллюстрация в правильной изометрической проекции для представления ремонтного транспортного шипа в разрезе.
Выполнена техническим дизайнером по чертежу от производителя в псевдообъемном разрезе в графическом редакторе Adobe Photoshop.
На визуализацию этой иллюстрации затрачено всего 8 часов с учетом корректировок заказчика
С точки зрения коммерческой ценности изометрическая иллюстрация позволяет визуализировать технические характеристики объекта (товара) в применении к реальности.
Рисунок 3.4 – Примеры изометрических проекций объектов в реалистичной визуализации на плоскости
Визуальное сравнение стилей: flat design, 3D и isometric design
Рассмотрим основные стили визуализации иллюстраций и пиктограмм для дизайна актуального на 2021 г. веб-интерфейса.
Рисунок 3.5 – Параллельное сравнение иллюстраций в стилях flat design, realistic 3D и isometric design (слева направо)
По смыслу плоский дизайн удобен для восприятия при малом и среднем масштабе в качестве элементов веб- и мобильного интерфейса (адаптивного дизайна) в виде масштабируемой векторной графики (SVG) для нажатий на функциональные элементы.
Сравнение реалистичного 3D-изображения и его изометрической аналогии с технической точки зрения позволяет сделать такие выводы. 3D дает лучшее качество воспроизведения материала (в объекте) – изометрия дает упрощенную псевдообъемную проекцию объекта по заданному формату (аналогично 3D выставлен источник света и освещение объекта, тень на плоскости от объекта). Технически воспроизведение в изометрии проще для реализации (для графических дизайнеров, не обладающих опытом работы с 3D), поэтому выбор способа реализации объемных объектов зависит от навыков дизайнера и требований ТЗ.
Воспроизведение фотореалистичной модели в точности 1:1 с первоисточником по фотографии (от заказчика) значительно сложнее, поэтому обычно используется только 3D-визуализация по чертежу с учетом материалов объекта и плоскостей фона, метрических размеров объекта в соотношении с другими объектами в композиции.
Рисунок 3.6 – 3D-визуализация ремонтного шипа компании «РемШип» в разрезе шины Michelin X Ice. Источник: https://inmotus-design.ru/portfolio/info/3d-spike-in-tire-michelin-x-ice.
Идея иллюстрации: с точностью до 1 мм выполнить – по аналогии с рекламой Nokian – визуализацию для ремонтных шипов российского производства.
Иллюстрация выполнена в редакторе 3D Max
Всего затрачено около 40 часов рабочего времени с учетом корректировок. Это достаточно много (примерно 1 неделя в зависимости от штатного расписания технического дизайнера). Пример характеризует 3D как трудоемкую технологию с высокой точностью воспроизведения и сложностью в реализации.
Начинающим дизайнерам лучше начинать с изометрических иллюстраций, чтобы научиться работать с источником света, тенями и отблесками от объекта в зависимости от композиции, свойств материалов (глянцевых и матовых поверхностей), типов теней и т. д.
Качество визуализации изометрической проекции объекта на рис. 3.7 достаточное для применения в рекламной продукции, где нет жестких привязок к размерам (как в примере шипы в шине определенной марки и радиуса).
Рисунок 3.7 – Аналогичный 3D-пример изометрических проекций ремонтных шипов на плоскости (без жестких требований с точностью до 1 мм).
Иллюстрации ремонтных шипов для ошиповки шин выполнены техническим дизайнером по чертежам заказчика в графическом редакторе Adobe Photoshop с учетом соблюдения пропорций шипов в разрезе.
Источник: https://inmotus-design.ru/portfolio/info/oshipovka-shipy
Как обосновать выбор технологии воспроизведения изометрической иллюстрации заказчику?
Есть основные критерии для выбора технологии воспроизведения изометрии в коммерческой иллюстрации.
1. Следовать требованиям ТЗ.
• Например, если указана точность 1:1 до мм, это, вероятнее всего, требует 3D-визуализации по чертежу заказчика – со всеми размерами деталей и типами материалов на поверхности объекта в изометрической иллюстрации. Время на реализацию — ориентировочно от 4 до 40 часов, в зависимости от квалификации технического дизайнера и сложности композиции.
• Если требуется более-менее реалистичная иллюстрация объекта в изометрии, желательно иметь фото объекта в заданной проекции и сделать технический дизайн в Adobe PhotoShop. Ориентировочно от 2 до 10 часов, в зависимости от квалификации технического дизайнера и т. д.
• Если требуется стилизованная изометрическая иллюстрация (в короткие сроки) для полиграфии (при наличии чертежа и фото объекта), этого достаточно для воспроизведения изометрической проекции на плоскости для полиграфической печати на любом размере. Ориентировочно от 2 до 10 часов на реализацию в зависимости от квалификации технического дизайнера и т. д.
2. Сопоставить бюджет, сроки и требования на выполнение задачи (если все три блока полностью указаны в ТЗ).
Рисунок 3.8 – Реалистичная визуализация векторных объектов в малом масштабе для меню каталога ювелирной продукции (в веб-сайте)
Рисунок 3.9 – Пример комплексной векторной иллюстрации в изометрической проекции (серверного решения как цифровой услуги Облачного хранилища).
Автор: @upklyak (Freepik.com).
Источник: https://www.freepik.com/author/upklyak
Чтобы обосновать выбор именно этой технологии, следует сопоставить трудоемкость в часах и стоимость часа работы технического дизайнера.
Опытный дизайнер должен аналитически выбирать инструментарий для решения задачи в зависимости от условий ТЗ. Правильный выбор сократит время на техническую реализацию.
В довершение описания технологий реализации изометрической проекции укажем, что даже в векторном графическом редакторе возможно выполнить реалистические изображения объектов, особенно если это необходимо для малого масштаба воспроизведения на экране в меню выбора.
Предпосылки для использования изометрического дизайна в иллюстрировании цифровых продуктов
Целесообразно использовать изометрический стиль в следующих ситуациях.
1. Нужно представить центральный и сопутствующие объекты во взаимодействии – с целью описания события или явления.
2. Визуальное преимущество по сравнению с аналогичными веб-сайтами или рекламой компаний-конкурентов, использующих в практике неинтересный, плоский дизайн (flat design).
3. Формат целевой страницы landing page позволяет использовать зеркальную верстку (с чередованием 50/50 текста и иллюстраций слева и справа) для представления товаров и услуг, сопутствующих условий использования и преимуществ.
4. Основной объект визуализации имеет несложную форму для технического изометрического представления (оптимальное решение для баланса затраченного времени и результата).
Возможно ли совмещать плоский и изометрический дизайн в коммерческой иллюстрации?
Да, возможно – если это не противоречит фирменному стилю компании. Например, для компании «Учетный Специалист» технический дизайнер выполнил заставку для цифрового продукта 1С «СОУ» с параллельным совмещением плоского и изометрического дизайна – в целом визуально привлекательную рекламную иллюстрацию цифрового продукта.
Рисунок 3.10 – Параллельное горизонтальное совмещение плоского дизайна надписи СОУ и изометрической проекции в иллюстрации для заставки цифрового продукта 1С «СОУ: Материальное обеспечение крупных строительных проектов» для компании «Учетный Специалист»
Особенности изометрического дизайна с технической точки зрения
С точки зрения точности технического воспроизведения композиции в изометрии графическому дизайнеру необходимо иметь следующие навыки.
1. Художественная композиция объектов в перспективе с учетом светотеней и их соразмерности на плоскости под углом зрения от лица пользователя. Этот навык позволяет дизайнеру сделать черновой технический эскиз для согласования с Заказчиком на этапе подготовки иллюстрации.
2. Проектирование композиции векторных фигур объектов для визуализации художественного черновика. Выбор между 2D (в векторном графическом редакторе) или 3D (в 3D Max или аналогичном софте) зависит от навыков дизайнера и требований ТЗ. Построить изометрическую проекцию объектов в псевдо 3D-пространстве X, Y, Z возможно в любом графическом редакторе на плоском или объемном макете по заданным размерам и направляющим.
3. Цветоделение и визуальное выделение центрального объекта иллюстрации с помощью градиентов позволяют отразить формы и направление освещения от заданного дизайнером источника света для отображения псевдообъема фигур, теней и отражений от плоскости.
Цветоделение в иллюстрации
Детализируем термин цветоделение в контексте корректного применения RGB, CMYK или HEX-палитры для полноцветной иллюстрации. Такое решение корректно, если ТЗ не требует жесткого соответствия фирменным цветам палитры бренда (по правилам, изложенным в брендбуке).
Многие дизайнеры применяют рекомендованные экспертами палитры Flat UI Colors [1], доступные в режиме онлайн по адресу: https://flatuicolors.com.
Рисунок 3.11 – Скриншот цветовой палитры Flat UI Colors для выбора безопасных цветов
Речь идет о выборе палитры безопасных цветов для веб-интерфейса цифрового продукта. Условное деление палитр Flat UI Colors по национальному признаку (по цветовым предпочтениям пользователей):
• Flat UI Palette v1;
• American Palette;
• Aussie Palette;
• British Palette;
• Canadian Palette;
• Chinese Palette;
• Dutch Palette; • French Palette;
• German Palette;
• Indian Palette;
• Russian Palette;
• Spanish Palette;
• Swedish Palette;
• Turkish Palette.
Цветоделение по национальному признаку условно и может быть использовано графическим дизайнером по желанию или по требованию.
Желательно выбирать 3–4 цвета: из них 1 или 2 тона одного основного цвета (светлый и темный тон), один цвет на контраст (возможно в светлом и темном тонах) и нейтральный цвет – для визуализации фигур и контуров объектов.
Цвета основного объекта и цвет на контраст следует выбирать (на инвертировании) в палитре по всем правилам колористики и цветовой гаммы.
Рисунок 3.12 – Фирменные цвета для логотипа компании Platinum Data Recovery
Цветовой круг Иттена
При выборе дополнительного цвета рекомендуется ориентироваться на противоположные цвета в круге Иттена – это подбор контрастирующего цвета. Так, красный сочетается с зеленым, желтый – с фиолетовым, синий – с оранжевым и т. д. Если эти цвета находятся рядом, они усиливают эффект друг друга, а при смешивании – гасят. Они расположены на противоположных сторонах цветового круга и составляют прямоугольник или квадрат. При подборе родственного цвета (последовательная схема, или принцип аналогии) берут три цвета, расположенных в соседних секторах.
Рисунок 3.13 – Рулетка цветового круга Иттена для выбора сочетаний цветов в дизайне (интерьера, одежды и т. д.).
Применяется, когда у дизайнера есть возможность самостоятельно подобрать сочетания цветов и согласовать выбор с заказчиком
Аналогично вееру цветов палитры Pantone на практике применяется круг Иттена в виде рулетки выбора палитры (рис. 3.13). Во многих художественных фильмах цветопередача в кадре выстроена именно по цветовому кругу Иттена для соблюдения нормы (т. е. цветовой гармонии в кадре) – в качестве палитры визуального ряда, согласно заданному в сцене настроению.
Рисунок 3.14 – Примеры палитры кадров художественных фильмов в цветовой гармонии, заданной по кругу Иттена
Основные цветовые схемы по методу Иттена
Для понимания цветовой гармонии в палитре рекламной иллюстрации рассмотрим основные цветовые схемы по методу Иттена.
• Комплементарные, или дополнительные цвета
По теории Иттена, комплементарными, или дополнительными, являются любые два цвета, расположенные напротив друг друга на цветовом круге.
Например, синий и оранжевый, красный и зеленый. Эти цвета создают высокий контраст в палитре визуальной композиции. Используются, когда надо что-то выделить в рекламной иллюстрации. Желательно использовать один цвет как фон, а другой – в качестве визуального акцента (приоритета).
• Классическая триада
Классическая триада – это четкое сочетание трех цветов, в равной степени расположенных друг от друга на цветовом круге Иттена.
Например, красный, желтый и синий. Триадная схема также обладает высокой контрастностью, но более сбалансированной, чем дополнительные цвета. Принцип в том, что один цвет доминирует и акцентирует с двумя другими. Такая композиция выглядит живой даже при использовании бледных и ненасыщенных цветов.
• Аналоговая триада
Аналоговая триада – это сочетание минимум двух и максимум пяти (желательно от двух до трех) цветов, находящихся рядом друг с другом на цветовом круге. Например, сочетания приглушенных цветов: желто-оранжевый и желтый, желто-зеленый – зеленый, сине-зеленый.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/pages/biblio_book/?art=68397985?lfrom=390579938) на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
notes
Примечания
1
Задание стилей отладки в блоке в HTML-документе для фиксации ошибок в определенных версиях браузеров выполняется следующим образом на примере IE 9.0: .
Егор Юрьевич Поляков
Российский компьютерный бестселлер
Этот самоучитель позволит вам освоить основные принципы создания векторной графики – познакомиться с теорией технического дизайна, рабочими инструментами и приемами и закрепить пройденный материал на практике. В книге вы найдете десять лекций и десять практикумов, составляющих тридцать два академических часа – каждый урок посвящен различным областям технического дизайна и содержит всю необходимую для работы в описанной области информацию.
В формате PDF A4 сохранен издательский макет.
Егор Поляков
Векторная графика для начинающих: теория и практика технического дизайна
© Поляков Е.Ю., текст, 2022
© Поляков Е.Ю., иллюстрация, 2022
© ООО «Издательство «Эксмо», 2023
Описание курса векторной графики
В данном издании представлен базовый курс по теории и практике прикладной векторной графики. Это учебное пособие позволит углубить ваши знания и практические навыки, если вы занимаетесь графическим дизайном, иллюстрацией, рекламой.
Курс состоит из 10 лекций и 10 практикумов, всего 34 академических часа с учетом экзамена или зачета, по часу на лекцию и по два часа на практикум.
Особое внимание автор уделил правилам и приемам дизайна для пошагового выполнения типовых технических заданий. Освоившие этот курс смогут начать работать в должности графического (технического) дизайнера в рекламе, разрабатывать веб- и мобильные интерфейсы.
Изучая теорию, ведите конспекты: они очень пригодятся вам, когда начнется практическая часть, будут важным подспорьем и в будущей профессиональной практике.
Это учебное пособие не случайно названо базовым: здесь представлены основные этапы рабочего процесса технического дизайнера, проектировщика интерфейсов и веб-дизайнера.
Как выбрать оптимальный путь решения технической задачи с точки зрения трудозатрат, сложности исполнения, чтобы результат оказался качественным и устраивал бы заказчика? На этот вопрос также дается ответ в учебном пособии.
Какие методы используются при изучении материала?
Декомпозиция – разложение сложных задач на составные простые для понимания и последовательного решения.
Факторный анализ для сравнения вариантов решения и выбора среди них оптимального по времени исполнения и трудоемкости. Примеры применения факторного анализа, неопытному специалисту это поможет выбрать путь при решении комплексных заданий.
A/B-тестирование на фокус-группе целевой аудитории поможет выбрать наилучший вариант логотипа или дизайн-макета с учетом мнения целевой аудитории продукции.
Эти методы развивают критическое мышление студентов, что, в свою очередь, формирует способность комплексно оценивать качество исполнения продуктов графического дизайна, помогает выбрать дальнейший путь в сфере технического дизайна: веб-дизайн, разработка приложений, иллюстрирование, реклама и др.
Книга будет интересна как начинающим графическим дизайнерам, так и веб-разработчикам: расширит кругозор, расскажет об актуальных темах в области графического и веб-дизайна, современных требованиях к качеству исполнения работ с применением векторной и растровой графики.
Этот курс можно найти в электронном (дистанционном) формате – http://highcourses.ru.
Теоретическая часть
Лекция № 1
Глифы в композиции иллюстраций
Введение
Без рекламной иллюстрации сегодня нет ни продажи, ни покупки. Современная рекламная иллюстрация – это сложный дизайн-макет, отвечающий особым требованиям.
Векторные символы имеют специальное наименование (в технических источниках и рекламе) – глифы, или глифовые изображения. Они используются для визуальной связи между рекламодателем и потребителями товаров и услуг.
Плоские символы с заливкой или контурным обозначением форм используются для визуализации меню, функций интерфейсов, являются основой для иллюстраций. Они нужны, чтобы зацепить, остановить внимание человека на центральном объекте композиции – простом, понятном для восприятия и запоминания.
Умение работать с глифами – одно из главных требований к графическому дизайнеру.
Иллюстрирование объекта в действии
Цель лекции – показать, что навыки иллюстрации объектов в действии можно освоить при пошаговом решении типовых задач технического дизайна.
В технических заданиях по работе с графическим дизайном для рекламных носителей есть типовая задача: проиллюстрировать представленный объект в действии (это может звучать так: проиллюстрировать работу Wi-Fi в метрополитене и т. п.).
Визуальное представление композиции напрямую зависит от требований к макету в техническом задании (сокр.ТЗ):
• размеры макета;
• визуальный образ (символ объекта для иллюстрации);
• фирменные цвета и шрифты;
• визуальные приоритеты в рекламном сообщении и т. д.;
• палитра цветопередачи;
• разрешение (количество точек на единицу измерения: мм или дюйм) и т. п.
Сложности и ошибки в техническом дизайне иллюстраций
Основная сложность для новичков в техническом дизайне – понять, как начать, как выполнить задачу максимально правильно, четко, без потерь времени.
Размеры иллюстрации определяют ориентацию изображения на макете печатной страницы (или веб-страницы). Горизонтально или вертикально будет расположена иллюстрация? Это важно решить до начала работы.
По умолчанию формат иллюстрации задается в метрических единицах (мм, см или пикселях), обычно в виде пропорции [ширина ? высота] единиц измерения, например [24 ? 20] см.
Схема расположения объекта для визуализации может быть смещена от центральной точки пересечения оси OY (середины по вертикали) и OX (центра по горизонтали).
Баланс в композиции рекламного макета
В процессе работы важно сбалансировать композицию. Если дизайнер располагает заголовок (рекламный слоган) поверх иллюстрации, допустимо диагональное размещение. Например, слоган смещен к верхнему левому углу композиции, иллюстрируемый объект к правому нижнему углу (или зеркально наоборот, в зависимости от положения иллюстрации на макете).
Вариант A. Диагональное размещение заголовка и объекта иллюстрации
Вариант B. Параллельное размещение заголовка и объекта иллюстрации
Рисунок 1.1 – Сбалансированные композиции в рекламной иллюстрации
Рекомендация студентам и действующим техническим и графическим дизайнерам: просматривайте актуальные и архивные визуальные решения (рекламные макеты) известных российских и западных брендов. Это поможет получить и накопить визуальный опыт, будет подсказкой при выборе композиции и модульной сетки.
Роль глифов в иллюстрации объектов действия
Основные требования к созданию иллюстративной рекламы:
• рекламное сообщение должно быть простым для понимания;
• рекламное сообщение должно запоминаться на подсознательном уровне.
В этих требованиях роль символов (глифов) – основа семантического звена в содержании рекламного макета. Простым языком, роль глифов – установить связь между потребителем (т. е. зрителем) и рекламным сообщением с помощью визуально понятного (зрительного) символа и побудить к действию (купить, сделать и т. п.).
К примеру, наскальные рисунки содержали символы природных явлений и ярких событий в жизни человека. С течением времени техника воспроизведения примитивных рисунков неоднократно менялась.
Компьютерные технологии значительно обогатили всемирную коллекцию глифов, понятных всем людям – вне зависимости от пола, возраста, расы и культуры. Рекламные иллюстрации действуют на подсознание человека так, что все запоминается просто.
Рисунок 1.2 – Примеры глифов для орнамента. Элементарные части фонового изображения в дизайн-макете
Сложность и детализация глифа зависят от технологии воспроизведения и необходимой толщины линий (от масштаба воспроизведения в дизайн-макете).
Визуализация глифов в рекламных целях
В качестве примеров рассмотрим визуализацию следующих узнаваемых знаков.
Для визуализации объектов в полиграфической и цифровой рекламе (в сегменте B2C) рекомендуется использовать устоявшиеся символы (глифы). B2C (сокр. от business to consumer, т. е. бизнес для потребителя) – модель взаимодействия компании и потребителя, когда с помощью продукта потребителю проще решить повседневные задачи.
Примеры иллюстраций с пояснениями
Эти иллюстрации показывают популярные глифы. Рекламное сообщение (слоган) быстро запоминается.
Рисунок 1.9 – Рекламный баннер Мегафон о самом быстром мобильном интернете
Графическая идея:
знак спидометра с указателем высокой скорости – устойчивый образ для рекламы.
Рисунок 1.10 – Рекламный баннер Альфа-Банка о потребительских кредитах
Графическая идея:
знак вызова (телефона) для мотивации к звонку по короткому номеру в рекламе.
Рисунок 1.11 – Рекламный баннер TINKOFF о пакете услуг для автовладельцев
Графическая идея:
знак беспроводной связи для бесконтактной оплаты водителем (не выходя из транспортного средства).
Когда человек видит рекламу с глифами, использованные в ней образы соединяются в его сознании с известными символами из повседневной жизни. Понятные, близкие на бытовом уровне символы мотивируют потребителя к действию – и мы покупаем товар или услугу.
Этот рекламно-графический трюк нужно взять на вооружение каждому, кто работает в рекламном дизайне.
Глифы для визуальной идентификации рекламного сообщения
Использование одного или нескольких глифов упрощает восприятие рекламного сообщения. Их число должно быть условно минимальным, т. к. цель дизайнера – упростить восприятие, а не замедлить его или усложнить. Это важно взять на заметку.
Стиль, детализация и цветопередача символа определяются ТЗ. Главное – визуальная простота (высокая скорость передачи рекламного сообщения), чтобы потребитель смог даже в потоке автомобилей, за рулем быстро воспринять рекламное сообщение в иллюстрации (например, на билборде).
Рисунок 1.12 – Иллюстрация на билборде
Выбор визуального решения по композиции определяется следующими правилами:
• требования к размерам и композиции в брендбуке (гайдлайне) рекламодателя;
• требования типографии (цветопередача, палитра, разрешение для печати);
• требования Роскомнадзора согласно ФЗ № 38-ФЗ «О рекламе» и т. д.
В итоге заказчик утверждает выбранный вариант. Дизайн-макет согласуется дизайнером или менеджером по рекламе с отделом печати в типографии. Важно выполнить задание в полном соответствии со всеми пунктами требований. Это минимизирует количество итераций корректировок рекламного модуля.
Выполнение всех требований гарантирует:
• графическому дизайнеру – высокое качество результата (дизайн-макета);
• заказчику – конверсию из зрителей в потребителей рекламируемого продукта (услуги).
Глиф как сигнал для потребителя
Правильное использование глифа в рекламной иллюстрации – сигнал для потребителя, мотивация его к действию в соответствии с рекламным сообщением.
Рисунок 1.13 – Реклама с предостережением об опасности костров в лесном массиве. Устоявшийся глиф огонь от костра
Цвет в рекламе тоже дает визуальный сигнал потребителю: позитивный, нейтральный или агрессивный (негативный). Сообразно этому будет и реакция человека.
Рисунок 1.14 – Рекламная наклейка о важности защиты кожи от прямых солнечных лучей. Глиф солнце
Рекомендация дизайнеру
Излишняя детализация визуального ряда – недостаток в работе. Руководствуйтесь принципом необходимое и достаточное. Это позволит:
• сократить время на подготовку иллюстрации;
• сократить время на восприятие потребителем рекламного сообщения.
Дизайн наклейки с предостерегающим сигналом о защите от солнца – яркий тому пример.
Качество исполнения рекламной иллюстрации
Визуальное качество исполнения иллюстрации не всегда напрямую связано с высокой детализацией. Рекламная векторная графика выполняет утилитарную транспортную функцию для передачи потребителю сообщения без потерь скорости восприятия и в соответствии с авторским замыслом.
Языком технического дизайна: визуализация плоской графикой (flat design) в рекламе выглядит лучше и эффективнее, чем детализированная полноцветная композиция (скорость создания, восприятие человеком, запоминаемость).
Достаточно сравнить в формате A/B-теста два примера рекламных иллюстраций. Проведем A/B сравнение полноцветной детализированной и плоской минималистичной иллюстраций.
Вариант A
Полноцветная детализированная рекламная иллюстрация
Рисунок 1.15 – Реклама туристического направления от СберБанка
Графическая идея:
передать яркие впечатления от отпуска в конкурсе историй.
Вариант B
Плоская минималистичная рекламная иллюстрация
Рисунок 1.16 – Первая помощь в туристических походах. Выполнена американским дизайнером Филом Монсоном (штат Юта, США)
Графическая идея:
обратить внимание (желтый фон) и передать важность (красный крест) первой помощи в турпоходах.
Результат параллельного сравнения иллюстраций
Вариант A. Пожалуй, не самая удачная реклама СберБанка. Слишком ярко подсвечена, зрителю подсознательно тяжело долго смотреть на высвеченный визуальный ряд. Тяжела для восприятия и слабо запоминается из-за смазанности визуального ряда.
Вариант B. Всего 5 цветов и грамотное манипулирование толстыми и тонкими линиями для выстраивания визуальных приоритетов. Легко прочитывается и запоминается рекламное сообщение, смоделированное в стиле flat design.
Масштабирование рекламной иллюстрации
Каким должно быть расстояние от рекламного щита до человека, которому реклама адресована? Точно никто не скажет. Среднестатистическое, ориентировочное значение – от двух до тридцати метров.
Дизайнеру предстоит найти оптимальное решение, проверяя его, что называется, на себе: изменяя масштаб в графическом редакторе, чтобы понять, как потребитель будет видеть это с определенного расстояния.
Рисунок 1.17 – Моделирование реальной ситуации восприятия потребителем рекламного сообщения на билборде с расстояния 10–15 м
Масштабирование позволяет техническому дизайнеру отладить визуальный ряд, обозначить приоритеты восприятия отдельных элементов композиции.
Векторная иллюстрация зачастую лучше по сравнению с растровым аналогом по ряду причин.
1. При подготовке векторного макета с высоким разрешением для крупноформатного рекламного размещения (например, билборд [6 ? 3] м) время обработки и передачи дизайн-макета значительно ниже – по сравнению с растровым аналогом (с аналогичным разрешением, т. е. количеством точек на дюйм).
2. Масштабирование векторной композиции в ± 5x возможно почти без потерь в детализации по сравнению с растровым изображением (действие механизма масштабирования пикселей и векторов).
3. Векторная иллюстрация не уступает в визуальном ряде полноцветному фото, но композиционно проще (редактирование объектов, их положение в композиции, проекции и т. д.).
Рисунок 1.18 – Фирменная папка формата A4 компании GT Auto Lab с полноцветной подложкой в растровом виде.
Размер файла: 100 Мб (из-за высокого разрешения фонового изображения – 300 dpi).
В практикуме студентам будет предложено разработать аналогичную фирменную папку по заданному формату в векторном виде (без использования растрового фона) и сравнить размеры и качество исходного и результирующего дизайн-макетов.
Размеры шрифта для рекламных носителей
Для удобного чтения информации с рекламного носителя необходимо точно измерять размер шрифта для дизайн-макета в зависимости от расстояния между зрителем и объектом.
Рисунок 1.19 – Пример расчета размера шрифта в зависимости от удаленности рекламного носителя от зрителя
Выбор оптимального размера шрифта для дизайн-макета рекламы
В специальной литературе приводится следующая формула для расчета оптимальной высоты шрифта:
Высота символа (мм) = 5 ? расстояние до зрителя (м).
Лучшим соотношением высоты и ширины рекламного текста считается пропорция 5:3.
Рассмотрим формулу расчета оптимальной длины строки.
Длина = количество символов ? высоту символов.
Для оптимального интерлиньяжа (межстрочного расстояния) используем рекомендованное (экспертами в области верстки) соотношение 1.5 em при размере шрифта условно в 1 em. Соответственно, расчет зависит от размера шрифта в соотношении 1.5 условных единиц.
Краткость передачи рекламного сообщения
Реклама должна быть краткой и емкой: всего в десяти словах.
• Уберите тексты-пояснения (кроме необходимых по закону о рекламе): лишние фразы раздражают и не раскрывают подробной информации о продукте.
• Оставьте один контакт для связи с рекламодателем: телефон, ссылку, QR-код.
• Проверяйте читаемость рекламного сообщения в дизайн-макете на цветных и черно-белых распечатках с учетом контраста текста и фона (как в правиле «черным по белому» или, наоборот, «белым по черному»).
Запомните: на чтение вашей рекламы у проезжающих и прохожих есть не более 7 секунд.
В качестве эксперимента возьмите половину листа А4 и посмотрите на рекламу с расстояния вытянутой руки. Если сообщение воспринимается комфортно, в большинстве случаев аналогичный эффект будет на улице.
В наружной рекламе мелочей не бывает. Рекламная иллюстрация и сообщение должны быть простые, понятные, хорошо читаться с любого расстояния.
Навыки технического дизайна иллюстрации и глифов в композиции визуального ряда
Для закрепления материала лекции в практикуме студенты смогут самостоятельно отформатировать текст и размеры глифа. Метрические установки будут предложены.
Навыки технического и графического дизайна – это следствие крепких теоретических знаний, визуального опыта и практики работы. Опыт складывается из знакомства с успешными и провальными кейсами по верстке текста, визуализации для рекламы, собственной работы с векторной графикой.
Теория необходима для обоснования выбора визуальных и технических решений при согласовании дизайн-макета с заказчиком – особенно если в ТЗ были неточности.
Практика помогает быстро формировать композицию, выстраивать визуальный ряд с корректировкой размеров элементов в балансе текста и графики на ограниченной плоскости дизайн-макета – с учетом масштабирования и читаемости при различных расстояниях между зрителем и рекламным макетом.
Рекомендуемая литература
1. Гордон Ю. О языке композиции. Изд. 2-е. – Латвия. – 208 с.
2. Чихольд Я. Новая типографика. Руководство для современного дизайнера. Изд. 6-е. – 248 с.
3. Шклярук А., Снопков П. Советский политический плакат. 1918–1940. – «Контакт-Культура», 2021. – 320 с.
4. Руководство по интерфейсам Apple. Раздел «Глифы». Источник на англ. языке. Режим доступа: https://developer.apple.com/design/human-interface-guidelines/glyphs/overview/
5. ФЗ «О рекламе». Режим доступа: http://www.consultant.ru/document/cons_doc_LAW_389115/
Лекция № 2
Веб-интерфейсы с применением глифов
Мы все чаще решаем повседневные задачи с помощью Сети. Это экономит время и деньги – в том числе при поиске лучшего предложения товаров и услуг. В науке это направление описывается следующими терминами:
• системы массового обслуживания (сокр. СМО, с точки зрения механизмов управления очередью заявок на обработку);
• веб-сервис (с точки зрения точки доступа и взаимодействия с пользователем);
• service on demand (англ. услуга по запросу, описывает процессы обработки заявок из веб- и мобильных приложений).
Рассмотрим роль веб-интерфейсов и применение глифов для решения задач функционального диалога между пользователем и системой.
Рисунок 2.1 – Дизайн-макет главной страницы корпоративного сайта CIS. Local Counsel Forum для всероссийского юридического форума в Сочи.
Источник: http://sochilegal.com/en/
Цифровые устройства с наиболее удобными интерфейсами имеют наивысший рейтинг по отзывам клиентов. Он напрямую соотносится с маркетинговым показателем – индексом потребительской лояльности (сокр. англ. NPS). С помощью этого индекса руководство компании-производителя эконометрически оценивает отношение потребителей к коммерческому продукту. Это влияет на развитие цифрового продукта (с расширением функционала для заинтересованных пользователей).
Ключевые факторы оценки качества исполнения веб-интерфейсов
Начнем с основ технического дизайна по специализации user interface.
Рассмотрим ключевые критерии оценки качества исполнения веб-интерфейса с применением масштабируемой векторной графики.
1. Простота восприятия интерфейса.
2. Адаптивность интерфейса.
3. Масштабируемость функционала в интерфейсе.
4. Детализация визуальной оболочки и интеллектуальных решений интерфейса.
5. Доступность для мультиплатформенного использования.
6. Мультиязычность интерфейса.
7. Уникальность или наследуемость интерфейса.
Последовательно детализируем каждый критерий.
Простота восприятия интерфейса – это самое сложное для дизайнера: уместить композиционно по заданным приоритетам (в спецификации продукта или в ТЗ) весь представленный функционал веб-приложения — последовательно и логично, не потеряв при этом визуальной целостности и простоты.
Мартин ЛеБланк, основатель популярного графического веб-сервиса IconFinder.com, как-то сказал: «Interface like a joke. No needs to explain» («Интерфейс, как и шутка, не требует объяснений»). Либо просто и понятно, либо плохо сделано.
Как достичь такой простоты? Это интересный с технической точки зрения вопрос, имеющий ряд визуальных и логических шагов решения – над ним студенты смогут поработать в ходе практикума к этой лекции.
Адаптивность интерфейса – интуитивно более легкий критерий для реализации и оценки. Заявленный функционал веб-интерфейса должен четко укладываться в один (первый) экран до прокрутки (скроллинга) с учетом изменяемой ширины любого экрана (вертикальная и горизонтальная ориентации).
Есть визуально-технические решения (трюки), позволяющие до прокрутки уложить сложный функционал в малый экран смартфона – что-то вроде слоеного пирога, где начинка правильно приготовлена по слоям, и потребитель получает ее по мере использования (потребления) готового продукта.
Уровень требований заказчика ограничивается согласно спецификации к продукту. Допустимо выбирать версии браузеров не старше трех лет: иначе могут возникнуть проблемы на старых версиях Android и iPad (iOS).
Масштабируемость функционала в интерфейсе – это важный критерий с точки зрения развития продукта: потребительские запросы могут вырасти, будут добавляться новые функции (фичи, от feature). Достигается с помощью раскрывающихся панелей, всплывающих окон, виртуального помощника и других подобных инструментов.
Детализация визуальной оболочки и интеллектуальных решений интерфейса – критерий, сходный с адаптивностью интерфейса. Но есть дополнительный смысл: возможность надстройки визуальных эффектов (в развитие продукта), детализация с визуальной точки зрения (под retina экраны). Здесь применяется масштабируемая SVG графика, построение визуального диалога (с иллюстрациями) для связи между пользователем и системой (по реакции на логический выбор пользователя). Такая связь (система – пользователь) должна быть понятна и эмоционально окрашена.
Рисунок 2.2 – Форма заявки для клиентов компании Platinum Data Recovery выполнена в виде последовательных шагов при заполнения анкеты. Вспомогательные вопросы и ответы сделаны в виде раскрываемого аккордеона с детализацией ответа по выбору из списка FAQ (сокр. от Frequently Asked Questions – часто задаваемые вопросы)
На рис. 2.2 слева используется глиф комментария с подписью FAQ для подсказки пользователю. Источник: https://platinumdatarecovery.com/request-a-quote
Доступность для мультиплатформенного использования – сложный критерий оценки, сходный с адаптивностью интерфейса. Требует правильного решения для масштабирования продукта на другие платформы – с веб-версии в мобильные приложения iOS, Android и стационарные touchscreen-системы информационных помощников (например, в аэропортах). Речь идет о стандартизации файловой структуры и взаимозаменяемости форматов графических файлов с SVG на аналогичные форматы (без потерь): PDF, PNG и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.
Мультиязычность интерфейса важна при переводе функционала с одного языка на другой.
Этот критерий напрямую влияет при переходе пользователя с международной англоязычной версии на региональную. К примеру, в немецком лексиконе слова длиннее, чем в английском.
Уникальность веб-интерфейса важна, если на рынок выходит новый, технологически революционный продукт. Интерфейс должен быть визуально новым, привлекательным для потребителя, но в какой-то части и наследовать веб-интерфейс. Наиболее сложная задача – уложить максимум функционала, системно сгруппированного по блокам функций одного назначения — в рамках экрана до прокрутки, удобно и логично для пользователя.
Рисунок 2.3 – Варианты дизайна веб-интерфейса авторизации для приложения Lillup
Функциональная роль глифов в веб-интерфейсах
Перейдем к роли глифов в создании визуальной оболочки цифровых продуктов. Веб-интерфейс обеспечивает диалог между пользователем и ИТ-системой. Приведем несколько доступных примеров из повседневной жизни.
Рисунок 2.4 – Меню стиральной машины на дисплее для управления программами стирки
Рисунок 2.5 – Интерфейс мобильного приложения для заказа такси с выбором типа кузова автомобиля на основе представленных глифов
Рисунок 2.6 – Интерфейс адаптивного меню корпоративного сайта с векторными глифами для визуализации разделов веб-сайта.
Источник: https://n-trade.spb.ru/
Визуальный анализ интерфейсов на рисунках 2.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).
На практике роль глифов – это визуальные подсказки в диалоге между пользователем и системой: запуск, приостановка, изменение, остановка системы.
Например, получив сообщение на панели (красный знак Внимание), пользователь видит, что нужно добавить бумагу в принтер для запуска электронного документа в печать.
Визуальные подсказки для пользователя веб-интерфейса
Форма, стиль и техническое исполнение глифовых подсказок трактуются дизайнером в прототипе интерфейса строго по согласованной спецификации и ТЗ.
Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.
Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.
Рисунок 2.7 – Примеры визуальных подсказок и их значения на экране смартфона.
Слева направо: отключение сигнала вызова (тихий режим); разблокировка доступа к устройству
Дизайнер переносит сообщения о взаимодействии пользователя с системой на экран веб-интерфейса с помощью анимированной или статичной графики – в зависимости от состояния СМО после вызова, паузы или остановки/отказа функции.
Анимированные векторные элементы интерфейса
На смену статичным элементам постепенно приходит анимированная графика. Диалог между пользователем и цифровым продуктом получает яркую красочную визуализацию и поднимается на новый уровень взаимодействия. Пользователь подсознательно привыкает к высокому уровню визуального комфорта. Это определяет качество сервиса компании – поставщика услуг.
Анимирование статических векторных элементов
Требуется анимировать статические векторные элементы. У этой задачи несколько путей решения. Например, для веб-интерфейсов можно применять следующие технологические стеки (проще говоря, связки технологий):
• HTML + SVG + CSS3 (опционально + PNG/JPG);
• HTML + SVG + JavaScript (опционально + CSS);
• HTML + SVG + SMIL.
Рассмотрим детально каждый вариант.
HTML во всех трех вариантах применения анимации SVG – это веб-страница для вывода графики в содержание источника.
Технологический стек для анимации № 1. HTML + SVG + CSS3
Графика в формате SVG по определению есть масштабируемая векторная графика (Scalable Vector Graphics): отличная четкость отображения при любом масштабе, простота редактирования и легкость кода с точки зрения хранения в каталоге N изображений в SVG с возможностью оптимизации (сжатия) кода для минимизации потерь при загрузке на клиентском устройстве.
• Анимировать глиф в формате SVG можно, применяя каскадные таблицы стилей (CSS). Рассмотрим визуальные эффекты в стилях CSS – согласно спецификации CSS версии 3, актуальной на 2021 г.
• Анимация движения (изменение координат объекта и размеров – приближение или удаление объекта относительно формата макета).
• Поворот rotate.
• Проявление fade in / out.
• 3D-трансформация.
Совмещение фильтров и их последовательное использование (запуск с задержкой в миллисекундах) в цикле воспроизведения анимации в стилях CSS позволяют добиться интересных визуальных эффектов при выборе и нажатии на выбранную функцию в интерфейсе.
Рисунок 2.8 – Пример анимации по клику на кнопку
Технически при нажатии (состояние: target) или при наведении (состояние: hover) происходит обработка стилями в CSS и предоставляет инструкции для вывода графики и анимации в заданных параметрах:
• ширина (width) и высота (height) анимированного блока задаются в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;
• цвет заливки блока:
– однотонная сплошная и плоская заливка:
1. в шестнадцатеричной (НЕХ) палитре:*
background-color: #CCDD33
2. в палитре RGB:*
background-color: rgb(255,255,255)
3. с добавлением полупрозрачности путем включения альфа-канала:*
background-color: rga(255,255,255,0.5)
– многоцветный градиент:
background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);
Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:
background: #fff,
background-color: rgb(255,255,255),
background-color: rgb(255,255,255).
Равнозначные инструкции для стилей CSS
Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.
Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.
Технологический стек для анимации № 2. HTML + SVG + JavaScript
В случае выбора технологии JavaScript в качестве способа визуализации анимации открывается ряд дополнительных возможностей:
• подключение внешних библиотек отрисовки векторной графики;
• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).
Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.
Источник: http://markup.inmotus-design.ru/rk/index.php
Особенности этого функционального решения:
• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);
• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).
В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.
Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.
Технологический стек для анимации № 3. HTML + SVG + SMIL
Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).
Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели
О выборе стека для анимации SVG-графики
Выбор технологического решения (стека) для анимации веб-интерфейса по умолчанию за исполнителем, если в ТЗ не прописаны четкие требования по выбору библиотек JS-скриптов и сопутствующих технологий.
Технический дизайнер может самостоятельно выбрать вариант реализации для анимации элементов веб-интерфейса, если не заданы жесткие ограничения со стороны заказчика.
Если требования заданы только по формату и цветопередаче изображений, исполнитель может предложить заказчику варианты решения задачи, указав их преимущества и недостатки – желательно в формате A или B, так проще понять и сделать выбор.
Особенности использования SVG-графики для мультиплатформенных систем
Разработка единой экосистемы электронных устройств для удовлетворения основных потребительских запросов – ключевое направление в развитии крупных федеральных ИТ-компаний (Яндекс и Mail.ru).
Сложности в адаптации веб-интерфейсов для мультиплатформенных систем возможны в спецификациях (поддержка форматов графики и т. д.). Необходимо выбирать стандартные решения с минимальными ограничениями по поддержке на устройствах. Использование абсолютного или фиксированного позиционирования в HTML стилями CSS для блоков относительно друг друга может смещаться на разных платформах и экранах по причине точности задания пиксельной матрицы и точки отсчета относительно видимой области экрана.
Это возможно отладить путем добавления стилей и вывода их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1 - Задание стилей отладки в блоке в HTML-документе для фиксации ошибок в определенных версиях браузеров выполняется следующим образом на примере IE 9.0: .] документа ).
Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре RGB или HEX и наследоваться на всех типах платформ: устройства на iOS, Android, Windows и т. д. с фиксированными параметрами. Это требование и к цветовой схеме глифовых элементов интерфейса в формате SVG. Оно обеспечивает единый визуальный образ продуктов компании-производителя, фирменный стиль на всех поддерживаемых платформах.
Рисунок 2.11 – Наглядная демонстрация смещения элементов веб-интерфейса целевой страницы веб-сайта компании Platinum Data Recovery при адаптивном дизайне (слева – широкий экран компьютера, справа – адаптивный мобильный веб-интерфейс)
Архитектура файловой структуры для размещения графики
Структура цифрового продукта может отличаться в зависимости от архитектуры платформы. Рассмотрим следующие примеры размещения стилей CSS и элементов графики SVG в различных продуктах.
Пример A
Рисунок 2.12 – Архитектура интернет-магазина в CMS Bitrix
Пример B
Рисунок 2.13 – Архитектура корпоративного сайта в CMS WordPress
Имплементирование (проще, вставка) анимации в код цифрового продукта для тестирования и в итоговую версию происходит при участии фронтенд-специалиста, отвечающего за внешнюю часть продукта (оболочку в виде веб-интерфейса и визуализации обратной связи).
Потребительская и экспертная оценки качества исполнения веб-интерфейсов
Умение работать с графическими форматами растровой и векторной графики, владение анимацией формируют навыки технического дизайнера (designer’s skills) и делают его востребованным для заказчиков. Особенно в профессиональной среде ценятся работы в портфолио, не только имеющие статус прототипа, но именно доведенные до серийного и единичного (под заказчика) использования. Эти работы характеризуют дизайнера как аналитика, художника, творца – одним словом, профессионала.
В качестве кратких выводов обозначим ключевые моменты в работе с векторной графикой для визуализации интерфейсов.
• Знания и умения из области верстки, цветоделения по приоритетам и контрасту элементов композиции, понимание баланса между визуальными и текстовыми элементами в интерфейсе позволяют дизайнеру сбалансировать поставленные в ТЗ задачи.
• Правильное понимание ключевых факторов оценки качества веб-интерфейса позволяет исключить лишнее в работе и оптимизировать труд, сравнивая требования ТЗ и общую практику по дизайну UI.
• Потребительская и экспертная оценки качества исполнения веб-интерфейсов могут не совпадать. Пользователям важны простота и удобство, компания-разработчик может ставить цели значительно шире.
• Цель технического дизайнера – найти баланс интересов и получить положительные отзывы о готовом цифровом продукте.
• Цифровые продукты, получившие наивысший рейтинг потребительских оценок и/или награды экспертов, имеют значительную коммерческую ценность для компании-производителя: высокий индекс потребительской лояльности конвертируется в прибыль. Важно это и для дизайнеров – как публичная оценка профессионального уровня.
Рекомендуемая литература
1. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Якоб Нильсен, Кара Перниче. На англ. языке.
2. Принципы разработки пользовательского интерфейса. Ненси Понг. Статья. Изд. Medium.com. 2017 г. Статья Дж. Портера «Principles of User Interface Design». Перевод: О. Жолудова, Р. Шайхутдинов.
3. Эвристические правила Якоба Нильсена. Источник на англ. языке: https://www.nngroup.com/articles/ten-usability-heuristics/
4. Веб-дизайн. Элементы опыта взаимодействия. Дж. Гаттер.
5. Проектирование веб-интерфейсов. Билл Скотт, Тереза Нейл.
6. Спецификации стандарта анимации SMIL 3.0. Источник на англ. языке: https://www.w3.org/TR/smil/smil-animation.html
7. Официальная спецификация компании Mozilla по поддержке формата SVG в анимации SMIL. Источник на англ. языке: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
8. Ознакомительный урок по использованию векторной графики для виртуальной клавиатуры. Источник на англ. языке: https://bundlespace.com/lessons/lesson-design-of-virtual-keyboard-for-atm-devices
9. Ознакомительный урок по анимации процесса загрузки в веб- и мобильном интерфейсе. Источник на англ. языке: https://bundlespace.com/lessons/lesson-animation-for-svg-loader-using-css3
Лекция № 3
Изометрия в иллюстрировании: наглядные композиции и технические решения
Что такое изометрия
Изометрическая проекция (с греч. ???? равный + ?????? измеряю) – это разновидность аксонометрической проекции, при которой в отображении объемного трехмерного объекта на плоскость коэффициент искажения (отношение длины спроецированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трем осям один и тот же.
Простыми словами, это частный случай объемной визуализации объекта на плоскости по заданным геометрическим параметрам.
Определяющая характеристика слова изометрическая в описании проекции в греческом языке, в сущности, означает равный размер: в этой проекции масштабы по всем осям – OX, OY, OZ – равны. В других видах проекций это условие не действует.
Рисунок 3.1 – Схема представления осей OX, OY, OZ в изометрической прямоугольной проекции
Наряду с прямоугольной изометрической проекцией также применяются косоугольная фронтальная и косоугольная горизонтальная проекции (см. на рис. 3.2).
В эволюции визуальных решений для рекламы и интерфейсов изометрический стиль (isometric) дизайна иллюстраций пришел на смену привычным решениям flat design и 3D.
Рисунок 3.2 – Косоугольная фронтальная и косоугольная горизонтальная проекции (слева направо)
Изометрический дизайн – это псевдообъемный стиль визуального изложения композиции физических объектов (в развернутой изометрической проекции), предлагающий иллюстративный ряд, аналогичный трехмерному воспроизведению, но с фиксированной или движущейся по направляющим объектам композицией (на переднем или заднем плане).
Рисунок 3.3 – Рекламная иллюстрация в правильной изометрической проекции для представления ремонтного транспортного шипа в разрезе.
Выполнена техническим дизайнером по чертежу от производителя в псевдообъемном разрезе в графическом редакторе Adobe Photoshop.
На визуализацию этой иллюстрации затрачено всего 8 часов с учетом корректировок заказчика
С точки зрения коммерческой ценности изометрическая иллюстрация позволяет визуализировать технические характеристики объекта (товара) в применении к реальности.
Рисунок 3.4 – Примеры изометрических проекций объектов в реалистичной визуализации на плоскости
Визуальное сравнение стилей: flat design, 3D и isometric design
Рассмотрим основные стили визуализации иллюстраций и пиктограмм для дизайна актуального на 2021 г. веб-интерфейса.
Рисунок 3.5 – Параллельное сравнение иллюстраций в стилях flat design, realistic 3D и isometric design (слева направо)
По смыслу плоский дизайн удобен для восприятия при малом и среднем масштабе в качестве элементов веб- и мобильного интерфейса (адаптивного дизайна) в виде масштабируемой векторной графики (SVG) для нажатий на функциональные элементы.
Сравнение реалистичного 3D-изображения и его изометрической аналогии с технической точки зрения позволяет сделать такие выводы. 3D дает лучшее качество воспроизведения материала (в объекте) – изометрия дает упрощенную псевдообъемную проекцию объекта по заданному формату (аналогично 3D выставлен источник света и освещение объекта, тень на плоскости от объекта). Технически воспроизведение в изометрии проще для реализации (для графических дизайнеров, не обладающих опытом работы с 3D), поэтому выбор способа реализации объемных объектов зависит от навыков дизайнера и требований ТЗ.
Воспроизведение фотореалистичной модели в точности 1:1 с первоисточником по фотографии (от заказчика) значительно сложнее, поэтому обычно используется только 3D-визуализация по чертежу с учетом материалов объекта и плоскостей фона, метрических размеров объекта в соотношении с другими объектами в композиции.
Рисунок 3.6 – 3D-визуализация ремонтного шипа компании «РемШип» в разрезе шины Michelin X Ice. Источник: https://inmotus-design.ru/portfolio/info/3d-spike-in-tire-michelin-x-ice.
Идея иллюстрации: с точностью до 1 мм выполнить – по аналогии с рекламой Nokian – визуализацию для ремонтных шипов российского производства.
Иллюстрация выполнена в редакторе 3D Max
Всего затрачено около 40 часов рабочего времени с учетом корректировок. Это достаточно много (примерно 1 неделя в зависимости от штатного расписания технического дизайнера). Пример характеризует 3D как трудоемкую технологию с высокой точностью воспроизведения и сложностью в реализации.
Начинающим дизайнерам лучше начинать с изометрических иллюстраций, чтобы научиться работать с источником света, тенями и отблесками от объекта в зависимости от композиции, свойств материалов (глянцевых и матовых поверхностей), типов теней и т. д.
Качество визуализации изометрической проекции объекта на рис. 3.7 достаточное для применения в рекламной продукции, где нет жестких привязок к размерам (как в примере шипы в шине определенной марки и радиуса).
Рисунок 3.7 – Аналогичный 3D-пример изометрических проекций ремонтных шипов на плоскости (без жестких требований с точностью до 1 мм).
Иллюстрации ремонтных шипов для ошиповки шин выполнены техническим дизайнером по чертежам заказчика в графическом редакторе Adobe Photoshop с учетом соблюдения пропорций шипов в разрезе.
Источник: https://inmotus-design.ru/portfolio/info/oshipovka-shipy
Как обосновать выбор технологии воспроизведения изометрической иллюстрации заказчику?
Есть основные критерии для выбора технологии воспроизведения изометрии в коммерческой иллюстрации.
1. Следовать требованиям ТЗ.
• Например, если указана точность 1:1 до мм, это, вероятнее всего, требует 3D-визуализации по чертежу заказчика – со всеми размерами деталей и типами материалов на поверхности объекта в изометрической иллюстрации. Время на реализацию — ориентировочно от 4 до 40 часов, в зависимости от квалификации технического дизайнера и сложности композиции.
• Если требуется более-менее реалистичная иллюстрация объекта в изометрии, желательно иметь фото объекта в заданной проекции и сделать технический дизайн в Adobe PhotoShop. Ориентировочно от 2 до 10 часов, в зависимости от квалификации технического дизайнера и т. д.
• Если требуется стилизованная изометрическая иллюстрация (в короткие сроки) для полиграфии (при наличии чертежа и фото объекта), этого достаточно для воспроизведения изометрической проекции на плоскости для полиграфической печати на любом размере. Ориентировочно от 2 до 10 часов на реализацию в зависимости от квалификации технического дизайнера и т. д.
2. Сопоставить бюджет, сроки и требования на выполнение задачи (если все три блока полностью указаны в ТЗ).
Рисунок 3.8 – Реалистичная визуализация векторных объектов в малом масштабе для меню каталога ювелирной продукции (в веб-сайте)
Рисунок 3.9 – Пример комплексной векторной иллюстрации в изометрической проекции (серверного решения как цифровой услуги Облачного хранилища).
Автор: @upklyak (Freepik.com).
Источник: https://www.freepik.com/author/upklyak
Чтобы обосновать выбор именно этой технологии, следует сопоставить трудоемкость в часах и стоимость часа работы технического дизайнера.
Опытный дизайнер должен аналитически выбирать инструментарий для решения задачи в зависимости от условий ТЗ. Правильный выбор сократит время на техническую реализацию.
В довершение описания технологий реализации изометрической проекции укажем, что даже в векторном графическом редакторе возможно выполнить реалистические изображения объектов, особенно если это необходимо для малого масштаба воспроизведения на экране в меню выбора.
Предпосылки для использования изометрического дизайна в иллюстрировании цифровых продуктов
Целесообразно использовать изометрический стиль в следующих ситуациях.
1. Нужно представить центральный и сопутствующие объекты во взаимодействии – с целью описания события или явления.
2. Визуальное преимущество по сравнению с аналогичными веб-сайтами или рекламой компаний-конкурентов, использующих в практике неинтересный, плоский дизайн (flat design).
3. Формат целевой страницы landing page позволяет использовать зеркальную верстку (с чередованием 50/50 текста и иллюстраций слева и справа) для представления товаров и услуг, сопутствующих условий использования и преимуществ.
4. Основной объект визуализации имеет несложную форму для технического изометрического представления (оптимальное решение для баланса затраченного времени и результата).
Возможно ли совмещать плоский и изометрический дизайн в коммерческой иллюстрации?
Да, возможно – если это не противоречит фирменному стилю компании. Например, для компании «Учетный Специалист» технический дизайнер выполнил заставку для цифрового продукта 1С «СОУ» с параллельным совмещением плоского и изометрического дизайна – в целом визуально привлекательную рекламную иллюстрацию цифрового продукта.
Рисунок 3.10 – Параллельное горизонтальное совмещение плоского дизайна надписи СОУ и изометрической проекции в иллюстрации для заставки цифрового продукта 1С «СОУ: Материальное обеспечение крупных строительных проектов» для компании «Учетный Специалист»
Особенности изометрического дизайна с технической точки зрения
С точки зрения точности технического воспроизведения композиции в изометрии графическому дизайнеру необходимо иметь следующие навыки.
1. Художественная композиция объектов в перспективе с учетом светотеней и их соразмерности на плоскости под углом зрения от лица пользователя. Этот навык позволяет дизайнеру сделать черновой технический эскиз для согласования с Заказчиком на этапе подготовки иллюстрации.
2. Проектирование композиции векторных фигур объектов для визуализации художественного черновика. Выбор между 2D (в векторном графическом редакторе) или 3D (в 3D Max или аналогичном софте) зависит от навыков дизайнера и требований ТЗ. Построить изометрическую проекцию объектов в псевдо 3D-пространстве X, Y, Z возможно в любом графическом редакторе на плоском или объемном макете по заданным размерам и направляющим.
3. Цветоделение и визуальное выделение центрального объекта иллюстрации с помощью градиентов позволяют отразить формы и направление освещения от заданного дизайнером источника света для отображения псевдообъема фигур, теней и отражений от плоскости.
Цветоделение в иллюстрации
Детализируем термин цветоделение в контексте корректного применения RGB, CMYK или HEX-палитры для полноцветной иллюстрации. Такое решение корректно, если ТЗ не требует жесткого соответствия фирменным цветам палитры бренда (по правилам, изложенным в брендбуке).
Многие дизайнеры применяют рекомендованные экспертами палитры Flat UI Colors [1], доступные в режиме онлайн по адресу: https://flatuicolors.com.
Рисунок 3.11 – Скриншот цветовой палитры Flat UI Colors для выбора безопасных цветов
Речь идет о выборе палитры безопасных цветов для веб-интерфейса цифрового продукта. Условное деление палитр Flat UI Colors по национальному признаку (по цветовым предпочтениям пользователей):
• Flat UI Palette v1;
• American Palette;
• Aussie Palette;
• British Palette;
• Canadian Palette;
• Chinese Palette;
• Dutch Palette; • French Palette;
• German Palette;
• Indian Palette;
• Russian Palette;
• Spanish Palette;
• Swedish Palette;
• Turkish Palette.
Цветоделение по национальному признаку условно и может быть использовано графическим дизайнером по желанию или по требованию.
Желательно выбирать 3–4 цвета: из них 1 или 2 тона одного основного цвета (светлый и темный тон), один цвет на контраст (возможно в светлом и темном тонах) и нейтральный цвет – для визуализации фигур и контуров объектов.
Цвета основного объекта и цвет на контраст следует выбирать (на инвертировании) в палитре по всем правилам колористики и цветовой гаммы.
Рисунок 3.12 – Фирменные цвета для логотипа компании Platinum Data Recovery
Цветовой круг Иттена
При выборе дополнительного цвета рекомендуется ориентироваться на противоположные цвета в круге Иттена – это подбор контрастирующего цвета. Так, красный сочетается с зеленым, желтый – с фиолетовым, синий – с оранжевым и т. д. Если эти цвета находятся рядом, они усиливают эффект друг друга, а при смешивании – гасят. Они расположены на противоположных сторонах цветового круга и составляют прямоугольник или квадрат. При подборе родственного цвета (последовательная схема, или принцип аналогии) берут три цвета, расположенных в соседних секторах.
Рисунок 3.13 – Рулетка цветового круга Иттена для выбора сочетаний цветов в дизайне (интерьера, одежды и т. д.).
Применяется, когда у дизайнера есть возможность самостоятельно подобрать сочетания цветов и согласовать выбор с заказчиком
Аналогично вееру цветов палитры Pantone на практике применяется круг Иттена в виде рулетки выбора палитры (рис. 3.13). Во многих художественных фильмах цветопередача в кадре выстроена именно по цветовому кругу Иттена для соблюдения нормы (т. е. цветовой гармонии в кадре) – в качестве палитры визуального ряда, согласно заданному в сцене настроению.
Рисунок 3.14 – Примеры палитры кадров художественных фильмов в цветовой гармонии, заданной по кругу Иттена
Основные цветовые схемы по методу Иттена
Для понимания цветовой гармонии в палитре рекламной иллюстрации рассмотрим основные цветовые схемы по методу Иттена.
• Комплементарные, или дополнительные цвета
По теории Иттена, комплементарными, или дополнительными, являются любые два цвета, расположенные напротив друг друга на цветовом круге.
Например, синий и оранжевый, красный и зеленый. Эти цвета создают высокий контраст в палитре визуальной композиции. Используются, когда надо что-то выделить в рекламной иллюстрации. Желательно использовать один цвет как фон, а другой – в качестве визуального акцента (приоритета).
• Классическая триада
Классическая триада – это четкое сочетание трех цветов, в равной степени расположенных друг от друга на цветовом круге Иттена.
Например, красный, желтый и синий. Триадная схема также обладает высокой контрастностью, но более сбалансированной, чем дополнительные цвета. Принцип в том, что один цвет доминирует и акцентирует с двумя другими. Такая композиция выглядит живой даже при использовании бледных и ненасыщенных цветов.
• Аналоговая триада
Аналоговая триада – это сочетание минимум двух и максимум пяти (желательно от двух до трех) цветов, находящихся рядом друг с другом на цветовом круге. Например, сочетания приглушенных цветов: желто-оранжевый и желтый, желто-зеленый – зеленый, сине-зеленый.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию (https://www.litres.ru/pages/biblio_book/?art=68397985?lfrom=390579938) на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
notes
Примечания
1
Задание стилей отладки в блоке в HTML-документе для фиксации ошибок в определенных версиях браузеров выполняется следующим образом на примере IE 9.0: .
Егор Поляков
Тип: электронная книга
Жанр: Программы
Язык: на русском языке
Стоимость: 549.00 ₽
Издательство: Эксмо
Дата публикации: 24.03.2025
Отзывы: Пока нет Добавить отзыв
О книге: Этот самоучитель позволит вам освоить основные принципы создания векторной графики – познакомиться с теорией технического дизайна, рабочими инструментами и приемами и закрепить пройденный материал на практике. В книге вы найдете десять лекций и десять практикумов, составляющих тридцать два академических часа – каждый урок посвящен различным областям технического дизайна и содержит всю необходимую для работы в описанной области информацию.