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

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

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

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

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

Данные и структуры данных

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

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

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

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

Генерация активов и производительность

Большинство разработчиков очень серьезно относятся к производительности своих приложений.

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

Изображения являются одним из видов активов, которые многие дизайнеры не передают должным образом. Например, большинство тем WordPress не меняют размеры изображений, когда вы загружаете их или используете в работе. Да, вы можете решить эту проблему с помощью одного или двух плагинов, но почему бы просто не сохранить его правильно с самого начала?

Есть несколько очень полезных инструментов для тестирования размеров изображений (а такие сервисы, как Google Page Speed Insights даже предлагают сжатие). 

Наконец, это относится не только к изображениям, но и к видео. Предложите сторонний сервис, такой как YouTube или Vimeo - ваши разработчики будут любить вас за это, так как он делает всю тяжелую работу за них.

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

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

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

Техническое исполнение

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

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

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

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

Фреймворки или библиотеки CSS и JavaScript

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

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

React, Vue и Angular (все фреймворки / библиотеки JavaScript) следуют очень похожим методологиям. Эти управляемые данными инструменты одностраничных приложений позволили разработчикам создавать масштабируемые веб-приложения, которые имеют очень модульный характер. Компоненты разделены на свои собственные функциональные файлы и часто также содержат стили (CSS).

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

Учитесь у разработчиков и помогите им учиться у вас, чтобы мы все могли создавать лучшие продукты.