17 января 2018

Новый язык дизайна на маркерной доске

Как с помощью доски и маркеров создать общий язык для менеджеров продукта, UX/UI-дизайнеров, а также для стейкхолдеров.

Что это такое?

Это визуальная система, которую я использую при работе на маркерной доске.

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

Для кого это?

Для продуктовых, UX- и UI- дизайнеров, front-end разработчиков, стейкхолдеров, дизайнеров сайтов и так далее. Для тех, кто делает веб-страницы, мобильные устройства, сайты, интернет-магазины.

Для тех, кто любит генерировать и собирать классные идеи и рассказывать о них миру.

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

Как это использовать?

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

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

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

С доски на экран

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

Заголовки

Текст абзаца

Изображения

Список элементов

Кнопки действий

 

Ссылки

И тому подобное:

Текстовая навигация

Узнать больше

Выпадающее меню

Закрыть

Иконки

Если вас заинтересовало, что же дальше, то вот ответ — база данных или просто качественная систематизация всех значков и их значений. Было бы здорово создать визуальный искусственный интеллект, который смог бы считывать символы с маркерной доски и затем создавать прототипы в HTML! (Потрясающая команда дизайнеров Airbnb уже вовсю работает над этим. Как ваши успехи, друзья? https://airbnb.design/sketching-interfaces/).

Маркерные доски на каждом шагу

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

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

#WHITEBOARDREPS

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

Отточить качество можно с помощью этих упражнений.

 

  • Andrey Kin

    Здорово!) Сам раньше пробовал создавать такие библиотеки элементов, да как-то забрасывал. Сделаю с десяток вариантов шапок, слайдеров, футеров, но слишком сильно углублялся в детали и забывал быстро застопорился. Надо ещё раз это попробовать)

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

15 ноября 2016

Основные тренды дизайна 2016

19 февраля 2018

Значение анимации в UX-дизайне

aic

21 июня 2016

Что такое digital transformation и почему современному бизнесу нельзя игнорировать этот тренд?

2 февраля 2016

Редизайн и увеличение продаж сайта телеком-провайдера Onlime

2 ноября 2017

Доступность глазами реальных людей с ограниченными возможностями

17 марта 2016

Как создать сервис для онлайн-мероприятий, которым легко может воспользоваться каждый: редизайн Webinar.ru