Совместная работа компаний Space10, Norgram и Rwatgg для разработки будущего языка дизайна для Space10.

Space I/O — это наш цифровой фреймворк, и инструмент для построения и дизайна цифровых UI/UX децентрализованным способом на основе пользователь-ориентированного дизайна и сотворчества. Посредством Space I/O мы стремимся создать распределенную сеть сред и инструментов, которая позволит быстро двигаться в разработке, создавать синергии между проектами и управлять внутренними процессами и внешними коллаборациями эффективно.

Эта статья — краткое изложение нашего нового цифрового фреймворка, созданного в сотрудничестве с Norgram® Studio и RWATGG. Вместе мы решили переопределить фреймворк space10. io в модульном подходе, чтобы было легче обновлять и обслуживать проекты, в то же время, предоставляя пользователям непрерывно меняющийся, совершенствующийся опыт работы с контентом, взаимодействия, вовлекая их в сообщество.

Мы определили фреймворк как продукт через анализ концепции, визуализации и прототипирование, оставляя весь процесс открытым для публики. Сегодня фреймворк доступен через публичный репозиторий на GitHub.

Стратегия

Наша стратегия заключается в дизайн-системе, которая основывается на идее пространств. Пространства представляют собой свободную область шириной (X), высотой (Y) и глубиной (Z).

Мы хотели работать с пространством, но в цифровой форме, поэтому создали фреймворк под названием #SpaceIO

Mathias Høst Normark
Основатель и директор по дизайну в Norgram®

Эта стратегия дала основу для создания системы с использованием веб-компонентов, таких как Google Polymer. Как часть нашей стратегии, мы определили четыре принципа. Они звучат как «Курация», «Динамика», «Классический дизайн» и «Прогрессивный Веб». Наша стратегия вылилась в непростую задачу — нужно проанализировать и определить, какие есть цифровые пространства, как они связаны, какие отношения между ними, как они анимируются и ведут себя

Опыт взаимодействия

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

Space I/O: Опыт взаимодействия (UX)

С точки зрения процесса мы начали с определения нужд пользователей на простых отрывных листах, по мере формирования паттернов мы группировали все записи в общие триггеры, которые можно использовать для рисования высокоуровневых вайрфреймов с помощью Google Present. С этими высокоуровневыми вайрфреймами и пользовательскими триггерами мы могли обсуждать и итерировать на высоком уровне с командой и организацией перед тем, как погрузиться в более детализированный, аннотированный и кликабельный прототип с помощью Sketch и InVision.

Направление дизайна

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

Типографика

Helvetica Neue используется в 5 разных начертаниях, чтобы сформировать правильное отношение между письменным и визуальным контентом. Используемые начертания: Light (тонкий), Regular (обычный), Medium (средний), Bold (жирный) & Bold outline (жирный контур). Типографика соответствует размерам экрана (ширине окна), что дает комфортный опыт просмотра контента при любых параметрах устройства.

Space I/O: Типографика

Цвета

Основная цветовая схема — монохромная, это набор оттенков серого между черным и белым, и это помогает установить связь между пространствами при использовании в контексте слоев. Один оттенок синего используется для подсвечивания слоя взаимодействия с ботом SPACE10: Pluto. Простота в цветовой схеме обеспечивает поле для яркого и динамического контента, включая видео и фотографию.

Space I/O: Цвета

Иконографика

Afineur — это биотехнологическая компания, первопроходец в использовании контролируемого естественного брожения для повышения качества растительной пищи. Их первый продукт, Cultured Coffee, благодаря контролируемому процессу вторичной ферментации лучше переваривается, а также приобретает более совершенный аромат.

Space I/O: Иконографика

Пространства

Концептуально и визуально пространства работают в 3 плоскостях — ширина (Х), высота (Y) и глубина (Z). Работа в 3-й плоскости в контексте классического дизайна кажется немного не в тему, поэтому глубину мы используем как наслоение пространств друг над друга. Все эти слои имеют свой функционал. Верхний слой всегда полностью виден, а слои под ним только частично показываются, дразня пользователей, провоцируя их кликнуть и перейти на новые слои контента.

Space I/O: Пространство в плоскости
Пространство — это свободная область в трех плоскостях с шириной (Х), высотой (Y) и глубиной (Z). Фото — NORGRAM® STUDIO

Cетка

Традиционно сетка состоит из 12 колонок, но у нас возникла необходимость не только в стандартной 12-колоночной сетке, но и в размещении элементов вне сетки, чтобы создать не слишком жесткую дизайн-систему. Типичный параметр сеток — ширина интервала между колонками. Наш подход заключался в том, чтобы практически убрать этот интервал, увеличить количество колонок, чтобы все было одной ширины.

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

Space I/O: Сетка

Типы страниц

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

Space I/O: Типы страниц

Структура

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

Space I/O: Структура

Дизайн

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

Space I/O: Дизайн - 1 Space I/O: Дизайн - 2 Space I/O: Дизайн - 3

Процесс создания Space10

Мы твердо верим в открытый и коллаборативный процесс. Процесс, в котором мы все учимся и открываем новые способности. Во время 7-месячного процесса определения и разработки фреймворка мы собрали все мысли, концепции и открытия в единую систему.

Space I/O: Процесс - 1

Space I/O: Процесс - 2

Space I/O: Процесс - 3

Продукты

Во время создания новой платформы SPACE10.io возникла необходимость в разработке диалогового интерфейса и системы событий. Мы сформировали дизайн, разработали и реализовали эти два продукта, и оба они играют центральные роли в SPACE10. Может показаться, что создать кастомную систему событий — это слишком сложно, но на деле оказалось сложнее найти готовую систему, удовлетворяющую нашим нуждам. Все готовые решения оказались слишком дорогими или чересчур сложными.

Второй проект — Conversational Form (Диалоговая Форма) — опен-сорс продукт, продуманный и инициированный SPACE10, дизайн создал Чарли Иссландером и разработала команда RWATGG. Он определяет, как мы коммуницируем с формами онлайн.

Следите за еженедельными обновлениями репозитория.

Веб-компоненты и Polymer

Уже разработано около 100 компонентов для space10.io. В форме Web Components.

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

В будущие месяцы мы будем публиковать несколько не таких контекстуальных компонентов на webcomponents.org.

Работа с Web Components дала нам множество возможностей, ориентированных на веб-компоненты, и на раннем этапе мы решили работать с проектом Google под названием Polymer (1.9.0). Ни одна другая библиотека не предлагала такой идеальный опыт работы с веб-компонентами, как Polymer.

Umbraco

CMS мы построили на опен-сорс системе Umbraco. У нас в прошлом был отличный опыт ее использования для больших проектов, так что она казалась идеально подходящей. Она отлично масштабируется, в ней есть множество встроенных возможностей, хорошая работоспособность, интуитивный интерфейс, и в целом в ней приятно работать над созданием и публикацией контента. SPACE10.io основан на приложениях .NET Core, работающих на Azure Web Apps в качестве кешированной версии контента из сущности Umbraco. Таким способом мы сводим обмен данными с базой данных к минимуму, максимизируя производительность.

Demo Driven Development

«Когда функция разрабатывается исключительно потому, что будет выглядеть хорошо в демо».

Так как Web Components предполагают отделение UI и логики, появляется возможность внедрять новые методологии. Вы можете легко отделять свои компоненты от главного проекта, и как разработчик, можете погрузиться «глубоко в работу» с меньшим отвлечением на элементы других проектов, они вас больше не отвлекают.