Because motion events are a bitch to test
This week saw the launch of Remote-Tilt, a new side project that I have been working on with Remy Sharp. I can’t take any credit for the idea or indeed the value that the tool delivers but I have tremendously enjoyed designing the brand and building the responsive layout behind the promotional site.
The best way to explain the project is to watch Remy’s video…
Floating in space
Whilst playing with Remy’s prototype I found my self being drawn to the demos involving the rotation of an object on screen. Sure it’s a mightily clever bit of code that will save mobile app developers hours of tedium but that aside it’s kinda fun to play with.
The ability to control a virtual object floating in a virtual space by rotating your actual phone back in the real world is pretty futuristic and it was this concept that stuck with me when I first started designing the site.
Choosing a font
I wanted to create a logo that wasn’t flat. If I was going to capture the magic of the app I needed the logo to exist in more than one plane. I started with the words “RemoteTilt” and started thinking about ways to introduce some kind of 3D transformation.
I decided that if I was going to distort the words and they were to remain readable then the starting point needed to be as uniform and as clear as possible. I decided to use Bell Gothic Standard Black because it was a fairly plain sans-serif font that was easy to read and had a nice consistent aesthetic.
To increase the consistency even further I opted for BLOCK CAPITALS. The capital “I” had some bizarre pseudo-serifs which I wasn’t keen on so I converted the text to paths and manually removed them as shown below.
Taking a different perspective
The next challenge was to introduce the 3D element. I tapered each word at one end to add a sense of perspective and to make the logo appear to bend away from you in the middle. With the text all in one colour it still looked kind of flat. It looked like it could have been made of sponge and had just been squeezed in the middle where the letters get shorter.
To try and reinforce the idea that the two halves were separate I switched to using 2 colours and slightly increased the gap between the two words.
The illusion was coming along nicely but it still wasn’t as 3D as the mesmerizing prototype demo I was trying to recreate. I decided to add two contrasting planes to the design to emphasize the bend between the two words. I also added a slight rotation so that the planes and indeed the logo itself would exist on a more complicated compound angle rather than being perfectly horizontal.
Getting the paints out
At this point I was fairly happy with where I had got to but the design was still undeniably Remy Grey ™. I immediately started experimenting with green. I’ve got no idea why but I suspect it is probably something to do with my old design boss being a die hard celtic fan. A pinch of noise and a smattering of radial gradient later I arrived at the final design.
From this logo and colour scheme the rest of the site layout evolved fairly quickly. There were a few alterations needed along the way to ensure the site was responsive and well supported on smartphones and tablets but it was only a matter of a couple of evenings from inception to execution.
The finished site can be viewed at http://remote-tilt.com/. For maximum CSS bells and whistles you will probably want to view it in chrome.
The project seems to have been well received with numerous mentions on twitter and a rather complimentary article on .net.
Thanks for the project Remy, I look forward to the next one.