Over the past 3 years of self-learning UI & UX design, the internet has been my primary source of information. Below, you can find a list of the resources I found useful (and I hope you do too).
When designing for Apple devices, it is best that designers refer to Apple's HIG for guidance and resources. This allows designers to create consistent experiences that are not only consistent with the platform itself (iOS, macOS, iPadOS, watchOS, etc.) but also consistent across platforms. In addition to this, it provides an insight to Apple's own design philosophies. I have personally learnt a lot from this resource, such as details regarding the use of hyphens, grammar and capitalization inside of interfaces.
Access Apple's Human Interface Guidelines via this link. It includes resources for designing specifically for iOS, iPadOS, macOS, tvOS and watchOS.
This is a great channel for those more proficient in UI/UX design. Along with insights on her product design career, Femke also posts videos on her design process and dealing with product managers. Her channel can be found here. Furthermore, she also provides paid memberships to her design community on superpeer. You can find more information regarding this here.
Malewicz is a UI/UX designer with tons of experience, designing interfaces since the early 2000s. He is a founder of Hype4, a design studio for digital products. He is known for kickstarting some of the most popular UI trends, including neumorphism, glassmorphism, Aurora UI.
Malewicz posts videos about design on his YouTube channel. These are helpful to gain small bits of information about UI design, and also regarding how the UI/UX design market is going. In addition to this, he has written a few books about UI/UX design, most notably his No bullshit guide to UX and Designing User Interfaces. He also has other books, two of which are free. If you prefer video resources, you can check out his video courses. Lastly, he frequently posts blogs/articles on his Medium and Hype4 Academy website.
- Foundations of Iconography (Article)
- Principles of Icon Design (Article)
- 5 Ways to Create a Settings Icon (Article)
- Icon Grids & Keylines Demystified (Article)
- Pixel Snapping in Icon Design (Article)
- Feather Icons by Cole Bemis (MIT, Open-source)
- Phosphor Icons by Helena Zhang and Tobias Fried (MIT, Open-source)
- Unicons (Fremium)
- Google's Material Icons (Apache 2.0, Open-source)
- Untitled UI Icons (Freemium)
- Hero Icons 2.0 (MIT, Open-source)
- Iconoir (MIT, Open-source)
- IconJar (Paid application for managing icon packs)
- Untitled UI's Figma UI Kit (Freemium)
- Adobe's Spectrum (Free but IDK about the license)
- IBM's Carbon Design System (Apache 2.0, Open-Source)
- GitHub's Primer Design System (MIT, Open-Source) (see https://primer.style/design/ for interface guidelines)
- MUI by Material UI (Paid) (see https://mui.com/design-kits/ for design kits)
- Google's Material UI 3 (Free)
- Uber's Baseweb (MIT, Open-Source)
- Awesome Design Tools by GoAbstract (GitHub list)
- Laws of UX by Jon Yablonski (Website)
- Google Fonts (all fonts are open-source)
Design tokens are a methodology for expressing design decisions in a platform-agnostic way so that they can be shared across different disciplines, tools, and technologies. They help establish a common vocabulary across organizations.
- The W3C Design Tokens Community Group
Over the past year, big corporations have rapidly shifted towards a methodology incorporating design tokens and/or its principles. Examples of design systems shifting towards tokenization include Adobe's Spectrum, Figma's Design System (see their blog post), IBM's Carbon Design System, Salesforce's Lightning Design System, and Uber's Base Web. Atlassian is also currently in the process of incorporating design tokens into its design system.
Below, I have included a list of resources to understand design tokens. You can also refer to the design systems themselves that incorporate design tokens to see how they are used in practice.
- Introduction to Design Tokens by Louis Chenais (Article)
- A Beginner's Guide to Design Tokens by Steve Dennis (Article)
- Naming Design Tokens by Lukas Oppermann (Article)
- The hardest part about building dark mode is that people think it’s easy by the Figma team at Config 2022 (YouTube Video)
- Design Tokens Format Module (Draft) by the Design Tokens Community Group