Design modular EBI footer variants

[bhushan-ebi]

As discussed in the meeting on 23rd Jan:

• Create design solution(s) for modular variant(s) for EBI footer

• Design mockups

• Explore light background for an accessible way of showing partnership logos

• Document guidance on the solution

[Adedoyinebi]

Ensure that clickable links such as phone number, address are in the right link colour

[catortora]

• Based on the analysis of relevant use cases, I have identified seven key sections to consider for a modular footer: site logo, mission statement, address, social media, list of links, collaborations, and utility links (such as Terms of Use, etc.).
• I explored 11 variations of the modular approach across desktop and mobile, iterating on the inclusion and exclusion of sections
• Based on the analysis of the services under ebi.ac.uk, I identified the elements that these services may potentially need to communicate within a configurable modular footer
• I have worked on the social media icons to align with the latest brand updates and created variants for both light and dark backgrounds
• Following positive team feedback, I iterated on the validated seven-section footer creating 2 variants:
  -- Extra-footer collaboration section: following the AlphaFold footer approach, introduces an extra section with a light grey background. Accessibility has been checked.
  -- Light bg variant: links' have been updated using the Visual Framework’s standard blue link colour, accessibility has been checked

Pending tasks as per today:

• [Research] Select a set of key relevant evidences to contextualise analysis
• [Research] Indicate section in which each relevant element found sits
• [Design] Explore how sections and elements grow in the component

[catortora]

Along with the updated modular mock-ups, I have included documentation describing how the footer is structured, which variants are available, and usage guidance to know when each one is relevant. This doc covers sections layout and configuration based on content and service needs.