Программирование для дизайнеров — что мы должны знать?

Возьмите что-то, в чем вы преуспеваете, а затем двигайтесь дальше.

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

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

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

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

Как заявил Аарон Уолтер, вице-президент по обучению дизайнеров в InVision, в статье Toptal Design Talks: «Дизайнера не убьют, если он немного знает, как писать HTML и CSS, может быть, немного JavaScript».

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

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

Преимущества знания основ HTML и CSS

Дизайнерам было бы очень полезно получить некоторые базовые знания о том, что называется «внешним интерфейсом» (уровень представления), управляемым HTML (языком гипертекстовой разметки) и CSS (каскадными таблицами стилей, языком, который описывает стили компонентов в HTML-документе) , и, возможно, были бы удивлены тем, насколько легко выучить основы.

HTML и CSS не используют логику программирования. Буква M в HTML означает «Разметка», способ описания закодированной структуры элементов страницы, которые являются строительными блоками страниц. HTML с CSS и JavaScript образуют триаду основополагающих технологий для всемирной паутины.

С точки зрения непрофессионала, HTML — это архитектурная карта, которая сообщает браузеру, что отображать, а CSS, или каскадные таблицы стилей, — это код, который сообщает браузеру , как отображать объекты.

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

Понимание кода и как кодировать — это понимать пиксели

Изучение того, как кодировать интерфейсный пользовательский интерфейс и его предварительный просмотр, дает дизайнерам возможность сразу увидеть, как вещи отображаются при просмотре на различных устройствах. Если дизайнеры поэкспериментируют с HTML и CSS, они заметят, что все измеряется в пикселях (есть и другие единицы измерения, такие как «ems» и проценты, которые в конечном итоге будут преобразованы в пиксели).

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

Интерфейсный JavaScript и ноу-хау Ajax делают дизайнера уникальным активом

Здесь все может начать усложняться, но также происходит много веселья. Если дизайнер мыслит аналитически или исключительно мотивирован, он получит много пользы от изучения JavaScript и Ajax (асинхронный JavaScript и XML). Почему?

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

Перспективы дизайнера расширятся, если ему будет удобно точно знать, как далеко могут зайти технологии и как далеко они могут продвинуть их в инновациях. Углубляться в программирование и различные технологии не обязательно — если дизайнер знает основы HTML, CSS и JavaScript, а также немного Ajax, он уже далеко впереди конкурентов. Они станут уникальным активом для любой компании и команды разработчиков.

Дизайнеры могут перейти на следующий уровень с основами JavaScript

Хотя дизайнеры могли бы остановиться на этом и поручить серверную часть (уровень доступа к данным) реализоваться разработчиками, они могут сделать дизайн более динамичным, добавив некоторые сценарии. Введите JavaScript (язык сценариев), который является языком программирования для Интернета.

В начале 2000-х, когда сеть еще только развивалась, такие агентства, как Fantasy и Firstborn, произвели большое впечатление на сообщество веб-дизайнеров, когда они использовали преимущества JavaScript необычными, инновационными и творческими способами.

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

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

Обучение программированию улучшит сотрудничество с разработчиками

Были бы романтические отношения проще, если бы мужчины и женщины могли читать мысли друг друга? Некоторые люди так думают. То же самое относится к дизайнерам и разработчикам.

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

Дизайнеры, которые кодируют, увидят больше вакансий

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

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

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

Должны ли дизайнеры учиться программировать?

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

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

Все больше и больше возможностей для работы в области дизайна включают в себя «приятные возможности», такие как базовые навыки веб-разработки и прототипирования с использованием HTML, CSS и JavaScript. Каждый дизайнер сам решает, сколько взять на себя; ясно, что потребность там.

Собирается ли ИИ вытеснить фронтенд-разработчиков?

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

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

Мастерство программирования для дизайнеров поможет карьере

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

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

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

Дальнейшее чтение в блоге Toptal Design:

• Принципы мобильного UX-дизайна и лучшие практики
• Мобильный UX-дизайн — лучшие практики, ограничения и работа с разработчиками
• Межкультурный дизайн и роль UX
• Принципы дизайна и их важность
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры