3M Touch responsive website

3M

  1. 25Strategy
  2. 30Design
  3. 20Storytelling
  4. 25Interaction

Brief

To create an umbrella website that showcased 3M's touch films and product videos using virtual samples that would inspire users and show the material's potential applications

Response

We showed the possibilities of application for the product among a cross section of consumers: tablet users, gamers and businesses. Models were shot against a white background and the team created CG environments around them.

Under the umbrella of Touch Films we created three stories showing the potential of the technology, such as edge-to-edge tablets and touch responsive magazines. The site itself is responsive, working smoothly across multiple platforms. Revealed at the CES show 2014, this branding redesign aimed to excite not just designers, manufacturers and engineers but consumers too.

Delivery

  • Responsive Parallax website
  • CES show 2014
  • Animation
  • Direction
  • Iconography

3M Branding

3M branding

Concept

A branding re-design and website creation for 3M’s touch sensor films that included a fully responsive web presence and virtual sampling stories that show the products being used in their potential applications.

Video shoot

Storyboard

We imagined a world in which the touch sensor film was already being utilised in its many potential applications. Then we started bringing it to life with our storyboard artist.

Storyboard

3D assets creation

A virtual sample was created from the 3M touch concept. We used tracking dummies in filming - such as magazines and tablets - and used a 3D overlay to bring the product to life.

3D assets creation

3D environment creation

We filmed the models against a white background and created a CG environment around them.

Final video

The final videos show the stories of each Touch product across a cross section of potential consumers and uses: tablet users, gamers, casual users and businesses.

Website

Strategy

We created a responsive site that easily navigated between the three touch sensor film products – all under the umbrella of Touch Films.

Home closed
Home open
Product page

Asset delivery

We created logos for the Touch films so that the products had a unified but distinct visual identity. We also created graphics to represent the technology and textures of the film.

Metal mesh and nanowire logos
Stacks

Website design

The site is cleanly segmented with each Touch film product given its own space, differentiated by colour and logo, which you can enter in order to view its story.

Responsive layouts

The website works smoothly across multiple platforms: adapting to suit computer, tablet or smartphone use.

Responsive layouts
Back to TOP

Associated projects