Spatial Interfaces

Pasquale D’Silva
Jul 28, 2015 · 9 min read

Modeling Space

Drawing the map

A simple map, describing the relationships between Interface contexts in Keezy Drummer. This does not indicate the bounds of a screen. The arrows represent the temporal dimension (time!)

The 4th Dimension?

As you can see, representing the 4th dimension in a 2 dimensional form gets hairy, real quick. “W” in this figure, represents time.
A Transitional Interface, demonstrating Contextual Zooming in Keezy Drummer

Manipulating a list

Google’s Material Design guidelines seems to think that you should only accelerate when leaving the screen. I beg to differ.

Interfaces with tactful Spatial Design



Tumblr, iOS

This bird’s eye view reveals an interface that’s hard to get lost in. A few tall, scrolling columns, and a few contextual overlays. We see this Tab Bar mechanism everywhere, in places like Instagram, Twitter, Foursquare, etc.
Tumblr iOS (left), & my rough, proposed change to simplify spatially (right).

Facebook’s Swipe to close

Interfaces with careless Spatial Design

Spotify, what are you doing? 😲

I couldn’t come close to communicating this interface with a bird’s eye view, before getting lost.

Facebook Paper

Turkish Airlines in-flight entertainment

Horizontal space is implied here, but it requires both views to displace themselves over an immense distance.
Horizontal space is implied, without moving the pink view all the way across the screen. We create a feeling of movement, without dragging a viewer’s eyes all the way across the screen. This pattern is common in native iOS Master-Detail views.
Early sketches for Keezy Drummer

Elepath Exports

From the boys at Elepath Inc.

Pasquale D’Silva

Written by

Animator & Software Inventor

Elepath Exports

From the boys at Elepath Inc.