YOUNG

Творчество и инженерный подход: как работает дизайнер интерфейсов

YOUNG
Дарья Лукина
Дарья Лукина

Руководитель направления дизайна компании «Инфомаксимум»

Мария Передок

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

Своим опытом делится Дарья Лукина,  руководитель направления дизайна компании «Инфомаксимум».

Творчество и инженерный подход: как работает дизайнер интерфейсов

Кто такой дизайнер интерфейсов? 

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

Дизайнер проектирует интерфейсы, учитывая следующее:

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

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

Графический дизайнер VS Дизайнер интерфейсов

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


Как узнать своего пользователя и заработать на этом деньги

Есть ли здесь креатив?

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

От сисадмина до руководителя направления дизайна

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

Устроившись в рекламное агентство, я познакомилась с изнанкой работы дизайнера. Именно там впервые проскочила мысль, что мне это тоже интересно. Периодически мне прилетали несложные задачи вроде отрисовки баннера формата «текст плюс фото». Решив более плотно изучить все это, я нашла курсы по Adobe Photoshop и CorelDRAW. Один друг, зная про мой интерес, предложил откликнуться на вакансию веб-дизайнера в компании, где работал. Почему нет? Я выполнила тестовое задание — редизайн сайта — и получила негативный фидбэк. Было неприятно, но в итоге мне предложили выполнять небольшие задачки, например, нарисовать карусель для интернет-магазина, переделать карточку товара, дополнить шапку сайта. Спустя время я все-таки вошла к ним в штат как полноценный веб-дизайнер.

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

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

«Боевое крещение» я прошла в Школе дизайнеров Бюро Горбунова. Для отбора нужно было придумать дизайн сервиса заказа пиццы. Это и стало началом моего пути. Курсы дали мощную теоретическую основу и базовую практику, а также понимание того, на чем следует сделать фокус в будущем. Мы изучали типографику и верстку, информационный стиль текста и основы редактуры, пользовательские интерфейсы и правовые вопросы дизайна и др. 

После окончания курсов долго была в поиске себя — в Саранске не было подходящих вакансий; я изучала иногородние компании и даже участвовала в хакатоне. Там я познакомилась с ребятами из Москвы, которые предложили попробовать себя в столице. Но меня пригласили в «Инфомаксимум» и я осталась здесь. Начинала с создания дизайна мобильного приложения под iOS, работала над планировщиком и только потом перешла к Proceset — сложной системе класса process mining. 

Какие основные этапы работы можно выделить?

1. Понимание задачи

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

2. Разработка сценариев и прототипирование

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

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

3. Передача в разработку

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


Какими навыками и инструментами должен обладать дизайнер

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

Кроме того, для дизайнера интерфейсов важны:

  1. Базовые навыки владения графическими редакторами. Вы можете представить себе повара, который не умеет включать плиту? Так и здесь. Даже если вы привыкли работать в чем-то одном, нужно суметь быстро сориентироваться и изучить азы работы в другом инструменте;
  2. Знание основ юзабилити. Нужно понимать или как минимум иметь представление, как пользователь ведет себя в интерфейсе, на что обращает внимание, сколько времени ожидает отклика. Главное — человек должен легко ориентироваться в приложении или на сайте.
  3. Азы верстки. Знакомство с HTML, CSS, в идеале еще и с JavaScript может помочь на этапе прототипирования, чтобы определить — какие вещи можно реализовать, а от чего лучше отказаться. 
  4. Типографика. Почему уместен тот или иной шрифт, как работать с отступами и интерлиньяжем.
  5. Умение соблюдать единообразие. Если все кнопки справа, нужно, несмотря на какие-то внутренние протесты, также продолжать делать их справа, но при этом ввернуть что-то свое. 

Какие soft skills нужны дизайнеру интерфейсов

Работа в команде

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

Умение находить компромисс

Я не поддерживаю мнение «Я — художник, я так вижу». Считаю, что очень важно понимать и принимать условия, в которых ты работаешь.

Навык аргументации

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

Готовность слышать и воспринимать критику

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

Насмотренность

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


Где работать

Есть три пути, где может найти себя дизайнер интерфейсов:

  • продуктовая компания

Работа над продуктовой линейкой одной компании, чаще всего связанной с одной сферой (финтех, образование, game dev). 

  • аутсорс

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

  • фриланс

Вы вольны выбирать только самые интересные для себя проекты и задачи.

Где поучиться и что почитать

  • Школа дизайнеров Бюро Горбунова

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

  • Джефф Раскин «Интерфейс: новые направления в проектировании компьютерных систем»

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

  • Алан Купер «Психбольница в руках пациентов»

Классика. К прочтению обязательна. Этот труд дает возможность взглянуть иначе на само создание продукта и объясняет, как видеть всю ситуацию «глазами пользователя». 

  • Роберт Брингхерст «Основы стиля в типографике»

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

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

Фото на обложке: Shutterstock / Undrey

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Профессия веб-дизайнер: кто это и чем занимается, как им стать и где учиться
  2. 2 Тестировщик — идеальная работа для геймеров? Да, но всё не так просто
  3. 3 «Это продуманное искусство, заточенное под цифры». Самое главное о карьере в контекстной рекламе