New brand site for Sony uses rendered JPG frames for 3D parallax scrolling

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

by danhon • 13 years ago

121 94 13 years ago

discover.store.sony.com

metabren• 13 years ago

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

sehr• 13 years ago

Just realized how lazy I've become, thank you.

MichaelApproved• 13 years ago

It's not just about being lazy, this is really helpful for mobile users.

ChrisNorstrom• 13 years ago

The Good: Really changed my perception of Sony as a brand. They're a lot more experimental and ahead than I though. I feel like going out and buying a PS4 honestly. Great job on the marketing team. (I actually watched the videos and was... "moved", wireless lens, underwater ear buds, 3d viewer)

The Bad: Over complicated and choppy (anyone else?). It's basically a TV commercial that you have to keep scrolling to watch. I think there are better, simpler, less choppier ways that this brand message could have been conveyed.

Alternative: Slides/pages with full screen video? Take each scene and separate it into it's own full screen "slide" (not slide show but one slide after the other on the page) and each mouse scroll moves you down to the next slide.

robmcm2• 13 years ago

It makes me wonder why they don't just show a much higher quality and perhaps smaller file size video, and then overlay links etc over the top based on keyframes.

I guess it comes down to fashion and at the moment these animated scroll things are it...

mattdw2• 13 years ago

We show lower res while scrolling, load in high-res when stopped. All text, overlays etc are HTML which track frame-by-frame.

Assume all the usual tensions between designers and developers :).

alan_cx• 13 years ago

Changed perception? That has to be insane. Just a mere funky web page and you go from not interested to wanting to buy? Good grief. I am stunned that a mere web page can do that for any one in actual reality. You seem far too easily bought. Here, have a shiney thing, there you go...... I had no idea people were so easily manipulated, and equally happy to say so in public.

I really don't get on with these scroll down animated sites.

As usual with these things, I don't see anything useful or informative on the landing part of the page, begin to scroll, see I'm expected to scroll for god knows how long incase there is anything useful, all I usually see is show off animation, I sigh, then close the page.

Why am I suddenly expected to constantly scroll these things? Is it just so some web developer can show off their latest, now tired, seen it all before now, trick?

I want to land on a page, see if its worth anything, then possibly click for more info. If I want to see an animation, video, or what ever, just show the darn thing in a normal video. But I want a choice there, not a silly site that auto starts it, often hurting my ears, or waking up the house, with full volume in the process. If the landing page gives me interest, I'll happily watch a short advert, animation, or whatever to get more info.

Why all this scrolling? There are much simpler ways to show all this, without me having to almost work to get to see it. Its not my message, its theirs. Why are they making it harder for me to see their message? I just left the page.

Just me?

Oh, BTW, I have some magic beans for sale on a pretty website. Any takers?

jrs99• 13 years ago

i think saying you "feel like" going out and buying something is not the same as "i will absolutely buy it now without looking into reviews or anything else whereas before i saw the ad i would never have bought it." The first suggests that something moved you emotionally. The other might be more irrational.

Maybe if you make a pretty website he would "feel like" buying some magic beans and eventually decide not to.

personally, i love the scrolling. you get to stop and look at things. in the future, these are going to have much more interaction and exploration. That's the next logical step.

samweinberg2• 13 years ago

I agree completely. It was pretty and also changed my perception of Sony as a brand, but it was tedious to scroll through and could have been done better.

toughcrowd• 13 years ago

Jeese this is a tough crowd. I thought it looked great and made the brand look great. Kudos to the designers.

gnaffle• 13 years ago

Well, my feeling was the opposite. I was impressed with the execution, but not the content. My first thought when I read "it's about what we make you feel", was that someone at Sony saw this spot by Apple and decided they wanted to do something similar: http://www.apple.com/designed-by-apple/

They start by saying "we are engineers, but we are also artists", then they spend the rest of the ad creating this separation between engineers and artists, that seems to be common to most electronics companies, like this:

"You don’t wear a TV. You do wear the Personal 3D Viewer. So, we had to rethink our process. We started by designing from the inside out but ended up with a chunky, unwieldy viewer. So we reversed tack and designed the outside first. Only then did we arrange the internal workings and make something desirable to both watch—and wear."

The reality is that Sony has _always_ been focused on how things look and on making things smaller, there are many stories about how their product managers would carry around a wooden replica of the final product as they wanted it to be, challenging the engineers to make it smaller and make it all fit (open up an early MiniDisc player, and you'll see this process at work :).

So this just makes the whole ad look like it's created by a marketing department that doesn't know anything about Sonys history and its design philosophy.

leoc• 13 years ago

Oh, the ad—and, it seems, the whole publicity message of Hirai-era Sony—is a painfully obvious Apple me-too. Given the brief to deliver that "we ♥ design, too!" message, I think the ad does a pretty good job with the materials available to it. One obvious difference between Sony and Apple is that the former is and has always been* "busy making everything". By pulling together a bunch of diverse, but fairly classy and desirable items from the Sony catalogue the ad helps to mitigate the "consumer-electronics flea market" impression.

The irony is that while Sony chases the Apple halo, Apple's released a couple of ads recently that are highly defensive underneath the sugar-coating. The "Making a difference. One app at a time." videos http://www.apple.com/ios/videos/ http://www.youtube.com/watch?v=MOUfzyAEQHk seem intended as a rebuttal to the "lol Angry Birds" dismissal of the iOS App Store, while "Misunderstood" http://www.youtube.com/watch?v=nhwhnEe7CjE is a response to the moral panic about smartphone zombies (and to a lesser extent the "iOS is for consuming, not producing" criticism).

* Well, since maybe the '70s at least.

linux_devil• 13 years ago

" A journalist once called us a guinea pig because the results of our experiments were copied by others.It was meant as an insult, but we took it as a compliment. Combining artistry and engineering IS an experiment—but when artists work with engineers, every day is a chance to be moved." Found this at bottom of page

benguild• 13 years ago

Interesting experiment, but even chugs along on my latest generation rMBP in Chrome. Meh

mattdw2• 13 years ago

Does it still chop after it's had an extra 30 seconds or so to load? It lets you start scrolling before it's fully loaded, but unfortunately the backfill-loading causes the scrolling to go choppy.

wanda2• 13 years ago

Weird. It's fast on my Thinkpad X201s from aeons ago (running chromium).

X4• 13 years ago

I have a 3y old 1.3GHz cpu with integrated graphics only on Gentoo, but it's so smooth, I can't believe it's not a video! How do they make it so smooth?

When I click the last page button on the right side, it runs smoothly through all animations, same when happens when I scroll around. Can't wait to see someone make a blog post on: "This is how Sony exploited HTML5 to run Smooth Parallax Effects on their Page".

I ran it in Firefox with about ~100 tabs open having over a dozen addons, an IDE opened and npm install running in the background.

szatkus• 13 years ago

No problems on Windows with i7 and GT 430.

vladimirralev• 13 years ago

The site is not "retina-ready" and it looks pretty bad on rMBP. There is also some progressive rendering which looks poor. I think with a little more work it can be a great website though.

waltercfilho• 13 years ago

All that, and they couldn't get the damn Twitter icon right.

mineo• 13 years ago

The text and images also cut off on the left and right if your browser window is "only" 1200px wide.

Oculus• 13 years ago

Really cool website. I've noticed that really cool brand websites for large Fortune 500 tech. companies tend to be done by a high end agency rather then the companies' own teams.

coolnow• 13 years ago

Does anyone else have an i7 4702Q with a HD4600 running Chrome (Windows 8.1)? Is smooth scrolling, actually smooth for you? It doesn't for me, and even Internet Explorer (which surprisingly runs most pages 60fps smooth) runs the page really badly.

edit: firefox runs the page smoothly, but on other pages, still can't top IE's smoothness. What a weird world it is now.

robin_reala3• 13 years ago

Any reason why they didn’t just use a paused video and step through it frame by frame on scroll? Seems like it’d be a much more efficient experience for the user.

tagawa• 13 years ago

My guess is it's to get attention by sparking discussions like this.

prr• 13 years ago

Reverse scrolling a video is really slow, unless you set the key frames close together (in which case, you don't really gain much file size wise).

robin_reala3• 13 years ago

Ah, I figured there was a reason I was missing. Thanks!

Kiro• 13 years ago

How does this work exactly?

talmand9• 13 years ago

Series of images are loaded into a canvas element that steps through them as you scroll. The text is layered on top and parallax-ified as needed.

Geee• 13 years ago

What's the point of these scrolling sites? It's really hard to control the scrolling speed and stop just in the right place. Just let me press a button and then proceed to the next "slide" if you want fancy transitions.

jffry• 13 years ago

I agree, and on this site, over on the far right side, are some little rectangles you can click to jump between the sections (albeit still with the animations, but sped up).

kalleboo• 13 years ago

There are page down buttons that appear at the bottom of the page.

gbog2• 13 years ago

Very choppy and hard to go back.

On the plus side, I didn't know about these "Smartphone Attachable Lens-Style Camera", is there someone here able to tell me if it is worth it? (I have a Galaxy Note and no other camera).

robin_reala3• 13 years ago

DPReview had a preview in September: http://www.dpreview.com/previews/sony-cybershot-dsc-qx100

anujkk2• 13 years ago

Like many other verticals there are many technological innovations happening in photography too. This "smartphone attachable lens-style camera" is one of these recent innovations. I can't comment on quality of the lens itself but they must be far better than that of a standard camera installed on mobile phones. These lenses can be used both attached/detached to the mobile phone. They use NFC (if your phone is into that sort of thing) or create their very own Wi-Fi signal to connect with the phone.

I first read about such lenses and other similar products on http://photojojo.com/store/ . They have such products for both android and iphone.

Now, is it worth it? Depends on your requirements. If you don't want to get into professional photography but still want to improve the quality of your photographs you can use one of these. However, remember that these don't replace DSLRs.

1. Mobile Camera : average quality/almost zero creative control/very good mobility

2. Mobile Camera + Lens accessory : better quality/almost no creative control/good mobility

3. Point & Shoot Camera : decent quality/little creative control/good mobility

4. Hybrid/Zoom Camera : decent quality/very high optical zoom/decent creative control/poor mobility

5. Mirrorlesss/Interchangeable Lens Camera : Good quality/Good Creative Control/average mobility

6. DSLRs : Good quality/Good Creative Control/Poor Mobility

I personally prefer to keep [1] in my pocket & [5] in my bag(along with lenses). I also have an old Zoom Camera that usually sits in my home. I occasionally use it together with a teleconverter lens to take photographs of sun, moon & objects/people that are far far away.

Tloewald• 13 years ago

According to reviews, the lens cameras don't work well in large crowds (e.g. Sporting events, your kids' school play). Physically docking to your phone would be more sensible (there's a kickstarter project along those lines). But frankly the gap between cellphone cameras and the rest is closing to the point where 1-3 is a wash, and 4 is pretty crap anyway. So it's 1-4, 5/6. If Sony would produce some decent lens options for reasonable prices...

gbog2• 13 years ago

Thanks for these details. I'm interested because I usually don't carry a bag, and care about mobility and availability. I also like the idea of taking picture without disturbing too much the (human) environment, e.g. without shooting too explicitely. However this lens seem to be too big to fit in a pocket.

scarredwaits• 13 years ago

Apparently the RX1R PREMIUM COMPACT CAMERA (third from the end) includes a slice of cheese in the middle of the sensor. Easter cheese? :-)

nebulous1• 13 years ago

http://flashvhtml.com/

Feels better in my opinion. The jpg method seems too jerky.

taspeotis• 13 years ago

Care of Chrome's developer tools...

    Network tab: 1410 requests | 51.4 MB transferred | 2.0 min (load: 1.2 min, DOMContentLoaded: 4.29s)
    Console: 15 errors, 12 warnings

LandoCalrissian• 13 years ago

I was wondering how big it was, that completely blows away what I expected. That's really not usable for huge swaths of people.

daeken• 13 years ago

How many people that can't handle 50MB of content are really in Sony's target market?

neals• 13 years ago

At some point, wouldn't you just rather play a movie than have me scroll all the time?

TomGullen• 13 years ago

I got a pretty good desktop computer and it's choppy. These things really have to be silky smooth for me or I leave pretty quickly.

kjhughes• 13 years ago

After all, it's not about what we make; it's about what we make you feel.

What their site, their opening punchline, the responsive design problems, and the slowness make me feel is that they're overly focussed on superficial form at the expense of deeper functionality.

vanderZwan• 13 years ago

they're overly focussed on superficial form at the expense of deeper functionality

Then again, isn't that what almost all advertising is trying to do these days: draw your attention to the superficial form so you forget to criticise fundamental flaws with the design?

headgasket2• 13 years ago

water resistant IP65 smartphone is a real enhancement, as in 100M deeper functionality. I wish the iphone had that instead of lighter/ taller/ thiner fonts.

Yeah I dont take calls underwater but I keep a bag of rice handy...

bigd• 13 years ago

there's a Venus de Milo inside the ps4 controller! can't wait to open mine!

leephillips3• 13 years ago

One implied claim that stuck out was that their recent full-frame digital camera produces images comparable with "medium format film". This is extremely unlikely, and casts all their claims in doubt. Also, I couldn't find anything about their creative research into incorporating rootkits and other exploits into their products: I know what that makes me feel.

_pmf_• 13 years ago

Ah, that explains why it works without crashing Chrome (as HTML5 WebGL monkeying does).

tambourine_man• 13 years ago

Something is wrong when you are selling image quality and your site features blurry artifacted images.

The animations are nice, but they are basically doing frame by frame 704 × 396 movie that look terrible when pushed to 1920 wide.

Just use a proper video format, which is much more efficient.

justMaku• 13 years ago

Try running them on MBPr then ;) And don't forget that they get blurred even more by webkit while scrolling - I guess -webkit-translate is the culprit responsible for that.

cyphunk• 13 years ago

I'm curious why the images have artefacts (or pre-loading fuzz)? A year or so ago Andreas Gysin did something very similar http://ertdfgcvb.ch/p2/sm/play/protog3 and for some reason does not have the artefact issue. (code for that here http://ertdfgcvb.com/sequencer/)

pwpwp3• 13 years ago

I don't see any parallax here. Seems like normal 3D triggered by scrolling.

talmand9• 13 years ago

Could you define parallax? Because I see it, as I know it, in several places throughout the page.

pwpwp3• 13 years ago

"background images move by the camera slower than foreground images" http://en.wikipedia.org/wiki/Parallax_scrolling

vinhboy• 13 years ago

You guys are being way overly critical. I think the website is unique and cool. Reminds me of the those nice story boards on NYTimes.

Also, works ok on Chrome Macbook Air.

Raphmedia• 13 years ago

I really like it! Imagine how easy it must be to create something like that! Simply export a video into jpegs, add some JS and BAM! A nice scrolling effect. I like it!

thrillgore• 13 years ago

Ow my CPU load

smackfu• 13 years ago

So I follow the URL, and it takes 30 seconds to show me three lines of text on the screen, and I can't skip forward or anything.

How is this better than Flash landing pages, exactly?

sp3322• 13 years ago

Because now you can make people's iPads slow, too :)

hnha• 13 years ago

It does not require proprietary nonfree software.

talmand9• 13 years ago

So crappy performance and bad customer experience is okay as long as the software involved was not proprietary and free?

I don't understand what you're statement means in terms of what it is replying to.

jwcacces• 13 years ago

"Scroll Down to Explore"

So, where's the scroll bar?

dfxm12• 13 years ago

And I generally use the space bar to scroll. That's not working here :(

calciphus• 13 years ago

Scroll wheel on my mouse isn't working either.

Nor are arrow keys.

Someone tried a little too hard to optimize for Safari and OSX and forgot that's like 8% of the market.

Chrome on Win 8.1. Site is nearly un-usable (I can click in their custom scrollbar to make it move).

sp3322• 13 years ago

You can click the "scroll down to explore" arrow.

Pxtl• 13 years ago

... I really want to like Sony. They seem to have the best chance of bringing Apple-style quality to more open software-platforms.

But seriously, this is crap (at least on Firefox). It's slow and choppy and it has a (however brief) unskippable intro. Pretty, but broken.

TeeWEE• 13 years ago

Very nice and breathtaking. Just a superb experience, this is the most awesome site I have every visited. Seriously.

Ok, it is big, it is huge. But c'mon, they are stretching creativity, nobody else would come up with something like this, i didnt even know it was possible at all. It not all TECH API's and BITS and BYTES. Its sometimes creativity what matters.

Abusing technology to create something cool often is the first step to making the technology better support something cool like that. So somtimes there is no proper way to do it with current API's. But there is a hack todo it. This is how HTML5 video was created. Because you could hack it in with Flash. But flash was not the best way todo it.

chrislgrigg• 13 years ago

This trend of sites that break gesture forward/back, space bar scroll, and other standard browser features needs to stop.

yourad_io• 13 years ago

It is interesting to note that even if I ever manage to create a splash page as awesome as this, HN will still (partly) respond: Meh - choppy.

talmand9• 13 years ago

I think it has more to do with the choices in technology than art direction. It is cool, but if it sucks performance-wise for enough people then it sucks no matter how cool it looks.

I haven't been a big fan of these types of pages, especially the type that take over the scrolling functionality. I was recently tasked with building one. The creatives love it, I dislike these pages even more now.

aplusplus• 13 years ago

Was it done in-house at Sony USA or who produced it, does anyone know?

Quite funny how the use meta keywords like its 2002 … "download movies online, online movies, internet movies, video on demand, movies on demand, tv shows, watch movies online, watch online movies, support, technical, service, repair, fix, USA"

pdknsk• 13 years ago

I was distracted by blurriness and compression artifacts. Homework for Sony web designers: try the site on a rotated 1920 x 1200 screen. Then you'll also notice that it's cut off left and right. Apple has the same problem on their Mac Pro site, which uses a very similar mechanic.

tsunamifury• 13 years ago

Design should not force the user to relinquish tactile control. I spent more time aware of the broken scrolling physics choppy animations than reading anything.

mrdude42• 13 years ago

wow...

ihatetomatoes• 13 years ago

Curious how it was build? Here is the Be Moved site deconstruction - http://ihatetomatoes.net/sonys-be-moved-website-deconstructe...

Nicely done Sony.

New brand site for Sony uses rendered JPG frames for 3D parallax scrolling

Related Stories