accessible

masks.org

web design & branding

  The summary  

Accessiblemasks.org is an online resource showcasing transparent face coverings in a simple, minimal way.

 The elements 

  • mobile-first website

  • filter vendors (by style, type, & more)

  • accessible design (WCAG 2.1)

  • social media branding & style guide

 

  The brand & accessibility  

 Problem: 

A common thread found with online resources is

  • poor visual design

  • excessively long URL's

  • abundance of information with low hierarchy

  • lack of empathetic communication to the user

 Solution: 

I aimed to modernize online resources while proving that fulfilling WCAG 2.1 compliance for accessibility does not mean the design has to suffer.

Colors are WCAG 2.1 AAA rating for contrast and typeface pairings are easy to read.

  • Montserrat for headers

  • Cormorant Garamond for body text

Royal Blue Bold

(4.89 / 4.5 AAA)

WCAG 2.1 contrast ratio

 Maximum Yellow Red 

 Maximum Yellow Red 

(7.06 / 7 AAA)

WCAG 2.1 contrast ratio

 Turquoise 

 Turquoise 

(7.34 / 7 AAA)

WCAG 2.1 contrast ratio

 

  The unique element  

The key element of accessiblemasks.org is the ability to sort and filter the masks and be directed to the website of the vendor.

Here is simulations of how filtering works on mobile.

 Filtering design style 

Mobile = an "Instagram" look with stacked images

Desktop = a "marketplace" to display as many masks

The tags are shown, listed under each vendor for accessibility, so e-readers can read the categories aloud to the user. Transparency is key (pun intended, too!).  

*Click on the phone to play the 20 second demo clip. (No audio)

 

  The website (desktop)  

© 2020 Jacob C. deHahn 

- always consciously make the world a better place -