Smashing Newsletter: Issue #337

Editorial

I love stumbling upon little lovely websites — just little tiny websites that instantly conquer your heart. They don’t necessarily have to be overly useful or practical. Instead, their true value shines in the experience you get from it, be it a smile on your face, a feeling of surprise, excitement, or inspiration.

In this newsletter, we’d love to highlight some inspiring artwork and design tools by artists around the globe, from miniature illustration to Japanese Fireworks catalogs, CSS art and generative art — all the way to a free Mac screensaver.

If you’d love to deep dive into design, we have a good number of online workshops coming up on data visualization, complex UIs and design systems. Also, join us at Smashing Meets, a free online event on Wed., February 9, with sessions by Trine Falbe and Laura Kalbag on ethical design.

Last but not least, stay tuned for next week! We’ll be announcing the official book release and shipping for Steven Hoober’s new book, Touch Design for Mobile Interfaces. Of course, as a Smashing Member, you’ll find the book in your dashboard free of charge. ;-)

Smashing greetings, everyone!
— Vitaly (@smashingmag)

1. A World Of Miniature Wonders

Have you ever thought that the broccoli that you’re preparing for dinner looks like a forest of trees? Or that the leaves floating on the surface of your local park’s duck pond resemble little boats? When you see things from a different perspective, an entirely new world starts to open up. A world of wonders.

Tatsuya Tanaka has a very special eye for the little wonders that lie right in front of us. Since 2011, he creates miniature diorama-style scenes from simple everyday things and tiny 3D-printed and hand-painted figures. In Tatsuya’s miniature universe, you’ll discover barbecue scenes where paper clips turn into picnic chairs and tables and metal staples into the barbecue grill, you’ll find an open package of potato chips forming a skatepark, an eyeshadow palette and a lipstick turning into a tiny office, or a burger into a merry-go-round. Imagination is the only limit. Tatsuya publishes a new miniature diorama every day on his Miniature Calendar. Now if that’s not the perfect way to start a new day thinking outside the box, what else is? (cm)

2. Flowers Of Fire

Spinning saxons, flying pigeons, polka batteries, Aztec Fountains, Bengal Lights — the variety of fireworks is as rich as the names that describe them. However, if you ever tried to take photos of a firework show, you know that it can be quite hard to capture this richness. That’s exactly what makes a nineteenth-century series of catalogue advertisements for Japanese fireworks so fascinating: without any expectations of photorealism, the illustrations in the catalogues evoke a unique sense of wonder.

Illustrations from Japanese Fireworks Catalogues

Digitized by the Yokohama City Library, the catalogues date back to the 1880s and show not only fireworks as we know them today but also so-called “daylight fireworks”. Daylight fireworks had their origins in Japan and didn’t use pyrotechnic effects but a projectile that contained a balloon in the shape of an animal, person, or other forms that opened up and inflated as it returned to the ground. Eye candy! (cm)

3. Generative Circle Art

Do you remember spirographs? The little plastic wheels and rings that let you draw all kinds of flower-y shapes? Nadieh Bremer’s generative art collection Rotae is the grown-up sibling of the good ol’ Spirograph fascination. “Rotae” means “wheels” in Latin and is an ode to the vast array of shapes that can appear from the seemingly simple process of letting circles rotate on circles.

The Rotae gallery consists of 529 outputs, all of them animated to reveal the intricacies of the underlying path. How does it work? Each of the Rotaes uses a hash as its seed, a pseudo-random-number-generator chooses the number of wheels and what m-fold symmetry to create. The wheels are then randomly given radii and frequencies that will create the aimed-for symmetry. In her summary of the project, Nadieh shares more insights into the tech behind the visual masterpieces as well as into how she animated them. Inspiring! (cm)

4. Upcoming Front-End & UX Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events — Frontend and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

As always, here’s an overview of our upcoming workshops:

Smart Interface Design Patterns, video course UX
with Vitaly Friedman. January–February 2022
New Adventures In Frontend, 2022 Edition Dev
with Vitaly Friedman. Feb 3–17
Front-End Testing Masterclass Dev
with Gleb Bahmutov. Feb 8–16
Building Modern HTML Emails Dev
with Rémi Parmentier. Feb 24 – Mar 4
Jump to all online workshops →

5. Art With CSS

Have you ever tried to create a piece of CSS art from scratch? If not, Yosra Emad wrote an easy-to-follow tutorial that might inspire you to get started. In it, Yosra takes you step by step through the process of creating a friendly ghost only with CSS. She shows everything from splitting an initial sketch into layers and planning the markup to coding every single detail of the artwork. It’s not only a fun little coding challenge but also helps you take your CSS positioning skills to the next level.

If you’re looking for some inspiration for CSS art, Chuan Yuan’s Codepen account is a treasure chest full of stunning CSS background patterns as well as static and animated CSS artworks. Make sure you don’t miss the Codepen where Chuan recreated the famous graphics by Japanese designer Ikko Tanaka only with CSS. Stunning! (cm)

6. Generative Art Tips And Inspiration

An awe-inspiring project that bridges the gap between a century-old tradition and state-of-the-art coding is {Shan, Shui}. Created by Lingdong Huan and inspired by traditional Chinese landscape rolls, it creates procedurally-generated, infinitely-scrolling Chinese landscapes in SVG format. The mountains and trees in the landscape are modeled from scratch using noise and mathematical functions. Fascinating!

Now, if you’re asking yourself how something as complex might work, you’re not alone. Victor Shepelev wanted to get behind the secret of {Shan, Shui} and made it his advent project to understand how it works. And, indeed, it took him 24 days to fully dig into the code. He summarized his findings in a series of articles.

Feeling inspired? If you’re ready to get your hands dirty on a little generative art project, George Francis’ articles with tips and tricks for creating generative art are for you. For some more inspiration, also be sure to browse by Andrey Andronov’s site. It carries out some fantastic experiments with famous and new styles of art — from Mondrian and Bauhaus to Suprematism and geometric art. Enjoy! (cm)

7. New From The Smashing Kitchen: “Smart Interface Design Patterns”

We’re almost there! Sometimes you start working on something, but instead of weeks it takes months, and sometimes even a year! Meet Smart Interface Design Patterns, our shiny new video course + live UX training.

That’s a whopping 6h-long video course with 25 video lessons packed with valuable techniques, guidelines and best practices for common components in modern interfaces — all curated by yours truly over the last 10 years. Watch a free lesson on accordions (15 mins).

We are working on some fine details and testing just before the launch the next 2 weeks. Get notified when it’s ready, and get a special smashing friends’n’family discount, of course. ;-) See you there! (vf)

8. Aerial Screensavers For Mac

Are you tired of the same old screensaver greeting you when you return to your desk after a coffee break? Aerial is here to change that. The open-source project lets you play videos from Apple’s tvOS screensaver on your Mac.

Among the screensavers, you’ll find high-quality aerial videos shot over various cities and locations like New York, San Francisco, and China, Earth videos from the ISS, underwater videos, as well as a selection of videos created especially for Aerial. All of them are shot in 4k, giving you the feeling that you really are experiencing the location as a bird hovering over the scene. Screensaver overlays show you descriptions of the main geographical features displayed in the videos and, if you want, thay also give you information on time and weather and what’s currently playing on Apple Music or Spotify. (cm)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

January 25, 2022 Smashing Newsletter: Issue #337

Previous Issues