#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. [The Meets For Good 2022]( 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 [upwork.com](. --------------------------------------------------------------- 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. [Rotae]( 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 Workshops]( 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. [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 [Northwestern: Online Master’s in 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. [Aerial]( 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 - [Senior Interactive Designer]( at Constructive (USA) - [Web Developer (Faculty Research Assistant)]( at University of Maryland (Annapolis, MD, USA) - [E-Commerce UX Auditor (Q1 2022)]( at Baymard Institute (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [What’s New With DevTools]( - [Getting Started With CSS Cascade Layers]( - [From Chaos To System In Design Teams]( - [Building The Real App With React Query]( - Read more of the [latest articles on Smashing Magazine →]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](