For me, the most exciting part of downloading a PS3 update is restarting, hearing that sound* and seeing if the shimmering ribbon of glory has been updated. Whether its a new colour, a floatier ribbon or more sparkles, it always seems to get better and better.
Right now it’s a bit of a work in progress, it’s got a reasonable interpretation of the organic waves but it’s missing the sparkly bits. Once it’s finished, and if there is any interest (let me know in the comments), I might break it down into some tutorial posts.
DISCLAIMER: It’s only been tested in chrome so far so don’t be disappointed if you’re in another browser and nowt happens.
* The startup sound of the PS3 (which I believe is the sound of an orchestra’s string section tuning up) always reminds me of the opening to Keep the Car Running – Arcade Fire. Once this connection is made in your brain you will never be able to turn on your PS3 without your inner jukebox bursting into song… pretty annoying huh?… I’m sorry.
A little over five years ago I was blessed with the opportunity to join the web design team at Yell. I had no relevant work experience and no formal training in anything web-related. Luckily I had landed on my feet and had the support of some very knowledgeable, and more importantly, very likeable people.
Over the years this team tamed my naive enthusiasm and guided it in a very positive direction. Fuelled by their experience and encouragement I was able learn more about the web than I ever thought possible. More importantly I found myself in the very rare and very privileged position of looking forward to going to work on a Monday morning.
This month I was very proud to be promoted to Head of User Interface and take on the leadership of the very team which made me. My only hope is that I can give back half as much to the team as the team has given me.
Thanks – Chris, Rob, Rupert, Jill, Mel, Nick, Leigh, Rachel, Adam, Paul, Matt, Magnet, Grant, Franco, Carlo and everyone else.
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.
Last night, as a result, drinklist was born. The app itself is currently very basic and is neither intended to change the world nor make me famous. What I do however hope is that overtime it will evolve into a respectable code example which will cover some skills that I have not yet found an opportunity to implement in my current job.
Next we used express.js, a node web framework, to rapidly build and deploy a data-driven webapp complete with custom url routing, and EJS page templating. As if this wasn’t already enough, we then wrote another line or two of code to add a fully functional JSON API to provide access our site’s data… amazing!
For me this was the highlight of the day. The speed with which new prototypes can be built and deployed is astonishing. Express JS kind of reminded me of the CodeIgniter PHP framework except it was quicker and easier to work with in almost every respect.
After a very impressive two course lunch, complete with a salad bar (all included in the ticket price) we headed back to the classroom to learn how to create a variety of web servers to support:
For the lazier readers amongst you, there is a good summary of all these technologies over at the HTML5Doctor blog.
Unfortunately, due to evolution of the workshop syllabus throughout Remy’s tour, learning about databases (MongoDB) was no longer in scope for the course. However, thanks to the solid foundation I got from the rest of the course, I am now confident that I can work this part out on my own.
WARNING: After a couple of beers it seems Remy has a tendency to get over-excited whilst demoing his pet projects. If there are any full pints on the table, get your laptop and bag out of the way ASAP!
All in all a great day. I left feeling inspired to build new things, eager to learn more and smelling somewhat beery, thanks Remy.
FriendSync is an idea I had for a new Spotify feature that allows you to listen to exactly what your friends are listening to. This kind of functionality accompanied with instant messenger/VOIP would be a great way to share music with friends in real time and discuss the bits of an album that excite you the most. It would be just like you are there in the room, you can skip the tracks that you don’t like and rewind the bits that you think are really special.
How would it work?
The first step needed to enable this kind of feature would be enhancing the friends list to distinguish between friends that are currently online and those that aren’t. This could look something like this…
The more observant amongst you will have also noticed the addition of a FriendSync icon in the top right, next to your user name, but how would it work?
Spotify already utilises a fair bit of drag and drop functionality, for example, dragging songs into playlists and dragging albums into a friend’s inbox. I thought it would be cool to utilise this existing user behaviour for FriendSync to enable you to drag your friends onto the FriendSync icon. This interaction might look something like this…
Once you have dragged a friend onto the FriendSync icon, and they have approved your request, the icon will change to an active state. The same icon will also be duplicated next to the friend with whom you are synced.
Whilst you are synced with a friend you will hear exactly what they hear, they are in control.
If at any point you want to unsync, you can do so by moving the mouse over the FriendSync icon and clicking the cross which appears in the hover state of the icon as shown below…