06 Dec 2016

SES: Drupal 8, front-end teardown

We’ve just designed and built a new website for the world-leading satellite operator, SES. SES connects and enables broadcast, telecom, corporate and government customers, and enriches the lives of billions of people worldwide.

We’re really proud of how it’s turned out, and as it’s one of the first batch of high-profile large Drupal 8 websites, we’ve been asked by a wide range of people about our technical approach to building a complex site using the latest version of Drupal.

You can read our case study here on the project as a whole, but here is Stuart Wilson, Head of Frontend Development at Catch to explain a little more around our front-end approach:  

“The sheer scale of the SES website demanded a scalable and comprehensive front end system. As a team we approached the transition from design to code by creating a static style guide of individual components which would then be used to power the Drupal 8 website.

Our modular CSS was written in SASS using NPM to run build scripts and wrapping it up with PostCSS’ Autoprefixer for greater resilience to browser inconsistencies. Using BEM syntax and championing an OOCSS approach allowed us to write configurable componentry which was open to extension, but closed to core modification which meant that QA testing could happen earlier on in the build.

“The sheer scale of the SES website demanded a scalable and comprehensive front end system."

STUART WILSON, HEAD OF FRONT END DEVELOPMENT AT CATCH

Thanks to Drupal 8’s use of the Twig templating engine, we could test the flexibility of our HTML templates using mock data which was then swappable for real content from the CMS.  This created a unified theming workflow with clear ownership between the front and back end of the website and helped reduce code overhead whilst instilling scalability within the UI.

Thanks to our modular approach, we were able to utilise Drupal Paragraphs to promote greater flexibility across content types in the CMS, enabling SES to realise any combination of page designs they required.”

Visit www.ses.com and stay tuned for future SES developments. We’re continuing to work with the team in Luxembourg on increased website functionality and a range of other exciting digital products.

01 Dec 2016

Celebrating beauty

Producing a range of beauty tutorial content as part of our complete digital overhaul of Manhattan Cosmetics

As part of our complete digital overhaul of Manhattan Cosmetics; including an entire redesign and development of their brand website. We helped produce a range of beauty tutorial content to feature on the new site and across social platforms.

Over the course of 6 months we have produced a range of large scale beauty tutorials from productions with celeb status make-up artists’, elevated blogger style looks, to intricate nail art tutorials. Each piece of content provided the consumer with a totally immersive brand experience.

Art direction

We worked with brand ambassadors and celeb make-up artists to help define and create not just the look and feel of the video, but even make-up look briefs... all the way down to the style of the models' eyebrows. Our involvement with each aspect of the visual aesthetic, collaboratively with make-up artists ensured we maintained a brand look and feel across all videos we produced.

The Beauty blogger

The internet is saturated with beauty tutorial content shot by vloggers and beauty experts at home. Catch identified the need to utilise a beauty vlogger’s influence and personality. Creating content that gives those vloggers a platform to be seen and heard even further than their current viewership.

Our creative direction for these pieces of content is always to create something that is grounded in reality, but with a production quality and execution that wouldn’t be able to achieve in a vlogger’s bedroom. From the lights through to final edit, the ‘at home’ content creator can be celebrated for being given the ‘brand’ treatment.

Creating visually slick and stunning vlogger tutorial content that shows the brand not competing with the vast sea of beauty vloggers and tutorials, but collaborating and celebrating with unique and inspiring talent.

The nail artist

We’re always considering new ways to tackle content for a market that is full of beauty tutorials. When it came to inspiring and educating women about the new range of ‘Last & Shine Nail Polish’, we kept it simple.

Working with a professional nail artist and a world famous hand model(!) we created striking nail art in our studio. Letting the nail art do the talking. Later turning the content into step-by-step short form videos and animated gifs - delivering content in multiple formats design for social sharing.

Each piece of content provided the consumer with a totally immersive brand experience

Behind the scenes

Since working with many of our Vloggers and influencers we’ve been pivotal in championing new talent, Zoe Newlove began working with us for COTY brands with a following of 9,000. We found her and felt her personality and tone of voice worked perfectly for the brand - a year on she now has over 30,000 followers across her platforms and blogs - we see big things for Zoe.

Another insider fact, our hand model used in the ‘Last & Shine Nail Polish’ videos has her hands insured for £5million! She shared her hand beauty secrets with us; including wearing white gloves on the beach and never doing the washing up!