Web Design Done Well: The Ordinary Made Extraordinary
Excellent concepts in website design come so thick and fast that it can be simple to miss them if you're not careful. This series is a small antidote to that, piecing together splashes of inspiration that caught our eye. Whether it's a mind-bending new feature or simply an old technique delivered with brand-new beauty, they share the quality of making us believe a little in a different way.
I recently wrote a piece admiring the work of Saul Bass in the world of web design. One of his excellent presents was making even the smallest details gorgeous. It remains in that same spirit we start this series by honing in on website trends and features we've grown familiar with being dull. As you'll see, they need not be. The technique is often in the execution. Just about anything can be gorgeous. Why go for anything less?
Glasgow International's Pages Within Pages #
We're used to plenty of scrolling these days, but the Glasgow International celebration website has found an easy, creative way to scratch that itch while keeping pages brief:
On mobile, the exact same 3 sections form one big column. It's a savvy solution to the mobile/desktop relationship, and a pretty stylish one too. (Shout out to the 'Support' button, which begins spinning when you hover on it.).
The CSS behind this is suitably easy. The 3 areas sit inside a flex container, with all three sharing the values of overflow-y: automobile; and height: 100vh; so that they constantly fit the desktop viewport. The truly great touch here is utilizing scrollbar-width: vehicle; to eliminate the sidebar. Due to the fact that the columns use up the whole screen you intuitively exercise the method the page works as quickly as you move your mouse.
Kenta Toshikura's Dimension-Bending Portfolio #.
A recent website of the week on Awwwards, this portfolio website by Japanese frontend designer Kenta Toshikura is merely awesome:.
If in doubt, the tendency is to lean towards flat, modular arrangements, however maybe we ought to be thinking in 3 dimensions a little more often. This is a great example of lateral thinking changing what might easily have actually been a column of boxes into something really memorable.
We may not all be equipped to do something rather this fancy (I'm definitely not) but it's well worth bearing in mind that web pages aren't blank canvases so much as they are windows into alternate dimensions.
Stripe Documentation Is The Teacher We All Want #.
Paperwork is all too often one of the very first casualties of the Web's mile-a-minute rate. It need not be. I have no qualms calling Stripe's documents lovely:.
I'm sure most of us have ground through enough bad documentation to value the effort put into this technique. Clear, hierarchical navigation for the material, bite-sized step-by-step-copy, and obviously the code snippets. Dynamic sneak peeks of code across several platforms and languages is above and beyond, but then why shouldn't it be?
There are few things better-- and more elusive-- than quality learning resources. Stripe reveals there is a world of possibilities online beyond the standard words on a page. I've shared this prior to (and I'll share it again) but Write the Doc's paperwork guide is a smashing resource for presenting helpful material in useful, dynamic ways.
Max Böck's Technicolor Dream #.
There is a terrible lot to like about Max Böck's individual site, however for the purposes of this piece, I'm focusing on color design. Many sites have one color design.
Light and dark is the brand-new typical, however as Böck himself composes in his blog post about the style switcher, only Siths deal in absolutes. Through the magic CSS customized residential or commercial properties the site switches between color design seamlessly. For a complete breakdown of how it works I heartily advise checking out the complete post linked above. And for further reading on customized properties Smashing has plenty too:.
•" How To Configure Application Color Schemes With CSS Custom Properties" by Artur Basak.
•" A Strategy Guide To CSS Custom Properties" by Michael Riethmuller.
The themes are called after Mario Kart 64 tracks, if you were wondering. Other Than Hacker News. That's called after Hacker News, with the wonderful touch of adding 'considered harmful' to the end of every Böck blog post title.
It's an enjoyable twist on the conventional light/dark dichotomy, and likewise speaks to just how fluid sites can be nowadays. The very same foundation could enable you to adjust color schemes depending on where individuals are visiting the website from.
Overpass Sells Sales #.
Sales isn't precisely a sector that screams development, however credit where credit is due. Overpass's carousels bounce and shrink and broaden so efficiently that it nearly seems like you're connecting with something tactile, like an elastic band.
Here, both the touch-action and translate3d() CSS functions are used to fantastic result, making the cards container something that can be efficiently dragged around the screen. In case of the container being gotten, all cards use scale( 0.95) to decline ever so somewhat until the user lets go. It gives the carousel a charming sense of depth and lightness.
The audio clips are a nice touch. Multimedia combination has been a running style in these examples. Constantly lay the accessibility groundwork, however be strong. At this stage the only genuine limits are those of our creativities.
E-Commerce Meets Long Form Storytelling On Mammut #.
From Steve Jobs to Seth Godin, it is often stated marketing is a storytelling game. This is something that a lot of e-commerce sites appear to have actually forgotten, each serving up page after page of shiny products drifting in front of best white backgrounds. You can almost hear the drawing noise of conversion funnels attempting to draw you in.
It's rejuvenating then to see a business like Mammut going all in on storytelling to offer its hiking products. Their long-form expedition posts are as immersive as the finest New York Times function, with audio clips, maps, and, naturally, sensational photography. Mammut gear includes greatly, obviously, however it's carried out in a way that's classy. More notably than that, it's authentic.
Although there is some super slick styling going https://247creative.com.au/ on here that's not why I've included it. In a way it's extraordinary just how impersonal much of the Web feels these days, with e-commerce being an especially outright culprit.
This is the example individuals would share even if they had no interest in buying mountaineering gear. It's exceptional content. Instagram influencer posts look like kid's play compared to this. Do those triggers to go shopping take you to the previously mentioned squeaky clean e-commerce checkout? Naturally. But, by God do they make it. Not everyone has the resources for something this cutting edge, but it shows that e-commerce doesn't have to be sterile and lifeless.
Axeptio Makes Its Cookies Palatable #.
You can't swing a cat without hitting a disclaimer pop-up these days. It's unusual, then, that so many of them are so ugly. Typically, they feel tacked on and graceless. Now, to be fair, that's due to the fact that they are added and rude, but some really are just there to Improve Your Browsing Experience ™.
Instead of treating its cookie pop-up like a bad odour, web approval solution company Axeptio strolls the walk by making them look stylish, and even rather captivating. With GDPR (and fundamental decency) to consider, it's essential to weave ethical design into a site's fabric.
A lovely touch is that it does not in fact appear till users begin walking around the website. Why trouble people if they're not even thinking about the content? Notification as well that they've dropped the boilerplate cookie terminology in favor of something more conversational.
Given, this may not make the ordinary 'extraordinary' precisely, but it does make it a whole lot classier. It's a small touch, but one that makes an outstanding first impression. Without even touching my mouse, I already have a sense of Axeptio's attention to detail and dedication to quality. A blocky 'We appreciate your personal privacy' pop-up would have provided a very different impression.
As far as cookies and pop-ups are essential, we might also own them. The very same applies to other unsexy staples of the contemporary web. Do legal permission forms, email signups, and privacy pages have to be awful and incredibly elusive, or do we just require to think a little in a different way? Share your thoughts below!