1335087 - Brand refresh for Frontierline blog theme

Status: RESOLVED FIXED

(Websites Graveyard :: blog.mozilla.org, defect)

Description

[Craig Cook (:craigcook)]

Tracking updates to our new blog theme, including:

* Add the new "protocol" wordmark in the header.
* Change fallback image treatment to reflect new brand styles.
* Add configuration options for accent colors.

The new fallback images and color options will allow us to apply this theme to more blogs.

Comment 1

[Michael Ham]

Work in progress Sketch file:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMc3RuRElvQWJoSkE/view?usp=sharing

Comment 2

[Michael Ham]

Attachment: mozilla_blog-nav_icon_fist-pump-fox.svg

Fist pump fox icon for "discover firefox" link in blog nav.

Comment 3

[Michael Ham]

Attachment: mozilla_blog-nav_icon_heart-donate.svg

Heart donate icon for "donate" link in blog nav.

Comment 4

[Michael Ham]

Attachment: mozilla_image_glitch-header.jpg

Glitch header for the Mozilla Blog -  https://blog.mozilla.org/

This header gets an 30 degree angle overlay - hex# FA8CFF at 50% – on the right side of the image as per the Sketch file:
https://drive.google.com/a/mozilla.com/file/d/0Bw8GuIJD9hBMc3RuRElvQWJoSkE/view?usp=sharing

Comment 5

[Craig Cook (:craigcook)]

I've got the theme staged at https://testmozilla.wpengine.com/newmozblog/

A few final design details to finish up:

* Final pattern overlays for the header.
* Final pattern overlays for the fallback images.
* Newsletter form.

Comment 6

[Michael Ham]

Attachment: mozilla_frontierline_blog-header-backgrounds.zip

Header background images for the following blogs.

Open Design, Internet Citizen, Open Policy & Advocacy

Comment 7

[Michael Ham]

Attachment: Moz_Frontierline_Mozilla_Protocol-Patterns.zip

Series of six SVG patterns for blog header overlays.

Comment 8

[Craig Cook (:craigcook)]

This is complete and applied to several blogs:

The main Mozilla blog, https://blog.mozilla.org
Internet Citizen, https://blog.mozilla.org/internetcitizen/
Open Policy & Advocacy, https://blog.mozilla.org/netpolicy/
Open Design, https://blog.mozilla.org/opendesign/
Mozilla Research, https://blog.mozilla.org/research/