UI design resources

Principles

• Laws of UX
• Refactoring UI + book
• Practical Typography - Matthew Butterick’s free book
• The typographic scale
• 12 visual hierarchy principles
• GoodUI - UI patterns, with test results
• Nielsen Norman Group - UX research articles
• Every Layout - CSS layout primitives
• Inclusive Components - accessible component patterns

Microsoft design

• Fluent 2 - Microsoft’s design system
• Fluent UI System Icons
• SharePoint Web UI Kit for Figma
• SharePoint look book - example sites to start from
• SharePoint design guidance

Tools

• Figma or Penpot (open Figma alternative)
• Spline - 3D design in the browser
• Excalidraw - hand-drawn style diagrams
• draw.io - diagrams
• XMind - mind maps
• SVG Viewer - view and edit SVG code
• SVGOMG - shrink SVGs
• Squoosh - compress images in the browser

Colour and type

• Coolors - colour scheme generator
• OKLCH colour picker
• Realtime Colors - try a palette on a real page
• WebAIM contrast checker
• Utopia - fluid type and space scales
• Google Fonts and Fontshare - free fonts

Icons, illustrations and photos

• Lucide and Phosphor - open source icon sets
• unDraw - free illustrations in your colours
• Unsplash and Pexels - free photos
• Freepik - vectors, icons and photos
• Envato Elements and UI8 - paid assets and UI kits

Inspiration

• Dribbble and Behance
• Pttrns - mobile UI patterns
• Design Systems Repo
• Design Resources
• mr div - looping motion design

Reading

• A List Apart
• CSS-Tricks
• Smashing Magazine
• Webdesigner Depot

See also: IA + Comms for intranet structure, Development for Fluent UI and PnP controls, and Web development for component libraries.