Реальный опыт дизайна с реальными данными
29 июля 2015 | Опубликовано в статьюшечки | Нет комментариев »
Сегодня своим опытом поделятся с нами дизайнеры и разработчики проекта Depop. Все началось с того, что однажды утром один из менеджеров поделился с коллегами статьей о пользе дизайна с использованием реального контента и данных. В статье говорилось что дизайнеры поглощены потоком создания идеального дизайна. Они используют любимые инструменты и шаблоны, однако часто забывают о не менее важных составляющих дизайна, таких как реальные данные.
Используя реальные данные, вы можете увидеть проблемы, которые всплыли бы позже. Там где исключения и рамки могут подвести, реальные данные помогут устранить проблемы на излете.
Примеры:
– Чьи-то имя или фамилия оказываются слишком длинными и не помещаются в предназначенную им форму.
– Чей-то никнейм слишком длинный и не помещается в область, предназначенную для его высвечивания.
– Никнейм, содержащий эмодзи разрушает ваш идеальный дизайн.
и так далее…
Что с этим делать?
Depop нашли свой ответ на этот вопрос. Люди используют, спроектированные ими системы, их продукты и платформы. Разработчики решили создать структуру, которая позволит им самим использовать продукты еще во время создания дизайна, что приблизит работу к реальному использованию.
Решение в Sketch и JSON
Настраиваем проект в Sketch при помощи элементов Placeholder
Команда решила использовать для реализации идеи Sketch. В этой программе был создан шаблон приложения Depop для iOS и Android. Sketch удовлетворил рабочим потребностям команды и позволил создавать быстрые прототипы и копии дизайна.
Не обошлось и без плагинов, которые делают работу в Sketch более функциональной и удобной. Команда использовала сервис Precious Design Studio плагин Sketch Data Populator plugin, чтобы создать шаблон и при помощи JSON-файла наполнила дизайн реальными данными.
Для начала были использованы элементы Placeholder в тех частях дизайна, которые позже были заполнены реальными данными. Для текста использовались элементы типа {first_name} или {bio}. Они создавались при помощи инструмента Text, а затем к ним применяли стиль текста, что позволяло оставлять элементы нетронутыми.
Затем нужно было убедиться, что текстовые поля фиксированного размера, чтобы в момент замены их реальными данными, они соответствовали дизайну.
Для изображений мы изменили имя слоя на placeholder reference и в данном случае назвали {avatar_img}.
Файл JSON
Далее нужно было просто настроить локальный JSON-файл, чтобы он отражал те же значения что элементы Placeholder и использовал те данные и изображения, которые мы хотим включить в этот тест:
[ { “id”: “1”, “first_name”: “Mark”, “last_name”: “Jenkins”, “location”: “London, UK”, “followers”: “2000”, “following”: “99”, “biography”: “UX Lead at Depop, I work on the design with Max — we run the design team!”, “website”: “www.theluckystrike.co.uk", “avatar_img”: “assets/1.jpg” } ]
Убедившись что все динамические элементы находятся в группе слоев, мы вызываем файл JSON при помощи плагина и, как по волшебству, поля заполняются указанными данными.
Что дальше?
Описанное выше было быстрым тестом с использованием локального файла JSON для любых изображений. Далее команда Depop планирует создать живой JSON-файл, используя их собственные внутренние интерфейсы, и модифицировать плагин так, чтобы он позволял заполнять любой элемент Placeholder аналогичными данными.
Это означает что у дизайнеров появится возможность создавать проекты, используя список фотографий и информации о людях, уже имеющихся в системе Depop. В живом проекте подгружать их профили, активность и прочие параметры.
Заключение
Потратьте время на то, чтобы убедиться что ваш дизайн соответствует нуждам для которых создавался и в полной мере отражает реальную картину использования. Дизайн — это гораздо больше, чем визуальное воплощение наших идей.
Используя реальные данные вы сможете сделать шаг вперед в вашей работе и глубже понять дизайн и связанные с ним ожидания.
Автор статьи Mark Jenkins
Перевод — Дежурка
Смотрите также:
549