В этой статье рассказывается, какую роль дизайн интерфейсов играет в условиях современного рынка. А также, что отличает хороший интерфейс от плохого (UI = user interface, то есть, интерфейс пользователя ). Также мы взглянем на парочку новых моделей UI дизайна, включая Google Fuchsia и Fluent Design от Microsoft .

Роль UI дизайна сегодня?

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

Творчество разработчиков пользовательских интерфейсов ограничено определенным устройством и операционной системой. Их работа часто должна соответствовать рекомендациям производителя операционной системы (Google для Android, Apple для iOS ). Apple публикует, что можно, а чего нельзя для пользовательского интерфейса, а также подробный список рекомендаций для UI . У Google также есть собственные стандарты материального дизайна .

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

Вот некоторые особенности пользовательских интерфейсов нашего времени

Многие элементы пользовательского интерфейса мы воспринимаем как приглашения к взаимодействию с приложением или устройством:


Поле для ввода текста и курсор предлагают пользователю ввести текст, а кнопка «Подтвердить » - кликнуть или коснуться ее, чтобы продолжить:


Переключатель, представленный здесь в виде ползунка, приглашает пользователя включить или отключить опцию:


Иконка приглашает пользователя кликнуть по ней, чтобы запустить приложение или функцию:


При нажатии по кнопке-гамбургеру…


…появляется меню, которое приглашает пользователя выбрать дополнительные варианты:


Ползунок приглашает пользователя коснуться/кликнуть и перетащить его, чтобы изменить настройки, например, яркость экрана:


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

Это лишь некоторые примеры элементов дизайна интерфейсов приложений . Но все они объединены идеей повысить эффективность взаимодействия с пользователем.

Интерфейс: хороший, плохой и ужасный

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

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

Хороший пользовательский интерфейс

Разработан с учетом глубокого понимания пользователя, его потребностей и того, как он будет перемещаться по приложению или сайту. Поэтому мы и говорим, что дизайн UI является одним из аспектов UX-дизайна (UX = User eXperience , опыт взаимодействия ).

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


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

Плохой интерфейс

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

В таком интерфейсе очень много мелкого текста, который трудно читать. Кроме этого, плохому интерфейсу присуще использование жаргона (в том числе профессионального ) вместо понятного языка. Например, написано: «Плохие данные ». А нужно - «Неверные логин и пароль ». К плохому интерфейсу также можно отнести применение назойливых диалоговых окон вместо панели уведомлений:


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

Ужасный интерфейс

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


Но успех компании Amazon , наоборот, доказывает эффективность их UI . Почему? Один из секретов кроется в том, что внешний вид страницы улучшался постепенно, и поэтому не заставлял пользователей приспосабливаться к резким изменениям интерфейса. Посетителям сайта это удобно.

Я, как давний пользователь Amazon , особо и не замечал изменений во внешнем виде или способе взаимодействия. Но вот как выглядел Amazon 10 лет назад:


Что ожидает дизайн пользовательского интерфейса в будущем?

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

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

В последние месяцы все чаще слышно о «Fluent Design» от Microsoft . Говорят, он нацелен на интеграцию большей визуальной глубины и движения. То же самое касается экспериментальной операционной системы от Google с кодовым названием «Fuchsia» , в которой разработчики пытаются обойтись без рабочих столов и иконок.

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

Мыслить стратегически  - значит, смотреть на дизайн в перспективе. Значит, делать его оптимально, чтобы на длительной дистанции сэкономить рабочее время.

Уровни детализации в дизайне интерфейсов

Продуктовый дизайн интерфейсов никогда не заканчивается и постоянно развивается. Я выделяю четыре уровня:

  • логический
  • уровень проектирования
  • визуально-эмоциональный
  • уровень масштабирования

Правильно заложенный фундамент на логическом уровне помогает построить такой проект, как изначально хотелось. Интерфейсный делает дизайн понятным и удобным. Визуальный уровень радует глаз и даёт правильное ощущение. Затем, удачно написанные правила дизайна помогают масштабировать его до любого размера.

Дизайнеры используют Скетч не в полную силу

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

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

Какой макет лучше организован?

Вот два внешне одинаковых макета:

Левый не использует символы, а правый только из них и состоит. Какой макет лучше организован? Напрашивается ответ, что правый. Но нет. Они заточены под разные цели.

Левый: легко менять, трудно масштабировать

Если этот дизайн станет основой для 100 других экранов, то с каждой новой копией в проекте будут появляться плохо управляемые дубликаты объектов. Они должны быть идентичными от экрана к экрану. Чем их больше, тем сложнее будет следить за порядком. Если поменяется единственная иконка или таббар, устареют все 100 макетов.

Правый: дорого создать, идеально масштабировать

Однако, не торопись всё подряд запихивать в символы. Если стиль только формируется и нужно кардинально переделать этот экран, то после отрисовки экрана заново все символы из правого варианта устареют. Время, потраченное на их создание, не окупится. Такой экран с его символами неудобно переставлять среди других экранов, он не лёгок на подъём.

Символы - клей интерфейса

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

Жизненный цикл символа

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

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

И то и другое направление движения имеет свои плюсы:

Если мы детализируем

структура становится более формальной и сложной. Появляется стройность и логика, она стремится описать свои мельчайшие частицы и следует принципу программирования DRY (don’t repeat yourself). Формализация приводит к порядку и экономит объекты, но неизбежно бюрократизирует систему. Камни фундамента дороже двигать, чем камни на крыше. Формализация дружит с сеткой, заботится о том, чтобы все отступы одинаковы. Так мы цементируем интерфейс, делаем его менее гибким, но стройным.

Интересный пример: я встретил Sketch-проект, который весил 600 мб. В нём практически не использовались символы и было много экранов. Когда я вычистил и переверстал его на символах, вес файла сократился до 150 мб.

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

Если мы упрощаем

Если мы крошим символьную структуру детачем, это ведёт к разжижению дизайна и становится ближе к принципу KISS (keep it short and simple). Свежему цементу легче придать нужную форму. Частицы в нём не имеют сильных связей друг с другом и не сопротивляются.

Дизайн вдребезги

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

Когда интерфейс полон символов, он фрагментирован. Если нужно создать принципиально новый экран, это мешает.

Теперь поговорим об уровнях подробнее.

1. Логический уровень дизайна

Это высший уровень абстракции, стратосфера. Самый общий уровень интерфейса - это логика действий пользователя, . То, чем занимаются UX-дизайнеры: Какие каналы будут использоваться для взаимодействия с системой? В чём цель пользователя? Как помочь достичь её за минимум кликов? Скетч превращается в программу для создания логических диаграм:

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

2. Уровень проектирования

Когда появляется больше деталей, мы переходим на уровень юзер-флоу. Какие кнопки нажимает пользователь, чтобы достичь своей цели? На этом этапе удобно использовать плагин User Flow , который позволяет показать, какие кнопки куда ведут.

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

Мобил Фёрст

Шаги превращаются в экраны с определёнными размерами, для которых мы проектируем. Начинаем всегда с мобильной версии, поскольку в ней легче сконцентрироваться на смысле, а не на визуальном дизайне. Разворачивать мобильную версию на большой экран значительно легче, чем втиснуть десктоп в мобильный. Читайте Mobile First .

Первые символы

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

Делай прототип максимально рано

Здесь уже полезно создавать первый прототип в Инвижне, который не очень красив, зато работает как придумали. На этом уровне можно тестировать идеи: понятна ли логика, или всё надо переделать с нуля? Обидно выбрасывать любовно прорисованный дизайн. Выбрасывать изрисованную салфетку - не обидно.

3. Уровень эмоций: отрисовка и контент

Когда логическая картина сложилась, можно прорабатывать дизайн в деталях. Эта территория вдохновения и художников. На нём концентрируются любители Дрибла и Биханса, подчас забывая об остальных. Серым квадратам приходят на смену настоящие UI-элементы, хорошая типографика, иконки и иллюстрации. Время тщательно проработать формулировки в текстах. Сюда же можно отнести анимацию. Когда она используется уместно, даже самый простой дизайн оживает.

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

4. Уровень масштабирования

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

Те, кто организовал это, знают толк в масштабировании. Символы - идеальный инструмент масштабирования дизайна.

На этом уровне создаётся подавляющее большинство символов. Это время спуститься на землю и перестать устраивать революции. Время начать разглядывать детали и заниматься перфекционизмом. Цель рождения символов на этом этапе - разбить систему на мельчайшие части, чтобы можно было её безболезненно масштабировать.

Зачем масштабировать

Удачно формализованную систему легко поддерживать.

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

Пример задачи масштабирования

Если встанет задача перекрасить все красные иконки в другой оттенок, это будет легко сделать, поскольку они сгруппированы в одном UI-ките, из которого транслируются во все макеты. Меняем один символ - меняются все его копии в 600 макетах. Этот дизайн уже пахнет вёрсткой.

Что масштабировать

Символами должны становиться не только иконки, а любые повторяющиеся элементы. Все поля ввода, меню, иллюстрации, кнопки, вкладки, попапы и некоторые текстовые блоки.

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

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

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

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

Именно поэтому я сознательно разделяю дизайн интерфейсов на UX разработку и UI дизайн.

UX дизайн

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

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

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

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

С другой стороны, это лучший способ применить навыки дизайнера и аналитика.

Прототипирование интерфейсов

Прототипы интерфейсов я делаю в Axure RP. На сегодня это стандарт отрасли проектирования UX. Параллельно изучаю Figma.

Sketch лично для меня оказался неудобен. Figma имеет прямой экспорт макетов в Zeplin. Для большинства разработчиков digital-сервисов это самый удобный вариант.

Если Sketch/Figma не принципиальны, я работаю в редакторе Xara Designer Pro X. Он способен генерировать динамические страницы на базе макетов.

Иногда показываю макеты в сервисе InVission. На нём можно показать минимальную анимацию компонентов и переходов. Такие прототипы интерфейсов дают заказчику хорошее представление о конечном продукте.

UI дизайн интерфейсов

Уделяю пристальное внимание деталям и сетке. Ровная структура и приятные мелочи бросаются в глаза и создают приятное впечатление у ваших посетителей.

В интерфейсах сложных digital-сервисов отрисовываю различные состояния для кнопок. Иногда отдельно создаю UI kit для особо больших проектов.

План работ над дизайном интерфейса

  1. Посмотрите мои работы, убедитесь, что они вам нравятся.
  2. Запрос и передача материалов.
  3. Предоплата 50% (в отдельных случаях 100%).
  4. Интервью, сбор информации и аналитика.
  5. Разработка черно-белых прототипов интерфейса.
  6. Дизайн интерфейса в цвете.
  7. После утверждения всех макетов - остаток суммы.
  8. Подготовка и передача исходников в формате *.PSD.

Что я делаю и чего не делаю

Аудит текущего ресурса

В рамках работы над редизайном проекта я сначала провожу аудит вашего ресурса. Описываю плюсы и минусы с точки зрения дизайна и UX.

Результат: документ с описанием и рекомендациями.

Исследования

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

Результат: профиль целевой аудитории и описание целей посетителей.

Проектирование

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

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

Результат: прототипы заказанных страниц, по которым можно походить.

Дизайн

Собственно на этом этапе делается проработка всей визуальной составляющей проекта. Разработка визуального языка. Это как комната в стиле "лофт" или кухня в стиле "прованс" - вы уже примерно понимаете какие используются элементы и как на них будут реагировать люди.

Результат: после приёмки дизайна страниц, я готовлю исходные файлы. Причём не абы как, а со знанием дела. Все слои раскладываются по папкам и подписываются. Аккуратно и эффективно. Так что ваши разработчики будут приятно удивлены.

Поддержка

В больших проектах нередко возникает необходимость доделать какие-нибудь мелочи уже после приёмки дизайна. Я закладываю небольшой запас на такие случаи.

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

Результат

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

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

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

Об освоении рынка дизайна интерфейсов написаны километры однообразных и скучных советов, которые легко нагуглить, поэтому тут я постараюсь несколько иначе подойти к теме. Специально для Цифрового Брокколи.

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

На сайте hh более полутора тысяч вакансий для UI/UX-дизайнеров, из них 100 удаленных

Среди других высококонкурентных разновидностей дизайна вроде полиграфии и айдентики – интерфейсы еще и самые прибыльные, поэтому однозначно имеет смысл попробовать себя на этом поприще. Минимальная зарплата - 65 000 рублей против 30 000 у дизайнеров полиграфии (данные ).

Вкратце о работе дизайнером интерфейсов. Самое важное

В работе постоянно действует принцип easy to play, hard to master. Обучение не является подготовительным этапом, потому что это тупо часть работы – вообще всё время. Именно поэтому можно пропустить получение образования и выслушивание нудных курсов и сразу приступить к практике.

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

Хотя одну книжку я посоветую. Она отнимет не больше часа времени в худшем случае (за что и любим) – Дизайн пользовательского интерфейса. Искусство мыть слона .

Сейчас может сложиться впечатление, что всё просто и легко. Нет, всё очень тяжело и сложно. И хороших интерфейсов – единицы, их не умеют делать опытные дизайнеры и даже IT-гиганты. Поэтому к любым гайдам, курсам и книгам нужно относится крайне скептически. Интерфейсы сейчас – Дикий Запад (в отличие от полиграфии, например), в котором царит беззаконие и хаос. И это играет на руку новичкам – индустрия до сих пор остро нуждается в свежей крови и мозгах, потому что старожилы плохо справляются с улучшением интерфейсов.

Немного подытожу.

  1. Предварительно учиться – необязательно и даже вредно, но вообще учиться всяким вещам придётся постоянно – без этого ничего не выйдет 100%.
  2. Новые идеи – на вес золота, и способность их генерировать нужно тщательно оберегать, потому что вашу самооценку будут постоянно сбивать.
  3. В интерфейсах на данный момент царит бардак, поэтому ко всем полученным знаниям и услышанным мнениям нужно относится скептически.

Начинаем прямо сейчас. Серьёзно

Получается, чтобы реально начать – нужно просто соответствовать неким требованиям к характеру, и всё? Да, если вы любознательны, реально способны постоянно всасывать новую информацию, трудолюбивы и обладаете неординарным мышлением (в любой трактовке, даже собственной) – можно начать сразу после прочтения этой статьи. Или если вам тупо нужна была мотивация – прямо сейчас закрывайте эту статью и вперёд.

Я – за практику. Я залез в дизайн с нулём вместо знаний. Я просто врал, что всё знаю и умею, чтобы получить работу. А потом сутками мучал гугл своими запросами, чтобы освоить всё, что нужно для выполнения задачи. Кому-то такой подход может показаться бессистемным – в том плане, что не проще ли было сначала научиться, а потом лезть? Нет, не проще, потому что знания в айти устаревают каждые 3 месяца. Ну и помним про бесценную способность иметь собственный взгляд на вещи.

Ну так вот, самое простое, что можно сделать прямо сейчас – это тупо перерисовать что-либо. Например, Телеграм. Делаете скриншот и старательно, точь-в-точь до последнего пикселя перерисовываете.

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

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

Также вы научитесь формулировать свои мысли и вопросы, а потом научитесь гуглить – это, без шуток, невероятно нужный навык, который не так прост в получении, как кажется. Ну и если лень – есть Тостер.ру , на котором я, кстати, часто тусуюсь и помогаю новичкам. Если что – зовите меня в свой вопрос.

Где учиться дизайну интерфейсов и получать за это деньги

Что дальше? Дальше еще проще. Теперь нужно переделать что-нибудь. Вспомните сайт, программу, сервис, которые вы используете и что-то в них вас при этом раздражает. Далеко ходить не нужно, можно опять взять тот же Телеграм. Лично меня до белого каления бесит ужасная свалка из людей, ботов и каналов в одном списке без какой-либо рубрикации. Я не хочу пользоваться альтернативными клиентами – я хочу, чтобы в официальном приложении появились отдельные вкладки для разных сущностей, а в идеале – возможность группировать чаты как душе угодно.

Всё гениальное просто. Перерисуйте одно, переделайте другое – и вы войдете во вкус, проверите свои силы, получите вдохновение. Звучит просто, на деле – намучаетесь. Но это интересно и весело.

Разумеется, выполнять нелёгкую работу за просто так – значит быстро сжигать мотивацию. А мотивацию, как уже доказано наукой, лучше всего повышают деньги. И азарт. Нехилый буст можно получить в дизайн-конкурсах, которые особенно актуальны для новичков – не страшно ошибаться, а шанс получить деньги очень даже реальный. Это чуть ли не самый лучший способ получить море разнообразной практики, да еще и возможно оплачиваемой. Лично мне нравится 99designs – сотни и тысячи заданий ежедневно, в том числе на веб-дизайн, который - ожидаемо - там самый дорогой (одна-две тысячи долларов не редкость). Выбираешь, что по душе, и с удовольствием дизайнишь – чистый кайф.

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

Да, сразу к реальным заказам. Без опыта в реальных проектах. Без опыта. Без всего. Так – тоже можно. Главное – готовность рвать пятую точку. Если нужен мотивационный пинок под зад и открытие глаз – у меня целая заметка есть .

От себя я порекомендую Фрилансим - много заказов, хорошая аудитория, бесплатные заявки. С этой биржи я всегда уходил надолго с долгосрочными заказами и клиентами. Ну и пять халявных откликов в день – очень удобно.

TL;DR и почему всё это было вообще написано

Снова подытожу.

  1. Чтобы войти в интерфейсы – необязательно учиться заранее, но обязательно потом, и вообще – постоянно; нужно иметь неординарное мышление и уметь его защищать; а также следует скептически относиться к чужим знаниям и советам.
  2. Оптимальный инструмент – Фигма: она бесплатна и вообще оптимальна на данный момент, однако придётся осваивать и другие программы; какие и как – поможет крайне необходимый навык гугления.
  3. Практика – лучшая школа: сначала копируем-перерисовываем что-либо, а потом переделываем то, что не нравится; а еще можно получать деньги за практику, если участвовать в дизайн-конкурсах или – если хватает наглости – в реальных проектах, которые можно получить на фриланс-биржах.

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

Подписывайтесь на канал о фрилансе и удаленной работе Remote&Freelance и узнайте, как монетизировать любимое дело, работать удаленно и путешествовать.

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

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

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

Фундамент дизайнера

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

Фокус, цели и задачи

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

Цели и задачи - это не одно и тоже. У вас может быть цель хорошо провести вечер, а задача - выбрать между кино, рестораном и футболом.

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

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

Как бы это работало, если бы это было просто?

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

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

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

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

Эстетика интерфейса

Я люблю Medium за хорошую типографику и удобство написания статей, хотя на других ресурсах мои статьи порой набирают в два-три раза больше просмотров. Но дело ведь не только в красоте.

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

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

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

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

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

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

Что ему нужно?

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

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

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

Системность в дизайне

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

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

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

Имея готовый набор необходимых элементов и стилей, вы сможете больше думать о решении проблем пользователей и меньше о рисовании.

Даже хорошую идею легко убить

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

Лишь с опытом я понял, что вопросы, не касающиеся основной темы нужно игнорировать. Например, сказав: “Это лишь детали, поэтому давайте обсудим основные вещи, которые влияют на бизнес, а в конце вернемся к вашему вопросу”. Как ни странно, этот ответ избавляет вас от бесполезной беседы и представляет в виде профессионала, который заботится о бизнесе клиента, а не своем эго.

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

Книги для дизайнеров

Меня периодически спрашивают, какие книги помогли мне стать в дизайне лучше.

Никакие.

Лишь регулярная практика и понимание бизнеса помогли мне приносить компании большую пользу и повысить свою ценность на рынке.

Куда устроиться

Есть три популярных варианта: студия, продукт или стартап.

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

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

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

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

Генерация удачи

[очень важная часть]

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

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

Среди этих действий есть активные и пассивные.

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

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

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

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

Павел Шумаков, выиграв Russian Design Cup получил предложение от ВКонтакте, а чуть позже перебрался в лондонский офис Badoo. Некоторые ребята, пройдя курс от Skillbox получили предложение о работе в AIC.

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

Ну и последнее.

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

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

Это элементарная логика:

Успеха добиваются не те, кто не совершает ошибок, а те, кто несмотря на них идет вперед.
Мой путь, который я описал в большой истории “Становление дизайнера”, содержал ряд неудач, которые могли стоить мне работы, но даже на старте карьеры интуиция подсказывала, что переживания никому не помогут и единственный способ чего-то добиться - просто идти вперед.

Поэтому не переживайте, столкнувшись с проблемами на новой работе. Все через это проходили, включая Стив Джобса, который за первые 15 лет своей карьеры совершил ряд дорогостоящих ошибок, из-за которых в конце 90-х многие его считали неудачником. И лишь высокомерная уверенность в своем предназначении, позволила ему идти вперед и спустя десятилетие стать иконой отрасли.

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

Неизбежный исход

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

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

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

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

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

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

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

Ключ ко всему

Молодой дизайнер задал мне вопрос:

Лучше продолжить самообразование или поскорее устроиться на работу?

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

На старте карьеры делайте фокус на качество, а не количество проектов. Не нужно искать новую работу в поисках лучшей жизни. Сначала научитесь делать ее хорошо.

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

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

Терпение и упорство – ключ ко всему.

Сделайте эту неделю прорывной.