Web Design Ideas to Kickstart Your Creativity

Fresh, material design, minimalist … what’s your style? Web design trends come and go with the passing of time, so it’s important to keep evolving your style. Because of this evolving nature it can be challenging to keep up with the latest and greatest web design trends. But don’t you worry we have got your back with this design roundup, it will give you the inspiration you need to go create something exciting.

So let’s jump in, starting off with…

Zytho Box Beer Delivery Really Delivers!

A service like Zytho Box — that provides monthly beer deliveries right to your door — is all about the journey. The journey from brewing to bottling to your doorstep. Taking your customers (or potential customers) on that journey is a compelling way to sell them on this beginning-to-end service, and in Zytho Box’s case their web design reflects this.

As you scroll down the page, interactive animation guides you through just what Zytho Box provides. Annotations and labels crop up to take you through each step of the way. It’s a great use of interactive scrolling that’s specific to a service.

Supple’s side-by-side SEO showcase

Australian SEO Company Supple showcase the code that sits behind a website with an interactive before and after slider. It also features hotspots which you can hover over to reveal more information about how your website’s design can impact things like loading speed and in-turn Google rankings. The interactivity promotes user engagement, and really demonstrates the services offered by Supple.

Milwaukee Kayak Company Really Floats Our Boat

Enjoy the gentle bobbing, up and down, over some waves… A simple, serene selling point for kayak manufacturer Milkwaukee Kayak Company. So why not capture a little bit of that nautical magic in your homepage’s web design?

A minimalist wave animation appear just below your main header and hero image. As you scroll down, you’re taken into more detailed information, like pricing and location. But the blue colour scheme from the animation stays throughout the whole site, and you’re never quite removed from that peaceful image, floating out along a river. When selling a product, great design should capture the feeling that product evokes, and this is a stunning example of just that.

MarketingTool.io — a gimplse of what is to come

MarketingTool.io gives users a preview of their UI by showcasing it as a the background overlayed with smoke. Only when you run your cursor over the smoke does it dissipate to reveal statistics about shares, likes and comments across various social media platforms.

Daniel Portuga’s Site Leaves You With A Smile

Daniel Portuga’s digital, design and advertising services have won him 63 awards from across the world — as well as plenty of smiling clients in Brazil, the UK, Singapore and the many other countries he’s worked in. So, it’s no surprise that his website is a shining example of web design — with a particular focus on fun.

He breaks the ice with an interactive hero image of himself, giving you permission to deface his face with a cursor controlled pencil. Not only does this show off design and development skill, it also sets the tone and Portuga’s brand — light, fun and happy.

Other on-brand design features include a switch in the bottom right hand of the homepage which turns his whole site hot pink, and an interactive war game where you battle tanks across a world map — a clever way to demonstrate just how international Portuga’s work is. If you’re a fun company with a fun brand, why wouldn’t you gamify your site to reflect that!

iFly 50 Takes You Through The Best Destinations On Earth — Just Hold Spacebar For More!

Scrolling through iFly’s top 50 travel destinations across the globe is breathtaking — stunning hero images appear and disappear as you head down the list. But a clever design idea has made this all the more compelling.

It would be a shame to waste any page space on text and squash these glorious stills — and iFly doesn’t! Instead, instructions to Hold Spacebar and Explore brings up extra info when you want it. It’s interactive, it’s smart and it lets large, quality hero images do the talking, uninterrupted.

Other great design features include a mask technique on each destination’s number as you scroll down, effortlessly transitioning between ranking and image. It’s definitely worth a look!

The Drain Company’s Animated SVG Logo

This animated SVG logo for The Drain Company starts with a blocked pipe — the water flowing in is much more than the water flowing out. But, as an inner lining is inserted and The Drain Company branding appears over the pipe, the flow is restored. This logo is not only easily recognizable, it explains what The Drain Company is all about.

Check Out Fixed Group’s 3D Portfolio Panels

Developers and designers Fixed Group have quite the portfolio, including a range of great apps. But what’s the best way to showcase your portfolio? Is there a creative way, as opposed to the stock standard grid list, to show off your design prowess?

Well, Fixed Group is one great example of inventive portfolio design, letting you browse through a series of 3D panels that come to the fore as you scroll. An animated backdrop — like dust floating in the night, or stars floating in space — gives the illusion of weightlessness, tying the whole portfolio together beautifully.

TryMore Gives Your More — A Design Feast For The Eyes!

Where to begin with this smorgasbord of great design? TryMore Inc.’s great range of branding and promotional services are well served through an interactive scrolling experience, effortlessly transitioning through a colour wheel of info, services and clients.

The sections themselves include stunning, vibrant and animated illustrations. While minimalism works for some companies, rich, detailed (and messy!) pictures of office life at TryMore deliver such a clear message about who these guys are. A slight tilt given to text on each section also adds to a fun, left-of-field thinking brand image. What an inspiration!

Bjango’s Buttons Call Out To Be Pressed!

It’s stating the obvious, but clicking is the primary way people interact with and explore websites. People click for pictures, for information — and for downloads! App developers Bjango have added simple flourishes to encourage clicking. The top menu buttons light up as you move your cursor over them.

But the real flourish is a simple, understated animation running along the Free Download button. It draws the eye — and encourages you to download one of Bjango’s tools, the Skala Color picker.

Stampsy’s Interactive Scrolling Gets Our Stamp Of Approval!

Stampsy is a service which, more or less, lets you curate your own personalised magazine. You can pick and choose “collections”, creating a personalised feed of photography, fashion, art, design and more! Stampsy’s About page reflects this pick-and-choose approach — as you scroll down the page, animated panels slide into position. Separate collections come together into a unified selection. It’s simple, straightforward and, of course, on brand. A fantastic example of good design.

And For Dessert — Android Nougat 7.0’s Scrolling Effects!

It shouldn’t be a shock that the page for Android’s latest OS update is a design hit! Android’s Nougat 7.0 has a number of new additions which set it apart from previous runs, and the use of timed animations walks you through each of them. Icons beside the central animation countdown, letting you know how long each animation goes for and allowing to swap between them.

As you continue scrolling down the page, the smartphone hero image twists and flips, its screen shifting to whatever each section is covering — security features, gaming, virtual reality compatibility. It keeps you anchored throughout the page, while staying dynamic and engaging.

I do hope these examples have inspired you, if not you can find daily dose of creativity over at CSSDesignAwards , the inspiration section of the blog and sites like CodeMyUI.

Don’t be shy, let us know what are some of the inspiring websites you have seen recently.

Introvert pretending to be an extrovert. On #ProductHunt top 100 maker list. @envato alumni, #SEO Strategy Director @supplesolutions 🌍https://saijogeorge.com

Introvert pretending to be an extrovert. On #ProductHunt top 100 maker list. @envato alumni, #SEO Strategy Director @supplesolutions 🌍https://saijogeorge.com