Дизайнерам пора перейти от дизайна на основе изображений к дизайну на основе кода

Зачем переключаться с дизайна на основе изображений на дизайн на основе кода?

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

Дизайнеры используют инструменты растровой графики или векторного дизайна для рисования изображений, поскольку они изолированы от остальной части организации. Процесс в большинстве случаев остается идентичным, даже если они работают в разных программах, таких как Photoshop, Gimp, Sketch или Fireworks. Набор статических изображений отправляется инженерам в качестве замысла, реализованного дизайнерами.

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

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

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

Новый рабочий процесс обеспечивается новым набором инструментов, где:

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

От дизайна на основе изображения к дизайну на основе кода с UXPin

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

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

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

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

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

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

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

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

4. Слабое сотрудничество в дизайн-инжиниринге: процесс проектирования полностью отличается от этого инструмента и не может быть объединен. Результат обоих миров не связан с самой его природой.

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

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

Уникальность дизайна на основе кода

Важно знать, что особенного в этом дизайне, поскольку мы подчеркиваем переход от дизайна на основе изображений к дизайну на основе кода. Когда пользователь рисует что-то с помощью инструмента дизайна на основе кода, он создает соответствующий CSS/HTML/JS и задействует браузер. Это заставляет движок отображать результаты визуально.

Ниже приведены преимущества для дизайнеров после перехода от дизайна на основе изображений к дизайну на основе кода.

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

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

3. Замена художественных досок интерактивными компонентами: вместо связанных художественных досок инструмент проектирования на основе кода использует самые передовые взаимодействия с компонентами. Этот подход напрямую позволяет дизайнерам создавать многоразовые интерактивные системы дизайна, а также имитирует разработку.

4. Реалистичные и мощные взаимодействия: при переходе от дизайна на основе изображения к дизайну на основе кода объекты могут взаимодействовать друг с другом, перемещаться по экрану и создавать сложные узоры. Не требуется уметь программировать, что наиболее важно для совместной работы с инженерами и тестирования с пользователями.

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

Связанная статья

Разница между веб-дизайнером и веб-разработчиком