Web Design Done Well: The Ordinary Made Extraordinary
Great ideas in web design come so thick and quick that it can be simple 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 brand-new function or merely an old trick delivered with new beauty, they share the quality of making us think a little in a different way.
I just recently composed a piece lauding the work of Saul Bass on the planet of website design. One https://247creative.com.au/ of his great gifts was making even the smallest information stunning. It is in that very same spirit we start this series by focusing on site trends and functions we've grown accustomed to being dull. As you'll see, they needn't be. The technique is typically in the execution. Almost anything can be lovely. Why go for anything less?
Glasgow International's Pages Within Pages #
We're utilized to a lot of scrolling these days, but the Glasgow International festival site has discovered an easy, smart method to scratch that itch while keeping pages brief:
On mobile, the exact same 3 areas form one big column. It's a smart solution to the mobile/desktop relationship, and a pretty trendy one too. (Shout out to the 'Support' button, which begins spinning when you hover on it.).
The CSS behind this is appropriately simple. The 3 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 great touch here is utilizing scrollbar-width: automobile; to remove the sidebar. Since the columns take up the entire screen you intuitively work out the way 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 website by Japanese frontend developer Kenta Toshikura is merely breathtaking:.
If in doubt, the tendency is to lean towards flat, modular plans, however possibly we need to be believing in 3 dimensions a little bit more often. This is a wonderful example of lateral thinking transforming what could easily have actually 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) but it's well worth remembering that web pages aren't blank canvases so much as they are windows into alternate measurements.
Stripe Documentation Is The Teacher We All Want #.
Documents is all frequently one of the first casualties of the Web's mile-a-minute speed. It needn't be. I have no qualms calling Stripe's documents stunning:.
I'm sure the majority of us have ground through adequate bad paperwork to value the effort put into this technique. Clear, hierarchical navigation for the content, bite-sized step-by-step-copy, and of course the code snippets. Dynamic previews of code across several platforms and languages is above and beyond, however then why should not it be?
There are couple of things better-- and more evasive-- than quality knowing resources. Stripe shows there is a world of possibilities online beyond the basic words on a page. I've shared this before (and I'll share it once again) however Write the Doc's documentation guide is a smashing resource for presenting helpful content in beneficial, vibrant methods.
Max Böck's Technicolor Dream #.
There is a dreadful lot to like about Max Böck's personal site, however for the purposes of this piece, I'm focusing on color schemes. Most sites have one color pattern.
Light and dark is the new typical, but as Böck himself writes in his blog post about the style switcher, only Siths handle absolutes. Through the magic CSS custom homes the site changes between color schemes perfectly. For a full breakdown of how it works I heartily recommend reading the full post linked above. And for more reading on custom 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 named after Mario Kart 64 tracks, if you were questioning. Other Than Hacker News. That's named after Hacker News, with the wonderful touch of including 'thought about hazardous' to the end of every single Böck blog post title.
It's a fun twist on the standard light/dark dichotomy, and likewise speaks with just how fluid sites can be nowadays. The very same groundwork could allow you to change color pattern depending on where individuals are visiting the site from, for instance.
Overpass Sells Sales #.
Sales isn't precisely a sector that screams development, but credit where credit is due. Overpass's carousels bounce and diminish and broaden so efficiently that it nearly seems like you're communicating with something tactile, like a rubber band.
Here, both the touch-action and translate3d() CSS functions are used to great effect, making the cards container something that can be efficiently dragged around the screen. In case of the container being grabbed, all cards utilize scale( 0.95) to recede ever so somewhat until the user releases. It gives the carousel a lovely sense of depth and lightness.
The audio clips are a great touch. Multimedia combination has been a running theme in these examples. Constantly lay the ease of access foundation, but be vibrant. 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 forgotten, each serving up page after page of shiny items floating in front of ideal white backgrounds. You can almost hear the sucking sound of conversion funnels trying to draw you in.
It's rejuvenating then to see a company like Mammut going all in on storytelling to sell its treking products. Their long-form expedition articles are as immersive as the finest New York Times feature, with audio clips, maps, and, naturally, spectacular photography. Mammut gear features heavily, obviously, but it's carried out in a way that's stylish. More notably than that, it's genuine.
Although there is some very slick styling going on here that's not why I've included it. In a way it's incredible simply how impersonal much of the Web feels these days, with e-commerce being a particularly outright culprit.
This is the kind of thing individuals would share even if they had no interest in purchasing mountaineering gear. It's superb material. Instagram influencer posts look like kid's play compared to this. Do those triggers to go shopping take you to the aforementioned spotless e-commerce checkout? Naturally. By God do they make it. Not everyone has the resources for something this cutting edge, however it shows that e-commerce does not have to be sterile and lifeless.
Axeptio Makes Its Cookies Palatable #.
You can't swing a cat without striking a disclaimer pop-up these days. It's unusual, then, that many of them are so awful. More often than not, they feel tacked on and graceless. Now, to be fair, that's due to the fact that they are added and graceless, but some really are simply there to Improve Your Browsing Experience ™.
Rather of treating its cookie pop-up like a bad smell, web permission solution provider Axeptio walks the walk by making them look stylish, and even rather lovely. With GDPR (and fundamental decency) to think about, it's necessary to weave ethical style into a site's fabric.
A charming touch is that it does not actually turn up till users begin moving around the site. Why bother people if they're not even interested in the content? Notification too that they've dropped the boilerplate cookie lingo in favor of something more conversational.
Granted, this may not make the mundane 'extraordinary' exactly, but it does make it a lot classier. It's a little touch, however one which makes an exceptional impression. Without even touching my mouse, I currently have a sense of Axeptio's attention to detail and dedication to quality. A blocky 'We care about your personal privacy' pop-up would have offered a really different impression.
As far as cookies and pop-ups are essential, we may as well own them. The very same uses to other unsexy staples of the modern-day web. Do legal permission types, email signups, and personal privacy pages have to be awful and evasive, or do we just need to believe a little differently? Share your thoughts below!