Category Archives: Cinemagraphs

Cinemagraph on Web Design Integration

Getting your web design more lively to improve the user experience? Here’s some idea’s on implement moving visual elements  as part of interface design.

Just embed a video on the page? No, it could end up slow performance of the web browsing. In fact, GIF/HTML5 video could fix this problem. GIF and HTML5 are generally smaller file size and it’s suitable for website.

cinematograph3
Cinemagraphy in GIF (3.5MB)

The visual above is cinemagraphy, some people call it “moving photograph”. It is different with the ordinary video. This GIF web picture is self seamless looping, which is makes scene running forever; giving an endless scenery time. And it is looping continuously in length short length which makes smaller file size  compared to a full length video.

As for this, this is MP4/webm cinemagraphy video. Guess its size? It is around 500++KB only which is less than a megabyte. Currently this video is at 1K bitrate and full resolution size, the file size could go significantly smaller as you make proper adjustment to fit your web page design.

Surprisingly, this more detailed quality web video has smaller sizes compared to GIF.

Feel free to see my sample design based on this idea, the enhanced user experience by HTML5 cinemagraph video as background elements in web UI design.

Of course, there a lot of things to be argue about, device performance issue, file size, loading speed and other more considerations. But all these can be solve in due time, as more adjustment to be made and fine tune during development of your project.

Nowadays the advancing of the technology throughout decades has bring forth improvements in web technology. The emergence of HTML5 allows website to become much more robust and vibrant in user interface design. Unlike the previously old, static, boring user interactive web design.