Ella dos Santos

The skinny

Interactive portfolio site for high-end women's fashion designer Ella dos Santos. A minimalist site put together with subtle transitions and animations to create a slick browsing experience, with a design based on Ella's unique style - "taking inspiration from forgotten places".

Visit site

View slideshow

The not-so-skinny

Project overview

Ella needed a site built in time for the release of her Autumn/Winter 2012 collection - the brief was to create a site that provided an 'experience' to view the collection, and the design aesthetic had to compliment the design of the garments. It was also essential that the site worked well on iPads.

Responsibilities

Ella knew exactly what she wanted in terms of site content and elements, passing over wireframes from which I put the site architecture together. The site design was a collaborative process, Ella had a specific idea of the aesthetic she was looking for and gave very specific instruction, with myself working on the finer points of the design. I was fully responsible for the site front-end development.

Technical deets

The site is built on the HTML5 boilerplate, and run through ImageOptim and H5BP Ant Build Script for production. It uses Modernizr feature-detection library to enhance for more capable devices, and to create tailored experiences for devices with touch input. The front-end uses various, predominantly jQuery-based, plugins. Most notable of these is the 'exquisite' Isotope, which provides the masonry-layout with dynamic filtering/sorting and general 'ooooh' factor. Other plugins include jQuery easing, jQuery sticky, jQuery replaceText, Flexslider, mediaelements.js, Mobile boilerplate helper functions and infinite-scroll. The videos use YouTube iframe-embed code, the photo galleries use the Flickr API in combination with the flexslider plugin and the podcasts use the mediaelements.js script, meaning all multimedia can run on HTML5-friendly devices which don't have Flash available. The site uses AJAX to load individual content pages in to the homepage and infinite-scroll to AJAX in isotope items, making it essentially a single-page app. The site makes use of the Google Analytics API (and more specifically, the Google Analytics PHP Interface) to display the number of times each multimedia item has been 'viewed', the API call is made and cached in PHP but the actual page rendering is done with JavaScript because, well, I don't know much PHP. The back-end is built on WordPress, using various plugins, most notably Advanced Custom Fields.

Outcome

Ella was very happy with the end result, which has also been very well-received by site visitors. There are still some features to be added to the site in the future, which should provide an opportunity to review and improve the site further.

Neil
Carpenter

Design & front-end development