Luke Beard

Last week saw the launch of the new Hipstamatic.com. A complete overhaul of the brands home on the web. Some people may not realise this but Hipstamatic was not released under…Hipstamatic. The app as well as a few other products you may know were officially under the brand “Synthetic”. The site is not only a slick new home for the company but also a shift from an app called Hipstamatic to the brand of Hipstamatic in the eyes of the general public. 

Hello Browser
Designing in the browser has been a talking point for quite some time now and I can see the benefits of both. Of course I understand that most designers are pixel perfection warlords and want to mock-up every last detail before a build commences, and I get that, I’ve been prone to this in the past too. I spent a good deal of time tightening up my front-end skill set over the past two years to get to the point were I felt confident that I could actually design an entire project or most of it in browser.

This was the first project I successfully designed with hardly any Photoshop. I mocked up one view (the home page) and the only other time I opened up a new canvas was to put together some assets iPhone, iPads, logos etc. For those wondering about design revisions, it took 3 completely different concepts and a further 2 rounds of tweaks to nail the final style but we are still only talking one page here. 

From design to build it was refreshingly productive and efficient. I enjoyed the process a lot but it’s good to point out that this approach was made all the simpler thanks to the minimal aesthetics that the brand has taken on. In the grand scheme of things there is very little design across the entire site and this was actually one of the goals of the project, to let the products shine and the design of the site to distract as little as possible. It’s a pretty nice contrast between the skeuromorphic design of the apps and the flat minimal style of the site and also an interesting change from the Hipstamatic Gear site that I worked on earlier in the year.

Hipstamatic are currently using Gotham for a whole bunch of their print work so the site is set in the closest thing you can get (for now) Proxima Nova. I’m a big fan of it…apart from the capital M’s, they are horrible.

Straight up @2x
I’ve been following how retina optimised sites have been adopted across the web since the iPhone 4 was originally announced. I think it’s a fantastic technology and as a designer it’s an exciting thing to work with. I’ve been fortunate enough to have a Retina MacBook since it was launched and while I can not physically design for @2x natively on the MacBook It’s self (Photoshop only plays ball if it’s hooked up to a @1x display) I can browse the @2x web from a desktop perspetive. So naturally I had to make this project retina for the ground up so here are a few steps I took towards that. 

First stop was the main sprite that I called for various graphics around the site. Thanks to this tip from Maykal it was pretty simple. I had already used a global class to call the sprite and with a simple media-queryto tell it to get the @2x sprite version, everything that had the .sprite class instantly became retina happy with very minimal effort.

Before anyone says “Hey, those hands or the iPhones images are not @2x dude #fail”. They are huge ok, they would not be worth the file size or at least not yet.  

Icons in web-fonts have been interesting to me since I first started using them when I was at Zerply and I’ve always wondered how far you could actually take this method. I knew I was going to have to reuse allot of logos and other icons that I did not want to include into the main sprite as there would be various dimensions and it would have a knock on effect in the file size. 

I ended up creating a typeface of all the various logos. icons and even Apples “Available on the app store” badge and all those elements became infinitely scalable and incredibly robust in terms of styling and of course, retina ready. My only draw back was that I could only assign the elements to single characters, for example a lowercase “i” would display the Incredibooth logo and it’s hugely accessible. I wanted to stay away from implementing them as data-attributes for the sake of IE so my compromise was to simply visually-hide the word the logo was replacing - the the word or heading is physically still in the markup. 

Moving forward i’d love to learn more about OpenType ligatures after looking into the magical Symbolset. It’s definitely cool stuff. 

Meeting the Middleman & tiny .png’s
I’ve been dabbling in ruby and ROR since i’ve been with Hipstamatic and it’s been great fun so far (I had no pior experience with it) and for this project I decided to go with the Middleman, a static site generator based on Sinatra. It was wonderfully simple, like  really simple. There is a whole bunch of plug and play file size optimisation that is really handy. 

Everyone loves .png’s and I love them because I can crush them. It kind of has the same vibe as hulking out on a project (nerdy I know, deal with it). There are two wonderful tools called Imageoptim & ImageAlpha that as a team work literal magic on .png file sizes.

For more information on the bits of tech used take a look at the site credits section.

The Little Things
I baked a few little details into the site that are purely for a bit of fun, here are a few things you might of missed. 

• Hover over the yellow circle in the footer
• The sub menu on the about link has a little bouncy arrow.
• The about sub pages have some subtle parallax scrolling on the black header areas.
• Try right clicking the logo in the header or the app icons. I don’t know who did this first (spotted the behaviour on Github) but I loved the action. 
• Not so much a little thing but the whole site looks awesome on your iPad and iPhone.
• The sample images that popup on the home page actually randomise positions each time the page is loaded with a little jQuery snippet. The timing is done by giving each image a different animation delay in the css. On a related note, the only animations done with JS across the whole site is the way the pages fade in and out, everything else is 100% CSS.