Five Details, (previously known as ‘ExtendMac’), are an OS X software company whose Flow FTP client won a prestigious Apple Design Award. After the success of Flow, the CEO Brian Amerige decided to rebrand the company to coincide with the release of their new iOS app Seamless. Hicksdesign were bought on board to create the new identity and website.
Of the several ideas that were initially explored, the one we chose to develop further were sketches based on combining the ‘Five’ and “D”. Echoing the first letters of the company name can be a very handy way of making both the logo and name more memorable, as long as the name doesn’t change in translation.
The other ideas were more complicated, attempting to convey layers of detail in an application, but as always, simple is best. After a few iterations, this typographic idea became 2 ‘D’ shapes that together form a ‘5’ in the negative space:
The logo has white and orange variants, working on either a white or dark background, as well as ‘layered’ version, for use in backgrounds:
Brian and I discussed suitable type treatments, and I felt that LFT Etica was the right fit for this project. It needed to be a clean sans-serif that would work well bold, but with some individuality. I particularly loved how it looked reversed out of black. Brian and I were both keen, and the fact that it was available to use on the site via FontDeck sealed the deal.
A logo can never be designed in isolation though, so as soon as these initial ideas were approved, work on the website began. The key requirement here was the app name was the most important element of the page - the Five Details branding and navigation was secondary to this. Therefore it made sense to place this at the bottom as fixed footer.
(I didn’t work on the app icons by the way: the Seamless icon was created by Woflgang Bartleme, while Flow was created by Sebastiaan De With)
In terms of media queries, this site doesn’t feature the whole gamut of layout possibilities, but it was clear that optimised views for iPhone/iPod Touch and iPad were needed. Following the idea of 320 and up, the stylesheet starts with the narrow view, and then the ‘desktop’ version is added via media query. This prevents mobile devices from loading the larger images. The iPad is a different context though, and it gets the full css, plus a few other rules to optimise it. As Mobile Safari still doesn’t support position:fixed, the nav is placed at the top using position:absolute.
One thing I always find a bit challenging is how to arrange navigation for a smaller screen, such as maximum width of 320px. There’s not usually enough room for a horizontal navigation, and as Stu Robson points out, it pretty much takes up the whole screen when it’s vertical.
My solution was to place the navigation last in the markup, so that while the ‘normal desktop view’ fixes this to the bottom of the viewport, the iPad has it at the top, and the smaller iPhone view has it as footer.
It makes extensive use of the background-size:cover property to make background images scale to fill the background proportionally, while still filling the viewport. One thing I found with this was that Firefox and Opera didn’t like you to have a different shorthand ‘background’ declaration in conjuction with it. In order for it to work on those browsers, all the background properties had to laid out individually.
I also wanted to mask off the bottom the site, where it goes underneath the navigation. I tested this using webkit-image-mask initially, and then replaced this with a fixed position image. This is straightforward on the plainer colour backgrounds, but for pages such as the About section, where there is a large black and white photo, I had to create a special mask with the bottom portion of the photo, adding the same background-size:cover CSS to make it work.
Here’s the mask:
And here it is in place:
Fiddly, but worth it in the end!
To finish, I’d like to say how marvellous it was to work with Brian on this project. He had constructive insights on the design, and while we went through a number of iterations, the end result is all the better for it. Brian was also someone who listened, and it made for a very happy relationship!