The common use of website hero images should come as no surprise. Faster Internet speeds and larger monitors allow for a pristine viewing experience. Hero images can be found in layouts as banners, slideshows, or even fullscreen backgrounds. But these background images don’t always need to be fixed designs.
Going beyond just static hero images there are some wonderful effects which can be created through CSS3 and JavaScript. In this post I’d like to cover a series of examples featuring hero image styles from live websites. Modern trends are changing rapidly and as a designer you should keep up with these changes for your own project work.
Vector Graphics
One of the most notable background trends has to be vector image design. These websites don’t use a photograph for the background but instead use a scene created with vector artwork.
Sometimes these images may feel more like photographs if they paint a wonderful picture. But other times you’ll find hero images that rely on vector icons and characters to illustrate the design. For example take a look at the homepage for Cultured Code:
Their header uses a dark grey backdrop with a series of cascading icons. These icons are repeated continually so the monitor could be extremely wide and the layout would still look great.
Also notice how the design uses vector clouds to separate the header from the page content. Perhaps this isn’t considered a “hero image” but it does span the entirety of the page. Vector backgrounds don’t often look like hero images since they’re not created directly from photos. But vector background art spanning the whole layout certainly behaves like a hero image.
A more photographic vector background can be seen on the GitHub Enterprise webpage. Their header section uses a blurred background to appear as if their Octocat logo is in motion. Blurring the background duplicates the effect seen in film where a closeup object becomes the foreground while the background is blurred. It’s a cool effect and fits nicely with GitHub’s overall page design.
Slideshow Carousels
For a more dynamic technique you might take a liking to image slideshows or carousels. These look exactly like background hero images but they behave like image slideshows which rotate through a series of content. The design for Planet Propaganda features a terrific example.
Their homepage uses a fullscreen image slideshow which rotates between a few different tabs. You can change the background by hovering over one of the tabs in the lower menu bar. This effect is mostly for aesthetic design because the links generally stay the same. But it’s an interesting hero image technique if you have a multitude of imagery to showcase.
Blind Barber is another site with the fullscreen hero image carousel technique. Their style is a bit more traditional using circular nav elements to animate the individual slides. Each slide also links to a different area of the website, so they serve more of a practical purpose beyond just looking pretty.
I also like how their slider is touch-oriented with swipeable content. You can see this effect on a mobile device or by using your computer mouse/trackpad. Simply click+hold on the hero image then swipe over to the left or right. You’ll notice the panel moves relative to your movement – quite a splendid dynamic effect which looks great on both desktop and mobile browsers.
For those of you enjoying this effect please take a look at this tutorial from Codrops. You can build a custom fullscreen slideshow using pure CSS3 or a CSS/JS mix. This is a moderately simple effect to replicate and you can speed up the process by using this tutorial.
Parallax & Animation
The idea of parallax design is to create the illusion of motion on a 2D monitor screen. This can be applied to scrolling effects and page elements, but also to background content.
Take a peek at the GitHub AWS landing page to see what I mean. Their hero image background uses cloud icons to represent networks of data stored in the cloud. When the page first loads these cloud vectors will start to move into a predefined position on the page.
It’s a really neat effect which mimics the fundamentals of parallax design. The clouds move to both draw attention and create a more lifelike interface. GitHub’s hero image design is phenomenal and the parallax effects are truly breathtaking.
Billy’s Downtown Diner uses a slightly different parallax motion effect relative to the user. Their hero image behaves more like a header graphic located above the navigation.
As you move your mouse from side-to-side the graphic will transition accordingly. It’s a very common effect found in parallax design and it certainly does capture attention. This is a tricky effect to pull off but when used appropriately it can leave a lasting impression.
Video Backgrounds
Finally one other trend I’d like to discuss is video content in hero image backgrounds. It may seem like a misnomer to label background videos as “hero images”, but they fit the bill rather accurately. Video content is now easier to stream and thus can be used without as much concern for slower connections.
One important point to note about this trend is how the video behaves more like an image. Most designers mute the audio so visitors aren’t startled by auto-playing video content. If you recreate this effect on your own be sure to mute the audio so visitors only see the video, not hear it.
A live example can be found on KinderCare’s homepage. This daycare website is remarkably well-designed and has some great UX features to make navigation a breeze.
I love the background video because it showcases real kids at the daycare. Video content can be used to showcase locations, people, or processes related to a company. Not everyone has the capability of filming & editing video but it is certainly a great approach to background hero image design.
Also take a look at Digital Kitchen which uses more of a fullscreen video approach. Their website uses scrolling panels in a parallax fashion so that each section takes up the entirety of your monitor regardless of resolution.
What’s most interesting about their design is how various panels incorporate different videos into the background. These examples seem to be more like traditional video backgrounds rather than hero images, yet there’s often little difference in a pragmatic sense.
Hero image video backgrounds can be a great way to accentuate a lackluster design. Just be sure to use high-quality video, mute the audio, and follow along with other brilliant designs when crafting your own ideas.
Closing
While some of these techniques may feel a little advanced, keep in mind that browser support has been growing rapidly over the years. It can be tough to support users on old versions of IE but the market gap is closing quickly. Use these techniques to the best of your advantage and try to incorporate dynamic hero images that can run in any environment.
The post Background Hero Image Trends in Modern Web Design appeared first on DesignM.ag.
Source: http://ift.tt/1IoBSK4
No comments:
Post a Comment