to meet you
It's nice to meet you!
AUTOMATTIC MEETUP
DESIGN SYSTEM
IDENTITY | PRINT | DIGITAL
I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.
AUTOMATTIC MEETUP
DESIGN SYSTEM
IDENTITY | PRINT | DIGITAL
I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.
AUTOMATTIC MEETUP
DESIGN SYSTEM
IDENTITY | PRINT | DIGITAL
I’m a paragraph. Double click here or click Edit Text to add some text of your own or to change the font. Tell your visitors a bit about your services.
It's nice to meet you
to meet you
I'm a designer with a passion for brand, marketing & art direction
BRAND SYSTEM | UX/UI DESIGN
AUTOMATTIC DESIGN
Creating a new brand language for Automattic's design division
Role: Designer Creative Director: Pablo Honey
​
​
THE ORIGINAL TASK
UPDATING THE DESIGN BLOG
The Automattic design blog was filled with great content by incredible designers, but unfortunately, from a visual and experiential perspective, didn't reflect the kind of progressive design we espoused in our posts. We needed to rebuild the site from the ground up, so that it reflected the best of our product and design sensibilities.
previous layout
​
​
​
​
​
​
​
​
​
​
THE APPROACH
DECONSTRUCTING AUTOMATTIC
​
Once we started exploring how to create a new theme, we realized we also needed to make adjustments to the visual brand. We didn't want to totally rebrand Automattic. Rather, we wanted to give Automattic Design a unique flavor of it's own that could be used for the site, hiring, and design-focused events.
We explored different approaches, but the breakthrough in our process occurred when we took the original logo and broke apart the elements. This created a new set of visual devices that became the foundation of the language.
AUTOMATTIC LOGO
DECONSTRUCTED ELEMENTS
VISUAL SYSTEM
REBUILDING THE BRAND
With our key elements in place, we were able to start creating new pieces of the visual brand. We updated the shade of blue and introduced a new gradient. The power of open source is foundational to Automattic, so it only made sense to only use open source typefaces. We relied heavily on various weights of Libre Franklin, paired with Libre Baskerville as an accent.
​
COLOR
BLUE: #009FDB
GREEN: #021A23
YELLOW: #FFC300
BRAND GRADIENT
TYPOGRAPHY
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopvqrstuvwxyz
1234567890
LIBRE FRANKLIN - PRIMARY
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopvqrstuvwxyz
1234567890
LIBRE BASKERVILLE - ACCENT
PHOTOGRAPHY TREATMENT
VISUAL SYSTEM
PUTTING IT ALL TOGETHER
Once the colors, typeface, patterns, and photography style was established, we were able to experiment with different ways these elements worked together across print, environmental, and digital design.
CREATING A THEME
A NEW DESIGN SYSTEM
But, of course, we still weren't done! It was time to take all of that visual development and apply it to create a brand new WordPress theme for the blog. We designed this from the ground up, creating the entire design system, including all type styles, buttons, comments, nav, page layouts, and custom blocks.
STYLE SHEET
SEARCH
COMMENTS
FOOTER
