SmugMug Web UI Style Guide

Client: SmugMug | Year: 2016 – 2016 | Role: Designer, Design Director

I am a huge proponent of design systems so I spearheaded the effort to create an official style guide and the beginning to a design system for the SmugMug product UI. SmugMug had an external agency come in and do some research and branding exercises for the marketing team and marking collateral, but nothing existed for the Product UI and for our team to use. This is the result of many months of hard work by myself and a couple others on the product team.

 

Color Palette

 

Our Standard Buttons

 

Accent Buttons and Specs for Devs. Accent Buttons are reserved for the main CTA’s

 

Our Primary Grey button

 

Secondary or ghost buttons

 

Form elements, notable improvements here are the introduction of “dynamic form fields” (sometimes based on location or language) and having labels that slide up to improve usability