Ready for inspiration? This design round-up we’ve taken a look at some interesting web design design elements that have caught our eye. Find inspiration from how the following websites use subtle as well as bold interactions to truly engage in their audiences.
If you’re wanting to maximize audience engagement and user experience, learn a lesson from some masters of the game.
The Mosaic Game’s earth-shattering style
The Mosaic Game is a project in development by Krillbite Studios that asks a simple question – what if reality itself started falling to pieces around you? While the teaser trailer doesn’t give much about the game away, the site itself delivers the central idea of the project in a simple, effective way.
As you scroll down the page, the hero image shatters into a million fragments, the page seemingly glitching as you move down it. What you expect to be strong and steadfast instead disintegrates into pieces – which certainly makes us curious to check out the game when it’s released!
The Drain Company goes with the flow
A logo is one of the most important design features of any company – it needs to be memorable, on-brand and, if possible, succinctly sum up what & who you are. That’s what is so eye-catching about the Drain Company’s new logo.
While the logo stands on its own technically – it runs on a seamless loop, animated with SVG – it’s the logo’s creativity that is its real appeal. The Drain Company specializes in clearing blockages in drains that are impeding water flow. The cross-section of pipe demonstrates this perfectly. A high water level drops much lower passing through the pipe… until an inner lining is adding.
Quechua’s Grabouw Lake Products – a perfect product display
Simply designed, there’s a dreamy quality to the product catalogue of Quechua’s Grabouw Lake range. With the page background the fuzzy gold of a setting sun, beautifully shot product details hang suspended all over the page.
Simply designed to move and pulse as your scroll down the page, this site is a master class in subtlety. There’s no big, showy design features here. It’s soft, understated and ethereal – web design that perfectly matches the balanced, natural composition of the product images.
Benefits Pro – 3D navigation header
Here’s another simple design feature that gently guides users through how to with the site. Benefits Pro is a site that publishes articles about business development, employment and employee benefits.
As you scroll through to the bottom of any article on the site, the header at the top of the page will spin on its axis in a 3D animation, turning over to a new side that leads into a prompt to ‘click through to the next article’. Why not take a leaf out of Benefit Pro’s page and create call-to-actions that are reactive to where you are on the page!
Supple’s side-by-side SEO showcase
Australian digital marketing agency, Supple has developed an ingenious way to showcase the code that sits behind a site – to clue you into the difference between optimised HTML and sloppy HTML. Setting optimised and non-optimised side-by-side, each image has an interactive slider which reveals how each site is coded.
The optimised site’s code is much cleaner – and even features interactive hotspots which you can hover over to reveal more information about how and why your site’s design can impact things like Google ranking and loading speeds. The interactivity promotes user engagement, and really demonstrates the services Supple offers.
Grabby.io – smooth transition from hero image to banner
Grabby.io has hit upon a very simple idea, but one that’s very effective. Rather than having a navigation bar simply appear once you’ve scrolled down past a hero image, why not turn your hero image into your navigation bar.
As you scroll, the company logo and click-through links to Features, Pricing, About and FAQs smoothly transition and align themselves into a slim navigation bar, which sits at the top of your screen as you continue interacting with the site. It’s nothing overtly specky – but that’s its appeal. Sometimes subtlety, rather than jarring design features jostling for attention, is what visitors respond well to.
Bear witness to National Geographic’s bear’s-eye-view of Yellowstone National Park
Follow the journey of a bear through Yellowstone National Park with fantastically responsive and dynamic web design features. As you scroll down the page, the path of a bear is illuminated, with highlighted pit-stops bringing up video footage from the bear’s perspective, along with audio and text from several of Yellowstone’s bear biologists and ecologists.
A sliding yellow bar along the side of the page grows as your scroll, filling you into how many miles the bear has covered on its journey. The whole page is a fantastic example of design which perfectly matches the information you’re trying to get across. As you interact with the page, you really feel like you’re journeying through Yellowstone National Park yourself.
Apple’s iPhone – make your product the centre of your site’s universe
If you’re selling something, don’t let it out of your audience’s eyes for a second. At least, that’s the logic between Apple’s fantastic web design for their iPhone product page. The iPhone itself stays front and centre and the story revolves around it.
As you scroll down the page, the hero image, iPhone screen and text all shift – but the iPhone remains in place. Browse through the iPhone’s hardware, software, security and accessibility features, all while staying anchored to the product in question. It’s smart design that never lets you forget what Apple is trying to sell you.
Collection of style guides
This roundup features some of the web’s best brand style guides, it showcases links in a, well… stylish format. Individual style guide links load and fold out from boxes that take their colour from the brand’s own colour palette.
As you scroll down the page, a wave of loading links pop up – it’s this dynamic, interactive design which catches your eye and invites you to keep scrolling through the whole list!
Guillaume Tomasi’s epic text hover effect!
And to cap things off, we have this radical text hover effect. Guillame Tomasi is an acclaimed photographer who has made his site as much a work of art as his pictures. His various collections and exhibitions are listed on the homepage – as you hover through each one, the text is scratched away to reveal a glimpse of the work.
The surrounding titles are transparent, each one another window through to the work. As you change from title to title, this shifts, offering new windows through to other projects and pictures. If photography is your medium, you want your site to be as visual as possible – and this is something that Guillame Tomasi definitely achieves.
And that’s been another one of our design roundups – make sure you check out our next one to stay on top of the web’s most stylish design trends and ideas.
