A curated, easier to browse graphic design repository for the Internet Archives

A Collection of dark and light theme toggles, built with SVG's driven by CSS transitions. This dark mode switches library comes with official React support

A curated collection of diagramming tools used by leading software engineering teams - GitHub - shubhamgrg04/awesome-diagramming: A curated collection of diagramming tools used by leading software engineering teams

Create animated videos in your browser like never before 🎥

Motionity is a free & open source motion graphics editor for the web 🙌 Browse assets, add keyframes with easing, mask layers, apply filters, text animations, Lotties, audio, and much more.

https://www.motionity.app/

https://twitter.com/alyssaxuu

Sonuum is an upcoming feature-packed audio editor for the web 👀 Contextual feedback, shared team libraries, sleek design, collaborative features, and much more.

👉 https://sonuum.com

Many of Casey Reas' programmatic artworks resemble things you see in nature—tangles of leaves, daffodils, bee colonies, algae—but they’re anything but.

To help further this exploration, Reas and his colleague Ben Fry (a principal of Fathom, a design and software consultancy in Boston) in 2001 developed their own software, called Processing, that bridges the divide between programming and art, making both processes more intuitive.

By default, lots of image editing tools save PNGs with 2^24 color depth, just in case.

So in Acorn, my image editor of choice, I’ve been taking special care to crank down the bit depth on PNGs in the export dialog. In many cases, I’ve cut image weight 80% or more by indexing colors to a palette of 256 or fewer values, with no loss of visual fidelity.

That PNG at full-color depth is about 379KB. Restricted to a palette of 32 colors, it’s 61KB. And that’s just at the export time: once I run them through ImageOptim, the optimized sizes are 359KB and 48KB.

Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. An illustrated guide.

What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal. But look at the picture below. Our eyes immediately detect that the square outweighs the circle.

A non-definitive guide on how to make a strokes-intact dot for outline style icons.

Sometimes you need to make a dot in Adobe Illustrator. And sometimes it takes you so long to figure out how to make said dot that you begin to contemplate the benefits of giving up design entirely and living as a hermit in the woods. To save others from this path of existential angst, here’s a quick tutorial.

In a website or application, arrows can determine how you navigate them by performing specific actions like “go to next page”, indicating to scroll “top or bottom, left or right” and many other. With the help of CSS pseudo-elements and borders, it’s easy to create different arrow styles that will look great on both mobile and desktop. So if you’re currently using arrow images in your projects you can easily replace them with CSS arrows. Doing so, will reduce the number of requests when loading a website or web app.

Spheres

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.

Physics-based animations and interactions are becoming more common in UI. This page goes through some basic physical models and the kinds of interactions and animations that can be constructed from them.