Pttrns & CollectUI – UI/DX Design Libraries

by Taylor Slattery | June 13, 2020

Regardless of discipline, when beginning any type of creative project, a common first step is to gather reference material. For creatives, sites like Behance and Dribbble serve as hubs for all sorts of different work and are great ways to see what other creatives are up to. You can browse the latest projects from individuals and studios alike, and use them as jump-off points for projects of your own. If you’re a UI/UX designer, I’ve got 2 more sites you might consider adding to your lineup.

Pttrns and CollectUI collect UI/UX-centric posts from both Behance and Dribbble and present them in a format that makes it easier to find what you’re looking for. Whether you need an example of a color picker or a location tracker, these sites have you covered. Just scroll through the sidebar until you find the type of element you’re looking for and you’ll have access to a curated list of examples from a variety of different designers.

Lists can be sorted by newest or popularity so you can see both what works and what’s coming up next. The posts are displayed in a grid format, just like on Behance and Dribbble, and also link back to the original post, so if you find something you like, you can head back to the designer’s portfolio for some more.

Both Behance and Dribbble have filters that allow you to refine your searches into more curated results, similar to the lists on Pttrns and CollectUI. However, they have some shortcomings that prevent the browsing process from being the best they can be. Posts aren’t always given titles that fully reflect their content. If someone is sharing a design they’ve done for a client, the title will likely reflect the scope of the project as a whole, for example, “Bright Wings Branding.” Let’s say you’re looking for examples of pricing screens. Part of the “Bright Wings Branding” post might contain exactly what you’re looking for, but due to the title and thumbnail, you scroll right past. The lists on both Pttrns and CollectUI have been curated by humans and are organized by type, whether page or element, making it easy to find what you’re after.

I’ve included them both CollectUI and Pttrns in this article as they serve an identical purpose, though neither one is perfect. CollectUI has a chrome extension and is also free, unlike Pttrns which requires an upgrade to premium for the full experience. Another point in favor of CollectUI is that its layout allows for more examples to fit on screen unlike Pttrns, which depending on your screen size, may only accommodate a few examples at any given moment. One downside to CollectUI is that for some reason, its index of elements on the sidebar are not alphabetical, something which can be found on Pttrns.

Behance and Dribbble are both great sources of inspiration and offer insight into the current trends of design, but if you’re a UI/UX designer and are looking for a more tailored experience, consider giving either Pttrns or CollectUI a shot.