# UI design resources

> UI design resources. Laws of UX, Refactoring UI, Fluent 2 and SharePoint design guidance, Figma and Penpot, colour and type tools, icons, free photos and inspiration.

Source: https://ali.id.au/practices/building/ui-design/ (last edited 2026-10-12)

## Principles

* [Laws of UX](https://lawsofux.com/)
* [Refactoring UI](https://www.youtube.com/playlist?list=PLDVpvW8ghDr9tasku_YvuTy_l0xPUtOHE) + [book](https://refactoringui.com/book/)
* [Practical Typography](https://practicaltypography.com/) - Matthew Butterick's free book
* [The typographic scale](https://spencermortensen.com/articles/typographic-scale/)
* [12 visual hierarchy principles](https://visme.co/blog/visual-hierarchy/)
* [GoodUI](https://goodui.org/) - UI patterns, with test results
* [Nielsen Norman Group](https://www.nngroup.com/articles/) - UX research articles
* [Every Layout](https://every-layout.dev/) - CSS layout primitives
* [Inclusive Components](https://inclusive-components.design/) - accessible component patterns

## Microsoft design

* [Fluent 2](https://fluent2.microsoft.design/) - Microsoft's design system
* [Fluent UI System Icons](https://github.com/microsoft/fluentui-system-icons)
* [SharePoint Web UI Kit](https://www.figma.com/community/file/1260359051156407926) for Figma
* [SharePoint look book](https://adoption.microsoft.com/sharepoint/look-book/) - example sites to start from
* [SharePoint design guidance](https://learn.microsoft.com/sharepoint/dev/design/design-guidance-overview)

## Tools

* [Figma](https://www.figma.com/) or [Penpot](https://design.penpot.app/) (open Figma alternative)
* [Spline](https://spline.design/) - 3D design in the browser
* [Excalidraw](https://excalidraw.com/) - hand-drawn style diagrams
* [draw.io](https://app.diagrams.net/) - diagrams
* [XMind](https://xmind.com/) - mind maps
* [SVG Viewer](https://www.svgviewer.dev/) - view and edit SVG code
* [SVGOMG](https://jakearchibald.github.io/svgomg/) - shrink SVGs
* [Squoosh](https://squoosh.app/) - compress images in the browser

## Colour and type

* [Coolors](https://coolors.co/) - colour scheme generator
* [OKLCH colour picker](https://oklch.com/)
* [Realtime Colors](https://www.realtimecolors.com/) - try a palette on a real page
* [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/)
* [Utopia](https://utopia.fyi/) - fluid type and space scales
* [Google Fonts](https://fonts.google.com/) and [Fontshare](https://www.fontshare.com/) - free fonts

## Icons, illustrations and photos

* [Lucide](https://lucide.dev/) and [Phosphor](https://phosphoricons.com/) - open source icon sets
* [unDraw](https://undraw.co/) - free illustrations in your colours
* [Unsplash](https://unsplash.com/) and [Pexels](https://www.pexels.com/) - free photos
* [Freepik](https://www.freepik.com/) - vectors, icons and photos
* [Envato Elements](https://elements.envato.com/) and [UI8](https://ui8.net/) - paid assets and UI kits

## Inspiration

* [Dribbble](https://dribbble.com/) and [Behance](https://www.behance.net/)
* [Pttrns](https://www.pttrns.com/) - mobile UI patterns
* [Design Systems Repo](https://designsystemsrepo.com/)
* [Design Resources](https://designresourc.es/)
* [mr div](https://mrdiv.tumblr.com/) - looping motion design

## Reading

* [A List Apart](https://alistapart.com/)
* [CSS-Tricks](https://css-tricks.com/)
* [Smashing Magazine](https://www.smashingmagazine.com/)
* [Webdesigner Depot](https://www.webdesignerdepot.com/)

See also: [IA + Comms](/platforms/m365-sharepoint/ia-comms/) for intranet structure, [Development](/platforms/m365-sharepoint/development/) for Fluent UI and PnP controls, and [Web development](/practices/building/web-development/) for component libraries.