их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1]<HEAD> документа <HTML>).
Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре 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.
• Потребительская и экспертная оценки качества исполнения веб-интерфейсов могут не совпадать. Пользователям важны простота и удобство, компания-разработчик может ставить