Space I/O: Defining our future design language and framework
Space I/O is our digital framework, and a tool for building and designing digital experiences and interfaces in a decentralized way that focuses on user-centric design and co-creation. Through Space I/O, we strive to design a distributed network of spaces and tools that enables us to move quickly, create synergies between projects, and manage both internal processes and external collaborations.
This article serves as the rundown of our new digital framework made in collaboration with Norgram® Studio & RWATGG. Together we set out to redefine the space10.io framework with a modular approach making it easy to update and maintain while providing users with an ever changing playful experience of content, user interaction and community engagement.
We defined the framework as a product through concept exploration, visualizations and prototyping while keeping the process open to the public.
Our strategy was to bulid a design system that was based on the idea of spaces. Spaces meaning a free area of expanse which consists of width (X), height (Y) and depth (Z).
We wanted to work with the idea of spaces but in a digital form, so we defined a framework called #spaceio
This strategy provided a foundation for building a system using web components such as Google Polymer. As a part of our strategy we defined four principles to help guide us through the collaboration of the framework. The principles are: “Curation”, “Dynamics”, “Classic Design” and “The Progressive Web”. Our strategy left us with the challenge to explore and define what digital spaces are, how they relate, connect, animate and behave.
The design direction is inspired by swiss graphic design from the 1960’s where the focus was to create a strong system of typography, colors and compositions. Given that there is a vast amount of content the approach of the style is to define an editorial and timeless aesthetics with room for details using both layout, functionality and animation. All in all the design direction's most important function is to facilitate the content.
Helvetica Neue is used in 5 different weights to form a solid hiraki and relation between the written and visual content. Weights used: Light, Regular, Medium, Bold & Bold outline. The typography is implemented to respond to screen-sizes (window-width) this ensures that the typography always fits to the viewing experience.
The base of the color scheme is monochromatic with a set of grey's between black and white that help emphasize the relation between the spaces when used in the context of layers. One tint of blue is used to highlight the layer of interaction with the SPACE10 bot: Pluto. The simplicity in the color scheme makes room for vibrant and changeable content in the form of video and photography.
The purpose of the iconography is to provide guidance throughout the framework. All icons are build on the premise of “function first”. Visually the iconography is formed from geometric shapes which achieves a timeless and universal aesthetic that reflects the typography.
Conceptually and visually the spaces works with 3 dimensions width (X), height (Y) and depth (Z). Dealing with a 3d perspective in a classical design context seems a bit off, so the way we use depth is by layering the spaces on top of each-other. These layers all have a functionality. The top layer is always fully visible whereas the layers below are only slightly exposed teasing users to click and navigate to new pieces of content.
Traditionally a grid is made by 12 columns, however we had the need of not only a standard 12 grid column but also the need to place things off grid in order to make a design system that doesn't feel too rigid. A common term with grids is the width of the gutter. Our approach was actually to kill the gutter, increase the amount of columns so everything is the same width.
That meant we ended up with 47 columns. This doesn't mean that we actually need 47 columns but on our grid of 47 we places a 6 column grid which is the common use-case in the framework. The idea of the remaining columns is to have flexibility to break the grid with photography which gives a more playful and dynamic experience.
Based on the grid and idea of spaces we can form unique page types consisting of layers. The pages types can be used to construct the base framework in which the spaces needs to live.
Combining the grid, typography, colors and iconography gives us the base design, in a sense these are our “spaces” that can be used to build the platform.
The sum of all the above elements marks a solid, dynamic and timeless design with great variety across pages, curated content and room for details and play.
We strongly believe in an open and collaborative process. The process is where we all learn and discover new skills. During the 7 month long process of defining and developing the framework we collected all thoughts, concepts and discoveries along the way.
During the proces of defining the new SPACE10.io platform, a need for a conversational interface and an event system was identified. These two products have been designed, developed and implemented and they both play a central roles in SPACE10 DNA.
It might seem like overkill to develop a custom Event system but looking for a system that fulfilled our needs proved to be a challenge, all the systems seemed over-priced and overly complicated.
Conversational Form is an open source product thought out and initiated by SPACE10, designed by Charlie Isslander and developed by RWATGG, which explores, through conversations, the way we communicate with forms online.
Make sure to star the repo to follow the weekly updates.
Web Components and Polymer
Around a 100 components has been developed for space10.io so far. In the form of Web Components.
Web Components is a different way of building web-apps, where the most radical thing is that it forces developers to build project elements as separate components. This has several benefits like code isolation, debugging and distribution so that large scale projects won't seem so overwhelming and more like a compilation of smaller projects.
Over the coming months we will be publishing a few of the not so contextual ones through webcomponents.org.
Working with Web Components has given us a lot of Web Component oriented features and at an early stage we decided to go with Googles project called Polymer (1.9.0), no other libraries seem to offer such a 1:1 experience of working with Web Components as Polymer does.
CMS was set on the open-sourced system Umbraco. We have had great success using it for large scale content platforms in the past, and it seemed like a great fit. It scales well, has a lot of build-in features, good performance, an intuitive interface and in general offers a pleasant workflow for content creation and publishing. SPACE10.io is .NET Core apps that run on Azure Web Apps as cached version of the content you have on the Umbraco instance, this way we keep database communication to a minimum and performance to a maximum.
Demo Driven Development
"When a feature is developed purely because it will look good in a demo."
With Web Components comes seperation of UI and logic, which offers some new methodologies. You are able to separate your components out of the main project with ease and it allows you as a developer to get into the "deep-work" mode with less distractions of other project elements floating around your components competing for your focus.