Дизайнер в ИТ: зачем он нужен и как им стать

У «Прак­ти­ку­ма» открыл­ся дизай­нер­ский факуль­тет, там обу­ча­ют веб-дизайну и интер­фей­сам. Мы собра­ли отве­ты на рас­про­стра­нён­ные вопро­сы об этой рабо­те. Вопро­сы под­би­ра­ли мак­си­маль­но базо­вые, что­бы за них крас­не­ли мы, а не наши люби­мые читатели.

Кто такой дизайнер и зачем он нужен?

Допу­стим, вы напи­са­ли что-то в поис­ке Яндек­са. Яндекс нашёл 10 тысяч отве­тов. Яндекс хочет, что­бы вы как мож­но ско­рее нашли то, что вам нуж­но. Как эту зада­чу решить?

  • Пока­зать вам резуль­та­ты в один стол­бец или несколько?
  • Что пока­зать в каж­дом резуль­та­те? Назва­ние сай­та, кусок тек­ста, вре­мя и часы рабо­ты, иконку?
  • Нуж­но ли выво­дить пря­мой ответ на ваш вопрос? Или давать опре­де­ле­ние сло­ву? Или пусть чело­век кли­ка­ет по сайтам?
  • Если нашлись кар­тин­ки — пока­зы­вать ли их?
  • Если по ваше­му запро­су нашлись реклам­ные объ­яв­ле­ния — как их пока­зы­вать? Выде­лять ли как-то?
  • Выде­лять ли реаль­но хоро­шие сай­ты или доста­точ­но про­сто пока­зать их в начале?
  • Каким цве­том пока­зы­вать назва­ние сай­та, сопро­во­ди­тель­ный текст и вся­кие допол­ни­тель­ные метки?
  • Если у Яндек­са есть сер­ви­сы, кото­рые вам могут быть полез­ны в свя­зи с вашим запро­сом, — как их рекламировать?
  • Как сде­лать так, что­бы вы удо­вле­тво­ри­лись резуль­та­том поис­ка и при­шли в Яндекс за новы­ми ответами?
  • Какие нуж­ны шриф­ты, цве­та, рас­сто­я­ния? Какой шири­ны долж­ны быть бло­ки? Сколь­ко бло­ков выво­дить на одной стра­ни­це? Нуж­но ли под­гру­жать новые резуль­та­ты по мере скролла?

В зави­си­мо­сти от отве­тов на эти вопро­сы мы полу­чим три раз­ные стра­ни­цы поис­ко­вой выда­чи. От того, насколь­ко вам понра­вит­ся ито­го­вая выда­ча, зави­сит то, при­дё­те ли вы сюда сно­ва. От это­го зави­сит, сколь­ко Яндекс смо­жет при­влечь поль­зо­ва­те­лей и зара­бо­тать денег.

Отве­ты на эти вопро­сы неоче­вид­ные и тре­бу­ют про­вер­ки. Дизай­не­ры нуж­ны, что­бы зада­вать эти вопро­сы и нахо­дить луч­шие решения.


Яндекс сей­час: сра­зу даёт­ся опре­де­ле­ние сло­ва, сбо­ку выва­ли­ва­ют­ся кар­тин­ки, со всех сто­рон мне рекла­ми­ру­ют сер­ви­сы и мессенджер 

Та же выда­ча, но дру­гие дизай­нер­ские реше­ния: выда­ют­ся толь­ко сай­ты, ника­кой допол­ни­тель­ной рекла­мы, выда­ча зани­ма­ет всю шири­ну в нуж­ное коли­че­ство коло­нок. Дру­гие цве­та, рекла­ма выде­ля­ет­ся яркой жёл­той плаш­кой. Эта стра­ни­ца — след­ствие дру­гих дизай­нер­ских решений. 

Ещё один вари­ант дизай­на: выда­ча обес­цве­че­на, шрифт ради­каль­но круп­нее, ника­кой допол­ни­тель­ной рекла­мы и опо­зна­ва­тель­ных зна­ков. Ста­ло ли луч­ше, понят­нее, яснее и полезнее? 

Зачем дизайнеры в ИТ?

Корот­кий ответ — во имя капи­та­ли­за­ции (то есть ради денег).

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

Вот при­мер:

👉 Был интернет-магазин спор­тив­но­го пита­ния. Люди при­хо­ди­ли, реги­стри­ро­ва­лись, добав­ля­ли това­ры в кор­зи­ну, оформ­ля­ли зака­зы. Часть людей отва­ли­ва­лись на реги­стра­ции — то почту не пом­нят, то не хотят ука­зы­вать своё насто­я­щее имя, то ещё что-то. Ну отва­ли­ва­лись и отваливались.

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

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

Нако­нец дизай­нер смек­нул, что людям нуж­но регу­ляр­но зака­зы­вать спорт­пит, и он при­ду­мал кноп­ку «Полу­чать регу­ляр­но со скид­кой». Он пред­ло­жил идею руко­во­ди­те­лю, они вме­сте посчи­та­ли эко­но­ми­ку и выяс­ни­лось, что это может сра­бо­тать. Внед­ри­ли, часть людей ста­ли под­пи­сы­вать­ся и немно­го уве­ли­чи­ли выруч­ку магазина.

Что значит «графдизайн» или «UX-дизайн»?

В дизайне мно­го направ­ле­ний. Вот крат­кий обзор:

Гра­фи­че­ский дизайн — про кра­со­ту: икон­ки, тени, линии, тек­сту­ры, лого­ти­пы, цве­та. Граф­ди­зай­нер отве­ча­ет за общее эмо­ци­о­наль­ное настро­е­ние сай­та или про­дук­та. Он весё­лый или дело­вой? Он мяг­кий или бое­вой? Что чита­тель дол­жен чувствовать?

Вот в каче­стве при­ме­ра несколь­ко сай­тов с раз­ным ощу­ще­ни­ем от гра­фи­ки и иллю­стра­ций. Какие у вас эмо­ции в свя­зи с каж­дым из них?


Сайт про­грам­мы для меди­та­ции и осо­знан­но­сти — headspace.com

Сайт крос­с­фи­то­во­го спорт­за­ла на Маль­те — crossfitmartell.com

Сайт CRM-системы для мало­го биз­не­са — mailchimp.com

Лич­ный каби­нет кур­са про дизайн в «Прак­ти­ку­ме»

UX-дизайн — это про user experience, то есть как поль­зо­ва­тель вза­и­мо­дей­ству­ет с про­дук­том. Вот я уста­но­вил при­ло­же­ние — как меня обу­чат им поль­зо­вать­ся? Какие он дол­жен слать мне уве­дом­ле­ния и в какой момент? Как мне сме­нить имя или загру­зить свою фотографию?

Дизайн интер­фей­са — у меня есть кон­крет­ный экран или серия экра­нов. Какие и где долж­ны быть кноп­ки? Како­го они долж­ны быть раз­ме­ра, что­бы мне было удоб­но? Где и как долж­ны выва­ли­вать­ся под­сказ­ки? Что я дол­жен уви­деть в слу­чае ошибки?

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


Кар­тин­ка — из рекла­мы Squid, это набор гра­фи­че­ских эле­мен­тов для про­грам­мы Sketch

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


Дизайн глав­ной стра­ни­цы Яндек­са в 1997, 2003 и 2013 году отра­жа­ет изме­не­ния веб-дизайнерской моды. Сту­дия Арте­мия Лебедева

Про­дук­то­вый дизайн — напри­мер, мы рабо­та­ем в «Яндекс-такси». Кому-то при­шла идея сде­лать в при­ло­же­нии функ­цию «Раз­го­вор­чи­ки в проб­ке»: чатик для тех, кто едет в проб­ке рядом друг с дру­гом. Про­дук­то­вый дизай­нер сна­ча­ла раз­бе­рёт­ся, насколь­ко эта воз­мож­ность будет вос­тре­бо­ван­ной и кому при­не­сёт поль­зу. Если выяс­нит­ся, что эта функ­ция нуж­на и она соот­вет­ству­ет общей стра­те­гии раз­ви­тия про­дук­та, — нач­нёт­ся раз­ра­бот­ка прин­ци­пи­аль­ных момен­тов: кто дол­жен гово­рить с кем? На каком рас­сто­я­нии? Что, если там будут гово­рить гадо­сти? Что, если люди захо­тят про­дол­жить обще­ние вне проб­ки? Когда он отве­тит на все эти вопро­сы, он оза­да­чит UI, UX и гра­фи­ков, что­бы те вопло­ти­ли задум­ку в жизнь.

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

Нужно ли уметь рисовать?

Чаще все­го — нет. Дизайн в ИТ — это рабо­та с вир­ту­аль­ны­ми гра­фи­че­ски­ми объ­ек­та­ми в про­грам­мах. Кноп­ки, поля вво­да и кар­ты поль­зо­ва­тель­ско­го опы­та за вас нари­су­ют маши­ны, поэто­му сто­ять у моль­бер­та пять лет необязательно.

Но есть и исключения:

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

В целом уме­ние рисо­вать людей или пред­став­ле­ние о рабо­те све­та в про­стран­стве не осо­бо вли­я­ют на дизайн про­дук­та и интерфейса.

А что тогда нужно уметь?

Пара­док­саль­но, но глав­ные зна­ния дизай­не­ра — это зна­ния о чело­ве­ке. Например:

  • Как чело­век запо­ми­на­ет инфор­ма­цию? Как он запом­нит, где искать наш товар? Если мы ему дадим про­мо­код — как он его запом­нит и применит?
  • Как у чело­ве­ка выра­ба­ты­ва­ют­ся при­выч­ки? Что нуж­но, что­бы он начал зака­зы­вать толь­ко у нас? Дофа­мин­чик, уве­дом­ле­ния, соци­аль­ное одоб­ре­ние, гей­ми­фи­ка­ция — вот это хлеб дизайнера.
  • Как чело­век при­це­ли­ва­ет­ся? Како­го раз­ме­ра долж­на быть кноп­ка, что­бы в неё было лег­ко ткнуть? А если это не кноп­ка, а боль­шая фотография?
  • Сколь­ко сто­ят чело­ве­че­ские дей­ствия? Насколь­ко чело­ве­ку слож­но каж­дый раз зано­во впи­сы­вать домаш­ний адрес в фор­му достав­ки? Что луч­ше — спря­тать кон­тент за клик, за свайп или за скролл?
  • Как люди при­ни­ма­ют решения?
  • Что вли­я­ет на чело­ве­че­ские эмо­ции? Как взбе­сить или рас­сла­бить чело­ве­ка, исполь­зуя пик­се­ли? Как сде­лать так, что­бы чело­век после зака­за почув­ство­вал себя хоро­шо, удо­вле­тво­рён­но? Как пока­зать, что у нас доро­го или дёше­во, не пока­зы­вая цены?
  • Как люди чита­ют? Как они сколь­зят по тек­сту и выцеп­ля­ют нуж­ную для себя информацию?
  • Како­го раз­ме­ра чело­ве­че­ский палец? Насколь­ко хоро­шо он им управ­ля­ет? Мож­но ли паль­цем поста­вить под­пись? Мож­но ли паль­цем ткнуть в кноп­ку? А какой долж­на быть кноп­ка, что­бы в неё было удоб­но ткнуть пальцем?

И далее в таком духе.


Игра User Inyerface — при­мер наме­рен­но ужас­но­го, дья­воль­ско­го, неудоб­но­го, нече­ло­веч­но­го интер­фей­са. Это такая игра: прой­ди все интер­фейс­ные испы­та­ния и ощу­ти боль поль­зо­ва­те­ля, кото­ро­му кто-то пло­хо нари­со­вал интер­фейс. Залип­ни­те (если смо­же­те): userinyerface.com

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

Вот это и есть дизайн.

Сколько платят

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

Граф­ди­зай­не­ры — от 40 тысяч. Есть кате­го­рия дизай­не­ров, кото­рые зани­ма­ют­ся толь­ко кар­тин­ка­ми: реклам­ны­ми листов­ка­ми, бан­не­ра­ми, вся­кой кра­со­той. Сидишь, кол­ла­жи­ру­ешь, кай­фу­ешь, вно­сишь правочки.

Дизай­не­рам интер­фей­са и UX пла­тят от 150 до 200 тысяч. Нуж­но зани­мать­ся иссле­до­ва­ни­ем людей и про­ек­ти­ро­вать про­дук­ты так, что­бы про­дук­та­ми было удоб­но поль­зо­вать­ся. Обыч­но это рабо­та в круп­ных ИТ-компаниях с соц­па­ке­том, напол­нен­ным соч­ны­ми плюш­ка­ми и хру­стя­щим печеньем.

Про­дук­то­вый дизай­нер — от 150 тысяч. Это ред­кий зверь, и спрос на систем­ное про­ек­ти­ро­ва­ние про­дук­тов пока что невы­со­кий. Но когда ком­па­ния зара­ба­ты­ва­ет на ИТ-продуктах, она вынуж­де­на рано или позд­но об этом задумываться.

Веб-дизайнеры — от 50 до 150 тысяч руб­лей. В Рос­сии всё ещё есть ком­па­нии, кото­рые дела­ют сай­ты, и в эти ком­па­нии все­гда нуж­ны дизай­не­ры. Уро­вень зар­пла­ты зави­сит от кру­то­сти дизайн-студии. Мно­го правочек.

Что по половозрастному составу? Я девочка, и мне 18 лет

Если ты смог­ла (или смог) про­чи­тать эту ста­тью, у тебя есть всё, что­бы стать дизай­не­ром. Про­сти, но тут нико­му не инте­ре­сен твой пол, воз­раст, ген­дер, соци­аль­ная иден­тич­ность и поли­ти­че­ские взгля­ды. Прин­ци­пы дизай­на осно­ва­ны на прин­ци­пах равен­ства, юза­би­ли­ти и зако­на Фитт­са.

Нужно ли покупать программы, чтобы быть дизайнером?

Для UI и UX-дизайна есть бес­плат­ные программы.

Для граф­ди­зай­на, ско­рее все­го, пона­до­бят­ся «Фото­шоп» и «Иллю­стра­тор», они плат­ные. Но есть и бес­плат­ные альтернативы.

Обязательно ли иметь планшет, чтобы быть дизайнером?

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

А большой монитор?

Боль­шой мони­тор ещё нико­му не навре­дил. Но вооб­ще это вопрос удоб­ства: рабо­тать над боль­шим маке­том на малень­ком мони­то­ре неудоб­но — как ехать в пере­пол­нен­ной марш­рут­ке. Доехать-то вы доеде­те, но зачем так ехать?

Преж­де чем поку­пать боль­шой мони­тор, попро­буй­те на малень­ком. Так как есть нюанс: есть про­сто боль­шие мони­то­ры (они недо­ро­гие), а есть с про­фес­си­о­наль­ной цве­то­пе­ре­да­чей. Если вы зани­ма­е­тесь UI и UX, вам эта цве­то­пе­ре­да­ча не нуж­на. А если вы гра­фик — нужна.

С чего начать заниматься дизайном (бесплатно)

Ковод­ство Лебедева
Сове­ты бюро Горбунова
Awdee — жур­нал о циф­ро­вом дизайне

Где учиться дизайну (бесплатно, потом платно)

Прак­ти­кум
Прак­ти­кум
Потом мож­но в Прак­ти­кум ещё попробовать

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

А я слышал, что для работы дизайнером нужен дизайнерский диплом

Навер­ное, вам так ска­за­ли в дизай­нер­ских вузах. Это, конеч­но, пол­ная чушь.

Боль­шая часть про­грам­мы дизай­нер­ских вузов — это «Кон­цеп­ту­а­ли­за­ция и визу­а­ли­за­ция визу­аль­ных кон­цеп­тов в раз­ре­зе историко-культурных ген­дер­ных про­цес­сов», то есть воз­душ­ные зам­ки на соп­лях. И ещё 100 часов рисо­ва­ния за мольбертом.

Не трать­те моло­дые годы на буб­нёж неудав­ших­ся дизай­не­ров, иди­те сра­зу рабо­тать в индустрию.

Хотите в дизайн? Вам в Практикум!
Уметь рисо­вать не обя­за­тель­но, а то и вооб­ще не нуж­но. Обу­чим про­фес­сии интер­фейс­но­го дизай­не­ра, как в луч­ших домах.