Smashing Magazine - #337: Design Inspiration

With miniature illustrations, Japanese Fireworks, CSS art, generative art and a free Mac screensaver. Issue #337 January 25, 2022 View in the browser 💨

Smashing Newsletter

Hyvää päivää Smashing Friends,

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.

Topple in Star Trek mode

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.

Touch Design for Mobile Interfaces

Touch Design for Mobile Interfaces

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.

Miniature Calendar

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)

From our sponsor

Connect With Skilled Independent Talent On Upwork™, The World’s Work Marketplace

Connect With Skilled Independent Talent On Upwork™, The World’s Work Marketplace
There’s more than one way to work with talent on Upwork. With Talent Marketplace™, post a job and start connecting with skilled talent right away. On Project Catalog™ you’ll find ready-to-purchase projects you can customize to meet your needs. Connect with talent on your terms at

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:

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.

Ikko Tanaka Pure CSS

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!

Shan Shui

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)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

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.

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

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)

9. New On Smashing Job Board

10. Recent Smashing Articles

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).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#336: Front-End Accessibility

Tuesday, January 18, 2022

With tips and advice from the community on improving accessibility by creating accessible and inclusive content and debunking accessibility myths together. Issue #336 • January 18, 2022 • View in the

#335: New CSS Adventures

Tuesday, January 11, 2022

With hand-picked CSS guides, inspiring talks, cross-browser tools and the latest CSS practices to dive into in 2022. Issue #335 • January 11, 2022 • View in the browser 💨 Smashing Newsletter Dear

#334: Getting Ready for 2022

Tuesday, January 4, 2022

With podcasts, mentorship, inspirational websites and self-reflecting yourself as the new year begins... Issue #334 • January 4, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

#333: Boosting Productivity in 2022

Tuesday, December 28, 2021

With advice on how to makie better estimates, achieving more productive meetings and useful checklists for a successful 2022! Issue #333 • December 28, 2021 • View in the browser 💨 Smashing Newsletter

#332: Enterprise UX

Tuesday, December 21, 2021

With tips and tricks on improving usability while designing better dashboards, tables and UI design elements. Issue #332 • December 21, 2021 • View in the browser 💨 Smashing Newsletter Dear Smashing

Can Cat-Friendly Design Be Chic?

Tuesday, May 17, 2022

Plus, dive into 20 of the most inviting pools from the AD archive (image) Architectural Digest AD PRO Logo Guest room at the Casa Cody in Palm Springs, California HOW TO LAND—AND SURVIVE—YOUR FIRST

Your PR questions answered

Tuesday, May 17, 2022

Advice from Nora Wolf Welcome to the first edition of PR Questions with Nora. This new monthly newsletter feature was inspired by you! If you've attended one of our recent PR workshops, you likely

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

Roboto Flex

Tuesday, May 17, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Get the most of built-in interactivity of coded UI components - Design with fully interactive elements that make

Nice, Balanced Colors, Failed Projects, One Million People, CSS Selectors

Tuesday, May 17, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 17 2022 The Brand Identity Balancing

11 Black Paint Shades Interior Designers Use on Repeat

Monday, May 16, 2022

Plus, tour a 19th-century manse turned wine country hotel (image) Architectural Digest AD PRO Logo Nickey Kehoe. 50 OF THE BEST HOME DECOR STORES IN AMERICA These expertly curated design boutiques need

👀 Notable Landing Page Designs + 🏆 Challenge Updates

Monday, May 16, 2022

The UpLabs Designer Digest Is Dropping Into Your Inbox 📩 To begin, we'd like to congratulate Arjun Makwana, the winner of our latest 📍Device Locator App Challenge! Next, here's a friendly

A Fidi Loft With Room for Pokémon: Before and After Photos

Monday, May 16, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The kitchen, after. Photo: Kevin

Accessibility Weekly #292: Why WCAG 2.2 is Still in the Oven

Monday, May 16, 2022

Sponsored by Automattic. They're hiring. May 16, 2022 • Issue #292 View this issue online or browse the full issue archive. Featured: Why WCAG 2.2 is still in the oven “We're currently looking

Beer Trends, Blind VR, Bootstrap 5.2.0, App Icon Book, COLRv1

Monday, May 16, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 16 2022 2022 Craft Beer Branding and Package Design Trends