Loe raamatut: «Векторная графика для начинающих: теория и практика технического дизайна»

Font:

Описание курса векторной графики

В данном издании представлен базовый курс по теории и практике прикладной векторной графики. Это учебное пособие позволит углубить ваши знания и практические навыки, если вы занимаетесь графическим дизайном, иллюстрацией, рекламой.

Курс состоит из 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 и посмотрите на рекламу с расстояния вытянутой руки. Если сообщение воспринимается комфортно, в большинстве случаев аналогичный эффект будет на улице.

В наружной рекламе мелочей не бывает. Рекламная иллюстрация и сообщение должны быть простые, понятные, хорошо читаться с любого расстояния.

Навыки технического дизайна иллюстрации и глифов в композиции визуального ряда

Для закрепления материала лекции в практикуме студенты смогут самостоятельно отформатировать текст и размеры глифа. Метрические установки будут предложены.

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

Теория необходима для обоснования выбора визуальных и технических решений при согласовании дизайн-макета с заказчиком – особенно если в ТЗ были неточности.

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

Лекция № 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 и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.

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

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

Уникальность веб-интерфейса важна, если на рынок выходит новый, технологически революционный продукт. Интерфейс должен быть визуально новым, привлекательным для потребителя, но в какой-то части и наследовать веб-интерфейс. Наиболее сложная задача – уложить максимум функционала, системно сгруппированного по блокам функций одного назначения — в рамках экрана до прокрутки, удобно и логично для пользователя.