Визуальное сравнение стилей: 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 – Примеры палитры кадров художественных фильмов в цветовой гармонии, заданной по кругу Иттена