Эта статья для новичков. Статья расскажет, как стать дизайнером с нуля. Ресурсов из статьи хватит, чтобы вырасти до стажера-дизайнера, если практиковаться самостоятельно. Статья отвечает на вопрос «Я хочу стать дизайнером интерфейсов. Что мне делать?»

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

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

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

Дизайн литература:

• § 149. Решение задач. Про суть дизайна;
• § 167. Метод прогрессивного джипега. Метод применяются на всех этапах дизайна, и не только дизайна. Сильно помогает выдавать результат и управлять качеством работы на всех этапах дизайн-процесса.
• Что значит «сделать». Отличие «деланья» от «сделанья». Как планировать дела так, чтобы действительно их сделать;
• Константин Горский. Как делать дела. Лекция на аналогичную тему;
• Максим Ильяхов. Как важно быть полезным. О продвижении продуктов через пользу для людей;
• Не провалить задачу. Как задавать правильные вопросы, понять задачу, наметить план и решить задачу;
• Илья Бирман. Понимание задачи. Илья рассказывает про Бюрошный документ «Понимание задачи», который ребята составляют для каждого проекта;
• Дизайн+1. Людвиг Быстроновский. Как прокачивать себя и постепенно становиться лучше.;
• Работа над ошибками | Сергей Кулинкович | Prosmotr. Как ловить и избегать типовые ловушке в работе дизайнера;
• Серёжа и большая красная кнопка. Даша Почекуева. Про осознанность в дизайне интерфейсов и уровни погружения в задачу. Возможно, на начальном этапе будет чересчур сложно, но это осознанность — естественный путь к развитию себя;
• The biggest WTF in design right now. Про интерфейсные сценарии;
• User flow is the new wireframe. Простая статья про разные степени детализации прототипов. Помогает постепенно улучшать дизайн и применять прогрессивный джипег;
• Пиши, сокращай. Максим Ильяхов, Людмила Сарычева. Книга про текст, но подойдет и дизайнерам, так как в интерфейсах большая часть коммуникации происходит за счет слов.

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

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

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

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

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

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

Дизайн навыки: проектирование интерфейса, исследование пользователей.

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

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

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

Дизайн литература:

• Дизайн привычных вещей. Дональд Норман. Очень простая книга, в которой автор буквально на пальцах рассказывает про принципы проектирования интерфейсов;
• Не заставляйте меня думать. Стив Круг. Маленькая книга про то, как важно проводить пользовательские исследования, пусть даже «дешевые»;
• Интерфейс. Основы проектирования взаимодействия. Алан Купер. Настольная книга про дизайн интерфейсов;
• Интерфейс — зло. Подход Бюро Артема Горбунова. Чем меньше интерфейса — тем лучше;
• Школа мобильного дизайна Яндекса 2016. Видеокурс лекций с мобилизации Яндекса. Все видео полезные и помогают систематизировать знания;
• Искусство мыть слона. Влад Головач.Еще одна книга про интерфейсы. Показано, как понять, что интерфейс достаточно удобен;
• Пользовательский интерфейс. Илья Бирман. Книга Бюро Артема Горбунова, где Илья последовательно рассказывает про привычки, модальность, экранные формы и интерфейс в целом;
• Подборка советов: Интерфейс. Много мини-статей-советов от Бюро, где ребята помогают посетителям сайта сделать хороший интерфейс.

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

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

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

Дизайн навыки: понимание бизнеса, код.

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

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

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

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

Дизайн литература:

• 001. Школа мобильного дизайна — Идея, исследование, концепт (Часть 1 и Часть 2). Антон Тен. Про генерацию и проверку идей;
• Как дизайнерам побороть страх кода. Антон Шеин. Дизайнер из Яндекса рассказывает, почему дизайнерам важно изучать код;
• Веб-технологии для дизайнеров — возвращаю долг. Антон Шеин. Курс по веб-технологиям для дизайнера от дизайнера;
• 019. Школа менеджмента — Бренд и коммуникации. Дмитрий Степанов. Чем занимаются продуктовые менеджеры: воронка продаж, метрики, аудитории, каналы коммуникаций и другие термины. Может быть сложно, но базовые термины помогают понять, откуда берутся деньги;

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

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

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

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

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

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

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

Что дальше

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

Поглощайте всю информацию по теме. Фильтры появятся сами и чуть позже. Делайте много картинок. Когда-нибудь они начнут нравиться другим людям. Устройтесь на работу, потому что там практика и знания.
Если у вас есть вопросы — пишите, я обязательно отвечу.
Telegram
Не забудьте посмотреть мое портфолио: Dribbble, Behance и мой личный сайт:
yoursweetacid.space
Спасибо за внимание!

Читайте также: