Before any modules or pages on the website were designed a comprehensive styleguide was created to ensure consistency across the website and that accessibility requirements were met from the beginning.
Many fonts were tested for readability and accessibility (including common fonts like Verdana and Helvetica) before deciding on the two main website fonts, RT-Raleway and Roboto Slab. When testing fonts, I analysed the design of similar letters and numbers, such as a capital I and lowercase l, or a d and b. Some typefaces have very little differentiation between these letters, making it difficult to discern letters for impaired readers.
The Synapse brand colours were assessed for AA standard accessibility and used accordingly across the website.
The Synapse site also includes a ‘dark mode’ for users to switch to at any time via a toggle in the top navigation. For some users, having the colours inverted can improve readability and reduce tiredness on long form copy on a webpage. This is because there is less ‘brightness’ for a users eyes to process, but with the same amount of contrast between elements.
A custom suite of icons were designed to bring colour into the website.
Each element of navigating the Synapse website has been thoroughly rationalised through research and workshopping. The website features a two-layered top navigation based on hierarchy. There are no drop-down menus incorporated to minimise frustration on defective loading. The top of each page features a consistent back button, breadcrumb navigation and introductory section - this gives the user context of where they are on the site.
Using this design system, modules were created to be responsive across screen sizes and minimise unique development.
Pages were created based on the system and modules, creating a cohesive and easy to use experience across the site.