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

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


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

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

You Might Also Like

The Problem With Using Social Media as Design Education

Tuesday, May 7, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party Twenty-five days were left

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

🤯 Immersive Admin Dashboard Designs + 🏆 Challenge Updates

Tuesday, May 7, 2024

Stay Up-to-Date With UpLabs' Latest Design News 🎨 Firstly, let's congratulate Rahul Parmar, the winner of our latest 👾 ChatGPT Redesign Challenge! Congratulations!! Secondly, the end of April

Web Components, Conditional Styling, Popover API, color-mix(), Product Designers

Tuesday, May 7, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 7 2024 Map of the web graph.henryn.ca A visualization of

Map of the Web, JSR Registry, Presidential Campaign a11y, Age of Average, CSS Specificity

Tuesday, May 7, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 6 2024 Map of the web graph.henryn.ca A visualization of

How we do UX retreats at Balsamiq (+ steal our agenda!)

Monday, May 6, 2024

Inside our UX group retreat ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly: #395: Why Are My Live Regions Not Working?

Monday, May 6, 2024

May 6, 2024 • Issue #395 View this issue online or browse the full issue archive. Featured: Why are my live regions not working? "Live regions have a reputation for being "flaky" and

Writing a POV Doc

Sunday, May 5, 2024

Issue 193: Share what you care about at scale ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.