The first step in the digital development was translating the wireframe sketches from paper to Figma. I decided on a 7x7 grid, as I like uneven grids as I feel they are better at creating structural hierarchy as they don’t have a central gutter.
I also felt the 7x7 grid would work well as it would keep the grid cells quite large, which would improve the usability of the hand-tracking motion controls as the user wouldn’t have to aim at tiny targets.
Before going further with digital development, I pulled together a brand style to use throughout the project. I decided on using just black and white as the colours, as this would help to show the brand as a premium service.
I chose the typeface, “TT Commons”, as it was a strong, clear typeface with many weights, which would be very useful for a project of this size.
I also created a style for the tiles which were intended to be the main structure of the dashboard. The tiles were white rectangles set at a 15% opacity with a background blur of 40. This, along with a fine 30% border and 20px rounded corners gave a glass-like effect I really liked. The glass effect wasn’t purely stylistic but also served a function. I had previously mentioned that the user would be able to see the video feed from the outside cameras, so having these glass-like tiles would mean they could be layered above the video feed, so the user could see where they were going while still interacting with the dashboard. I had wanted to add a grain to the tile to give the glass a frosted effect, however, the grain had to be an image set at an opacity, which played havoc with prototyping due to the rendering.
Having sketched out the icons in the paper development part of the project, I recreated them digitally in Figma. I had initially considered not rounding the icons, however, the non-rounded icons felt too jagged with the typeface. The rounded icons gave a much more balanced feel between their own rounded corners and the points of the typeface.
I started to build up the wireframes by adding in the glass tiles and marking out where the content was supposed to go. After tiling up, I added the headers and titles for each. Having this structure in place would make designing the components much easier due to the modular structure I decided on.