About

The Art of Raw is G-Star's latest campaign for S/S 13 that showcases a series of explorations into the unlimited possibilities of denim.

The digital experience starts with the campaign's centerpiece, a fully CGI macro-level journey through the denim creation process with a musical collaboration from Skrillex.

In addition, the site walks visitors through the denim-making process while highlighting their latest collection and lookbook.

"Ambilight" video

"The Making of Denim" is a collection of four videos that provide a deeper look into G-Star's love for denim and thoughtful manufacturing process.

The videos within the campaign site offer a unique, enhanced experience; a real-time "Ambilight" effect that color matches the site background, giving the video an even more immersive feel.

Intuitive navigation

With loads of sites out there leveraging vertical scroll, we tried to pay close attention to introducing unique features and details to ensure this site was a special one.

One of these features is the "snap" scrolling which intuitively guides the user through each page with either a simple tap, trackpad scroll or subtle scrollbar movement.

If a page extends the view of the window, we introduce hover-panning, a classic mechanic from the Flash days that allow users to browse tall pages and portrait photo's without a click, making for a smooth experience.

Drink Water Give Water

MARIE-STELLA-MARIS is a fresh, new bottled water brand with a clear vision to provide clean drinking water for everyone.

With projects currently running in Tanzania and Uganda, MARIE-STELLA-MARIS plans to extend their reach globally, enabling many more sustainable water projects funded by their bottled water sales.

Through collaborations with numerous health and aid institutions, MARIE-STELLA-MARIS is able to support the clean water cause in a number of ways, like constructing wells, aiding in transport and extending pipe lines to clean water sources.

Online Brand Communication

Being transparent with consumers in communication and interaction is key to charitable organizations, especially one that will operate globally through mass media.

Their homepage is designed to not only be an overview for their current projects and campaigns, but also a destination for learning about and living the clean water cause.

MARIE-STELLA-MARIS posts articles regularly on what is inspiring them at the moment, giving their digital presence a human touch.

Fit for all devices

Marie-stella-maris.com, designed from a classic 980px grid, gracefully falls back to tablet with no loss in design or functionality.

A special mobile site is available for iOS and Android devices that serves up curated mobile content. The desktop version is also fully functional and available through mobile devices.

Press / awards

• Creatie

About

Over the course of 30 days throughout December, global fashion label Scotch and Soda revealed a new inspirational profile each day for their holiday campaign, "Portraits".

The profiles covered a wide-range of inspirational figures such as select Dutch fashion bloggers, the editor-in-chief of JFK magazine and their own stylists and graphic designers.

Each profile is comprised of a short interview and hero photograph giving a brief glimpse into the person behind each portrait.

Press / Awards

• Awwwards site of the day - January 22, 2013
• Awwwards site of the month nominee
• Spyline

About

Launched in 2007, Twenty8Twelve is a global brand with 3 stand-alone retail boutiques in London and is sold in over 300 carefully selected retailers in more than 20 countries worldwide.

Twenty8Twelve was named after Sienna Miller’s birthdate, December 28th. The sisters, Sienna and Savannah, were co-creative directors for the brand upon launch in September 2007.

The Miller sisters have since parted ways from the label which in-turn required Twenty8Twelve to rebrand. We were tasked to be part of their transformation and revamp their presence online.

Design

The homepage cycles through large full-screen photography, immersing the user in the Twenty8Twelve style.

We wanted to challenge the conventional style of a homepage where visitors are given an overview of multiple sections. Instead, the homepage is the collection and the collection only – everything else is tucked away under the logo.

The collection is based on a three-column grid that snaps in place when the user scrolls down. The site also boasts an HTML5 full-screen video player, as well as CSS3 transitions and HTML5 history management.

The website adjusts to the screen size, making the experience similar for all screens and devices. The main menu and scrollbar are hidden by default, but are disclosed once the user chooses to interact.

Adaptive layout

Mobile and tablet support is pretty much a requirement in all projects these days, but it’s still a great feature when a site resizes fluidly from desktop to mobile.

The collection grid intelligently steps from three columns to one given your device and orientation providing edge-to-edge viewing. This method gives visitors a cohesive experience across all devices instead of serving up a separate mobile version with a fundamentally different design.

Press/awards

• 16.05.2012 - Awwwards site of the day
• 16.05.2012 - Spyline Feature
• 04.06.2012 - French Design Index
• 01.07.2012 - FWA site of the day

About

Scotch & Soda was outgrowing its previous Flash site fast. The iPad was gaining traction and there was a lot of pressure to be present on tablet.

Scotch needed localized content solutions, better mobile support, a new CMS solution and most importantly a fresh look that would put them alongside the hottest global labels online.

We designed and rebuilt their platform from the ground up in under 8 weeks – providing them with a flexible global platform that will grow with their brand.

Design

Creating a visual hierarchy that shows the beauty of a brand while pushing it commercially can be a difficult balance. Also, how do you showcase a boatload of content and make it feel cared for? Solving these problems and reorganizing all of Scotch & Soda’s content was quite a puzzle. We stayed true to the following priceless rules.

Content is king

Most importantly, we let the photography and content speak for itself - we kept the interface minimal and clean. All of the photography was meticulously prepped and ordered to maintain consistency throughout the experience.

Keep it simple

Much of the appeal of the site is from paying close attention to the simple things – margins, balance and responsiveness.

Using the entire screen

Scotch & Soda has beautiful photography and content like this should be seen in its full glory. We took every opportunity to take all visuals to the edge of the page. Not only is this appreciated by the visitor, but also the client. Garments, lifestyle photography and detail shots thrive in full screen environments.

Fluid layout

Mobile, tablet, or desktop – wherever you take it, the design fits. This includes the HTML video player.

The first custom pinterest button

When we say we go hard – we go real hard. We’re claiming this site had the first skinned and hacked Pinterest button. Be amazed.

Press/awards

• 28.09.2011 - FWA site of the day
• 18.07.2011 - Awwwards site of the day
• 20 beautiful examples of video in websites
• 50 of the best white website designs
• 50 of the best fashion websites

About

In January 2011, adidas introduced its first in-house Originals denim line. We were tasked by Sid Lee to design and develop an interactive experience that would house both the campaign and collection.

Full bleed

The campaign assets provided by VICE were beautiful. We chose to make these the hero pieces by stretching them given the size of the visitor's browser. Each photo was carefully prepared to guarantee a balanced composition for all resolutions.

Behind the lifestyle photographs, we supplied a blurred version to give the carousel a bit more depth with layers and color-matching.

If the shoe fits

We used the best of both worlds for this experience. Flash was used strictly for video since this site was only being delivered for desktop.

We used javascript and HTML5 for the rest of the site - both for SEO purposes and for potential scalability to tablet.

Autoplay

The site is designed as four components in one vertical scrolling page. We decided to enhance usability by making each component activate as it was brought into view. As the user begins to scroll again, the component pauses, and so on. Each component is scrolled by a single global horizontal scrollbar that controls the unit that is currently in view.

About

Piet Boon is a Dutch design studio comprised of architects, interior designers and product designers. In addition to design for private clients and various commercial housing projects, Piet Boon is also responsible for the interior of the Delano Hotel in Las Vegas, Luxury apartments on Park Avenue and beach villas across the Caribbean.

The brand reflects an honest expression of authenticity, celebrating the ageless durability of true craftsmanship. They stay true to a practical and straightforward mantra: Simple Sophistication.

Design

The primary goal for the interface was to be sure it flowed seamlessly with Piet Boon’s style while supporting their brand value ‘Simple Sophistication’. Interface elements such as lines and buttons were used sparingly, ensuring that each item on the page had a purpose.

The homepage is treated like a magazine cover, featuring the latest in the world of Piet Boon. Full CMS integration allows their team to update any part of the site, including the homepage promotions.

Site Mechanics

Smart mechanics that promote progressive disclosure are used throughout the site. The detail pages for each project are expandable, tucking away additional information when viewing photography. In a single click, visitors can reveal the products featured in any photo.

The entire site can be viewed in full screen at any time – highlighting Piet Boon’s gorgeous collection and projects in full glory.

Press/awards

• Featured on Spyline
• Featured on irie.be

About

This site was all about giving users a blank canvas, adidas style. We dropped an empty freight container in front of every visitor and provided the tools to create a graffiti-style masterpiece.

We loaded up the application with iconic adidas imagery and a variety of painting tools to help create something truly creative and iconic.

Tools

We developed and meticulously tweaked a set of 8 painting tools, along with illustrating 40 different sticker designs. Also, you can freely type on the container and create a custom, stenciled webcam image.

Some of the painting tools include the classic spray can and marker, but also the less conventional fire hose, paint gun and cannon.

Challenges

Content. We only had a rough time-lapse video to go on, so we decided early on that the users would probably have to create the content to make the site memorable. It was pretty clear that we would have to make something really special, virtually from scratch.

Sharing is caring

It was important that the graffiti piece featured in the initial time-lapse video was in-line with the user-generated pieces. This ensured we were creating a cohesive concept. Not only were users invited to share their graffiti piece, but also the complete time-lapse of their process.

Press / awards

• 15.06.2011 - FWA site of the day
• Featured on irie.be
• Featured on Spyline
• Featured on Dutch Cowboys

About

In collaboration with Sid Lee Amsterdam, we were tasked to create an immersive homepage destination built in html and javascript, following the latest push for web standards and tablet support.

The importance and prestige of this project kept pressures high, but made the reward of a successful launch that much sweeter.

The primary treatment included a cycling billboard with simple overlaid messaging, keeping the landing clean and concise. All other content spaces and touts were kept below the fold, so the homepage was easy to digest and disclosed progressively.

Challenges

This redesign was happening at the same time as the heavy shift to iOS-ready websites. It was one of our first non-flash projects which served up plenty of challenges. A site like this needs to work on absolutely everything, from iOS to our favorite versions of Internet Explorer.

The advancement in numerous javascript libraries we have now weren't available, making the development process more difficult than today. On top of that, we had an intense development timeline to keep the launch inline with the rest of the campaign.

About

There are many ideas and explorations that are left on the cutting room floor in interactive production. Anyone who works in a creative field can relate: the clock is always ticking and the client’s warm, uncompromising breath is always felt on the back of your neck.

The first Cartelle site wasn’t only created to debut the new studio, but most importantly to be a creative outlet for all the little ideas that had no client.

The toys

A series of interactive shorts we call ‘toys’ were chosen to be the hero of the experience. After a long and free concepting phase, the toys were narrowed down to a final list of eight. We not only used them to introduce our new brand, but also to express our interactive thoughts and ramblings.

Identity

After a long process of exploration, we arrived at a very basic and recognizable shape. One that would remain timeless, iconic and visible when scaled down to very small sizes, like a favicon. Even though the other logos were very nice, none of them had the strength of the chosen iconic identity. Below are a few of the identity explorations.

Interface Design

The interface itself went through many revisions from visual design to the mechanics. The entire navigation is neatly tucked away to reduce clutter and put focus on the content. On rollover of the logo, the main menu is revealed alongside a vertical hover-scrolling menu that allows users to browse through both the toys and projects without a single click. Mouse clicks are also kept to a minimum in the work section. Visitors can browse the entire portfolio by simply hovering over the arrows located in the corners of the interface.

The 3D sphere in the background of the work section color-shifts by sampling and averaging the colors in the selected image, giving a custom atmosphere for each project. The background design went through 16 different variations, from koi fish to cigarette smoke.

Technical challenges

The largest challenge in the development of the Cartelle site was the vastness of programming that had to be done. The variety of toys was ambitious, especially considering there was only one developer and one designer working on the entire site. Below are a few of the libraries, techniques and theorems that were utilized.

Press / awards

• FWA site of the day - March 15, 2009
• FormFiftyFive
• 50 Gorgeous flash websites you definitely should see
• 35+ Fantastic Examples Of Beautiful Flash Websites