How To Make Ordinary Extraordinary in Web Design (Part 2)

There is so much exciting stuff to like about Max Böck’s website, but now we want to bring your attention to color schemes. Most websites have one color scheme.

Light and dark are the new normal, but as Böck himself writes in his blog post about the theme switcher, only Siths deal in absolutes. The site switches between color schemes seamlessly through the magic CSS custom properties. We recommend reading the full post linked above for a full breakdown of how it works.

It’s a fun twist on the traditional light/dark dichotomy and speaks to just how fluid sites can be nowadays. The same groundwork could allow you to adjust color schemes depending on where people visit the site, for example.

Sales isn’t precisely a sector that screams innovation, but credit where credit is due. Overpass’s carousels bounce and shrink and expand so smoothly that it almost feels like you’re interacting with something tactile.

Here, the touch-action and translate3d() CSS functions are significantly used, making the cards container something that can be effectively dragged around the screen. When the container is grabbed, all cards use scale(0.95) to recede ever so slightly until the user lets go. It gives the carousel a lovely sense of depth and lightness.

The audio clips are a nice touch. Multimedia integration has been a running theme in these examples.

We already mentioned storytelling in design on our blog, and here is one more example of storytelling power.

Many e-commerce websites seem to have forgotten this, each serving up page after page of glossy products floating in front of perfect white backgrounds.

It’s refreshing then to see a company like Mammut going all in on storytelling to sell its hiking products. Their long-form expedition articles are as immersive as the most attractive New York Times feature, with audio clips, maps, and, naturally, stunning photography. Mammut gear features heavily, of course, but it’s done in a tasteful and authentic way.

Mammut puts human experience front and center. Yes, they still want to sell you stuff, but they also want to celebrate the adventures that stuff can be a part of.

Not everyone has the resources for something this cutting edge, but it shows that e-commerce doesn’t have to be sterile and lifeless.

Instead of treating its cookie pop-up like a foul odor, web consent solution provider Axeptio walks the walk by making them look stylish and rather charming. With GDPR (and basic decency) to think about, it’s essential to weave ethical design into a website’s fabric.

Axeptio shows a great example of data transparency. No walls of legal jargon, no near-impossible opt-out system — just precise info on what the data is being used for.

A lovely touch is that it doesn’t pop up until users start moving around the site. Notice that they’ve also dropped the boilerplate cookie jargon in favor of something more conversational.

Granted, this may not make the mundane ‘extraordinary’ exactly, but it does make it a whole lot classier. It’s a slight touch, but one which makes an excellent first impression. Without even touching my mouse, I already have a sense of Axeptio’s attention to detail and commitment to quality.

As far as cookies and pop-ups are necessary, we may as well own them. The same applies to other unsexy staples of the modern web. Do legal consent forms, email signups, and privacy pages have to be ugly and elusive, or do we need to think a little differently?

Source: https://www.smashingmagazine.com/