Website Design Done Well: The Ordinary Made Extraordinary
Excellent ideas in web design come so thick and fast that it can be easy to miss them if you're not careful. This series is a little remedy to that, piecing together splashes of inspiration that caught our eye. Whether it's a mind-bending new function or merely an old technique provided with new sophistication, they share the quality of making us believe a little differently.
I just recently composed a piece admiring the work of Saul Bass in the world of web design. One of his terrific presents was making the smallest details gorgeous. It is in that exact same spirit we start this series by focusing on website trends and functions we've grown accustomed to being dull. As you'll see, they need not be. The trick is frequently in the execution. Almost anything can be beautiful. Why go for anything less?
Glasgow International's Pages Within Pages #
We're used to a lot of scrolling nowadays, however the Glasgow International celebration site has actually discovered a simple, smart way to scratch that itch while keeping pages short:
On mobile, the very same three sections form one big column. It's a savvy solution to the mobile/desktop relationship, and a quite stylish one too. (Shout out to the 'Support' button, which begins spinning when you hover on it.).
The CSS behind this is appropriately basic. The three 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 actually nice touch here is utilizing scrollbar-width: vehicle; to remove the sidebar. Due to the fact that the columns use up the whole screen you intuitively work out the method the page works as quickly as you move your mouse.
Kenta Toshikura's Dimension-Bending Portfolio #.
A current site of the week on Awwwards, this portfolio website by Japanese frontend developer Kenta Toshikura is just breathtaking:.
If in doubt, the tendency is to lean towards flat, modular plans, however perhaps we need to be thinking in three dimensions a little bit regularly. This is a fantastic example of lateral thinking changing what might easily have actually been a column of boxes into something genuinely memorable.
We may not all be equipped to do something rather this fancy (I'm certainly not) however it's well worth keeping in mind that websites aren't blank canvases even they are windows into alternate dimensions.
Stripe Documentation Is The Teacher We All Want #.
Documentation is all too often among the very first casualties of the Web's mile-a-minute speed. It needn't be. I have no qualms calling Stripe's paperwork gorgeous:.
I'm sure most of us have ground through sufficient bad documents to appreciate the effort took into this approach. Clear, hierarchical navigation for the content, bite-sized step-by-step-copy, and naturally the code snippets. Dynamic sneak peeks of code throughout several platforms and languages is above and beyond, but then why should not it be?
There are few things better-- and more elusive-- than quality knowing resources. Stripe shows there is a world of possibilities online beyond the basic words on a page. I've shared this prior to (and I'll share it again) but Write the Doc's documentation guide is a smashing resource for presenting helpful material in beneficial, vibrant ways.
Max Böck's Technicolor Dream #.
There is a terrible lot to like about Max Böck's individual website, but for the purposes of this piece, I'm honing in on color schemes. The majority of sites have one color scheme.
Light and dark is the new typical, but as Böck himself writes in his post about the theme switcher, just Siths handle absolutes. Through the magic CSS custom homes the site changes between color design flawlessly. For a complete breakdown of how it works I heartily recommend 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 styles are named after Mario Kart 64 tracks, if you were wondering. Except Hacker News. That's called after Hacker News, with the marvellous touch of including 'considered hazardous' to the end of every single Böck blog post https://247creative.com.au/ title.
It's an enjoyable twist on the traditional light/dark dichotomy, and also speaks with just how fluid sites can be nowadays. The exact same groundwork could allow you to change color schemes depending on where people are checking out the website from.
Overpass Sells Sales #.
Sales isn't exactly a sector that yells innovation, but credit where credit is due. Overpass's carousels bounce and diminish and broaden so efficiently that it nearly seems like you're engaging with something tactile, like a rubber band.
Here, both the touch-action and translate3d() CSS functions are used to excellent impact, making the cards container something that can be successfully dragged around the screen. In case of the container being gotten, all cards utilize scale( 0.95) to decline ever so a little up until the user lets go. It provides the carousel a charming sense of depth and lightness.
The audio clips are a great touch. Multimedia integration has actually been a running theme in these examples. Constantly lay the ease of access foundation, however be strong. At this stage the only real limitations are those of our imaginations.
E-Commerce Meets Long Form Storytelling On Mammut #.
From Steve Jobs to Seth Godin, it is often said marketing is a storytelling game. This is something that a lot of e-commerce sites appear to have forgotten, each dishing out page after page of shiny products drifting in front of perfect white backgrounds. You can nearly hear the drawing noise of conversion funnels trying to draw you in.
It's refreshing then to see a company like Mammut going all in on storytelling to sell its hiking products. Their long-form exploration short articles are as immersive as the finest New York Times function, with audio clips, maps, and, naturally, sensational photography. Mammut equipment features greatly, obviously, but it's carried out in a manner in which's tasteful. Than that, it's authentic.
Although there is some super slick styling going on here that's not why I've included it. In a way it's incredible just how impersonal much of the Web feels nowadays, with e-commerce being an especially outright transgressor.
This is the example individuals would share even if they had no interest in purchasing mountaineering equipment. It's outstanding content. Instagram influencer posts appear like kid's play compared to this. Do those triggers to go shopping take you to the previously mentioned spotless e-commerce checkout? Naturally. But, by God do they make it. Not everyone has the resources for something this cutting edge, however it shows that e-commerce doesn't need to be sterilized and lifeless.
Axeptio Makes Its Cookies Palatable #.
You can't swing a cat without striking a disclaimer pop-up nowadays. It's unusual, then, that so many of them are so awful. Most of the time, they feel tacked on and rude. Now, to be reasonable, that's due to the fact that they are added and graceless, but some genuinely are simply there to Improve Your Browsing Experience ™.
Instead of treating its cookie pop-up like a bad smell, web approval service company Axeptio strolls the walk by making them look stylish, and even rather lovely. With GDPR (and fundamental decency) to consider, it's essential to weave ethical design into a website's fabric.
A charming touch is that it does not actually pop up till users begin walking around the website. Why bother individuals if they're not even thinking about the content? Notice also that they've dropped the boilerplate cookie terminology in favor of something more conversational.
Granted, this may not make the mundane 'extraordinary' exactly, however it does make it a whole lot classier. It's a small touch, but one which makes an exceptional first impression. Without even touching my mouse, I already have a sense of Axeptio's attention to detail and commitment to quality. A blocky 'We appreciate your privacy' pop-up would have offered a very different impression.
As far as cookies and pop-ups are essential, we might also own them. The exact same applies to other unsexy staples of the modern web. Do legal consent types, e-mail signups, and personal privacy pages have to be ugly and incredibly elusive, or do we simply need to think a little in a different way? Share your thoughts below!