Цифровой скетчинг
Знакомимся с сервисами
Сегодня мы познакомимся с подходами цифровых сервисов для быстрого прототипирования и совместной работы, обсудим целостный процесс разработки дашбордов, увидим кейс применения прототипов в прикладных задачах телеком компании и превратим таблицу с рыночными данными в визуальный формат для быстрого ответа на вопросы.
ДАО создания дашборда
В DataYoga мы используем проверенный на практике подход к разработке интерактивных дашбордов — или любого дата-продукта в целом. Это последовательность этапов, которые помогают системно подойти к процессу и получить планируемый результат с минимальными рисками.
Понимание аудитории и ее ключевых вопросов, знание своих источников данных, подготовка удовлетворяющего запросы ключевых сторон прототип, применение стандартов, реализация диаграмм в целевом инструменте, сбор дашборда, применение интерактивности, запуск и поддержка дата-продукта… Прохождение этих этапов обеспечивает качественный конечный продукт.
Прототип — важная, «связующая» часть исполнителя и заказчика дашборда.
Прототип — важная, «связующая» часть исполнителя и заказчика дашборда.
Это способ быстрой коммуникации на одном языке, понятном обоим сторонам.
Прототип представляет собой черновую реализацию базовой функциональной модели дашборда. От списка показателей для визуализации до цветов и расположения диаграмм.
Во время разработки прототипа учитываются пожелания и требования заказчика, наложенные на возможности разработчика и, непосредственно, возможности того инструмента, который будет использоваться при разработке. Мы получаем некий «объект», который будет описывать представление о дашборде. Благодаря прототипу можно:
В зависимости от доверия между заказчиком и исполнителем, прототипы могут быть разной сложности подготовки. Они могут быть нарисованы от руки на простом листе А4 или же сверстаны в графических инструментах.
Во время разработки прототипа учитываются пожелания и требования заказчика, наложенные на возможности разработчика и, непосредственно, возможности того инструмента, который будет использоваться при разработке. Мы получаем некий «объект», который будет описывать представление о дашборде. Благодаря прототипу можно:
- продать идею
- объяснить логику
- объяснить поведение
- проверить удобство интерфейса
- испытать продукт на себе
- испытать продукт на других
- пожить с продуктом
В зависимости от доверия между заказчиком и исполнителем, прототипы могут быть разной сложности подготовки. Они могут быть нарисованы от руки на простом листе А4 или же сверстаны в графических инструментах.
Сервисы для цифровых набросков
Раньше работа с графическими редакторами требовала продвинутых навыков или особой техники. Программы вроде Adobe Photoshop или Adobe Illustrator обладают высоким порогом входа для тех, у кого нет профессиональной необходимости или сильной мотивации к их изучению.
Сегодня сервисов и инструментов становятся больше и они становятся доступнее. Сделать цифровой набросок можно на своем телефоне или планшете с помощью приложений для рисования даже без специального цифрового карандаша вроде Apple Pencil. Программы тоже становятся проще в освоении: и сегодня мы покажем вам несколько самых распространенных.
Сегодня сервисов и инструментов становятся больше и они становятся доступнее. Сделать цифровой набросок можно на своем телефоне или планшете с помощью приложений для рисования даже без специального цифрового карандаша вроде Apple Pencil. Программы тоже становятся проще в освоении: и сегодня мы покажем вам несколько самых распространенных.
MIRO
Miro — онлайн-платформа для командной работы, которая напоминает бесконечную маркерную доску прямо в браузере. На ней вы можете писать, рисовать, добавлять файлы, заметки, соединители и все это будет видно с любой парты класса из любой точки мира.
Основное преимущество Miro – в его доступности и наглядности. Работать в интерфейсе очень просто, не смотря на то, что язык сервиса английский. В Miro удобно делать все: от рисования скетча до выстраивания процесса тестирования.
Вы можете пользоваться сервисом бесплатно: функциональность бесплатного тарифа позволяет комфортно работать со всем доступным инструментарием.
Основное преимущество Miro – в его доступности и наглядности. Работать в интерфейсе очень просто, не смотря на то, что язык сервиса английский. В Miro удобно делать все: от рисования скетча до выстраивания процесса тестирования.
Вы можете пользоваться сервисом бесплатно: функциональность бесплатного тарифа позволяет комфортно работать со всем доступным инструментарием.
Мы уже знаем, что лучше один раз увидеть, поэтому переходите на созданную нами доску Miro с материалами текущего марафона.
Мы собрали на доске основные иллюстрации по теме каждого дня и добавили туда присланные участниками варианты заданий. Там же вы найдете интересные книги по теме скетчинга.
Доска закрыта для редактирования, но вы можете попробовать сделать свою собственную доску для изучения сервиса.
Доска закрыта для редактирования, но вы можете попробовать сделать свою собственную доску для изучения сервиса.
В Miro вы можете найти шаблоны разных методологий в сферах маркетинга и разработки продуктов, иконки, возможность создания диаграмм, графиков, майндмепов и — что интересно для нас — библиотека вайрфреймов (wireframe library).
Wireframe — это еще одно название для «прототипа». Тут собраны элементы интерфейса, которые можно просто добавить на ваш прототип, не рисуя их от руки.
Wireframe — это еще одно название для «прототипа». Тут собраны элементы интерфейса, которые можно просто добавить на ваш прототип, не рисуя их от руки.
В библиотеке вы сможете найти макеты устройств, формы под текстовые блоки и заголовки, макеты под изображения, а также более детальные элементы интерфейса, вроде фильтров, вкладок, поисковой строки.
Figma
Figma — более профессиональный онлайн-редактор для работы с изображениями. В нём можно создать прототип сайта или дашборда, интерфейс приложения и обсудить правки с коллегами в реальном времени.
Figma сложнее, чем Miro, но ее результаты воспринимаются более профессионально. Сервис можно использовать на следующих этапах проработки прототипа, когда основная идея понятна, но нужно утвердить детали будущего дизайна.
Figma сложнее, чем Miro, но ее результаты воспринимаются более профессионально. Сервис можно использовать на следующих этапах проработки прототипа, когда основная идея понятна, но нужно утвердить детали будущего дизайна.
Balsamiq
Balsamiq — упрощенный онлайн-сервис для создания макетов. В Balsamiq используется библиотека элементов интерфейса, т. е. здесь вы ничего не рисуете от руки, но перетаскиваете нужные вам блоки на экран для создания прототипа.
Для несложных скетчей подойдет бесплатный тариф. Интерфейс очень простой: это позволяет быстро вникнуть в принципы работы приложения и начать создавать свой первый прототип.
Помимо стандартных объектов, Balsamiq позволяет выполнять связывание страниц приложения и имитировать поведение фильтра — при нажатии на кнопку просто открывать другой лист (на котором, например, будут эти же представления, но с другими данными).
Помимо стандартных объектов, Balsamiq позволяет выполнять связывание страниц приложения и имитировать поведение фильтра — при нажатии на кнопку просто открывать другой лист (на котором, например, будут эти же представления, но с другими данными).
Instad.io
Еще один сервис, который может помочь вам в подготовке скетчей и прототипов — instad.io. Сервис позволяет превратить любое изображения в эскиз или скетч.
Зачем можно использовать сервис для пост-обработки скетчей:
→ Стилизация wireframe под скетч с большой вариативностью стилей
→ Корректировка цветовой палитры
→ Приведение к единому виду/стилю нескольких визов, сделанных в разных приложениях
→ Стилизация wireframe под скетч с большой вариативностью стилей
→ Корректировка цветовой палитры
→ Приведение к единому виду/стилю нескольких визов, сделанных в разных приложениях
Преимущество цифровых скетчей по сравнению с аналоговыми
→ Легко редактируются: проще и быстрее менять детали и цвета, можно в один клик менять цветовую гамму, выборочные цвета, штриховку и заполнение объектов, толщину линий, геометрию элементов.
→ Серийность: в цифровом виде проще сделать несколько скетчей, выдержанных в одном стиле, в одной цветовой гамме.
→ Интерактивность, анимация: можно реагировать на действия пользователей, показывать/скрывать элементы, менять цвета, трансформировать изображение
→ Поддерживают различные медиа: легко масштабируются и меняют пропорции (потому что векторные).
→ Возможна автоматическая генерация: визуализацию можно создавать по готовым наборам данных или из существующих векторных и растровых изображений с помощью рестайлинга.
→ Серийность: в цифровом виде проще сделать несколько скетчей, выдержанных в одном стиле, в одной цветовой гамме.
→ Интерактивность, анимация: можно реагировать на действия пользователей, показывать/скрывать элементы, менять цвета, трансформировать изображение
→ Поддерживают различные медиа: легко масштабируются и меняют пропорции (потому что векторные).
→ Возможна автоматическая генерация: визуализацию можно создавать по готовым наборам данных или из существующих векторных и растровых изображений с помощью рестайлинга.
Как работают с прототипами в билайне
Александра Хорошевская
Дизайнер дашбордов и визуальных коммуникаций, билайн
Мы использовали скетчинг для создания прототипа при работе над новым дашбордом, который должен отражать все метрики по продуктам билайна в одном месте.
Скетчи рисовали в онлайне: добавляли все, что приходило в голову. Качество рисунка играет второстепенную роль. Главное — чтобы было понятно, что за элемент находится в том или ином месте и какую функцию он выполняет. При цифровом скетчинге, можно размещать скриншоты из других систем или же найденные в сети визуализации рядом с твоими набросками. Сразу становится понятно, как будет (или теоретически может) выглядеть твоя закорючка в будущем дашборде.
Скетчи рисовали в онлайне: добавляли все, что приходило в голову. Качество рисунка играет второстепенную роль. Главное — чтобы было понятно, что за элемент находится в том или ином месте и какую функцию он выполняет. При цифровом скетчинге, можно размещать скриншоты из других систем или же найденные в сети визуализации рядом с твоими набросками. Сразу становится понятно, как будет (или теоретически может) выглядеть твоя закорючка в будущем дашборде.
Уже потом, в процессе более подробного прототипирования в Figma, мы понимаем какие визуализации стоит добавить, а какие убрать, убрать совсем или просто переместить на другой лист.
Скетчи становятся хорошим подспорьем для обсуждения задач, которые решает дашборд. Об картинку на экране легче думать, чем о воображаемые только в твоей голове графики.
Скетчи становятся хорошим подспорьем для обсуждения задач, которые решает дашборд. Об картинку на экране легче думать, чем о воображаемые только в твоей голове графики.
 |  |  |  |
Финальный дашборд пока показать еще нельзя, но уже есть подробный прототип на Figma, на основе которого будет реализован работающий дашборд на Qlik Sense.
Скетчинг — это круто!
Владимир Бакланов
Владелец продукта BI, билайн
Задание: проанализируйте кинотеатры
О чем задание
Мы нашли данные по дистрибьюторам кино в СНГ. Давайте поисследуем их.
Что нужно сделать
- Сделайте обзор предоставленных данных. Какие вы можете сделать предположения относительно таблицы? Какие вопросы возникают?
- Представим, что вам нужно показать эту информацию только в виде таблицы. Как это можно сделать наглядно и эффективно? Какие методы могут улучшить прочтение таблицы?
- Визуализируйте процент распределения количества фильмов и процент сборов между компаниями-дистрибьюторами. Какой способ визуализации вы выбрали и почему именно такой?
Приходите в телеграм-чат делиться своими вариантами выполнения заданий и задавать вопросы!
Присоединяйтесь к чату Марафона
Все общение по ходу Марафона будем вести в телеграм-чате @datapomodoro, присоединяйтесь, чтобы не пропускать ничего важного.
Свяжитесь с нами, если у вас есть вопросы.
thejump@datayoga.ru
DATAYOGA
2021
DATAYOGA
2021