Почему дизайнеры должны понимать код


Контраргумент ‘дизайнеры не должны знать, как код, с точки зрения разработчика.

Вежливость Штока Adobe

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

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

Я знаю это, потому что я заполнил обе туфли, проведя большую часть своей жизни проектированию и разработке для web.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Накопление капитала и производительность

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

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

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

Есть некоторые очень полезные инструменты для тестирования размеров изображения (и сервисов, таких как Google скорость страница выводы даже предложить сжатия). Запустить свой сайт с помощью этих инструментов и предложения разработчикам с соответствующим сжатием.

Еще одно соображение такое SEO. Что-то простое, например название вашего файла в семантическом ключе, может иметь огромное влияние на ранжирование результатов вашего проекта. Казалось бы, нелепо называть это миниатюра ‘a-photo-of-an-apple-on-a-cutting-board.jpg но Google на самом деле читает эти метаданные.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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

https://medium.com/media/a19f46680bac3cbdc42953c920d0c104/href


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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.