- https://mobbin.com/ - Pro subscription
- https://stitch.withgoogle.com/
Foundational UX Design Principles
-
Affordances & Signifiers: Use visual cues (like containers, greyed-out text, and hover states) to intuitively show users how UI elements work without needing instructions.
-
Visual Hierarchy: Emphasise important elements using larger sizes, prominent positioning (like placing them at the top), and colours. Use icons and layout to replace unnecessary text.
-
Grids, Layouts & Spacing: Grids are helpful guidelines, but whitespace is crucial. Group related elements to let them breathe, and use a 4-point grid system (multiples of 4) for consistent spacing throughout.
-
Typography: Usually, you only need one solid sans-serif font. For a professional look on large headers, try tightening the letter spacing (-2% to -3%) and dropping the line height (110% to 120%).
-
Colour Theory: Start with one primary brand colour. Lighten or darken it for backgrounds and text. Use semantic colours deliberately (e.g., red for danger, green for success) rather than just for decoration.
-
Dark Mode: Lower border contrast. Since you can’t use shadows effectively in dark mode, create depth by making cards lighter than the background. Dim the saturation and brightness for coloured chips and text.
-
Shadows: In light mode, keep shadows subtle by reducing opacity and increasing blur. Elements closer to the user (like floating popovers) need stronger shadows than base cards.
-
Icons & Buttons: Size your icons to match the text’s line height (e.g., 24px) for perfect alignment. For standalone buttons, a good rule of thumb is to double the height for the width when setting padding.
-
Feedback & States: Every user action requires a visual response. Define distinct states for buttons (default, hover, active, disabled) and inputs (focus, error, warning).
-
Micro-interactions: Take feedback a step further with small animations (like a confirmation chip sliding up when a user clicks “copy”) to definitively confirm actions.
-
Overlays: Ensure text placed on top of images is readable. Avoid dull, full-screen colour dimming; instead, use smooth linear gradients or progressive blurs for a modern look.