W
hat a time to be alive. When it comes to design, prototyping and animation tools, stock photo sites, design systems and frameworks and the like — there are so many options! The tipping point to decision fatigue is nearing! It’s hard to keep track of all the vast resources at our disposal. My motivation to create UI Goodies came from here.
For awhile now, I’ve been keeping a list of my favorite design and UI resources. While curated lists are nothing new, my personal list became too much to manage and I saw value in sharing the list with others and also giving passionate makers another spotlight to showcase their work.
On UI Goodies you’ll find a variety of resources that will help you design for accessibility, find iconography, color palettes and background patterns. You can browse the best design systems and stock photo sites. There’s even a section for audio. 🔊
Currently UI Goodies has nearly 100 resources spread across 10 categories. Woohoo!
Each section also has a small list of relevant-to-the-category articles.🤓
Let’s check out some goodies!
The rest of the post will focus on a highlight from each of the ten categories. These are some of my favorite resources on the site.
1. Accessibility: Contrast
Contrast is a MacOS app for quick access to WCAG color contrast ratios. It’s a pleasure to use, well-designed and fast.
by: Sam Soffes and mds | Accessibility Resources on UI Goodies
Separately, if you’re working on a color palette that meets accessibility standards, you’ll want to check this out by Atul Varma
2. Animation: Animate.css
Animate.css is a cross-browser library of CSS animations. Even if you don’t use this library in practice, it’s a handy reference point when discussing and communicating simple animation styles.
by: Daniel Eden | Animation Resources on UI Goodies
3. Audio: Soundsnap
Soundsnap has over 220,000 sound effects including a specific category for “Interactive sounds for UI.” It’s super easy browse and play audio samples, which is key for when you’re on the hunt for just the right bit of audio.
by: Soundsnap| Audio Resources on UI Goodies
4. Colors: Color Me
Color Me is a beautiful, simple way to visualize the CSS color function. Damn, it’s a beautiful site! You can quickly enter and or see the output of color in a variety of different formats; also comes with a handful of color adjusters.
by: Tyler Gaw | Color Resources on UI Goodies
5. Content: Craft Sketch Plugin
The Craft Sketch plugin is a great all-around solution for on-demand capabilities when it comes to adding content to your mockups. It does a lot more than that and integrates nicely into Sketch.
by: Invision| Content Resources on UI Goodies
6. Design Systems: Cabana
Cabana is an unbelievably powerful design system. I’ve had the opportunity to use it over the past few weeks. It has everything you need and is easily customized. There are built-in resizing constraints and heaps more!
by: Kiss my UI | Design System Resources on UI Goodies
7. Icons & Symbols: HTML Symbols
There are so many fantastic icon sites; I can’t choose one. One site that I go back to time and time again for symbols is HTML Symbols. It’s a comprehensive library full of easy copy and paste symbols.
by: Toptal | Icon & Symbols Resources on UI Goodies
8. Lightweight UI Frameworks: Skeleton
Widely adopted is Bootstrap but I love a lightweight front-end framework! Mainly for personal projects and sites. Skeleton is a “dead simple, responsive boilerplate,” and it works wonderfully. I built my Website with it. 👍
by: Dave Gamache| Lightweight Front-End Frameworks on UI Goodies
“You should use Skeleton if you’re embarking on a smaller project or just don’t feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that’s often more than enough to get started.”
9. Patterns & Backgrounds: Hero Patterns
Hero Patterns is a collection of repeatable SVG background patterns. On the site you can adjust the foreground and background colors as well as the foreground opacity.
by: Steve Schoger| Pattern & Background Resources on UI Goodies
10. Stock Photos: Burst
Burst is a stock photo site with a high-quality selection of photos. They are particularly interesting to me as their free start-up stock photos focus on diversity in tech and the workplace. 👏🏽
by: Steve Schoger| Stock Photo Resources on UI Goodies
UI Goodies is an ongoing project. If you have suggestions for resources you think would be great on the site, you can submit them here. Enjoy!!
