UI/UX

Как стать дизайнером интерфейсов: 7 ответов на все вопросы

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

Моя история

Трогать фотошоп я начал в 2010. Делал не интерфейсы, не веб-дизайн, а всякую мелкую графику для форумов: сиги, гигабары — старички вспомнят. Источником знаний были текстовые и видеоуроки, в основном, по Фотошопу и Иллюстратору. Тогда еще мое информационное поле не было набито интерфейсами, а только наполнялось разными инструментальными навыками, например, эффектами в Фотошопе.

1_T6SA4SvyrUvrADAckZZIQQ

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

1_59s6zk2E6-LoewDDuH5hEQ

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

Иногда брал заказы на фрилансе: бывало, нужно сделать логотип, а пару раз даже рисовал сайты.

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

1_GeJAOAVggMTN_1rU_xBqmQ

Знаю, что такое дизайн

Навыки: пока никаких.

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

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

Литература

Также, посмотрите как создают интерфейсы известные компании и люди: Студия RightАгенство SFCDOnyBuroBuroСтудия Артемия ЛебедеваБюро Артема ГорбуноваИлья БирманДанила Ковчий. Делать на уровне сразу не получится, но взять как ориентир и стремиться — хороший план.

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

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

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


Могу что-то нарисовать

Навыки: 📜 типографика и верстка, 🔨 графический редактор.

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

Мейнстримными графическими редакторами являются Sketch и Figma. Скетч все еще стандарт для индустрии, но многие команды постепенно переходят на Фигму.

Литература

  • Типографика и верстка. Артем Горбунов. Основа дизайна интерфейсов — правила типографики и верстки, потому что мобилки перекочевали из веба, а веб из печатной продукции.
  • Подборка советов «Типографика и верстка». Бесплатная версия упомянутой книги в виде нескольких советов-статей на сайте Бюро.
  • Дизайн-альманах Readymag. Подробные статьи про типографику, сетку, цвета и анимацию. Если последнее на этом уровне не так важно, то первые три темы будут очень полезны.
  • Графический интерфейс. Данила КовчийДостаточно абстрактная, но не менее интересная статья про системный подход к разработке интерфейсов.
  • Sketch App — Вводный курс. Первый попавшийся под руку видеокурс по Скетчу. Не смог найти никаких уроков за 2019 год, хотя Скетч сильно изменился в последних версиях. Но для понимания что происходит и как сделать базовые вещи — пойдет.
  • Figma Guide. Саша Окунев. Саша написал подробную книгу про Фигму, которой хватит, чтобы погрузиться в инструмент и начать в нем что-то рисовать.

Сейчас нужно научиться делать что-то руками. Не важно, получится ли что-то полезно, главное — процесс.

Уроки по инструментам. Берем литературу по Скетчу или Фигме и пробуем все инструменты. Советовать какой-то редактор нет смысла — если есть возможность, попробуйте оба и решите, какой вам нравится больше.

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

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

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


Могу решить дизайнерскую задачу

Навыки: 📮 решение задач, 🏭 дизайн-процесс.

Литература

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

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

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

— Костя Горский

/

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

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


Могу помочь пользователям

Навыки: 🔮 проектирование интерфейса, 👩‍💻 исследование пользователей.

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

  • Самой задачей,
  • Эвристиками интерфейсов,
  • Сложившимися паттернами,
  • Ограничениями среды и платформы,
  • Чувством вкуса,
  • Эмпатией,
  • Данными с исследований.

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

Литература

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

Запрототипируйте решение и покажите друзьям. Пусть потыкают в интерфейс и скажут, что они думают. Совпали ответы с вашими ожиданиями? Если нет, то у вас появятся мысли как улучшить прототип.


Понимаю как работают продукты

Навыки: 💼 понимание бизнеса, 🤖 код.

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

Хорошо дизайнит тот, кто дизайнит последним.

— Артем Поликарпов

/

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

Литература

Попробуйте создать маленький продукт сами: придумайте идею, спросите друзей, посмотрите на аналоги, нарисуйте макеты, сверстайте на HTML/CSS/JS и попробуйте запустить в интернете, чтобы была ссылка. Для вас откроется много нового: много идей никому не нужны, ваши картинки сложно верстать, запускать продукты не очень просто и другие, кажущиеся очевидными сейчас, мысли.


Могу работать в команде

Навыки: 👋 коммуникация.

В индустрии существует какое-то среднее понимание, чем человек с определенной ролью будет заниматься. С дизайнерами интерфейсов это обычно:

  • Знание нужного стека инструментов,
  • Анализ задачи и проблемы,
  • Проектирование сценариев,
  • Разработка визуальной концепции,
  • Тестирование на пользователях (хотя бы коридорное),
  • Презентация решений команде и клиенту,
  • Рефакторинг и передача макетов в разработку,
  • Авторский надзор.

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

  • Sketch или Figma для дизайна интерфейсов,
  • Miro для совместного обсуждения картинок,
  • Zeplin для передачи макетов разработчикам,
  • Invision для создания интерактивных прототипов,
  • Slack для общения.

Зарегистрируйтесь, потыкайте — на работе наверняка пригодится.

Литература

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


Что дальше

Составьте план

Саша Бизиков был разработчиком, а потом за год стал младшим дизайнером интерфейсов в Фанбоксе. Он подошел к делу осознанно: нашел материалы, составил план изучения, сходил в школу Яндекса и выполнял тестовые. В своем блоге он рассказал, как составлял план и шел к цели: ЦельИнструмент и План.

Кстати, в блоге Саши много заметок о том, как он пробовал в себя в дизайне и какие ошибки совершал.

Выберите направление

Рядом с дизайном интерфейсов живут разные специализации.

  • Дизайн интерфейсов. Есть классические дизайнеры интерфейсов (UI/UX), которые занимаются и проектированием сценариев, и визуальным дизайном.
  • Продуктовый дизайн. Тот же дизайн интерфейсов, но больше ответственности, так как дизайнер отвечает за весь дизайн продукта и те чувства, которые продукт вызывает. В продуктовом дизайне по-другому формулируются задачи и вообще процесс работы.
  • UX-дизайн. Некоторые компании ищут узких спецов. «UX-проектировщики» — проектируют интерфейсы без оглядки на эстетику и трансляцию бренда
  • UI-дизайн. Те, кто по вайрфреймам первых готовит финальный дизайн.
  • Коммуникационный дизайн. Если у вас получается больше рисовать, чем проектировать — вам может быть ближе графический или коммуникационный дизайн. Продуктам часто требуются дизайнеры, которые будут заниматься брендом, иллюстрациями, презентациями, промосайтами и всей графикой.
  • Исследования. Посмотрите в сторону пользовательских исследований. Если в компаниях хорошо развит дизайн-процесс, часто они прибегают к помощи исследователей, которые готовят юзабилити-тестирования, проводят воркшопы, выявляют нужные фичи и находят боли пользователей. Посмотрите видео Натальи Стурза про команду UX-исследователей.

Соберите портфолио

Есть три способа оценить дизайнера при приеме на работу: портфолио, собеседование и тестовое задание. На собеседовании обычно спрашивают общие вопросы: «Какими инструментами пользуетесь?», «Как вы работаете над задачей от начала до конца?», «Как проверяете, что достигли успеха?», «Разработчики говорят, что запрограммировать интерфейс слишком дорого. Ваши действия?». Собеседование показывает, знает ли кандидат область и его ли это работы (хотя бы приблизительно).

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

Главная задача страницы проекта такая же, как у презентации интерфейса кому-нибудь: доказать, что вы справились с задачей. Вот что нужно показать на странице проекта:

  • Название продукта, сайта или приложения,
  • Задача,
  • Ваша роль,
  • Картинки с интерфейсом,
  • Небольшой пояснительный рассказ, что было сделано и почему,
  • Ссылка на результат (сайт, приложение или продукт).

А где взять первые проекты? Можно придумать задачи самому: перерисовать какой-то сайт, заредизайнить стремное приложение или закреативить новый продукт. Это сложно, но интересно.

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

Придумали крутую идею, сделали пару тестовых, оформили это всё в виде сайта и можно в бой.

Устройтесь на стажировку

Если вы прочитаете всю теорию из этой статьи, все равно не получится сделать крутой интерфейс без практики (ваш К. О.). Именно на настоящей работе статьи впитываются, навыки оттачиваются и появляется ощущение контроля процесса.

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

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

Стажировки можно найти на сайтах с поиском работы (HHSuperJob), на сайтах больших компаний (ЯндексJetBrains), в сообществах дизайнеров (Криэйтив Раша). Тут все просто: гуглите везде «стажировка ui ux» и проверяете информацию на адекватность.

На стажировках часто просят сделать тестовое задание. Но вы уже с этим знакомы, поэтому тестовое задание — еще один проект в портфолио!


Если вы запомните три вещи, то

  1. Поглощайте всю информацию по теме. Фильтры появятся сами и чуть позже.
  2. Делайте много картинок. Когда-нибудь они начнут нравиться другим людям.
  3. Устройтесь на работу, потому что там практика и знания.