8 причин UI/UX и Web дизайнеру уметь программировать
Т-shape навыки в digital профессиях становятся всё более востребованными. Если обратиться к другим профессиям и посмотреть как продвигается у них кривая обучения, то можно сделать интересные выводы.
К примеру, возьмём врача, который последние 20 лет занимается операциями надпочечных желез. Как думаете он умеет делать только этот тип операций?
Ответ, конечно же, нет. Потому что он время от времени участвует в широкопрофильных семинарах, чтобы держать “руку на пульсе” и быть в курсе последних технологий и методик. Также он проходит общую практику пару раз в несколько лет. Это нужно для того, чтобы не терять свои навыки, уметь смотреть на свою работу немного шире или даже перенимать некоторые методики из других практик.
Но подобное, почему-то, вообще не рассматривается в digital профессиях. Часто происходит так, что дизайнеры ни разу не пытались программировать, а программисты дизайнить. Проект-менеджеры не в курсе как делаются те, или иные продукты в компании. Они знают общий процесс, но на более подробные вопросы им сложно отвечать.
Это касается всех смежных профессий. В прошлом году я стал приверженцем того, что дизайнеры и front-end разработчики должны уметь анимировать. Это помогает взглянуть на многие проблемы под другим углом. Больше и подробнее об этом я буду говорить на своём курсе UI анимация (https://prjctr.com.ua/ui-animation.html).
Этой же статьёй я хочу вызвать у вас интерес к подобным практикам на примере UI/UX или Web дизайнера, который умеет программировать.
Вы сможете придумывать и разрабатывать более запоминающиеся решения
Умение программировать позволяет поставить себя на место разработчика и представить себе, как можно реализовать разные “фишки”, которые были придуманы в дизайне. Например, дизайнер может изначально продумать архитектуру страницы и стек технологий, который будет использоваться. Этот пункт больше относится просто к знаниям возможных решений. Но умение программировать как раз и знакомит дизайнера с разными библиотеками и технологиями, которые можно использовать для достижения своих целей.
Таким образом можно придумывать абсолютно смелые концепты, в том числе 3д модели, которые взаимодействуют с курсором пользователя.
Или использовать нестандартные решения с изгибающейся линией, которая в итоге превращается в checkmark.
Или вот ещё одно классное использование технологий для решения проблемы. Парень применил AR технологию для показа пользователю дополнительной информации.
Ваши прототипы становятся более функциональными и в дальнейшем используются на этапе разработки
Умеющий программировать дизайнер собирает интерактивные-прототипы уровня “бог”. Такие прототипы клиент может установить себе на телефон и попробовать реально работающий UI-mvp, вместо ссылающихся друг на друга статических дизайнов, которые даже не передают ощущение финального продукта.
Обычно такие прототипы собираются в xcode или android studio. Они забирают больше времени на pre-production фазе, но зато здорово экономят время на более дорогой production фазе.
У самого дизайнера создание подобных прототипов не занимает много времени. Зато это гарантирует, что все решения и экраны будут собраны так как было задумано, а не так, как получилось.
А разработчик после может легко подхватить проект и привязать сложную логику и более продвинутые переходы между экранами.
Вы научитесь создавать универсальные дизайн-системы
Создание подготовленных к использованию всей командой дизайн-систем с настроенными компонентами может занять какое-то время. Но зато вы сможете быть уверены, что все нужные состояния были проработаны как нужно, и пользователь не увидит “съехавших” иконок или “неправильных” цветов.
Как видно на примере ниже, мы разработали супер адаптивную и продуманную дизайн-систему для клиента. Мы сделали дизайн и анимацию состояния каждого отдельного элемента, а после собрали в систему, чтобы быть уверенными в том, что наш дизайн будет использоваться как нужно.
Вы начнёте говорить с разработчиком на одном языке
Было ли у вас такое, что вы даёте свой дизайн разработчикам и на выходе получаете совсем не то? Чтобы такого не случалось, нужно работать с разработчиком в команде, а не против друг друга.
Умение программировать поможет точно формулировать свои “хотелки” и давать полноценный конструктивный фидбек, за который разработчик скажет “спасибо”.
Умение программировать — первый шаг к системному мышлению
По своей природе дизайнер — это инженер. Поэтому программирование поможет увидеть этот мир через призму систематизации. Это полностью изменит ваш мыслительный процесс и вы начнёте разрабатывать дизайн более продуманно, разбивать сложные компоненты на более простые, вычленять и подчёркивать самое главное. Это больше касается внутренних процессов, которые не увидит ваш конечный пользователь, но позволит вам почувствовать свою супер-силу.
В Untime это проявляется во всех процессах компании: от создания структуры папок на google drive до процесса финальных рендеров.
Это может стать темой для отдельной полноценной статьи, но я не могу не упомянуть об этом сейчас.
Когда я начал программировать, то моё мышление превратилось в “объектно-ориентированное”. Т.е я пытался увидеть этот мир как связку независимых объектов, которые взаимодействуют друг с другом. А несколько позже я узнал о “системном мышлении”, и мой мир перевернулся. Я начал глубже изучать этот вопрос, смотрел лекции Стендфордских преподавателей, читал суровые русские учебники 80-х. И теперь я везде вижу системы, которые взаимодействуют друг с другом. Могу в голове масштабировать любые системы: от маленького микрокомпонента-кнопки до огромной мульти-серверной архитектуры. Я рассматриваю их не только как независимые объекты, но и как части большей структуры.
Начиная новый проект, я сразу же обдумываю основную архитектуру. После углубляюсь в отдельные системы и разрабатываю их. И потом перемещаюсь ещё на уровень ниже.
Как в известной Atomic Design Metodology, но наоборот. Т.е с внешнего круга во внутренний.
Этот тип мышления относится не только к дизайну или разработке. Его я также применяю в моушн-дизайне и анимации. Теперь для меня персонажи — это движущиеся системы :)
Сможете писать плагины и скрипты для оптимизации работы
В дополнение к предыдущей теме: вы уже не сможете спокойно повторять рутинные действия из раза в раз, а захотите их как-то оптимизировать. Отправитесь изучать, как работает софт, который вы используете, и начнёте писать оптимизаторы для своей работы.
Это, конечно, зависит от вас. Но часто люди, которые умеют программировать и не находят уже готовые решения для своих проблем, начинают разрабатывать собственные плагины и скрипты.
За свою карьеру моушн-дизайнера я написал 4 больших расширения и десятки мелких скриптов. К слову, их еще можно довольно выгодно продавать. Я до сих пор зарабатываю на скриптах, которые написал ещё 5 лет назад.
Это превью одного из таких расширений.
Это делает вас более ценным специалистом
Дизайнер, который умеет программировать, ценится намного выше чем узкопрофильный специалист, как и наоборот (программист, который дизайнит). Вы становитесь более универсальным членом команды, готовым вести более сложные проекты и контролировать работу разработчиков.
Бизнесу всегда проще нанять более универсального человека на руководящие должности, чем пытаться сделать узконаправленного специалиста руководителем.
Вы сможете сами проверять свои гипотезы
Так у нас родилось мобильное приложение Flugo (https://flugo.untimestudio.com). Мы всего лишь хотели узнать возможно ли создать технологии анимации фотографий на телефоне. Тестировали, проверяли, улучшали. Потом посмотрели, что у нас получилось почти готовое приложение, решили его доделать и выложить в общий доступ.
Какие технологии актуальные сейчас?
- Как ни странно, но до сих пор актуально знание чистых html + css
- Следующим этапом изучения должен стать фреймворк react + react native. Это один из самых популярных фреймворков для фронт-енд разработки. Его используют для разработки веб-приложений и несложных мобильных приложений. Также на его основе работает программа для прототипирования Framer X.
- И самый крутой этап — это базовые знания swift + kotlin и xcode + android studio. Что позволит раскрыть свой потенциал на полную.
