Features

What's important to know

Heirarchy

Structuring elements to represent intended flow of information

⭐️ Sizing can help establish the importance of information

⭐️ Information should start from relevance and influence and descend from there

Written and visual information

The combination of text and icons to communicate

⭐️ Consider whether a visual item can communicate its action without colour and/or text

Colours

How they inform decisions and contrast with each other

⭐️ Always check contrast accessibility, even if it looks good to you

Meta descriptions

Text description of what an image looks like

⭐️ Implement this for when images don't load, or on hover if it does load

Interactions

How elements change when hovered, clicked, or highlighted on

⭐️ A visual change (darker colour, shadow) is one way to show an interaction in motion

Device accessibility

The difference in size and structure of elements between desktop, tablet and mobile