Блог

Дрибббилизация дизайнеров

Dribbble – ресурс, на котором графические дизайнеры, хвастаются постами о своих работах.

Дрибббилизация дизайнеров

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

Дизайнеры смотрят на свою работу не одинаково. Для одних приоритет – качество продукта, для других – внешний вид. Я увлеченно читаю блоги дизайнеров Джулии Жуо и Райна Сингера, они двигают нашу деятельность вперед. Противоположная сторона – масса горе-дизайнеров, цель которых лишь опубликовать эскиз в Dribbble и набрать максимум положительных отзывов коллег, к сожалению, нашу профессию это не развивает. Мы не будем говорить о Dribbble, речь пойдет о ценностях пользователей данного ресурса.

«Выглядит супер!» - так аудитория Dribbble хвалит не самые удачные работы

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

Большинство работ создателей таких резюме делались как для Dribbble. Я оцениваю их так – выглядит отлично, работает – откровенно ужасно. Такой себе безупречный дизайн на плоскости, но не направленный на цели компании, не решающий ее задачи. Обсуждается на Dribble абсолютно все – любые элементы интерфейса, палитры. Люди сотнями смотрят другие работы, делают что-то подобное, результат – имеем кучу похожих работ, практически близнецов. Не важно какой продукт, бухгалтерский специальный софт или программа для погоды – стиль у «дриббблеров» одинаковый.

Дрибббилизация дизайнеров

Найди пять отличий.

Самый важный этап работы, обычно, наиболее незаметный 

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

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

Отсюда идет потеря смысла в переработке дизайнов других авторов. Например, ребрендинг American Airlines, перемены в Twitter, Facebook, обновленный логотип Yahoo (который пользователи прозвали «синее и странное»). Дизайнеры, работающие с этими продуктами, не имели контекста по решениям проекта, не знали про ограничения, условия и организационные моменты заказчика.

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

Дизайн продукта. Миссия. Виденье. Структура

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

Дрибббилизация дизайнеров

Миссия – для чего компания создана, кроме заработка?

Виденье – что ждет организацию в дальнейшем. Полезно ли это для выполнения мисси?

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

Далее идет структура. Это не техническая структура, а больше компоненты конкретного продукта, их соотношение между собой. Речь идет о системе. Крис Кокс, в первый день работы VP по продукту Facebook, произносил революционные мысли. Все присутствующие работали в одной организации, однако специальности у них разные, Крис мог говорить, что хотел, он начал объяснять структуру продукта, связь с миссией.

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

Дрибббилизация дизайнеров

Структура продукта Facebook

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

Дрибббилизация дизайнеров

Структура продукта Intercom

Что же Dribbble? Не помню, чтобы там было описание структуры продукта, ни разу.

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

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

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

Картинка менее важна, чем текстовое описание дизайна:

Дрибббилизация дизайнеров

iA Writer – для меня лучший инструмент разработки скетча. Это не шутка. Слова – начало UI дизайна.

Четыре уровня дизайна

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

  1. Результат. Его нужно сразу осознавать. Тело, в понимании вещи, дизайн которой вы создаете, полезно для пользователя? Если вы не имеете четкого понимания результата, не стоит ждать хорошего окончания проекта.
  2. Структура. Проработайте нужные элементы, дабы получить результат, продемонстрируйте их соотношение.
  3. Взаимодействие. Когда поймете результат со структурой, следует переходить к взаимодействию. Что собой представляет микровзаимодействие? Как располагаются поведения с событиями? Какие элементы характерны для пользовательского интерфейса, как человек с ними работает? Разобрались – идите снова к структуре и дорабатывайте ее под новые требования.
  4. Графика. Теперь мы понимаем, что хотим получить, имеем четкую структуру и создали схему взаимодействия элементов. Все функционирует отлично, идеально – сделать прототип. А сейчас можно переходить к «оболочке». Вам нужно создать приносящий удовлетворение, превосходный внешне, приятно ощущаемый дизайн. Вот теперь пускаем в ход сетки, иконки, красивые шрифты, оттенки.

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

С ростом Интернета дизайн будет становиться все важнее

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

Дрибббилизация дизайнеров

«В конце концов все соединяется» - Чарльз Эймс

Создание статических дизайнов со ссылками – исчезает как род деятельности. Возникновение мобильных решений, вроде API, SDK, открытое взаимодействие между мобильными продуктами и платформами ведет нас вперед, вскоре нам предстоит делать дизайны систем. PDF, в котором полно каркасных моделей вместе с Photoshop вскоре будут исключены из дизайнерских инструментов. Скетчи, доски, инструментарий, позволяющий создать прототипы (CSS/HTML, Keynote, After Effects, Composer, Quartz) – вот чем пользуются передовые дизайнеры.

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

Перевод, источник: medium.com

Соц. сети