MessagePipes is a secondary email product sold by Pixl8 which delivers sophisticated and personalised email marketing to our clients. Pixl8 wanted to increase MessagePipes’ presence in their product offerings, so I was tasked with designing the marketing site. I was starting from very little- all I had was one defined shade of purple and a logo! I designed a full functional site and simultaneously started to define MesssagePipe’s visual look and consistency.
top-left: MessagePipes homepage / bottom-left: WCAG contrast ratios / right: Messagepipes navigation
Click to see the full wireframes, WCAG contrast ratios and typography
Hover to see what I had to work with!
I opted for a clean layout with a font choice of Avenir as a nod to its general email compatibility. I introduced a secondary warm, light yellow to help soften the contrast (which reduces eye strain) a little while maintaining readability according to WCAG standards. The gradients and custom underlines evoke the speed of emails and I intend to work with the developers to create an css animation.
Working with a modular layout, I designed widgets that can be placed piecemeal in the site to create pages as needed. According to WCAG standards if site text is placed on the yellow, it fails so I’ve designed modules to ensure that this doesn’t happen. I’ve also made sure the site operates with a minimum of 16pt for font size for maximum readability.
The imagery on the site was also considered. Since MessagePipes is such an abstract product and I wanted to avoid cliché imagery of envelopes being opened, I opted for purple and yellow imagery, which is a fairly flexible image requirement as there’s no limit in subject matter, which allows the imagery to flex as needed while still remaining coherent on a limited budget.
