Web Design Done Well: The Ordinary Made Extraordinary
Great concepts 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 antidote to that, piecing together splashes of inspiration that captured our eye. Whether it's a mind-bending brand-new feature or just an old trick delivered with new beauty, they share the quality of making us think a little differently.
I recently composed a piece lauding the work of Saul Bass in the world of website design. Among his excellent presents was making even the tiniest information stunning. It remains in that 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 needn't be. The trick is typically 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 nowadays, but the Glasgow International celebration website has discovered an easy, smart way to scratch that itch while keeping pages brief:
On mobile, the very same 3 sections form one huge column. It's a savvy option to the mobile/desktop relationship, and a quite stylish one too. (Shout out https://247creative.com.au/ to the 'Support' button, which starts spinning when you hover on it.).
The CSS behind this is suitably basic. The three areas sit inside a flex container, with all 3 sharing the worths of overflow-y: vehicle; and height: 100vh; so that they constantly fit the desktop viewport. The actually nice touch here is utilizing scrollbar-width: automobile; to get rid of the sidebar. Because the columns use up the entire screen you intuitively work out the method the page works as soon as you move your mouse.
Kenta Toshikura's Dimension-Bending Portfolio #.
A recent website of the week on Awwwards, this portfolio site by Japanese frontend developer Kenta Toshikura is merely spectacular:.
If in doubt, the propensity is to lean towards flat, modular plans, however possibly we must be believing in 3 dimensions a little more frequently. This is a great example of lateral thinking transforming what could quickly have been a column of boxes into something really memorable.
We might not all be geared up to do something quite this fancy (I'm definitely not) however it's well worth bearing 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 one of 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 enough bad documents to value the effort put into this approach. Clear, hierarchical navigation for the content, bite-sized step-by-step-copy, and obviously the code bits. Dynamic sneak peeks of code across several platforms and languages is above and beyond, but then why should not it be?
There are couple of things better-- and more elusive-- than quality knowing resources. Stripe reveals 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 once again) but Write the Doc's documents guide is a smashing resource for presenting useful material in helpful, dynamic methods.
Max Böck's Technicolor Dream #.
There is a horrible lot to like about Max Böck's personal website, however for the functions of this piece, I'm honing in on color design. A lot of websites have one color design.
Light and dark is the new typical, but as Böck himself writes in his post about the theme switcher, only Siths deal in absolutes. Through the magic CSS customized residential or commercial properties the site changes in between color pattern effortlessly. For a full breakdown of how it works I heartily recommend checking out the complete post connected above. And for additional reading on custom-made residential or commercial 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 questioning. Except Hacker News. That's named after Hacker News, with the wonderful touch of adding 'considered damaging' to the end of every Böck article title.
It's a fun twist on the traditional light/dark dichotomy, and also speaks with just how fluid websites can be nowadays. The exact same foundation could permit you to adjust color schemes depending on where people are visiting the website from.
Overpass Sells Sales #.
Sales isn't precisely a sector that screams innovation, but credit where credit is due. Overpass's carousels bounce and diminish and broaden so smoothly that it practically seems like you're interacting with something tactile, like a rubber band.
Here, both the touch-action and translate3d() CSS functions are utilized 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 use scale( 0.95) to decline ever so somewhat until the user lets go. It provides the carousel a lovely sense of depth and lightness.
The audio clips are a good touch. Multimedia combination has been a running style in these examples. Always lay the accessibility groundwork, however be bold. At this phase 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 frequently said marketing is a storytelling game. This is something that a lot of e-commerce sites seem to have forgotten, each dishing out page after page of shiny items drifting in front of best white backgrounds. You can practically hear the sucking sound of conversion funnels attempting to draw you in.
It's rejuvenating then to see a business like Mammut going all in on storytelling to sell its treking items. Their long-form exploration posts are as immersive as the finest New York Times function, with audio clips, maps, and, naturally, sensational photography. Mammut gear features heavily, of course, however it's done in a manner in which's stylish. More notably than that, it's authentic.
Although there is some very slick styling going on here that's not why I've included it. In such a way it's extraordinary simply how impersonal much of the Web feels these days, with e-commerce being a particularly outright culprit.
This is the example individuals would share even if they had no interest in buying mountaineering equipment. It's exceptional content. Instagram influencer posts appear like child'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, however it reveals that e-commerce doesn't need to be sterilized and lifeless.
Axeptio Makes Its Cookies Palatable #.
You can't swing a feline without hitting a disclaimer pop-up nowadays. It's strange, then, that so many of them are so awful. More often than not, they feel added and rude. Now, to be reasonable, that's because they are added and rude, but some genuinely are simply there to Improve Your Browsing Experience ™.
Instead of treating its cookie pop-up like a bad smell, web consent option company Axeptio strolls the walk by making them look trendy, and even rather charming. With GDPR (and standard decency) to think about, it's important to weave ethical style into a site's fabric.
A lovely touch is that it doesn't really turn up until users begin moving around the website. Why bother individuals if they're not even thinking about the material? Notification as well that they've dropped the boilerplate cookie terminology in favor of something more conversational.
Given, this may not make the mundane 'extraordinary' precisely, but it does make it a whole lot classier. It's a small touch, however one which makes an outstanding impression. Without even touching my mouse, I currently have a sense of Axeptio's attention to detail and commitment to quality. A blocky 'We care about your personal privacy' pop-up would have provided an extremely different impression.
As far as cookies and pop-ups are essential, we may also own them. The same applies to other unsexy staples of the contemporary web. Do legal approval types, email signups, and privacy pages need to be ugly and incredibly elusive, or do we just require to believe a little differently? Share your ideas listed below!