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

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

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

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

Литература

• Лекция Ильи Бирмана «Что такое интерфейс».Определение интерфейса, знакомство с КПД и отношением к интерфейсу «Интерфейс — зло».
• 019. Дизайн интерфейсов — Константин Горский. Рассказ Кости про дизайн для разработчиков. Про дизайн, дизайнеров и взаимодействие.
• Беседа с Костей Горским. Еще одно видео от Кости. Отличие дизайна от искусства, задачи, работу, как развиваться.
• 100 лет дизайна от Bang Bang Education. Прекрасное видео про историю дизайна. Известные российские дизайнеры рассказывают про становление дизайна в России.
• Все люди — дизайнеры. Дизайн вокруг нас и мы все так или иначе принимаем дизайнерские решения.
• 001. Школа дизайна — Введение. Тарас Шаров и Лола Кристаллинская. Видение дизайна работников Яндекса в технологических компаниях. Помогает проникнуться миром известных компаний.
• Ководство. Артемий Лебедев. Книга про дизайн в целом, рабочие моменты и исторические справки. Много чего устарело, но большая часть информации будет актуальна всегда.

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

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

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

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

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

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

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

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

Литература

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

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

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

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

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

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

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

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

Литература

• § 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 для общения.

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

Литература

• Новые правила деловой переписки. Максим Ильяхов, Людмила Сарычева. Книга про то, как писать письма так, чтобы на них отвечали. Но не только: в работе приходится много писать, ставить задачи, описывать сценарии, общаться с разработчиками, отправлять письма клиентам, а книга как раз помогает делать это правильно.
• 019. Школа дизайна — Взаимное доверие и уважение в команде. Лола Кристаллинская. Лола рассказывает про эффективную работу в команде.
• 021. Школа дизайна — Как решать вопросы. Анастасия Ларкина. Анастасия рассказывает, как эффективно принимать решения в команде, где каждый отстаивает свои интересы.
• 011. Школа мобильного дизайна — Работа в команде. Юрий Подорожный. Почему важно общаться внутри команды и «синхронизироваться».

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

Что дальше

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

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

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

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

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

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

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

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

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

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

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

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

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

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