Могут ли дизайнеры и инженеры использовать единый источник правды? Часть 1

Повторяющийся кошмар для дизайнеров и инженеров (часть 1 из 2)

Вы дизайнер.

Ваш последний проект, как и каждый проект до него, оказался в спирали хаоса.

Это началось с вашего аккуратного векторного файла, детализирующего главные экраны, но закончилось как недели назад и вперед с инженерами и заинтересованными сторонами. Все хотели сказать свое слово. Все нашли что-то пропавшее. Так много элементов пользовательского интерфейса имеют множество состояний - неудивительно, что вы забыли нарисовать целую артборд для каждого из них! Кроме того - премьер-министр угрожал вам всеми сроками. О, и ваш векторный инструмент начал отставать с более чем 100 монтажными областями, детализирующими состояния, которые люди просили увидеть. Все быстро стало беспокойным! Как только вы подумали, что имеете некоторый контроль над этим беспорядком, разработчики завершили первый набор функций. Вы почувствовали, как кровь устремляется к вашему лицу - ничто не выглядит так, как предполагалось. Типография была испорчена. Цвета выключены.

Вы задались вопросом: «Почему инженеры не могут просто сделать все правильно?» В конце концов, вы отправили им свой векторный проект в сопровождении спецификации CSS, сгенерированной этим модным новым инструментом. Инженеры сказали, что они использовали спецификацию и что вам следует прекратить использовать инструменты векторной иллюстрации для дизайна пользовательского интерфейса, но вы не согласны. Все в вашем дизайне Slack сообщества используют этот инструмент.

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

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

Вы инженер.

Ваш последний проект, как и каждый проект до него, оказался в спирали хаоса. Дизайнеры, опять же, не указали все состояния компонентов, но подняли тревогу, когда вы заполнили пробелы состояниями наведения и активного состояния на основе классов, которые у вас уже были в ваших CSS-файлах. Ваше нетерпение достигло предела на 3-часовой встрече, посвященной несоответствиям между векторными изображениями и реальным кодом. Вы изо всех сил пытались объяснить, что статические иллюстрации, созданные в этих векторных файлах, не могут быть точно воссозданы в коде. Браузеры и векторные инструменты живут в совершенно разных мирах, и вещи всегда будут выглядеть по-разному. Дизайнеры не хотели слушать и постоянно атаковали вашу команду с концепцией «идеального дизайна пикселей». Вы хотели сказать, что было бы идеально, если бы они использовали инструменты, которые на самом деле используют CSS для стилизации. Тем не менее, вы остановили себя. У вас была эта дискуссия (аргумент) раньше. Вы все еще надеетесь, что дизайнеры однажды поймут, что пользователи не заботятся о своих идеальных векторных файлах, пользователи испытывают только то, что было создано в коде. Если дизайнеры не начнут работать ближе к коду, вещи всегда будут ломаться.

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

И последняя капля - еще раз они разработали некоторые анимации в инструменте, который выводит GIF. Они действительно ожидают, что вы что-то закодируете, глядя на 5-секундный GIF? Это не только ужасный процесс, но как насчет сроков проекта? Как насчет производительности этой причудливой анимации?

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

Неправильные инструменты. Неправильные процессы.

Звучит знакомо? Это состояние развития цифрового продукта в 2019 году.

Дизайнеры и инженеры выражают свои мысли и идеи с помощью инструментов, которым не хватает совместимости и синхронности. Разработчики работают с конечными, специфичными для платформы технологиями производства, дизайнеры часто используют инструменты векторных иллюстраций (Sketch, Figma, XD…) для разработки статических представлений интерфейсов.

Эти два не могут быть более разными и менее совместимыми:

  • Различные движки рендеринга, используемые, например, в браузере и в инструменте векторной иллюстрации, вызывают неразрешимые различия в рендеринге шрифтов, цветах и ​​градиентах.
  • Анимация статических монтажных областей с помощью инструментов, выводящих GIF-файлы (например, принцип), приводит к зачастую болезненному и медленному процессу преобразования GIF-кода в производительный и надежный код.
  • Отсутствие связи между закодированными компонентами и инструментами векторных иллюстраций мешает внедрению систем проектирования и приводит к непоследовательному, ошибочному и дорогостоящему продукту.

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

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

Выпекать торт с настоящими ингредиентами. Фото Александры Головац на Unsplash.

Дизайнеры должны вернуться к реальности и «испечь пирог» с использованием реальных ингредиентов, а не изображений ингредиентов. И инструменты дизайна должны иметь возможность выводить реальные ингредиенты, а не просто изображения.

Вот идея: не вините дизайнеров. Не вините инженеров. Обвиняйте инструменты проектирования, которые застряли в неправильной парадигме и препятствуют прогрессу отрасли в направлении единого процесса проектирования и разработки.

Ознакомьтесь со второй частью этой статьи о том, как решить этот продолжающийся кошмар.