Grand Entrances – Large Area Images, Videos, and Slideshows in Web Design
2014.07.29 by Sebastian Maier
HD, Retina - our screens can show increasingly better, high definition images, and large-area videos in the background of the website are very popular thanks to ever shorter loading times. With the advent of these large images, which often stretch from the header of the page to the fold (the fold of a webpage is usually between 500-600px down), many sites predicted an end to slideshows. But, like a change-artist, the slideshow has adjusted and is still featured next to large static images and videos.
The following examples employ large-area slideshows, images, and videos in combination with different, ongoing web trends and can provide you inspiration for your next project.
Rose Cottage Canberra
The slideshow and navigation take up the entire area above the fold. Farther down on the start page there’s yet another large slideshow, which, unlike the one above, can be used with arrows.
The start page consists entirely of the large-area slideshow. It’s not only decorative, but leads to different subpages and is furnished with captions and short teaser-texts.
Wam Bam Club
This slideshow presents the nightclub’s different events. The link on each slide always leads to the same lower part of the single page website. As is often the case with single page websites, the navigation is fixed and thus allows one to jump to other areas of the page.
Here, the images are fully in the center. The navigation also recedes to the background and is reachable with an icon, as is more common with mobile websites. This trend to use mobile navigation in the desktop version for responsive websites can be seen more and more frequently.
Galway International Arts Festival
This design seems to lie, at first glance, somewhere between a static image and slideshow. From the page change, however, it’s clearly a slideshow that stretches over the entire height and width of the website. The images slide into the background by scrolling. The contents of the website, which are presented in a grid, step into the foreground.
The large-area image offers an immediate impression of the office spaces for rent and enough room for some information besides.
The following three pages depart widely from the theme, but all three make use of large static images to isolate different areas inside longer subpages or single page websites. Visually, they resemble the slideshows somewhat. In addition, fixed navigation and the parallax scrolling effect are also often featured here.
Maja and the Jacks
Large-area videos in websites can serve different purposes, and you can learn more about that in my article from a few weeks ago. But the videos themselves also have different styles. The following two pages serve as examples for two different common styles.
Lou & Friends
This video gives insights into the team, the planning, and the manufacturing behind the product. Through the light graininess and the white text, it slips into the background. Here, a story is told that entices the visitor to stay on the page until the video starts again from the beginning.
On this page is shown a short video which repeats almost without noticeable break. It tells no story, but rather is used to lend the motif more depth than would be possible with a static picture. In this way, a positive atmosphere is created that gets the visitor in the mood for the wine product.
La Petite Mauson Favart
To conclude, here’s one more website where not only a slideshow, but also a large-area image and a video are worked into the background. As is typical on single page websites, the navigation fixes itself to the upper end of the webpage upon scrolling. In the middle of the site is a video that plays as a blurred teaser in the background. Farther below is yet another large image with a semi-transpartent overlay that slides over the image with a parallax effect by scrolling.
Regarding slideshows, at the moment we’re in the last tests for an improved version of the slideshow in smooster CMS. With the new function it will then be possible to manage the images in the slideshow directly by Inline Editing in the website. More on that shortly.
Do you have a favorite from the three large-area website stars? Do you also mix the three together, or would you only ever use one variant per subpage or a single page website?