web design & branding

  The summary 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  


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


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



(7.34 / 7 AAA)

WCAG 2.1 contrast ratio


  The unique element  

The key element of 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)