The Ordinary Made Extraordinary (Part 1) – Smashing Magazine

/
/
/
45 Views

About the Author

Frederick O’Brien is a freelance journalist who follows most of Britain’s stereotypes. His interests include American literature, graphic design, sustainability…
More about Frederick ↬

Sometimes it’s the little things in web life that make us double-look. From carousels to documentation to cookie disclaimers, here are some sites that are universally used and sprinkled with a little magic.

Good web design ideas come in much thicker and can easily be missed if you are not careful. This series is a bit of an antidote to that, sticking to sprinkles of inspiration that caught our eye. Whether it’s a new mental state or an old trick delivered with a new charm, they share the quality that makes us think differently.

I recently wrote a piece of praise the work of Saul Bass in the world of web design. One of her great gifts is to make beautiful even the smallest details. It’s in the same sense that we started this series by sticking to website trends and looks that we’re used to getting rich. As you can see, they don’t have to be. Deception is always in the enforcement. Anything can be beautiful. Why focus on anything less so?

Glasgow International Pages Inside Pages

We’re used to a lot of scrolling now, though the Glasgow International festival website found a simple, clever way to tear up the itch while keeping the pages short:

the Glasgow International festival website
On the desktop, the Glasgow International the homepages line up three main sections side by side and allow them to scroll through independently of each other. (Lots of previews)

On mobile, the same three sections make up a large column. It’s a smart mobile / desktop relationship solution, and a beauty too. (Shout out the ‘Support’ button, which will start rotating as you hover over it.)

The CSS behind it should be simple. The three sections sit inside a flex container, with all three dividing the values ​​by overflow-y: auto; and height: 100vh; so they always fit in the desktop viewport. A very nice touch here is used scrollbar-width: auto; to get the sidebar. Because the columns capture the entire screen you intuitively create the way the page moves as soon as you move your mouse.

Kenta Toshikura’s Dimension-Bending Portfolio

A new site of the week in Awwwards, it is The portfolio website of Japanese frontend developer Kenta Toshikura the surprise is simple:

The portfolio website of Japanese frontend developer Kenta Toshikura
The 3D carousel on the landing page is on Kenta ToshikuraThe homepage is so elegantly made that you can almost imagine it being possible to fall off the screen and in an alternative CSS dimension. (Lots of previews)

If in doubt, the tendency is to rely on a flat, modular arrangement, but maybe we should thinking in three dimensions little always. This is a great example of lateral thinking that transforms how quickly a column of boxes into something truly memorable.

We may not all be equipped to do anything this imaginable (I really don’t) but it’s worth remembering that web pages are not blank canvases much less they are windows in alternative sizes.

Stripe Documentation Is The Teacher We All Want

Documenting is always one of the first injuries to walk a minute’s journey on the Web. Not necessarily. I didn’t hesitate to call Stripenice documentation:

Stripe’s documentation website
The instructions to Stripe.com accompanied by full views of the code, with different lines highlighted depending on the section you are reading. (Lots of previews)

I’m sure most of us have ground through enough poor documentation to appreciate the effort made in this way. Clear, hierarchical navigation for content, step-by-step copying, and of course code snippets. Dynamic code previews across many platforms and languages ​​are up and running, but why shouldn’t they be?

There are few things that are more valuable – and easier to identify – than quality learning resources. The stripe is shown there a world of possibilities online beyond the usual words on a page. I’ve shared it before (and I’ll share it too) but Write the documentation guide in Doc a destructive resource for presenting content with information in useful, dynamic ways.

Max Böck’s Technicolor’s Dream

There is an awful lot to like Max Böck’s personal website, but for the purposes of this piece, I’m looking for color schemes. Most websites have a color scheme.

Max Böck's personal website
A small but growing number is branching into a dark mode, bringing their count to two. Max Böck there are ten. (Lots of previews)

Light and dark are the new normal, but as Böck himself wrote his blog post about the theme switch, Only the Sith does it perfectly. Through the shy CSS custom property the site switches between color schemes seamless. For a complete breakdown of how it works I sincerely recommend reading the full post above. And for further reading on custom properties crush there are also many:

Themes are named next Mario Kart 64 track, if you think about it. Except for Hacker News. Name that to Hacker News, with the surprising touch of adding ‘considered harmful’ at the end of each title of Böck’s blog post.

It’s a fun twist on the traditional light / dark dichotomy, and also speaks fairly. how fluid sites can be today. The same standard will allow you to change color shades depending on where the people are from, for example.

Selling Surplus Selling

Marketing is not exactly the sector that cries out for innovation, but the credit where credit is needed. ExceedingThe carousels collide and shrink and expand so smoothly that it’s almost as if you’re interacting with something far away, like a rubber band.

Overpass website
ExceedingThe website is colorful, fast and dynamic. (Lots of previews)

Here, the same touch-action and translate3d() CSS functions are used to much better effect, making container cards something that can be effectively dragged around the screen. In the event that the thread is removed, all cards are used scale(0.95) to go back a little until the user comes out. It gives the carousel a beautiful feeling of depth and lightness.

The audio clips are a nice touch. Multimedia Integration a running theme in these examples. Always set the access standard, but don’t be intimidated. At this stage the real limitations are in our imaginations.

E-Commerce Meets Many Forms of Mammut Accounting

From Steve Jobs to Seth Godin, always say it Marketing is a story game. This is something that many e-commerce websites seem to forget, each providing one page per page of glossy products floating in front of perfect white backgrounds. You can almost hear the baby sound of conversion funnels trying to entice you.

It’s refreshing to immediately see a company like that Mammut that goes all in the story to sell its hiking products. Their long -standing expedition articles are as large as ever New York Times feature, with audio clips, maps, and, naturally, stunning photographs. The saammammut gear is much more revealing, of course, but it’s done in a way that tastes good. More important than that, it is reality.

Mammut's website
Mammut put the human experience at the forefront and center. Yes, they still want you to sell things, but they also want to celebrate the adventures of being a part of things. (Lots of previews)

Even if there are some of the smoothest styles going on here that’s not why I included them. In a way it’s unbelievable how much of the Web feels these days, that e-commerce is an even more serious culprit.

This is different from something people share even if they have no interest in buying mountain equipment. This is the most difficult issue. Instagram influencer posts seem like a child’s game compared to this. Will the buying prompts take you to the aforementioned cracking clean e-commerce checkout? Naturally. However, through God they can get it. Not everyone has the resources for something to cut, but it does show E-commerce doesn’t have to be lifeless and lifeless.

Axeptio Makes Cookies Happy With It

You can’t swing the cat without hitting a disclaimer pop-up these days. Strange, then, that so many of them are so ugly. Often on the left, they feel limited and have no grac. Now, to be fair, that’s because they’re pointed and have no grac, but some are really just there to improve Your Browsing Experience ™.

Instead of treating it cookie pop-up like a bad smell, web authorization solution provider Axeptio walks by making them look stylish, and even more beautiful. With GDPR (ug basic integrity) to think, it is important to weave the fabric ethical design of a website.

Axeptio's website
Axeptio shows a good example of data transparency. There are no walls of legal jargon, no nearly impossible opt -out system – just clear information on who uses the data. (Lots of previews)

A nice touch is that it doesn’t actually pop up until users start moving to the site. Why bother people if they are not interested in the issue? Also know as they drop the cookie boilerplate week in favor of something more communicative.

Granted, it may not be exactly globally “unique”, but it does Make it a whole class. It’s a small touch, but one that gives the most first thought. Without touching my mouse, I could already feel Axeptio’s attention to detail and commitment to quality. A blocky ‘We care about your privacy’ pop-up can give a different impression.

As long as cookies and pop-ups are needed, we can also own them. The same applies to other unsexy staples on the modern web. Should legal consent forms, email sign ups, and privacy pages be ugly and avoidable, or are we the only ones? have to think a little differently? Share your thoughts below!

Crushing Editorial(vf, yk, he)

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar