Думай как разработчик: думай на языке кода.

Надо ли дизайнерам кодить? Нет. Но нужно уметь думать на языке кода.

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

Моему дизайнерскому «я» нравился шрифт Helvetica и рисование каракулей шариковой ручкой в скетч-буке. А еще меня восхищало, какое значение во всем мире обрел UX-дизайн. Как писала Мария Джудиче, лидеры дизайна становились DEO и CEO (DEO, Design Executive Officer — эдакий генеральный дизайнер; CEO,Chief Executive Officer — генеральный директор, — прим. ред.). Людей все больше волнует, как технологии влияют на их существование. Как и предсказывала Джули Жу, пользователи стали предпочитать одни продукты другим «из-за стиля и ощущений, которыми они наделяли своих обладателей, нежели чем исключительно из-за функциональности».

«Rise of DEO» — воодушевляющая книга Марии Джудиче о лидерстве и управлении через дизайн.

Тем временем, моё разработческое «я» хотело понять, как работает блокчейн. Я любила практичность, скорость и масштаб, характерные для разработки программного обеспечения, то, как просто создать вебсайт с нуля, моментальное наслаждение от вбивания кода онлайн и охват 3 миллиардов людей в Интернете с помощью одного коммита. А все это в совокупности делало относительное влияние программирования в моих глазах просто неизмеримым.

Вот какую тайну я открыла: можно разрабатывать дизайн технологий, а умение кодить использовать как суперсилу. Связь между дизайном и проектированием становится лучше, ваша команда работает быстрее, вы выполняете больше циклов и реализуете креативные и в то же время выполнимые решения. Итак, свою карьеру я начала как разработчик программного обеспечения, «разбирающийся в дизайне», затем я стала совмещать front-end разработку и дизайн, а сейчас я — дизайнер, который умеет думать как программист.

Как дизайнерам ДУМАТЬ на языке кода?

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

Вращайтесь в их кругу и больше общайтесь

Самый быстрый способ начать мыслить как разработчики — работать рядом с ними. Я работаю в Periscope — видео-службе под лейблом Twitter, которая функционирует как стартап внутри более крупной компании. Раз в две недели мы организовываем вечера настольных игр и турниры по пинг-понгу. У нас даже есть своя баскетбольная команда! Формирование командного духа начинается за обеденным столом, и из совместной сборки цветочных композиций ко дню матери перерастает в создание полностью сплоченной команды.

Победители турнира Twitter Video Org 2017 по пинг-понгу

Несмотря на то, как мы, дизайнеры, любим уткнуться в свои экраны, мы все-таки делаем усилие, чтобы проводить больше времени с инженерами. Взаимный обмен идеями между разработчиками тоже начинается на неформальном уровне. Мы узнаем язык друг друга, обсуждая графику недавно вышедшей видеоигры. Затем мы каждую неделю, иногда даже каждый день, собираемся и обсуждаем свои проекты. Во время таких собраний дизайнеры, а также инженеры заказчика (для платформ iOS, Android и Web), делятся своим прогрессом в процессе разработок. Если инженеры работают над непредвиденной ошибкой, они просят креативного совета. И наоборот, дизайнеры получают фидбек от инженеров о своей работе с точки зрения стоимости и ограничений разработки.

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

Прототип: визуальное программирование

Еще один способ прочувствовать на себе все прелести жизни разработчика — использовать для прототипирования визуальное программирование.

Origami — один из лучших инструментов визуального программирования для дизайнеров.

Что такое визуальное программирование?

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

Зачем использовать визуальное программирование?

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

Вот почему мы называем Origami «вермишелевым супом».

В моей дизайнерской команде для прототипирования используется инструмент Origami Studio, также известный как «вермишелевый суп». И для его использования у нас есть несколько практических причин. Во-первых, можно копировать сюда дизайны из Sketch и видеть предварительный вариант на любом устройстве с помощью приложения для iOS. Во-вторых, доступна огромная библиотека патчей, в том числе переключение опций и встроенные анимации.

Хотите заручиться поддержкой инженеров или партнеров? Если вы снабдите себя Origami и другими подобными приложениями, ваши возможности для прототипирования будут безграничны. Вы сможете воплотить абсолютно любые идеи — от создания инструмента для записи голоса до нативного приложения для камеры буквально за несколько минут. Займитесь чем-то неизведанным, воплотите свою безумную идею в жизнь и покажите, насколько инновационна ваша задумка! Если при попытке перевести ваш дизайн в цифры и патчи, окажется, что он не рабочий, позвольте ему измениться.

«Если изображение стоит 1000 слов, прототип стоит 1000 встреч» (@IDEO)

Давно обсуждаемый вопрос: Должны ли дизайнеры кодить?

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

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