Blog

YOU ARE NOW IN :: HOME :: BLOG

Stylish Full Screen Website Designs

By Danny Foo - June 7th 2016 09.45 PM GMT+0800

The full screen home page is a pattern and an effective way of introducing users to websites of all kinds. The fullscreen background has a strong visual impact that sets the tone for the user experience already when the site is loading. This is why so many beautiful websites go for the fullscreen look.

Tenaga Nasional Berhad (TNB) is the largest electricity utility in Malaysia and one of the largest in the region, with an asset base totalling RM110.7 billion. With a history spanning 65 years, TNB is also the most experienced energy player in the country, responsible in keeping the lights on for all residents of Peninsular Malaysia, Sabah and Labuan.

Full screen is full of visual impact

Tenaga Nasional Berhad (TNB)

One thing we haven't mentioned yet is what full screen affords us: a canvas! Using the space to present a product, a company, an idea, is the whole point of this pattern. It removes the clutter of the rest of the content and focuses on message and personality.

The Tenaga Nasional Bhd's new web design uses a "Book Cover" layout to make its point, both visual and pragmatic. You are able to give users maximum impact as soon as they land on your site and it's easier to code, so it works well on mobiles and desktop computer monitors (the same layout remains unchanged despite the display device size).

3D Styling Flipping Card

You will notice that 3D CSS card flip animation pivoting from the horizontal center being applied. To position the faces in 3D space, we'll need to reset their positions in 2D with position: absolute. In order to hide the back-side of the faces when they are faced away from the viewer, we use backface-visibility: hidden. To flip the .back face, we add a basic 3D transform of rotateY( 180deg ). With the faces in place, the #card requires a corresponding style for when it is flipped.

Website : http://www.tnb.com.my/
Web Server : Nginx
Content Management System : Expression Engine

Large, High-Quality Images Only!

Whichever visual you're using for your site background, make sure that you have the best possible version of the file. With website backgrounds, the trick is to have a large enough file that will display well on all screens, while not burdening the loading time with a file that is too heavy. As a rule of thumb, a resolution of 72 dpi ("dots per inch") is enough but you can experiment with 96 dpi as well. The recommended background image size is 1250×800 or anything higher than that but with the same proportions.

Wonderful Digital Things & A Bit Of Tiles & Hide n Seek

Wonderful Digital Things

TNB's new website sub pages use a simple yet effective way to keep the user focused while reading a story. You are presented with one fragment of the story at a time. To see the next part, you need to click to it.

It sounds like generic click functionality, but hiding and revealing text fragments – makes the story much more engaging.

The result is an engaging and unique take on an otherwise straightforward company website.

On the other hand, all main sub pages are designed with rectangles or also known as tiles. It is a cool way to structure the contents by creating tiles. For some reason tiles in web design sell better than the Windows 8 Metro interface. Tiles work well in responsive layouts and, at the same time, remain a cool way of forming impressive layouts.

To conclude, TNB's site has been designed tastefully and its effect gave impressive result.

Ready to take your business online? Create a responsive website with Webqom!

Danny Foo is Bootstrap and HTML5 expert. When he is not in the office, you can usually find him running on his treadmill and coding on his laptop at the gym bar.



MOST READ