WEBSITE ANALYSIS 5 – SONY’S BE MOVED CAMPAIGN

Sony’s ‘Be Moved’ campaign main focus is to allow users to look deeper into the products they create and the teams that work in them. They created an elaborate website with a fully immersive user experience using parallax scrolling, which is where the foreground images move faster than the ones in the background. This method of having separate layers within a page and manipulating the size and the speed they move you can create a sense of depth.

The method of having images and text moving alongside each other and flowing in front of and  behind each other looks like something that would be somewhat of a nightmare should it be attempted using code.

The website is complete with animations of shattering glass, assembling of products and visual scenes of underwater, forests and the universe. It looks very professional and an extreme version of a parallax scrolling site, at first glances this website seems extremely complicated to build, but doing a bit of research I came to the understanding that it was much more simple than how I’d imagined.

By creating a video sequence that lasts 1306 frames and allowing the user to flick between the frames by scrolling is essentially all that is needed to create a website as creative and professional looking as this one. It then creates a website that looks like nothing else on the market as it would be extremely difficult if not impossible to create the movement of some of the objects in 3D space with just normal code. Looking at the code;

img_source-code

the .frameloads is a function that makes the display move on the the next image when thhe user scrolls, and the small_256,small_512 and large_960 are for the different size images for the different sized displays.

Screen Shot 2014-10-27 at 14.15.20 (2)Screen Shot 2014-10-27 at 14.16.21 (2)

Screen Shot 2014-10-27 at 14.16.56 (2)

As you can see it is very visually appealing, the textures and layers just create this completely immersive experience for the user, telling the story of how they engineer and design together.

References

http://subtlepatterns.com/thumbnail-view/page/16/

http://discover.store.sony.com/be-moved/

https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/

Advertisement

2 thoughts on “WEBSITE ANALYSIS 5 – SONY’S BE MOVED CAMPAIGN

  1. Pingback: Adaptive, Fluid, Responsive or Static? |
  2. Pingback: Redesigning AKB Design homepage |

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s