10 excellent resources for UX designers
Open-source collections for design systems, UI components, and principles
Have you ever felt like you need more than just visual examples while creating a flow or component? Checking for visual references is one part of the pie, however, it doesn’t give you the backbone of how things should be designed. There are some excellent resources out there from design principles to checklists, design systems, and even more to elevate your understanding of certain topics before starting a new design project. These open-source websites or collections are put together by experienced product or UX designers.
I have collected some over time which I use often during my designing process. These hidden gems are well-kept and up-to-date sources that are maintained by individual efforts. You will be incredibly grateful after seeing these folks’ work of putting resources and knowledge together.
1. Checklist design
You will see how helpful a design checklist can be if you are starting to design a flow or component from scratch. It provides you with a guideline and a fundamental list that you need to consider in the design process. Just keep in mind that the lists here are not broad-scale and can not cover all use cases. Each list just gives you an understanding of which component, page, or flow needs what on a fundamental level.
The checklists for elements/components are very easy to grasp and follow. Don’t overlook the extra tips that are added to some of them. You can also find related articles or visual references from actual products attached on the right side. The coolest thing is that there are possible states visually displayed at the bottom of the page for certain components, so try not to miss that part as well! The steps of the flows are well-described with visual representations. Lastly, there are “topics” section where you can find checklists for topics ranging from responsiveness to UX writing.
Tip: This website doesn’t contain only checklists, but also interviews with experienced designers. Under the check-ins section, you can read about interesting stories and best design practices from different designers.
2.Design system checklist
What about having a checklist for the design system? Surely helpful! This is an open-source website that consists of best practices of design systems. Three experienced designers are bringing their knowledge together and pouring it into a checklist that you can follow to create a comprehensive and durable design system.
3. Design principles
I discovered this website after the design principles workshop we had at the company where I work for. I was so sad not to know about this collection beforehand. This website provides 195 examples from different companies or organizations’ design principles and values. You can be inspired by real-life examples, and bring those concepts into the discussion in your workplace. This collection enables the observation of the history and improvements of design principles. Ben Brignell who manages this website, holds also workshops for organizations or companies upon request. Because it is an open-source website, you can also contribute by adding your company’s design principles or values.
4. Heydesignsystems
If you are looking for a complete package of sources all about design systems, here is the right location. A full collection of articles about how to design, document, govern, develop, measure, and sell a design system. Additionally, you can find videos explaining design systems and real-life stories from real companies that can inspire you on your design system journey. So you don’t have to google things one by one anymore, everything related to the design system is clearly categorized and filled with the right sources.
5. Humaneby Design
Usually neglected and forgotten: designing ethically. If you feel like also you need to know more about principles for ethical design, this website is the right place to be on. The best practices and patterns are introduced under different principles, and supported with related further readings. These principles are fundamental to creating a meaningful relationship between people and technology and ensuring the humane touch on our designs.
6. Design systems
Design systems from different companies from all over the globe. From Uber to Shopify you can find over 50 design systems here listed. The coolest thing here is all design systems are linked to the documentation and to their Figma Kits. What you can do is basically, get a copy of the Figma file and start examining each component and structure. Such a great tool to learn from experienced design teams!
7. Growth design
This website has an incredibly creative way to communicate knowledge, using storytelling as a medium. Its focus is on mostly user psychology. With each case study from real-life examples, Dan and Louis explain user expectations, emotions, and reactions to certain experiences on real products. They put themselves in users’ shoes and explain how they feel while interacting with the products. They use very simple language, intentionally avoiding complex jargon to keep the focus on simply customers and their feelings.
Tip: You can subscribe for free to get their newest entertaining case studies in your inbox.
8. Component gallery
This website offers you an up-to-date repository of components based on examples from design systems. Let’s say you need to design an accordion. Instead of checking each design system from different products one by one and searching for accordion in each, you simply go to the related category on component.gallery and check the examples from there.
9. Laws of UX
This guide provides a great overview of the laws of UX. The goal is here to make complex psychology heuristics accessible to more designers. It achieves that with a clear description and representation of each law. More articles are added for further reading as well. Some posters and card decks are available on the website and are created to make all these concepts memorable for all designers.
10. Built for mars
Last but certainly not least, here is built for mars! Built for mars is actually an active design studio. But I am just focusing on the case studies part of their website. In this section, you will find analyses of real products or features and comparisons between competitors. Case studies are filled with page-to-page analysis of the real products, descriptions of referenced UX psychology concepts, and a cheat sheet as a takeaway at the end of the studies that you can take and apply to your projects.
Tip: There are a lot of case studies specifically focused on fintech. If you work in or are interested in products in finance, you will benefit from it even more.
A gratitude to all contributors and creators of these websites above.
Thank you for reading!
Check out the other lists of resources:
