Лишним не будет: три причины UX/UI-дизайнеру научиться кодить
8 ноября 2024
4 мин.
С развитием цифровых технологий и усложнением ИТ-продуктов дизайнеры всё чаще сталкиваются с потребностью в базовых навыках программирования. Так, например, продуктовый дизайнер может помочь команде ускорить разработку за счет самостоятельной верстки прототипа и создания адаптивного дизайна. В этой статье мы разберём, как умение кодить расширяет возможности дизайнеров и улучшает их взаимодействие с разработчиками.
Причина первая: расширение возможностей и навыков
Знание программирования помогает лучше понимать процессы разработки. Например, навыки HTML, CSS и JavaScript позволяют дизайнерам создавать интерактивные прототипы и тестировать интерфейсы. Умение собрать и показать работающий макет страницы или приложения с анимацией и интерактивными элементами ускоряет согласование, а иногда и исключает потребность в отдельных этапах правок.
Так, например, дизайнер интерфейсов создаёт интерактивный прототип приложения с анимацией через CSS и JavaScript, чтобы показать команде и клиенту, как будут выглядеть кнопки, переходы и взаимодействие в конечной версии. Такой подход сокращает количество правок, как и наглядно визуализировать идею до этапа разработки.
“Продвинутое прототипирование позволяет сделать макет будущего сайта или приложения максимально приближенным к реальности. Допустим, чтобы при нажатии активировалось специальное поле, или, если речь идет о финтех-сервисе, калькулятор рассчитал сумму выплаты по кредиту при вводе числовых значений”, – объясняет Мiddle UX/UI-дизайнер Кирилл Гребенников.
Причина вторая: улучшение сотрудничества с разработчиками
Разрыв между дизайнерами и dev-командой может вызывать множество проблем на этапе реализации проектов. Знание основ программирования помогает разным специалистам говорить на одном языке, что значительно снижает риск недопонимания и ошибок. Если дизайнер понимает технические ограничения и возможности, ему проще аргументировать свои решения и предлагать реалистичные идеи.
Так, к примеру, дизайнер с базовыми знаниями JavaScript и фреймворка React может разработать интерфейс, адаптированный для работы с этой технологией. Вместо сложных анимаций он предлагает простые CSS-анимации, которые легко внедрить в React, и подробно объясняет, как видит реализацию. Это ускоряет взаимодействие и помогает создать дизайн, полностью совместимый с технологической основой проекта.
“Кодинг пригодится в создании токенов для обозначения разных параметров графических элементов вместо стилей, например, текстовых, цветовых и т.д. С помощью плагина или виджета все необходимые данные можно выгрузить разработчику в виде удобного списка. Например, он будет содержать числовое обозначение цветов, размеры и стиль шрифта, отступы и т.д. После загрузки этих данных в дизайн-систему дизайнер и разработчик будут работать с одинаковыми числовыми параметрами всех элементов макета. Также есть специальные плагины, которые позволяют выгрузить все значения в GitHub. Так, если дизайнер поменяет какой-то параметр в токенах, разработчик сразу увидит те же изменения в среде разработки”, – рассказывает Кирилл Гребенников.
Причина третья: самостоятельность и независимость
Навыки кодинга позволяют работать более автономно. Например, зная основы HTML и CSS, дизайнер может самостоятельно реализовать свои идеи, не прибегая к помощи программистов на каждом этапе. Это особенно полезно при создании прототипов, когда нужно оперативно продемонстрировать идею заказчику.
Допустим, UI/UX-дизайнер, работающий над лендингом, самостоятельно кодирует прототип с анимацией прокрутки и кнопками, которые меняют цвет при наведении. Клиент сразу видит, как будет выглядеть конечный продукт, и может быстрее согласовать проект.
“Еще умение программировать позволяет дизайнеру создавать плагины для Figma, например, чтобы автоматизировать действия, требующие 20 кликов, или передвигать рабочую область для создания макетов (фреймы), располагать объекты в определенной последовательности и не только. Подобные решения уже есть на рынке, и в большинстве случаев они платные. Но ничто не мешает создать их аналоги самому”, – резюмирует специалист.
На какие языки программирования стоит обратить внимание дизайнерам?
Среди полезных языков программирования для дизайнеров выделяются HTML, CSS и JavaScript. Они позволяют разрабатывать интерактивные веб-прототипы и задавать базовые настройки для дизайна интерфейсов. Понимание основ JavaScript, например, помогает создавать простые анимации и управлять взаимодействием на странице.
К примеру, дизайнер, работающий с анимацией интерфейсов, может изучить библиотеку GSAP для JavaScript. Она популярна среди аниматоров, так как позволяет создать плавные, интерактивные эффекты без избыточного кода, и при этом отлично поддерживается браузерами. В результате дизайнер способен показать живую анимацию, которая не создает сложности на этапе разработки.
Для мобильных приложений полезны знания Swift для iOS и Kotlin для Android. Изучив их дизайнерам будет проще понимать ограничения платформ, эффективно сотрудничать с разработчиками мобильных интерфейсов, а также оценивать идеи на этапе концепта.
Так дизайнер с базовыми знаниями Swift может самостоятельно создать прототип для iOS с использованием динамических элементов. Например, перемещающиеся карточки или кнопки, наглядно показывая функционал приложения. Разработчики получают точное представление об идеях дизайнера и могут легко интегрировать такой прототип в Swift-проект, что экономит время и усилия.
