Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Реальный опыт дизайна с реальными данными

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

Перевод — Дежурка

Смотрите также:




Оставить ответ


4 + = тринадцать

Вставить изображение