unDraw; Design Spells; Design System Surf

It’s been a minute since we had an entire issue focused on “design”, so let’s remedy that, today.

TL;DR

(This is an AI-generated summary of today’s Drop)

• unDraw provides a vast collection of open-source, customizable illustrations for digital projects, created by Katerina Limpitsouni, with no licensing or attribution required unDraw.
• Design Spells is a repository of design details, showcasing micro-interactions, easter eggs, and animations that enhance user interfaces, aiming to create moments of joy and wonder through design Design Spells.
• Design System Surf offers a comprehensive catalog of design systems from leading companies, complete with metrics, best practices, and direct links to repositories and storybooks Design System Surf.

---

unDraw

While I may fancy myself a fairly decent chap at data visualizations and overall composition, freehand drawing is something I’ve never put any real effort into. As such, I rely heavily on the talents of others to pick up this slack. One such crutch is unDraw, a veritable treasure trove for anyone (like me) in need of high-quality, customizable illustrations for any digital project — no license feeds or attribution required without the hassle of licensing or attribution.

Created by Katerina Limpitsouni, unDraw offers a bonkers large collection of open-source illustrations that cater to a wide array of ideas and themes. Katerina is committed to making design more accessible and inclusive, and provides designers, developers, and anyone looking to put their ideas to “paper”, with the resources they need to bring their ideas to life with visual flair.

The site is easy to navigate, making it a breeze for folks to browse through an extensive library of illustrations that can be easily customized to match your personal or brand’s color scheme. The illustrations are available in SVG format (the section header is a hastily modified PNG), ensuring that they scale perfectly across different devices and resolutions without any loss in quality.

Katerina also regularly adds new illustrations to keep the library fresh and relevant, and has — essentially, helped democratized design (to at least some degree). I suspect you’ll find it a great source of inspiration when looking to communicate with your next project.

Design Spells

Design Spells is a spiffy site that serves as a kind of spellbook for designers and coders alike. It’s a repository of design details that cover a broad spectrum of elements such as mobile and desktop interaction, easter eggs, skeuomorphic designs, animations, and more. The site shines a light on the little touches that make human interfaces delightful, engaging, and memorable. From the dynamic island on Apple devices to beautifully animated 404 pages, Design Spells showcases how thoughtful design can transform the mundane into the extraordinary.

The “little touches” noted in the previous paragraph may often go overtly unnoticed but can significantly enhance the experience of those engaging with what you make. For instance, the inclusion of easter eggs in can surprise and delight users (we recently did this with our new podcast home page at work, and it was absolutely well-received). Similarly, the use of skeuomorphic design elements (which are back in fashion) can make interfaces feel more tangible and intuitive, especially for folks who are less tech-savvy. Design Spells highlights these and other design strategies, providing inspiration and practical examples that we can draw from in our own work.

Design Spells focus is, however, not just about making things look good; it’s about creating moments of joy and wonder through interaction. This approach to design is both fun and functional, making things we create more engaging and easier to use. By focusing on the details that evoke emotion and facilitate understanding, Design Spells promotes a design philosophy that values human delight as much as usability.

You are guaranteed to be inspired if you poke around the site even for just a few moments.

Design System Surf

Design System Surf is a well-crafted map that can help navigate the vast and confusing seas of design systems. It adeptly catalogs design systems from leading companies and organizations, and is well-organized into components and directories, making it easy to find specific elements or explore complete design systems.

Some of the featured systems are from where one might expect, including Adobe Spectrum, Apple HIG, and Material Design. Each system is detailed with metrics such as popularity and engagement, and also includes direct links to repositories and storybooks (oh, yeah, Storybook 8 just recently came out).

Designers may appreciate the guides to best practices in UI/UX design, while developers will appreciate the non-nonsense links to code repositories and component libraries. Both will come away with a deeper understanding of design systems.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️