UX Notes

User Experience Notes

UX/UI design notes for the development team.

Pages

• Home
• Research
• Media
• Resources

Features

Website Responsiveness

• This website must be responsive to all different breakpoints and respond appropriately as users resize browser windows.
• Five different breakpoints have been mocked up in the Figma design file.
• Use GitHub's Primer Breakpoints for responsive layouts.

Open in New Tab Behavior

Any external website needs to open in a new tab:

• Open in new tab buttons on the home page need to link to the respective site visualization URL
• Logos linked to websites on the home page
• All links on the research and media pages
• The award number URL in the footer

Download Resource Files

• Clicking any of the download buttons on the resources page will download the PDF file.

Hover states

• In-text links underline on hover
• Navigation bar and buttons both have hover states
• Navigation bar also has a selected state to indicate where the user is within the website