15 Inspiring UX Design Elements that Delight The User

Take a closer look at 15 creative web design UX elements that delight the user which will help you push the boundaries of web design. Read More

This article has been contributed by Saijo George.

With the capabilities of modern browsers the internet is full of awe-inspiring creative websites that push the boundaries of web-design. In today`s world you have to stand out to get the attention of potential customers.

Today we are going to take a closer look at a few of them to inspire you to try something new and experimental in your next creative project. This will enable you to stand out in this competitive market.

15 Delightful UX Patterns

Flex.ly - FAQs with a text message interface

flexly.gif
Check out this fantastic text message design FAQ on flex.ly. As you scroll down, questions and answers (or messages and replies) pop up, just like on your smartphone. It`s a great design for any site, but works particularly well for the FAQ section where you can answer potential questions your customers might have.

Supple – Animated Logo & Storytelling

Supple Header.gif

The SEO landing page on Supple`s site uses animated SVG to display the logo, which offers a great way to stand out in a crowded market. You can also find other subtle animations on the landing page, like the animated transition used on their contact number, which swaps between 1300 SUPPLE and 1300 787 753.

Supple.gif

Supple use interactive storytelling to educate their visitors on why SEO is important for any business, using Before & After images and visual hot spots to grab the user’s attention.

Supple graph.gif
Supple also use Chart.js to show what your web traffic will look like before and after SEO. All these visual / interactive elements help their visitors understand why they need SEO.

Macaw Scarlet - Quality interface and responsive for mobile

Macaw Scarlet.gif

Macaw Scarlet is an upcoming web design tool for front-end developers and designers - so it makes sense their own homepage should be a testament to their creative genius! As you scroll down the page, the site`s splash screen falls down as the program`s interface slides in around it, showcasing the Scarlet`s features in a dynamic way!

Likewise, the tool`s responsiveness across various platforms is showcased using a row of three separate devices, expanding out to give you a clear view of how sites that are designed using Scarlet appear on mobiles, tablets and desktop screens. If you`re selling a responsive product, tool or program, showcasing a range of devices in this subtly animated way is a great idea.

RD Construction`s stunning visuals - brought to life with a focus on four core services

rdcm.gif
RD Construction`s homepage does a fantastic job of showcasing their stunning architecture and builds - but it`s the construction of their site that really stood out to me! Scrolling through their site, four core services are highlighted with a rotating animation. This lets four beautiful, individual hero images get their moment in the spotlight!

Rally Interactive - fun with ribbons!

raqlly.gif

Rally Interactive brings visually stunning, interactive fun to their homepage. You can click-and-drag their animated ribbon to move through some of the biggest clients - what`s more, the ribbon softly transitions from one colour to the next as you drag!

If you`d rather scroll down to get more info about this amazing web development studio, this curled and coiled ribbon straightens out into the page`s header. Great inspiration for turning everyday elements of your page into striking, dynamic design features.

Shake Shack - simple and specific location logos

shake shack.gif

Great web design is as simple as creating simple, memorable icons for your services. Shake Shack has got this down to a fine art, finding an image which encapsulates the state or country their stores can be found in.

Ende`s engaging colour transitions

ende.gif

Ende is a studio that specializes in video content and animation - so it makes sense it`d have some great animated features to it. As a way to break up the site`s content into clearly defined sections, the background colour will undergo a subtle shift to mark this transition. Take a look atthis background colour changing on scroll snippet  to add a similar style to your site.

Pollenizer`s reactive hero image

Pollenizer.gif
Straightforward and simple, the key text on Pollenizer's hero image expands up and out as you scroll down the page. It`s a great way to maximize the impact of that initial motto or tag as a user browses your site.

Fake Credit Card – CSS animation

fake-cc.gif

Fake credit card generator is used to generate dummy credit card info for testing eCommerce payment gateways. This pages uses CSS to show a spinning credit card on the landing page, these subtle animations are a great way to wow your visitors and can help you leave a lasting impression.

Animated notifications for your favicon

favicon.gif

Looking to bring animated notifications to your site`s favicon? favico.js has some simple code you can use to alert site visitors they`ve gotten a notification, even if they`re in a separate tab. With slide, fade and pop up animations for each notification, you should definitely give it a look!

Cima`s sliding presentation slides

cima.gif
Capturing the essence of your product in your site`s web design is one of the most effective ways to sell it - and that`s exactly what Cima has done here. An add-on to PowerPoint, Keynote and Google Slides, their unique animated slides move into central position on the homepage as your scroll. Sliding animations to sell animated slides - pure genius!

Greater Than Or Equal To – interactive storytelling

greaterthanorequalto.gif
This is the site for writer Alan Trotter - and this writer sure has a way with words! Starting with an almost blank page, site visitors can click on certain underlined words to elaborate on that point - putting them in the driver`s seat of the written content they consume.
And there you have it folks, some great web design inspiration to get you started on your next creative project. Please share you favourite ones in the comments section below and make sure you come back to get more great ideas and inspiration each month.

Saijo George works an SEO Strategy Director for Melbourne based award winning marketing agency Supple. You can find him on Twitter : @Saijo_George and LinkedIn.

Disclaimer

Clover Desain is a non commercial website that providing information to its visitors, Clover Desain gathered information from various sources (will be displayed in each content)

All data and information provided on this site is for informational purposes only. Clover Desain makes no representations as to accuracy, completeness, currentness, suitability, or validity of any information on this site and will not be liable for any errors, omissions, or delays in this information or any losses, injuries, or damages arising from its display or use. All information is provided on an as-is basis.

If this content contains any copyright please send us email or message through our social media to take out this content.

And/Or you as the author or the owner of this content and you do not want your content displayed on this website please send us email or message through our social media.

Leave a comment

GraphicDesign blog