Дизайнер в программировании: Как стать дизайнером в IT-компании

Содержание

Как стать дизайнером в IT-компании — чек-лист от дизайнера Noveo

Ирина

Noveo Senior Designer

Многим творческим людям профессия дизайнера в IT-компании кажется весьма заманчивой. И не зря: это и творчество, и интересные задачи, и работа в команде или соло в зависимости от проекта, и хорошая зарплата. Однако планка входа в профессию поднята высоко. И даже умея рисовать и имея портфолио, можно не стать дизайнером. Ведь кроме того, что нужно освоить большой объем знаний, начинающим специалистам часто приходится бороться с внутренними сомнениями: «А вдруг у меня не получится?».

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

1. Направления в дизайне

Для тех, что хочет стать дизайнером, IT-сфера предлагает следующий выбор*:

Графический дизайнер. Он создает айдентику и логотипы, подготавливает печатные материалы, занимается сувенирной продукцией в рамках бренда. Он рисует иллюстрации, может делать анимацию. Эта профессия подойдёт тем, кто любит и умеет хорошо рисовать.
Дизайнер веб- и мобильных приложений (UX/UI-дизайнер) умеет делать красивые кнопки и атмосферные тени, разбирается в отступах и шрифтах, рисует иллюстрации и иконки, а также продумывает логику работы интерфейсов, анализирует поведение пользователя, тестирует гипотезы и анализирует продукт заказчика. Здесь уже мало уметь рисовать, потребуется развитое аналитическое мышление.
Моушен-дизайнер, оживляющий статичные объекты, — это отдельная профессия. Но иногда навыки моушен-дизайна могут пригодиться и графическому дизайнеру при подготовке рекламы, и UX/UI-дизайнеру при оживлении прототипов для команды и заказчиков.
Продуктовый дизайнер. Некоторые IT-компании работают над одним или несколькими собственными продуктами. Такая профессия понравится тем, кто любит глубоко погружаться в один проект, комплексно развивать его до мельчайших деталей.
Специалисты игровой индустрии. Здесь много привлекательных профессий для любителей игр. Технический дизайнер занимается прототипированием игровых механик, а игровые художники — рисуют персонажей и другую графику для игр. В том числе это могут быть и трехмерная графика, спецэффекты, виртуальная и дополненная реальность.

* Это один из вариантов названия профессий и распределения обязанностей.

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

Почему важно определиться?

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

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

Однако всегда стоит держать в фокусе основное направление и сильно не распыляться, чтобы стать в нём настоящим специалистом, а не универсалом «на троечку». Ознакомиться — да. Но глубоко изучить лучше позже, когда вас уже возьмут на работу по основной специальности.

Итак, вы выбрали. Что дальше? Нет, пока ещё не портфолио 🙂

2. Информационное поле

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

Pinterest;
Behance;
Dribbble;
Awwwards;
Muzli;
Оди;
Smashing Magazine;
Хабр.

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

Важно: эта деятельность не должна быть в тягость! Если вы и так с удовольствием не вылезаете из Pinterest и с радостью бороздите Dribbble и прочие сайты с информацией — вы точно на правильном пути. Если же процесс идёт через силу — вернитесь на шаг 1 и подумайте ещё раз над выбранным направлением.

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

Гайдлайны iOS: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
Гайдлайны Android / Material design: https://material.io/design/

Совет от тимлида отдела дизайна Noveo:

На основе гайдлайнов iOS и Android существует много готовых UI kit’ов. Используя их, можно без труда рисовать приложения. Однако профессиональным дизайнерам необходимо уметь менять эти UI kit’ы так, чтобы приложения получались разнообразными, имели запоминающийся стиль.
Отходя от стандартов, дизайнер должен понимать, для чего он это делает. Нужно уметь учитывать и комбинировать множество вещей:
фирменный стиль;
пожелания заказчика;
гайдлайны ОС;
удобство для пользователя;
возможности разработки и верстки;
возможности восприятия выбранной целевой аудитории;
цели проекта;
современные тренды;
креатив.

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

3. Основные инструменты графического дизайнера и UX/UI-дизайнера

Для разработки макетов долгое время использовался Adobe Photoshop, а для векторных иллюстраций, кроме него, также использовались Adobe Illustrator или Corel Draw. Как сейчас:

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

Для иллюстраций все еще отлично подходят Adobe Illustrator и Adobe Photoshop. Corel Draw почти ушел со сцены, но если нравится, то можно и в нём рисовать. Графику для приложений также можно рисовать, используя Sketch и Figma. Можно также использовать Procreate и Vectornator на iPad или их аналоги на планшетах Android.

Для ряда задач может понадобиться анимация. Здесь владение Adobe After Effects будет вашим явным преимуществом перед другими кандидатами при устройстве на работу. Графический дизайнер, как уже упоминалось, может использовать этот инструмент для создания анимированных баннеров для соцсетей и нашего блога, а UX/UI-дизайнеры с его помощью анимируют прототипы для заказчиков и разработчиков, чтобы показать, как меняются экраны и реагируют на нажатия кнопки.

В общем-то любые редакторы на ваш вкус допустимы к использованию. Однако потом всё равно придется экспортировать свои рисунки в Adobe Illustrator или Adobe Photoshop для полиграфических задач. Или в файл Sketch или Figma для проектов. Эти четыре редактора сейчас наиболее популярны, и если вы хотите стать дизайнером и работать в аутсорсинговой компании, нужно уметь ориентироваться в каждом из них.

4. База знаний

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

основы типографики;
знание хотя бы по верхам основ вёрстки (HTML5, CSS3 и так далее). Да, даже графическому дизайнеру понимание этих основ пригодится при, скажем, вёрстке макета рекламного баннера;
основы юзабилити, то есть понимания того, насколько лёгок и удобен сайт или приложение в использовании;
умение редактировать тексты и грамотно писать на языке и команды, и заказчика. Это необходимо, чтобы уметь последовательно объяснять свои решения и «защищать макеты». К тому же часто дизайнеру самому приходится заполнять макеты осмысленным текстовым содержимым. Lorem ipsum не панацея;
также в нашей компании от дизайнера ещё обязательно потребуется владение английским не ниже уровня B2, достаточного для созвонов и переписок с иностранными заказчиками. Если же в арсенале есть французский — это точно повысит рейтинг среди кандидатов в нашу компанию.

Где учиться?

Сейчас в интернете много статей, просто огромное количество полезной информации. Но без чёткого плана воспользоваться ей с толком не получится.

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

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

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

Можно ли научиться без курсов?

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

5. А вот теперь наконец-то портфолио

Портфолио — важнейший багаж, влияющий на трудоустройство. Прежде чем предложить тестовое задание, работодатель всегда оценивает портфолио кандидатов. Это «одёжка», по которой вас будут встречать. Если всё понравится, то будет предложено тестовое задание, а на устном собеседовании вас могут спросить о той или иной вашей работе. И здесь важно будет уметь отстоять свой дизайн, объяснить, почему было выбрано то или иное решение.

Не стремитесь поместить в портфолио всё сразу. Подумайте, владение какими навыками вы хотите продемонстрировать: работа с фирменным стилем, графикой, сетками, текстом, умение создавать логотипы и иллюстрации и так далее.

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

Способы составить портфолио:

Придумать задачу самому. Например, сделать себе сайт-портфолио на Тильде или придумать собственный сервис, отрисовав экраны в Figma. Будьте внимательны при оформлении макетов, обязательно называйте слои и группы элементов мнемонически (названия типа Layer1, Group 2 — моветон не только в портфолио, а вообще в работе дизайнера).
Сделать раздел с примерами своих иллюстраций и иконок для приложений на Behance, Dribbble или опять же в Figma. Можно оформить и как PDF.
Редизайн. Можно выбрать любую мировую компанию и устроить ей ребрендинг.
Спросить у друзей, не нужен ли им сайт-визитка. Только не увлекайтесь этим способом. Однотипные сайты-визитки не прибавят вес, но как первая работа вполне подойдут.
Поучаствовать в конкурсах. Даже если вы не выиграете, это отличный материал для портфолио.

Что делать с готовым портфолио?

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

6. Софт-скиллы и резюме

Конечно же, портфолио не последнее, о чём нужно подумать. Чтобы стать дизайнером, очень важно развивать в себе ещё так называемые soft skills — навыки, которые формируются в детстве и опираются на личностные особенности человека, а также уровень развития его эмоционального интеллекта и когнитивных способностей. Эти навыки можно развивать и во взрослом возрасте, но придётся приложить усилия.

Дизайнеру очень пригодятся такие soft skills, как:

Умение быстро и эффективно искать информацию в авторитетных источниках.
Быстрая обучаемость.
Умение собирать информацию через опросы пользователей, общение с заказчиком, общение с командой. У дизайнера в компании может быть много коммуникаций, будьте к этому готовы, учитесь сотрудничать и слышать. Если это ваша сильная черта, смело указывайте её в своем резюме.
Умение анализировать полученную информацию. Очень важно. Дизайнер — это в первую очередь аналитик, а потом уже креативная персона.
Умение быстро предлагать идеи, разные способы решения задач. В последнее время может потребоваться делать это сразу в присутствии заказчика и команды благодаря той же Figma, где дизайнер у всех на виду.
Умение не бояться рисковать на этапе мозговых штурмов.
Умение метафорично мыслить. Сможете лаконично графически (без использования слов) изобразить на стикере 2х2см «Я в отпуске до 3 августа»? Если пока нет — тренируйтесь на подобных микрозадачах 🙂
Умение работать в команде, умение убеждать, навыки риторики. Вам часто придётся защищать свои проекты и решения перед заказчиком и командой.
Любопытство, искренняя готовность учиться. В IT-сфере так быстро происходят изменения, что не успевают выпускаться книги. Повторю мысль из начала поста: приходится непрерывно учиться, ловить тренды, и без «встроенной» жажды нового вам попросту будет грозить выгорание.
Умение быстро адаптироваться, не испытывая при этом серьёзного стресса, и стойкость. Это понадобится, чтобы не впадать в отчаяние при изменении техзадания (не удивляйтесь, бывают гибкие проекты, и это не всегда минус) и обилии правок;.
Продуктивность. Тут очевидно зачем, да? Чем быстрее тестируешь гипотезы и решаешь проблемы, тем больше шансов на успех проекта;
Внимание к деталям, умение читать «глазами в голову», понимать до буквы, слышать между строк. Это помогает избегать критических ошибок и предельно четко понимать задачу.

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

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

Удачи! Дерзайте! Все получится!

Нужно ли дизайнеру уметь программировать — Дизайн на vc.ru

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

1964
просмотров

Если вы дизайнер, который умеет кодить, всем вокруг будет приятно. Вам тоже. Вместе с дизайнером ДАЛЕЕ Борисом Бессоновым мы провели исследование, поболтали с коллегами, хорошенько погуглили и нашли убедительные доказательства.

Что хочет от веб-дизайнера его команда

Предположим, что команда состоит из менеджера, фронта, бэка, дизайнера и тестировщика. Мы спросили, какими навыками обладает дизайнер их мечты и входит ли в этот список разработка.

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

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

Менеджер

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

Фронт/верстальщик

Верстальщик или фронтенд-разработчик визуализирует макет в браузере. От качества этого макета зависит скорость работы, ведь на верстку небрежного дизайна уходит больше времени и усилий.

Дизайнер видит на макете картинку, а верстальщик — сетку квадратов. Во время отрисовки дизайнер должен помнить это, чтобы создать красивый и кастомизируемый макет. Для всех заголовков, отступов, текстов верстальщик задает единый стиль, если в дизайне его нет, — лишняя головная боль фронту и QA обеспечена. Допустим, по всему макету применены разные стили для <h2>. Либо придется подгонять все <h2> под один стиль, и тогда тестировщик для каждого «неверного» <h2> поставит сабтаск и потребует объяснение. Либо написать свой стиль для каждого <h2>, а их может быть штук 20 в макете. Представьте, сколько уйдет времени. Для отступов действует простое правило — высота должна делиться на 4: 4, 8, 12 … 64. Это всем известный факт, но дизайнеры часто его игнорируют, и стандартизация в отступах у одинаковых блоков на разных страницах хромает.
Ержан Айтжанов, фронтенд-разработчик ДАЛЕЕ

Бэк

С бэкенд-разработчиком дизайнер в 90% случаев не пересекается. В оставшиеся 10% входят случаи с «костыльной» версткой из-за некачественного дизайна и еще нестандартные решения.

Например, многие задачи бэк решает через циклы. Обычно они используются для повторяющегося контента: колонок с товарами на сайте, галерей с картинками и тому подобного. Допустим, дизайнер нарисовал макет с 4 колонками по ¼ ширины сайта, и формула: 1 повтор цикла = 1 колонка здесь отлично работает. Но на планшетном макете дизайнер решил применить нестандартный подход: колонка 1 занимает 100% ширины, колонка 2 — 50%, а третья состоит сразу из двух вложенных колонок.

Либо бэку придется применять вложенный цикл, а это время, либо фронт переделывает планшетную версию на JS по образцу десктопной по формуле: 1 колонка = 1 повтор. Это тоже время и дополнительная нагрузка на сайт.

Даже QA

Тестировщикам и так по кайфу.

Подводим итог этой главы и получаем аргумент № 1 — если дизайнер знает JS и язык гипертекстовой разметки, он рисует макет, который удобно верстать. Фронт не потратит время на отступы, шрифты и заголовки. Бэкендер натянет все это счастье на движок. Менеджер уложится в сроки, клиент получит продукт. Все довольны.

А будут ли давать больше денег?

От джунов навыков программирования не требуют, в вакансиях часто даже нет требований по HTML/CSS, указан только стандартный набор из Figma/Adobe Photoshop/Illustrator. Но и зарплата соответствующая.

С ростом зарплаты список растет — в требованиях к кандидату появляются HTML, CSS и даже JS. Но верстать сам сайт не просят.

Есть вакансии от тех, кто хочет получить два в одном. Зарплатная вилка примерно на том же уровне.

У классических дизайнеров есть понятная система грейдов от джуна до сеньора, наличие скиллов и их уровень отражаются на зарплате. Знание CSS, HTML, JS, как и, например, насмотренность или изучение гайдов, дают кругозор в технической области, это влияет на качество результата, как следствие, на грейд и зарплату. Фулстек-дизайнерам предлагают достойную зарплату, но вакансий очень мало. Занять такого специалиста на полный рабочий день можно только на экзотическом проекте, единых критериев оценки его эффективности нет, а значит расти в зарплате будет сложнее.
Борис Бессонов
, дизайнер ДАЛЕЕ

Таким образом, аргумент № 2 — знание верстки приблизит вас к уровню мидла или сеньора. С ростом грейда вырастет и зарплата.

То есть нужно просто понимать, в работе использовать не будем?

Еще как будем.

И не только для тестирования прототипа в браузере.

Во-первых, знания HTML/CSS/JS уберегут от факапов. Если дизайнер рисует на сайт сложную анимационную фичу, например, вот такую или такую, лучше сразу делать это на CSS или JS, а не в таймлайне After Effects. Фронту не придется мучительно оптимизировать, а дизайнеру — упрощать механику анимации по ходу дела.

Во-вторых, Борис Бессонов дал нам список из 13 примеров того, что может дизайнер с техническим бэкграундом.

1. Сделать хороший макет, где блоки и слои отсортированы сверху вниз как в HTML-документе, фронт сверстает его в разы быстрее.

2. Сразу адаптировать этот макет под все устройства и браузеры, сверстав его в HTML/CSS.

3. Сразу отрисовать макеты для разных сценариев: имен вроде Константина Константинопольского, поп-апов с ошибками сети, полос прокрутки.

4. Не зафейлить шрифты, выбрать те, которые идут и на Mac, и на Windows, Linux.

5. Показать клиенту настоящий прототип в браузере на реальных данных с помощью JSON и Firebase вместо скриншотов из фигмы.

6. Нарисовать генеративный арт как Спотифай.

7. Использовать инструменты фронтендеров вроде Codepen, чтобы визуализировать идеи и тестировать их, а также библиотеки с UI элементами вроде Code my UI.

8. Использовать подход Components / Autolayouts / Variants, который похож на фронтендерский БЭМ (Блок, Элемент, Модификатор), когда вы рисуете один компонент, например, кнопку «Купить!» один раз, а потом используете еще 10 раз в разных проектах, меняя слово.

9. Настраивать автоматический перенос компонентов в Figma в дизайн-систему.

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

12. Применять Blur без угрозы для скорости сайта. На слабых устройствах без GPU сайты с размытием фона тормозят, поэтому на среднестатистических продуктовых ресурсах эффект встречается редко. Однако если дизайнер знает код, он может заблюрить фон заранее и вставить как обычную картинку. Подробнее — в докладе «Гибридный дизайнер» арт-директора «Газпром нефти» Вадима Матвеева.

13. Вставлять 3D-анимацию, которая не подведет. Например, как в этой статье New York Times. На сайт вставили прозрачный видеоролик и «приправили» параллаксом, вышло стильно, работает даже на слабых устройствах. Об этом мы узнали от Юрия Артюха.

Вывод

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

Короче:

уметь — полезнее, чем не уметь.

Дизайнер против.

Программист: кто чем занимается? | Work

Автор: Johnny Kilhefner Обновлено 21 марта 2022 г.

Дизайнеры и программисты вместе работают в компьютерных отраслях, сотрудничают в создании веб-сайтов и видеоигр. Соответственно, обязанности дизайнера и программиста часто пересекаются на территориях друг друга. Неудивительно, что иногда возникают расхождения в том, кто чем занимается. Западный Губернаторский университет объясняет, что программист включает в себя видение дизайнера, а дизайнер программ создает продукты, которые управляются компьютерными языками.

Роль дизайнера программы

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

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

Роль программиста

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

Различия между ролями

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

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

Кому нравятся роли

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

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

Ссылки

WGU: Индустрия видеоигр Работа: Дизайнер или разработчик
BLS: Программисты

Писатель Био

Джонни Килхефнер — писатель, специализирующийся на технологиях, дизайне и маркетинге. Писал более пяти лет, сотрудничал с Writer’s Weekly, PopMatters, Bridged Design и APMP, а также во многих других изданиях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Здесь все может начать усложняться, но также и весело. Если дизайнер мыслит аналитически или исключительно мотивирован, он получит много пользы от изучения 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. Они также могут постепенно подниматься по служебной лестнице до более высоких, главных, ведущих, менеджерских и директорских ролей.

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

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

Понимание основ

Нужно ли UX-дизайнерам писать код?
UX-дизайнеры, которые могут продемонстрировать знания в области программирования и концепции JavaScript, заслужат уважение разработчиков. Дизайнеры, которые хоть немного могут совмещать программирование и дизайн, могут принести пользу любой междисциплинарной команде и увидят, как открывается больше дверей для больших возможностей трудоустройства.
Должны ли дизайнеры учиться программировать?
Учиться программировать дизайнерам не обязательно. Но если они немного разбираются в коде, они могут понять точку зрения разработчика. Это не значит, что они должны быть опытными программистами. Но им было бы очень полезно, если бы они знали немного о том, как кодировать HTML и CSS, может быть, немного о JavaScript.
Почему важен JavaScript?
JavaScript — важный язык программирования, поскольку его можно использовать для отображения динамических взаимодействий на веб-страницах. В качестве языка сценариев его используют почти 95% всех сайтов. Веб-разработчики могут легко интегрировать сценарии в HTML, чтобы сделать веб-страницы интерактивными и мгновенно реагировать на запросы пользователей.