Images, video, sound – utilising quality media content on your website is a sure fire way to deliver a more engaging experience for site visitors. Studies show that you’re far more likely to remember a piece of information in full detail when it’s been paired with a relevant image, and eye-tracking studies show readers are far more likely to spend time reading pages than those with text alone.
But what’s the best way to present, combine and balance media with great web design to produce quality websites? We’ve curated a list of aesthetically and functionally smart ways to incorporate media into your site.
Tony Romo’s Jersey Journey At ESPN
Pro American NFL player Tony Romo’s career is at a crossroads, with sports commentators all asking the question – what team will he be playing for in 2017?
However, a much more interesting question to ask is – what’s the best way to visually represent the multiple futures that stand before Romo. Well, ESPN has answered that question in a striking way.
Using a ‘base image’ of Romo posing with a football, the reader scrolls through this animated ESPN article as different team jerseys scroll over Romo himself. It’s the kind of clever animation perfectly fitting for the structure of this piece – when discussing how Romo would sit on the Denver Broncos, we see him in a Broncos jersey. It’s a perfect union of journalistic description and animated design – in our books, ESPN have scored a touchdown with this one.
Supple Shines A Light On Their Tools
Melbourne based Digital Marketing agency Supple does more than just provide marketing services – they’ve also developed a collection of helpful tools helping you navigate everything from schema markup to being adding Facebook messenger as a chat tool to your website.
But it’s the way they’ve presented this handy toolkit which we’re focusing on today. Rather than simply displaying screenshots of the tools in actions, they’ve added panels with minimalist icons which – when hovered over – reveal a window peering through to the screenshot. Much like a torch casting light into a darkened room, this hover effect is engaging and inviting, a smarter way to showcase screenshots.
Bring your products to life!
In the current competitive online market, websites need to find innovative ways to help their products stand out from the crowd. We’ve seen animated still photos being used in movie intro sequences you can use the same technique on your website! These techniques can help to not only showcase your product but also wow your visitors.
Animation can help bring your still products to life. You can design your product to seem like it’s suspending in air or highlight some of the key aspects of the product using hotspots. WordPress themes such as TheGem, from Codex Themes – [Get it from Theme Forest] will help you achieve these techniques and more.
Romain Bouchereau Balances Static With Dynamic
Freelance designer, art director and animator Romain Bouchereau brings smart media sensibility to his portfolio page. The background is an immediately engaging starting point – animated television static gives a grainy quality to the whole site, reminding you that you’re looking at a screen – which is, of course, the primary medium showcasing Bouchereau’s work.
However, it’s the clever pairing of a marker-pen/highlighter hover highlight effect, and a cycling image gallery, that brings his portfolio to life. In particular, the interactivity and colour-coding that comes with the hover effect helps distinguish each project from the next, establishing the breadth with which Bouchereau can work as a designer.
Paramount Artists’ Clearly Labelled Gallery
Paramount Artists’ use a similar approach to the classic hover effect, drawing attention to their media. Rather than cycling through images as you hover, the entire gallery of their team is shown in grayscale – only becoming saturated as as you move your cursor over it.
This also brings up a clear label of who is being shown, with the text sitting just to the left or right of the image depending on page space. It’s a clever use of hover interactivity that looks great no matter how big or small your browser window is.
W̶i̶n̶t̶e̶r̶ Website is Coming
Having a Coming Soon page is a great way to generate interest in your product and collect email addresses from interested users. However, most coming soon pages are disinteresting and, as a result, don’t generate good marketing leads. Animation can be a very impactful way to build greater engagement with visitors to your Coming Soon page.
If you want to build a Coming Soon page, you can use the template from UkieWeb on ThemeForest to set up a unique under construction page that’ll be sure to catch the eye of your visitors.
Blueair Offers A Breath Of Fresh Air For Their Online Air Pollution Browser
Want to measure the air quality in your neighborhood? Air View by Blueair is an air pollutant visualizer that uses data from pollutant measurers around the earth – and delivered in an innovative way. Rather than give you a random list of numbers and chemicals, Air View instead gathers images of your address from Google Maps and overlays animated pollutant data over it.
This means you can really navigate your own area, and really be aware that these particles are in the atmosphere. It’s a novel use of media taken from local Maps information, used for a good cause – does it make you want to sign their petition for a World Air Day? Or invest in a new gas mask/hazmat suit for whenever you’re next outside for some ‘fresh air’?
The Hideout Shows It All With Their Great Image Effects
The Hideout is a studio of ‘designers, developers and content makers’, and their homepage lives up to that with some stunning minimalist design and smart use of media and images. As you scroll down the page, you’ll see the largely empty white space is dotted with images of past projects and ideas – and these images expand slightly as you do so. It’s a small touch, hard to notice at first, but it adds a level of dynamic movement that draws the eye to each image as it grows.
Similarly a portfolio gallery lower down in the page uses a bright yellow hover effect to link through to more in-depth pages and case studies. It’s a great way to let images speak for themselves, inviting the user to hover – and they’re rewarded with the reveal of the link for their curiosity. Here is a snippet that lets you add a similar image reveal effect to your site.
Great Views Of Quechua’s Mountaineering Range
Quechua’s selection of clothing and shoes are built for the great outdoors, and the catalogue design perfectly evokes being out in a serene, uplifting nature.
The structure of Quechua’s catalogue lets you travel to a selection of mountain ranges and hiking locations across South Africa – clicking through an interactive menu takes you to Grabouw, Kalbaskraal, Beaverlac and many more natural landmarks.
A loading animation brings up a silhouette of the mountain range in question, before you’re smoothly transported there, with a collection of featured product stills that showcase Quechua apparel in all situations.
The scroll effect on each product image against the earth tone background uses a parallax effect, with image panel and background moving ever so slightly out of sync. The effect is depth – it’s design and presentation of product content that conjures the very outdoors it wants you to explore (while wearing one of their their mesh t-shirts, of course).
Envato Element’s Hovering Cards
Envato Elements provides a slew of templates and design assets for sites, apps, you name it. Highlighting just some of their content is a 3D template gallery, angled such that it gives a sense of depth – like business cards laid on a table.
Another great touch is the hover effect – each ‘card’ lifts slightly, revealing a bright pink shadow effect beneath. Even simply tilting the angle and presentation of an otherwise simple image gallery can really draw the eye to your on-page media – why not try it sometime on your site!
Milwaukee Ballet Company’s Scroll-Effect is On Pointe
Milwaukee Ballet Company showcases their performers, directors and team using a combination of stunning image content and a simple scroll technique.
As you make your way down the page, a scrolling effect transforms stunning, high-quality grayscale images into colour – a gentle transition to colour transition with the effect of breathing life into an otherwise minimalist page. It’s chic, it’s refined, and in many ways, just like ballet itself.
Rebecca Lloyd-Evans’ Clever Use Of Cursor Images
Rebecca Lloyd-Evans is a director and storyteller, whose work has spanned online content, television and film. Her homepage comes with a list of previous works – but it’s the presentation of this portfolio which really caught our eye. As you track your cursor over each link, a small image follows the movement of your mouse.
It’s a small window into the content in the outgoing link – a way to tempt you into exploring further. It’s a persuasive use of images, inviting and engaging further interaction from site visitors. If you’re looking to achieve something similar, why not check out this snippet on CodeMyUI?
Carv Wearables Offer Quality Parallax Mountain Scroll & Block Reveal Features
Carv produces a range of high-tech, wireless wearables for skiing, collecting data on your progress and providing a ‘digital ski coach’ for your own improvement.
It’s no surprise such innovative technology is paired with a similarly innovative site design – something modern and minimalist. Technical cross-sections of the technology float along a snow-white backdrop, with a parallax effect created against their respective labels and added info.
However, these images and text appear on the screen in a novel way. As you scroll down the page, blocks of text reveal in an animation simulating a loading bar – a fantastic way to subtly reference the technological advancement of their own products.
If you like these web design animation examples you might also enjoy adding animation to your images directly using Photoshop Actions. Here are a few Photoshop Image Actions to add Sparkler, Ink and Rain effect to your images.
These have been a collection of sites and brands that have incorporated media and images into their site in subtle, stylish and engaging ways. Have you been inspired? I am sure you all would have seen various animation on the websites you frequent, let us know what are some of your favourites in the comments below – we’d love to see your take on the subtlety of animating media content.
Read next:
- Should you be using an animated logo?
- 15 Subtly Animated Examples of Material Design in Action
- Inspiring Examples of Subtly Animated Forms
The post The Art of Subtlety In Animating Media Content For Your Website appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2mcIyvV
envato.com coupon
Tidak ada komentar:
Posting Komentar