{"id":4099,"title":"\u0422\u0435\u0441\u0442: \u0434\u0438\u0437\u0430\u0441\u0441\u0435\u043c\u0431\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u0432\u0430\u0448\u0435 \u0431\u0435\u0441\u0441\u043e\u0437\u043d\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435","url":"\/redirect?component=advertising&id=4099&url=https:\/\/vc.ru\/special\/psychoanalysis&hash=d33841813ceca9fc84a1c7d5d25eaaaccdc5d00debd4904d498ec081a76e329c","isPaidAndBannersEnabled":false}
Дизайн
WANNABELIKE

Реально ли дизайнеру «заговорить» на языке разработки, а главное — зачем?

Меня зовут Серёжа Попов. Я занимаюсь разработкой более десяти лет, руковожу фронтенд-продакшном «Лига А.» и управляю талантами в HTML Academy. Я вижу две взаимосвязанные проблемы: дизайнеры не понимают техническую сторону, а разработчики — принципы дизайна, и это мешает.

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

Дизайнер и разработчик — инь и янь

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

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

Часто разработчики читают в ТЗ: «при прокрутке этот элемент вылетает справа, этот — слева». Делают, как написано, а потом начинается «здесь надо чуть быстрее, здесь — медленнее, здесь — плавнее». Чем больше неочевидного интерактива (калькуляторы, сложные слайдеры), тем выше вероятность запутаться. Например, дизайнер задумал два блока рядом — в одном ссылки, в другом картинки. И нужно, чтобы при нажатии они менялись местами. Моя реакция: «What?! Никогда бы не подумал, что так может быть».

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

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

Макс Авдеев
основатель дизайн-студии MAX

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

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

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

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

Чтобы дизайнер и разработчик могли лучше понять друг друга, им нужно уметь говорить на одном языке. Много дизайнеров на рынке уже увидели эту возможность и стали изучать программирование пару лет назад. Я тоже заметила этот тренд и в 2016 году пошла учиться в Moscow Coding School. Разработчики, кстати, тоже стали частыми гостями на курсах по основам дизайна и визуального восприятия интерфейсов. После курса мы с MCS сделали совместный проект — объясняли основы дизайна для менеджеров и разработчиков, которые хотят лучше разобраться в предмете и наладить коммуникацию с дизайнерами из своих команд.

Александра Ермоленко

руководитель команды дизайна-сервисов Mail.ru Group

Научиться коду можно

Попробую развеять главные страхи, которые наблюдаю у дизайнеров при слове «код».

Страх #1. Для этого нужен технический склад ума. Все программисты с трех лет собирают микропроцессоры.

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

Страх #2. Нужно освоить сложный около-фронтенд инструментарий: систему контроля версий, текстовые редакторы, сборщики, автоматизация и прочее.

Реальность. Когда говорят «дизайнеру нужно учить код», речь не о том, чтобы разворачивать проекты, работать с консолью или файловой структурой или настраивать сервер. Например, в интенсиве мы используем Webflow — no-code конструктор сайтов. Он избавляет от всего фронтенд инструментария благодаря шаблонам. Дизайнер может создавать каркасы страниц, публиковать проекты одной кнопкой, подключать сторонние сервисы и не только. И, зная код, он может интегрировать его в готовые страницы, чтобы кастомизировать сайт: делать слайдеры, галереи, анимацию, аккордеон, онлайн-оплату.

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

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

Александра Ермоленко
руководитель команды дизайна-сервисов Mail.ru Group

Я обучаю трем языкам, на которых основана веб-разработка:

  • HTML — язык разметки.
  • CSS — таблицы стилей.

  • JavaScript — язык программирования. Есть пласт JS, который взаимодействует с интерфейсами, и он прост для понимания.

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

Пример проекта, который можно собрать на Webflow,  если немного разобраться в коде

Хорошо, вы научитесь кодить. А зачем?

Бенефиты могут быть разные.

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

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

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

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

Когда ты знаешь, что в принципе может разработка, то расширяются границы. Например, вот эту анимацию можно сделать кодом, а не рисовать в Афтере. И уже можно придумывать более сложные технические истории и выходить на новый профессиональный уровень. Развязываются руки, клиенты офигевают и думают/говорят: «Как это он придумал?!»

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

И еще! Недобросовестные разработчики не смогут обмануть дизайнера, знающего код. Вы просто скажете: «А вот используйте keyframes, че вы, вот вам ссылка на стэковерфлоу или на кодпэн, я там подкрутил, поглядите, все работает, все реально». Шах и мат! Можно пойти выпить кофе за это:)

Макс Авдеев
основатель дизайн-студии MAX

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

{ "author_name": "WANNABELIKE", "author_type": "self", "tags": ["2","1"], "comments": 14, "likes": 3, "favorites": 35, "is_advertisement": false, "subsite_label": "design", "id": 242510, "is_wide": false, "is_ugc": true, "date": "Fri, 07 May 2021 12:10:14 +0300", "is_special": false }
0
14 комментариев
Популярные
По порядку
Написать комментарий...
7

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

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

Ответить
4

Брать 36 килорублей за обучение Webflow, в то время как у Webflow есть прекраснейший https://university.webflow.com/ где весь объем информации в превосходной подаче можно получить совершенно бесплатно. Вывод: учите английский.

Ответить
3

Курс не про вебфлоу и не про то, как им пользоваться. 

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

Ответить
2

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

Ответить
0

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

Ответить
1

Во 1вых, не увидел спич на тему того, как разработчик читает Нормана, проходит курс по UX или смотрит видос от Яндекс практикум.
Во 2торых, я так понял дизайнер должен быть дохера подкованным и это все игра на одной стороне, тк требований к базовым принципам UX для разработчиков я не нашёл.
PS
Нашёл внизу в двух словах.

Ответить
2

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

Ответить
0

Бро, только ты в праве устанавливать себе лимиты и минимальные системные требования. Профессиональная ориентация — это не решает 👀

Ответить
0

И вообще, какие лимиты. Давайте быть БЕЗГРАНИЧНЫМИ? :-)

Ответить
1

Сережа 🤦

Ответить
1

Серёженька 🤦‍♂️

Ответить
2

Серёня 🤦

Ответить
1

Сержик :))

Ответить

Комментарий удален

Комментарий удален

0

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

Ответить
Читать все 14 комментариев
Evrone News #04: сравниваем кроссплатформенные фреймворки, вспоминаем DevOps-продукт, хвалимся новым клиентским кейсом

Анонсируем новые материалы Evrone для тех, кто любит копаться в проектах и деталях разработки. Сегодня — разбираемся в технологиях, вспоминаем дорогой нашему сердцу (правда, архивный) внутренний проект, на котором мы учились DevOps’ить и управлять, и показываем клиентский кейс.

Как начать экспортировать и продавать свои товары онлайн: советы Почты России

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

Сооснователь «Самоката» — о первых деньгах, армейском опыте, конкуренции между сервисами и транспорте курьеров

Вячеслав Бочаров окончил военно-финансовое училище, два года отслужил по контракту в Чечне, а потом ушел в ритейл и логистику — работать с «Магнитом» и «Почтой России». Теперь он развивает свой стартап, оборот которого за прошлый год — 9,7 млрд рублей.

Кейс. Как увеличить конверсию приложения на 6,3% за счет графического ASO?

Показываем на примере приложения для занятий спортом, как с помощью качественной и продающей графики на странице в Google Play увеличить конверсию из просмотра в установку на 6,3%. Бонус: пять примеров конвертирующей графики.

Декаданс венчурного капитала: как взращиваются современные «единороги»

DoorDash предлагал клиентам пиццу за $16 из ресторана, где она стоит $24. Сервис проката самокатов Bird терял $27 на каждые заработанные $10. Примеров компаний, предоставляющих субсидируемый инвесторами сервис, масса: Uber, WeWork, Airbnb и другие. Весь их «дистрапшн» — продажа доллара за полцены.

Уроки 2020 года или как мы выросли в два раза быстрее рынка
NYT: руководители Google уходят из-за главы компании Сундара Пичаи — он медлит, не рискует и зациклен на мнении общества Статьи редакции

«Ещё никогда не было так легко убедить руководителей Google отказаться от стабильной семизначной зарплаты ради возможности работать в другом месте», — говорят в Кремниевой Долине.

Сундар Пичаи The Verge
TikTok Hashtag Challenge: как запускать рекламные кампании, которые процитируют миллионы пользователей

Реклама конкурирует со всем существующим контентом, и простых просмотров уже недостаточно, чтобы привлечь внимание аудитории к бренду. 64% пользователей хотят, чтобы бренды обращались к ним лично. 57% увеличивают расходы, когда это происходит.

Сервис Pump запустил подписку на бензин и заправку без участия водителя в Москве, Петербурге и Сочи Статьи редакции

Количество бензина в баке контролируют датчики, а заливает топливо заправщик.

Курс биткоина и других криптовалют упал на 10-37% на фоне запретов майнинга в Китае Статьи редакции

Альтернативные криптовалюты пострадали больше, чем биткоин, отмечают эксперты.

Starlink запланировала покрыть всю планету спутниковым интернетом в сентябре 2021 года Статьи редакции

После выхода спутников на рабочую орбиту компания начнёт переговоры о предоставлении услуг со странами.

Комментарии
null