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.
Space I/O: Defining our future design language and framework
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, visualisations and prototyping while keeping the process open to the public.
Our strategy was to build 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 Space I/O
This strategy provided a foundation for building a system using web components such as React. 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 user-experience is based on the strategy of using spaces. Spaces are in a sense an element that can be placed in the order and sizes which is wanted. The idea of building spaces is to provide great flexibility to update and maintain the platform while providing users with a simple but playful experience that makes it easy to discover and dig deep at the same time.
From a process perspective we began by defining user needs on post-it’s, as patterns started to form we grouped all the post-it’s into overall triggers that we could use to draw high level wireframes using Google Slides. With these high level wireframes and user triggers we were able to discuss and iterate on a high level across the team and organisation before moving into a more detailed, annotated and clickable prototype using Sketch App and InVision.
The design direction is inspired by Swiss graphic design from the 1960’s where the focus was to create a strong system of typography, colours 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 five different weights to form a solid hierarchy and relation between the written and visual content. The weights used are Light, Regular, Medium, Bold and Bold outline. The typography is implemented to respond to screen sizes (view-width) which ensures that the typography always fits to the viewing experience.
The base of the color scheme is monochromatic with a set of greys between black and white that helps to emphasise 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 built 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 work with three 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 twelve columns, however we had the need of not only a standard twelve-grid column but also the need to place things off grid in order to make a design system that didn’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 six-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.
During the process of defining the new SPACE10.io platform, a need for a conversational interface for interactions and notifications was identified, and we found our own product Conversational Form an ideal match.
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.
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 playfulness.
We strongly believe in an open and collaborative process. The process is where we all learn and discover new skills. During the seven month long process of defining and developing the framework we collected all thoughts, concepts and discoveries along the way.