Векторная графика для начинающих: теория и практика технического дизайна — страница 6 из 31

Обработка, хранение, воспроизведение каталога векторной графики

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

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

Сложности при работе со значительными объемами графики

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

Базовые требования к пакетной обработке графики для масштабных веб-ресурсов

Рассмотрим базовые требования современной веб-разработки, косвенно и прямо коррелирующие с обработкой каталогов с обширным графическим наполнением.

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

Задача: минимизировать ручную обработку графики.

2. Автоматизация процессов загрузки, добавления водяных знаков, оптимизации по весу и вывода в каталоге с учетом требований SEO [2].

Задача: часть бизнес-процессов перенести в автоматические скрипты обработки графических данных.

3. Стандартизация графики в структуре веб-ресурса.

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

От сложного к простому методом декомпозиции

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

В чем заключается проблема ручного подхода к обработке графики без строгих правил?

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

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

Какие базовые задачи (процедуры) в работе технического дизайнера можно автоматизировать программными скриптами, исполняемыми на сервере?

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

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

Перечислим основные автоматизируемые процедуры технического дизайна.

1. Валидация графических файлов – это процедура проверки графических файлов на соответствие стандартному описанию формата (SVG, PNG, PDF и т. д.), т. е. воспроизведение без ошибок, возникающих при сбоях в ходе удаленной загрузки файлов на сервер.

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

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

Куда проще отправить на сервер серии из 100–1000 изображений для пакетной обработки, чем использовать ручной труд специалиста, который может забыть какое-либо важное правило для пакетной обработки графики.

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

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

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

Проще говоря, загруженные дизайнером векторные файлы в формате SVG автоматически конвертируются в необходимые форматы PDF, PNG (с прозрачностью и без сжатия), GIF, ICO и т. д. (по заданным инструкциям). Логично, что эта абсолютно техническая процедура должна быть исключена из плана работ технического дизайнера.

6. Стандартизация размеров и наименований графических файлов –  это ключевая процедура для организации хранения и воспроизведения графического интерфейса и визуального контента каталога в масштабируемой ИТ-экосистеме компании.

Необходимость стандартизации размеров баннеров, наименований файлов и т. п. обусловлена автоматической обработкой по заданной маске: в стилях оформления (CSS) и при вызове в программном коде (JS + PHP) –  для обработки, поиска и воспроизведения с целью получить полный автоматизированный комплекс управления каталогом продукции.

Все эти процедуры соотносятся с целями коммерческого предприятия: автоматизация веб-разработки, повышение эффективности в масштабировании ИТ-экосистемы компании.

Типовая структура хранения данных в веб-разработке

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

На рис. 6.1 представлена типовая структура веб-ресурса от корневой папки public_html с вложенными каталогами по заданному назначению с необходимым для воспроизведения содержанием.

Рисунок 6.1 – Файловая структура веб-ресурса с вложенными каталогами по назначению

Давайте последовательно рассмотрим основы файловой структуры и связи функциональных элементов веб-ресурса для воспроизведения статических и динамических веб-страниц.

• public_html – это стандартное наименование корневого каталога хранения веб-ресурса, при обращении к которому веб-разработчик получает доступ к структуре действующего или тестируемого проекта.

• about – это каталог, преимущественно содержащий данные о деятельности компании со статической или динамической страницей (–ами) ее описания.

• products – динамический каталог, содержащий генерируемые из CMS категории и страницы (условно именуемые карточки товаров) для последовательного воспроизведения каталога продукции компании. CMS (сокр. от Content Management System) – система управления содержанием веб-ресурса для его динамического наполнения (редактирования, создания и удаления страниц и сопутствующих материалов, включая графику, стили CSS, шаблоны и скрипты PHP и т. п.).

• services – это статический (или динамический) каталог, содержащий описание услуг компании.

• php – это стандартный системный каталог (директория) хранения шаблонов типовых страниц веб-сайта и сопутствующих скриптов автоматизации функционала веб-ресурса для его полноценной работы.

• js – это стандартная системная директория хранения исполняемых скриптов в формате JavaScript (*.js) для динамических функций воспроизведения контента (обработки ввода, удобства навигации, фотогалереи и т. д.).

• img – это стандартная системная директория хранения изображений для воспроизведения веб-интерфейса, графики в контенте веб-страниц и т. д.

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

По умолчанию является дочерней по отношению к директории img, тем самым характеризуется содержанием изображений внутри нее.

• svg – вложенная директория, относящаяся к пользовательскому интерфейсу (директории ui), хранящая графические векторные файлы воспроизведения веб-интерфейса. В данном случае sprite.svg (т. е. спрайт с элементами интерфейса во всех состояниях: по умолчанию, при наведении и при нажатии).

• png – вложенная директория, относящаяся к пользовательскому интерфейсу (директории ui), хранящая графические растровые файлы (с прозрачностью) воспроизведения веб-интерфейса. В данном случае указатели-маркировки товаров label-new.svg (новинка), label-hit.svg (хит продаж) и т. п.

• content – вложенная директория, относящаяся к изображениям контента (т. е. визуальному содержанию страниц). Содержит фоновые изображения разделов и другие изображения, не относящиеся к веб-интерфейсу (навигации и т. п.).

• products – вложенная директория, относящаяся к изображениям продуктов из каталога компании, содержит графику преимуществ и т. п.

• product-name – это вложенная директория, относящаяся к изображениям серии продуктов, объединенных определенной маркировкой названия (условно product-name. Так, в реальном проекте продукция бренда Elaflex серии ERV будет иметь каталог изображений с заглавием elaflex-erv). Важно вместо пробелов ставить дефисы в наименованиях директорий – для четкой адресации к файлам в структуре веб-ресурса.

• css – это системная стандартная директория хранения каскадных таблиц стилей в формате *.CSS для воспроизведения форматирования адаптированных веб-страниц из шаблонов PHP и пользовательского интерфейса с графикой вместе с содержанием (контентом). В примере представлено раздельное хранение стилей для интерфейса (ui.css), для отображения шапки веб-ресурса (header.css), для подвала (footer.css), навигации (menu.css), каталога (catalog.css) и т. п.

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

• brand – это дочерняя не системная директория по отношению к директории upload, где хранятся файлы описания производителя продукции из каталога компании.

• collection#0001 – это условная вложенная директория описания коллекции продуктов бренда, где brand – условное заглавие. В реальном проекте это обязательно на англ. языке: elaflex, gilbarco, red-jacket и т. п. наименования производителей, без дефисов между словами.

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

• logo.svg – векторное изображение со стандартной маской наименования для единообразия в шаблоне воспроизведения коллекции (фиксированного размера и/или пропорции для четкого воспроизведения в шаблоне страницы).

• logo.fav – пиктограмма (иначе иконка) с изображением логотипа для вывода в заглавии страницы (во вкладке веб-браузера) для идентификации страницы по бренду среди прочих вкладок.

• full-cover.jpg – это полноцветное изображение обложки (т. е. фона) под наименованием бренда в верхней части шаблона страницы с описанием коллекции. Используется для визуального оформления контента.

• cover.webp – аналогичное предыдущему оптимизированное изображение обложки. Используется в случае детектирования старшей версии веб-браузера для прогрессивной загрузки оптимизированной (сжатой) растровой графики в  соответствии с возможностью ее воспроизведения.

• bg.jpg – это цветной фон для содержания всей страницы коллекции. Задает стилистическое оформление, чтобы создать единый визуальный образ коллекции бренда.

• catalog.pdf — это сверстанный электронный документ со всеми моделями бренда в коллекции для распечатки на бумажном носителе (для чтения, поиска модели и рекламы).

Следует отметить, что представленная структура – это типовая файловая структура для веб-ресурсов на языке программирования PHP. Но есть случаи более сложной, отличной от типовой, структуры хранения системных и других файлов, как, например, CMS Bitrix, содержащая множество вложенных каталогов для воспроизведения полного обширного функционала ИТ-системы Битрикс.

Рекомендации для дизайнера по обработке, организации хранения и воспроизведению каталога векторной графики

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

Эти рекомендации являются основными в процессе технической работы начинающего веб-дизайнера и проектировщика.

1. Использование спрайтов для графических элементов веб-интерфейса эффективно в случае разработки масштабируемого продукта.

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

2. Оптимизация графики до начала тестирования готового продукта крайне рекомендуется с целью проверки боевой скорости загрузки на клиентских устройствах (для оценки времени рендеринга страницы).

Процедура оптимизации графики утилитами вида OptiPNG и др. позволяет вкупе с адаптивным дизайном веб-интерфейса достигнуть необходимого качества веб-ресурса и получить статус mobile friendly (т. е. адаптированный для мобильных устройств) после индексации в поисковых системах Яндекс и Google.

Как выполнять оптимизацию графики (самостоятельно или программной процедурой на сервере)? Правильный ответ зависит от согласования с другими веб-разработчиками (это опционально по ситуации).

3. A/B-тестирование визуальных решений на фокус-группе до публикации обязательно в коммерческой веб-разработке с целью отрисовки и отбора понятных изображений для целевой аудитории.

4. Проверка на уникальность необходима, чтобы исключить подозрения на плагиат. Необходимо добиться 100% по уровню уникальности, дабы исключить претензии в плагиате со стороны третьих лиц (коммерческих организаций, конкурентов). Это гарантирует высокую ценность и самостоятельность готового решения выпускаемого цифрового продукта.

Технический дизайнер может воспользоваться веб-сервисами типа TinEye и др. для проверки на антиплагиат.

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

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

Как решать сложные задачи веб-разработки

Если ИТ-специалист по неопытности сомневается в выборе правильного решения сложной задачи, следует логически подойти к ее выполнению: сначала декомпозировать основные варианты решения, провести анализ по ключевым критериям методом факторного анализа, выбрать оптимальный вариант решения, а далее представить анализ в черновом виде старшему коллеге или заказчику и согласовать действия до начала внедрения.

В упрощенном виде факторный анализ выглядит следующим образом.

Общий вид факторного анализа для выбора метода (варианта) исполнения сложной технической задачи

Уточнение к таблице

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

• Исполнителю необходимо сформулировать четко от одного до нескольких (ограничено по количеству) вариантов решения сложной задачи и разместить их в следующие колонки после первой, где по приоритетам заданы факторы. Далее следует проанализировать каждый вариант решения и дать унифицированные оценки по каждому фактору в виде «+» или «–».

• Затем просто свести количество «+» по всем вариантам и на этом основании оптимально представить выбранное решение руководству или заказчику (в зависимости от ситуации) до внедрения с целью согласования.

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

Сложные на первый взгляд задачи вполне решаемы методом декомпозиции: разложением от сложного к простому.

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

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

1. Спецификация каскадных таблиц стилей CSS. – Режим доступа: https://www.w3.org/Style/CSS/specs.ru.html

2. Спецификация формата масштабируемой векторной графики SVG. – Режим доступа: https://www.w3.org/TR/SVG2/

3. Лавдэй Лэнс, Нихаус Сандра. Проектирование прибыльных веб-сайтов. – М.: 2011.

Лекция № 7