Как с помощью доски и маркеров создать общий язык для менеджеров продукта, UX/UI-дизайнеров, а также для стейкхолдеров.
Что это такое?
Это визуальная система, которую я использую при работе на маркерной доске.
Каждый значок на доске соответствует общим элементам пользовательских интерфейсов. Это группа символов и паттернов, полезная при создании или оттачивании идей на маркерной доске, будь то мобильные интерфейсы, веб-сайты, рабочие процессы, веб-приложения и прочее.
Для кого это?
Для продуктовых, UX- и UI- дизайнеров, front-end разработчиков, стейкхолдеров, дизайнеров сайтов и так далее. Для тех, кто делает веб-страницы, мобильные устройства, сайты, интернет-магазины.
Для тех, кто любит генерировать и собирать классные идеи и рассказывать о них миру.
Моя теория заключается в том, что мы сможем создавать продукты намного быстрее, чем когда-либо, если мы поделимся более глубоким пониманием наших первоначальных идей. Мы сможем общаться и в результате получать то, что действительно работает.
Как это использовать?
За каждым значком кроется более широкое значение, чем кажется на первый взгляд. Каждая загогулина, штрих, линия и точка обозначает намного больше для тех, кто знает этот язык (как в случае с иероглифами).
Этот язык позволит нам стремительнее и эффективнее развивать свои идеи. Мы сможем ставить цели и совершенствовать продукт с каждой итерацией. Мы будем тоньше чувствовать точки зрения друг друга и найдем решения без лишних разочарований.
Руководствуясь данным языком, мы сможем яснее доносить идеи друг другу на самых ранних этапах проекта. Мы сможем «отполировать» свои идеи и представить команде продакшна идеально выгравированную инструкцию. Это также сократит время для изучения пользовательского опыта и интерактивного дизайна. С таким арсеналом мы с легкостью сможем делиться решениями с любым членом команды, ведь мы все будем говорить на одном языке.
С доски на экран
Эти паттерны можно использовать и в HTML, и в любом другом внешнем фреймворке. Сопоставляя наброски на маркерной доске с базовой структурой front-end языка, мы можем очень быстро прототипировать интерфейсы. Решение и путь его создания будет выкристаллизовываться прямо в процессе рождения идей. Вы и моргнуть не успеете, как от идеи перейдете к тестированию.
Заголовки
Текст абзаца
Изображения
Список элементов
Кнопки действий
Ссылки
И тому подобное:
Текстовая навигация
Узнать больше
Выпадающее меню
Закрыть
Иконки
Если вас заинтересовало, что же дальше, то вот ответ — база данных или просто качественная систематизация всех значков и их значений. Было бы здорово создать визуальный искусственный интеллект, который смог бы считывать символы с маркерной доски и затем создавать прототипы в HTML! (Потрясающая команда дизайнеров Airbnb уже вовсю работает над этим. Как ваши успехи, друзья? https://airbnb.design/sketching-interfaces/).
Маркерные доски на каждом шагу
Общий язык может стать хорошей базой для инноваций и исследований. Ведь в идеи теперь можно быстрее и глубже погружаться, а затем и передавать друг другу с более глубоким пониманием.
Идеи оживают на белой глянцевой доске. Поэтому будьте готовы поделиться своими мыслями и идеями с другими! Делайте это вдумчиво и изящно — доска вам в помощь.
#WHITEBOARDREPS
В качестве упражнения устройте 10-минутную сессию на доске. Придумайте за это время 20+ макетов пользовательского интерфейса. Это быстрая и свободная форма создания макетов. На время упражнения забудьте обо всех ограничениях — это очень важно! Не погружайтесь в одну идею слишком глубоко, а сконцентрируйтесь на их количестве.
Отточить качество можно с помощью этих упражнений.
