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

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

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

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

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

Рекомендуемая литература

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 (англ. услуга по запросу, описывает процессы обработки заявок из веб- и мобильных приложений).

Рассмотрим роль веб-интерфейсов и применение глифов для решения задач функционального диалога между пользователем и системой.

Цифровые устройства с наиболее удобными интерфейсами имеют наивысший рейтинг по отзывам клиентов. Он напрямую соотносится с маркетинговым показателем – индексом потребительской лояльности (сокр. англ. 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.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).

На практике роль глифов – это визуальные подсказки в диалоге между пользователем и системой: запуск, приостановка, изменение, остановка системы.

Например, получив сообщение на панели (красный знак Внимание), пользователь видит, что нужно добавить бумагу в принтер для запуска электронного документа в печать.

Визуальные подсказки для пользователя веб-интерфейса

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

Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.

Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.

Дизайнер переносит сообщения о взаимодействии пользователя с системой на экран веб-интерфейса с помощью анимированной или статичной графики – в зависимости от состояния СМО после вызова, паузы или остановки/отказа функции.

Анимированные векторные элементы интерфейса

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

Анимирование статических векторных элементов

Требуется анимировать статические векторные элементы. У этой задачи несколько путей решения. Например, для веб-интерфейсов можно применять следующие технологические стеки (проще говоря, связки технологий):

• 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.