Update BMO to use new Mozilla branding

RESOLVED FIXED

Status

()

bugzilla.mozilla.org
User Interface
RESOLVED FIXED
a year ago
6 months ago

People

(Reporter: alex_mayorga, Assigned: kohei)

Tracking

Production

Details

Attachments

(6 attachments, 5 obsolete attachments)

(Reporter)

Description

a year ago
¡Hola!

This one is inspired by https://bugzilla.mozilla.org/show_bug.cgi?id=1351827

b.m.o still shows the mozilla logo not the moz://a one.

Hope I've picked up the right component.

¡Gracias!
Alex
Hi Alex, 

Have there been updated guidelines for using our new logo on Mozilla web sites? 

We've had internal discussions about updating the logo but will need either guidance, and or support from marketing and graphics.

Now that the font is going live, this may be easier?
Component: Sandstone/Mozilla Skin → User Interface
Flags: needinfo?(alex_mayorga)
Created attachment 8866574 [details]
Current Mozilla.org header for comparison

Note that we switch between moz://a and m contingent on screen width.
Can we just do "bugzilla@moz://a" on the LHS in Zilla Slab, drop the old "file tab" and be done with it?
(Reporter)

Comment 4

a year ago
¡Hola Emma!

It doesn't look like https://www.mozilla.org/en-US/styleguide/identity/mozilla/branding/ is updated yet.

That very page still shows the old "file tab" at the top and the shiny new moz://a logo in the footer =)

I quite like your proposal to "just do "bugzilla@moz://a" on the LHS in Zilla Slab, drop the old "file tab" and be done with it" it would be exactly the kind of simplicity the new branding is aiming for and on the plus side would save everyone 4 KB in each page load for tabzilla.png ;-)

I'll say go for it or if you're willing to be nagged with lots of n00b question please mentor me into the change.

¡Gracias!
Alex
Flags: needinfo?(alex_mayorga) → needinfo?(ehumphries)
I've talked with the branding team and will be working with them on a plan for this.
Flags: needinfo?(ehumphries)
Summary: b.m.o still uses the old mozilla logo → Update BMO to use new Mozilla branding
Created attachment 8878273 [details]
front-page.png
Created attachment 8878274 [details]
front-page.png

wrong one, this one is the one with my notes
Attachment #8878273 - Attachment is obsolete: true
Created attachment 8878275 [details]
bug-updates.png
Okay, attached are three places that I think could use some work. They are:


front-page.png:  https://bugzilla.mozilla.org
bug-updates.png: https://bugzilla.mozilla.org/show_bug.cgi?id=1363889 after making an attachment
searches.png:    https://bugzilla.mozilla.org/buglist.cgi?quicksearch=stuff&list_id=13636354

I have a resource available to make the changes to templates and test, just need some designer input/direction!
Flags: needinfo?(bcohen)
(Assignee)

Comment 11

11 months ago
Created attachment 8879847 [details]
header redesign mockup

The current branding guidelines are here:
https://mozilla.ninja/logosystem

Bugzilla@Mozilla could be designed by following the "Logo above" sample, however it will be 2 lines and won't fit in a narrow header. My idea is using the protocol icon suggested at the bottom of the page.

We can also apply the fixed header idea in Bug Bug 1330451, and reorganize menu items at the same time. See the attached mockup for how it may look.
Comment hidden (obsolete)
Comment hidden (obsolete)

Comment 14

11 months ago
(In reply to Kohei Yoshino [:kohei] from comment #13)
> Created attachment 8879866 [details]
> header redesign mockup v1.2
> 
> Using Material Icons instead of Font Awesome.

Woah that is really nice!
(Assignee)

Comment 15

11 months ago
(In reply to Kohei Yoshino [:kohei] from comment #11)
> The current branding guidelines are here:
> https://mozilla.ninja/logosystem
> 
> Bugzilla@Mozilla could be designed by following the "Logo above" sample,
> however it will be 2 lines and won't fit in a narrow header. My idea is
> using the protocol icon suggested at the bottom of the page.

They have somehow removed the protocol icon example from the Logo System page today, though It still says "For sub brands, teams and special projects, iconic symbols can be used to represent the brand." I think it makes sense to use the [://] icon here to distinguish Bugzilla from other Mozilla sites serving end users.

If people would love the mockup, I'll implement the new header after SF All Hands.
(In reply to Kohei Yoshino [:kohei] from comment #15)
> (In reply to Kohei Yoshino [:kohei] from comment #11)
> > The current branding guidelines are here:
> > https://mozilla.ninja/logosystem
> > 
> > Bugzilla@Mozilla could be designed by following the "Logo above" sample,
> > however it will be 2 lines and won't fit in a narrow header. My idea is
> > using the protocol icon suggested at the bottom of the page.
> 
> They have somehow removed the protocol icon example from the Logo System
> page today, though It still says "For sub brands, teams and special
> projects, iconic symbols can be used to represent the brand." I think it
> makes sense to use the [://] icon here to distinguish Bugzilla from other
> Mozilla sites serving end users.
> 
> If people would love the mockup, I'll implement the new header after SF All
> Hands.

This has my full and overwhelmingly enthusiastic support -- predicated only marketing/branding folks being okay with it.

Updated

11 months ago
Flags: needinfo?(bcohen)
(Assignee)

Comment 17

11 months ago
By the way, did Elasticsearch-based Quick Search (Bug 1184823) have dropdown results like this? https://twitter.com/BzDeck/status/667857793517391872

I thought I tried Elasticsearch somewhere once before but forgot how it worked. If such functionality is not included yet, I'm happy to implement it as part of the redesigned global header to wow people.
Comment hidden (obsolete)
(Assignee)

Comment 19

11 months ago
See also: http://design.firefox.com/photon/

I'll develop more detailed design spec after All Hands, including the menu for signed-out users.
Do we need a "Browse" option? It would be useful to get figures on how much that option is currently used. I never use it. (I may, of course, be exceptional.)

Gerv
(Assignee)

Comment 21

11 months ago
Created attachment 8881814 [details]
header redesign mockup v1.4

I myself sometimes use the Browse page to find an appropriate component when I triage bugs, but yes, we could just put it in the Extra drop down menu because the quick search bar will integrate the component finder :)

Replaced the :// icon with the official M icon as discussed with b-team today. Updated comments.
Attachment #8881138 - Attachment is obsolete: true
(Assignee)

Updated

9 months ago
Duplicate of this bug: 1390649
What is the ETA for this?
See Also: → bug 1386784
(Sorry, I meant to not include that because I was wrong about the link.)
See Also: bug 1386784
(Assignee)

Comment 25

6 months ago
Sorry I'm late here. I think the blurry, obsolete wordmark should be replaced soonish rather than waiting for the complete global navigation overhaul. Nowadays Mozilla sites are having the new moz://a wordmark on the *footer*. I'm not sure if the footer would be retained during the upcoming design refresh, but we could probably follow the best practice for now. Will prepare a pull request.

Some examples:
https://support.mozilla.org/
https://addons.mozilla.org/
https://developer.mozilla.org/
Assignee: nobody → kohei.yoshino
Status: NEW → ASSIGNED
(Assignee)

Comment 26

6 months ago
As a bonus, the Cookies link could be added as seen on other sites, especially because we are reimplementing Google Analytics.
(Assignee)

Comment 27

6 months ago
Created attachment 8931245 [details] [review]
pull request
(Assignee)

Updated

6 months ago
Blocks: 1420292
(Assignee)

Updated

6 months ago
No longer blocks: 1420292
(Assignee)

Updated

6 months ago
Blocks: 1376826
No longer depends on: 1376826
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.