Tag Archives: web design

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.

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.

Web Design with CSS

The knowledge of CSS is a plus in web design. You ca customize any sections of web template accordingly, and as detail as you intended.

It’s also some technique to avoid uses of images for certain elements of design, such as lines, shapes and colors. With the advancement of HTML5 in recent days, it makes the design using CSS more flexible and practical.

This is just some encourage for web designers that their design supposedly not to restricted by the old concept or technology in web programming. Everything has been progressive improve and please keep on explore more possible methods that allows you to express you masterpiece of your designer’s spirit!

Click here to study the script of the page previewed above

Here’s some sharing of my CSS techniques: playcss

Design impacts.

First Attempt


This is my previous blog. I build this blog using PHP all the way from scratch. Well I have stopped for a while. Due to incomplete CMS system I try to build. I am not able to maintain it well.

So in this coming years I will try to develop it using WordPress, which I do not need to concern anymore on the system structure of the blog itself. 😀

Wish me luck! 😛