Closed Bug 605902 Opened 14 years ago Closed 14 years ago

Press Center: Design New Media Library

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: tshahian, Assigned: ltom)

References

(
URL
)

Details

(Whiteboard: [redesign])

Attachments

(7 files)

Sitemap: Press Center Image Gallery
35.32 KB, image/png
Details
Wireframe suggested layout focusing on logos tab
31.55 KB, image/png
Details
Mozilla Media Library 01
1.22 MB, image/jpeg
Details
New layout suggestion
49.32 KB, image/png
Details
Legalese / Guidelines Copy - Draft 1
28.50 KB, application/msword
Details
3 additional common mistake graphics for FF.
153.95 KB, application/zip
Details
minimum space information
85.97 KB, image/png
Details 
The image center needs to be updated with the new design.  The content will also be updated, but I'm still working on figuring out what needs to change.  Lets hold off on designing this page until I do that and will get back to you asap.

    
  
Whiteboard: [redesign]
OS: Mac OS X → All
Hardware: x86 → All

    
    

    
  
Hey Tara, 
Just wanted to check back in with you regarding this Bug. Has this page and the Logo Guide been consolidated into one project? Let me know when/how you'd like me to proceed. Thanks, Lee

    
    

    
  
Hi Lee, thanks for checking in.  This page and the logo guide hasn't been consolidated into one page (yet).  I'm still working on reorganizing the content here, but should have some solid direction for you by tomorrow, if not sooner.  Stay tuned !

    
    

    
  
Hi Lee.  I'm here with some direction :)  I'm attaching a quickly sketched wireframe for reference.  As I mentioned yesterday, this is simply a suggested layout ...or, more so how I'm organizing the content in my head.  But I realize that we'll need to move things around in order to fit the new design template.  So, with that in mind, here's what I'm proposing:

* Change the name of section to "media library" vs. "image library". b/c we have more than just images here.

* Break the content into 4 key categories, or tabs across the top:  Logos, Screenshots (product screenshots), headshots, and videos.  For each section, we'll then clear the space on the page and present the relevant content below the tabs.  

* With each section we'll also have a short blurb explaining what that section is about.

* Under the "logos" tab:
** We'll have a general guidelines paragraph that breaks down guidelines applying to all logos/trademarks.  This can be pulled from the existing "legal" tab of the Firefox Style guide: http://www.mozilla.com/en-US/about/logo/legal.html  We'll have to edit that down, but it can serve as a placeholder for now.  
** Then we'll break out the different logos for:  Firefox, mozilla, thunderbird, and mozilla labs.  
** Each logo section will have the thumbnails, and we'll include little links underneath each logo for download (as we currently do)
** To the side of each section (or perhaps below it) we'll include links to additional guidelines as needed.  For example, Firefox has around 3 links from the Style guide that are relevant here:  
1.) The logo lockup 101 http://www.mozilla.com/en-US/about/logo/use.html, 
2.) Common mistakes http://www.mozilla.com/en-US/about/logo/stop.html, and 
3.) Elements of style http://www.mozilla.com/en-US/about/logo/style.html

though, some of the content under "elements of style" are more appropriate for a broader brand resources page, since it includes color guidelines and typography elements.  But for now, lets keep it as is and I'll work on organizing that better later.
** For Mozilla, and Thunderbird.. we have separate guidelines on mozilla.org.  These need to be updated eventually, especially since the mozilla visual guidelines are for the mozilla foundation.  But that won't really change the layout of the page we're designing here.
** For Mozilla, I'd like to include at least one more logo.  Right now we just have one, in black.  I'd like to include at least one more in white.

* Under the "screenshots" tab: We'll have a similar layout but we'll get rid of "Fashion your Firefox".

* Under the "headshots" tab: We'll just have a grid of thumbnails with all the headshots and relevant info beneath them:  name, link to download, and link to biography.

* Under the "videos" tab:  We'll just have a grid of thumbnails for the various B-roll we have.  

Let me know if you have any questions or would like to discuss further over the phone.  I've shared this direction with Shannon and she's on board with it.  Slater, what do you think? any additional thoughts or feedback would be appreciated.

    
    

    
  
wowzers! thanks guys

    
    

    
  
A quick word of caution on the wireframe:

A tab metaphor may be problematic on such a long page page. If you are scrolled well down the page, you no longer have access to the tabs, making them lose their main advantage (quick switching without a page load).

We'll also probably get a major change in scrollbar size during tab transitions. Not terrible, but also not ideal.

Tabs are usually best suited to content that is more likely to be similar in size, and more likely to fit (mostly) in the viewport.

    
    

    
  
Makes sense.  Thanks Steven.  For what it's worth, I was trying to follow Facebook's model for a similar page ( http://www.facebook.com/help/#!/brandpermissions/ )  though our page content, especially the logos page, is much more robust than theirs.  I just felt that since there is so much content, it would be easier to bucket them into tabs and organize it this way.  Have those tabs at the top for easy navigation... but as you scroll down, you do lose the tab view.  Not sure what the best way of approaching this would be.  Maybe we can take inspiration from the features page? and do something similar... but that's also a very very long scrolly page with lots of content on anchor links.  http://nova.stage.mozilla.com/en-US/firefox/features/ I'm open to suggestions as long as it's all organized well and easy to digest for people.

    
    

    
  
Agreed with Steven that tabs probably aren't best for a scrolly page like this. Something like the features page would probably work better with this content.

    
    

    
  
Tara, that facebook example link does help illustrate the idea better in practice. I see that they are actually linking to five separate pages - I had been thinking of a JS-powered in-page switching tab setup, like the links under "What Makes Firefox the Best?" on this page: http://www.mozilla.com/en-US/firefox/upgrade#

The one-page-per-tab setup that facebook uses is probably fine for this and alleviates my main concerns.

    
    

    
  
Great to hear that :)  I'm a fan of the tabbed approach and think that it's the cleanest/best way of organizing the buckets of content we have for this page.  So, glad the fb reference helped alleviate your concerns.

    
    

    
  


  
Attached is the first mockup for the Media Library. 
You'll notice the 4 main tabs beneath the page title and subhead. Mozilla Logos are FPO, and imagine more content stacked below the Mozilla Logos section.

    
    

    
  
Thanks Lee, some quick initial thoughts from me:

* Can we not put "Logos" in big bold letters?  Something about seeing "LOGOS" at every section kinda bothers me.  I rather highlight each section with just the name..."Firefox", "mozilla", etc.  

* There should be a section for "General Guidelines".  that's the second paragraph towards the top and that should be called out separately as its own section, with more text underneath it.  The General guidelines will likely be a solid paragraph vs. a few lines of text.  Similar to the content on the "legal stuff" section of the style guide.

* For the mozilla logos, we're not using the foundation logos her.... just the "mozilla" wordmark.  I only want to have it in black, and a version of the same wordmark in white, please.

* lets also include Thunderbird, and Labs in the logos section as well.

Thanks.  Shannon, Slater... any initial thoughts?  I'll take another look soon.

~T

    
    

    
  
Just saw that you noted the mozilla logos as FPO and for us to use our imagination for the rest of the page content :)  

I really like the tabbed approach.. but can we display them in such a way that the text on the tabs stand out a bit more?  Right now it's blue on blue... and it's the same blue we're using for links.  Can we try something else please?

I would also nix the "mozilla" in the header.  I think it's find just as "media library".  

otherwise the general layout and everything is looking great.

    
    

    
  
Overall, looking good. I'll defer to Tara on this one, but have a couple of extra comments:

(In reply to comment #13)
> * Can we not put "Logos" in big bold letters?  Something about seeing "LOGOS"
> at every section kinda bothers me.  I rather highlight each section with just
> the name..."Firefox", "mozilla", etc.  

Or you could write "Firefox Logos" in italics. I agree that the BOLD CAPS are a bit much, but it's helpful to say what it is.

> * lets also include Thunderbird, and Labs in the logos section as well

Is this a request from PR? If so, we should discuss...given that this is the Firefox site I don't think that content is really relevant. In fact, I'm not sure that the Mozilla logo is relevant here. It might be, but ideally we'd have a central logo page on mozilla.org that would link out to pages like this for the specific logo.

    
    

    
  
Thanks for the feedback. Here's another mockup to look at:
http://intothefuzz.com/leetom/Mozilla.com/JPG/presscenter_medialibrary_02.jpg

- Took "Mozilla" out of the page title
- New tabs/subnav style (this is the same stylings we're using on our Customize page http://nova.stage.mozilla.com/en-US/firefox/customize/
- Added block of text for "General Guidelines" section
- Removed additional logo sections (Mozilla Foundation) beneath Firefox Logos. If we do decide to add more than the FF logos, it would be preferable to have a list of which logos you would like to include/omit etc.

Thanks! Lee

    
    

    
  
(In reply to comment #15)

Thanks John.  I agree that it's helpful to say what it is and that we should
have "logos" included in the text, it was mainly the bold caps that were
bothering me. 

The Thunderbird and Labs section were not required by PR, but a nice to have
given that it's part of the current press center and this is a resource for all
mozilla related press needs.... not just Firefox.  I'm not sure how often
people look for TB or Labs logos to be honest, that information might be good
to have to see how important it is for us to keep these.  Agreed that ideally
we'd have a separate, more centralized, logo center on moz.org... but I figured
since we don't have that yet, we might as well keep the content here for now. 
I also think that regardless of TB and Labs, we should keep the mozilla logos
here... they're still relevant in my opinion even though this is purely a
Firefox hub.

    
    

    
  
I'm fine with the Mozilla logos then, but we should definitely keep Labs & Thunderbird separate. It would be confusing to have them here, given that this will be a Firefox site.

    
    

    
  
Thanks Lee.  Let me figure out how to handle the TB and Labs logos.  I know Shannon wanted to include them.. but since this is purely a Firefox hub, we may need to move them over to mozilla.org somewhere.  I'll have to coordinate that with boswell and just think about how it would work.  So, for now please add the following underneath the Firefox logos:

* Mozilla logos (just mozilla wordmark in black and white, not the "mozilla
foundation marks with the dino head).


I'd also like to add more lines of text to the "general guidelines" section. 
As I mentioned before this'll be a more meaty paragraph, pulled from the "legal
stuff" section of the Firefox style guide.
http://www.mozilla.com/en-US/about/logo/legal.html  I'll have to work on
editing that down, perhaps with Legal's help.  But I'd like to "lorem ipsum"
more space for this section.  Depending on how long it becomes, we may need to
collapse it under a drop-down arrow.

I also wanted to suggest we change the name of the section to "media resources".  I'm not sure if it makes sense to have "library" in big bold letters.  It doesn't communicate as much value as a word like "resources" in the same treatment. Though, technically the entire press center is a media resource.  Slater/Shannon, any thoughts ?

    
    

    
  
How about we just write "media library" in bold caps? vs. italicizing the "media"

    
    

    
  
I'm leaning towards trying:

Media
RESOURCES

or going back to

Mozilla
MEDIA LIBRARY

- the reason is that this italicized over call caps style, has been carried through every other page of the redesign (besides the homepages).

have a look at the jpgs of the other pages in the Press Center. Many of them have "Mozilla" above the all-capped page titles:
http://intothefuzz.com/leetom/Mozilla.com/JPG/

    
    

    
  
Then lets go with "mozilla MEDIA LIBRARY".  I guess it's a little contradictory since we're saying this is purely a Firefox focused resource page... but we're calling it a "mozilla" media library and press center.  But, that works for now.  Thanks Lee.

    
    

    
  
Hi Tara,
http://intothefuzz.com/leetom/Mozilla.com/JPG/presscenter_medialibrary_02.jpg

- "mozilla MEDIA LIBRARY" header
- more body copy for the About and General Guidelines sections (FPO). As you said, we may need to figure out a solution depending on how long that section gets
- Added Mozilla Logos section back in. Only included black and white wordmarks

    
    

    
  
Thanks Lee.  Sorry for the slow response.  That looks great.  I'm in the process of trying to edit down the "legal" section of the Style Guide, to include it here in a more digestible format.  I have a bug open wth legal for their help as well, so, stay tuned for that.

I'm also thinking that the layout might work best if we allow the logos to be displayed across the page, vs. making the column so horizontal.  So, I'm suggesting we get rid of the "additional" column and allow the logos to spread out a bit more, and include the "additional" somewhere else,  Perhaps right below it, or above it.  What do you think?  I just feels a little crammed right now and since we don't have much content for the "additional" column, it makes more sense to squeaze that elsewhere and allow the other content to breathe.

    
    

    
  
Letting the logo content breathe sounds like a good idea, Tara. Depending on the amount of "additional" content, we can figure out a better place for it than in that narrow column - maybe putting it in the right column since the Resources links are higher up on the page? Clicking to a new tab/page, could refresh the additional content relevant to the media the user is looking at.

    
    

    
  
Thanks Lee.  I'm getting together with Liz and hope to have the legal part knocked out by Wednesday.  Wrt to the "additional" content, we actually don't have much, to be honest.  It's maybe a short sentence, otherwise just a link to the style guide.  Eventually I might break up this page more and consolidate the style guide content with this for a cleaner presentation, but for now, I just want to link off and I think we can put that underneath the "Firefox Logos" label.  Same with the Mozilla one.  Let me know if you disagree.

I'm working with Boswell to move the TB and Labs content to mozilla.org, so we'll be linking to those as well, somewhere (perhaps towards the bottom) on the page.  Might be worth waiting a bit until we figure out how much text we need for the legalese, and we can then find the best layout solution for everything else.

    
    

    
  
Hi there.  I'm back with some new suggestions for how we lay out the page.  The trademark summary that Liz provided was much longer than what I was hoping for, so I'm trying to cut that down.  In the meantime, I think it's fair to say that we can reserve a chunk of space for the text, and work on the rest of the page.  I also want to consolidate and fold some of the Firefox Style guide into this page.  Here is what I'm thinking:

* At the top, we have a short blurb about using the logos and general guidelines in bullet format below it.

* With each Logo section, we have 3 additional links:
1.) for downloading the logos, which will show by default in thumbnail format
2.) for visual guidelines and common mistakes
3.) for additional written guidelines per logo as needed.

* I thought that these would behave like the "fancy" real tabs that we have on the customization page... so that you can click on these links and have the contents of that section change.  That way you can scroll through the different pieces without being directed to another page.

* We'd do the same thing for the Mozilla logos section.

What does this mean for the Firefox Style guide?  Well, we're folding some of that content into this section already, and can archive the rest for now.  Specifically, this is what would happen:

* Firefox Style guide homepage - archive
* Logo Use 101 - archive, might move a piece of this to the "additional guidelines" section.  
* Elements of Style - archive.  We'll bring this back once we have a more robust brand resources center
* Legal Stuff - folded into this page
* Download - folded into this page


Thoughts?  I have mockups attached for reference.
Lee / Slater / Steven... let me know what you think.  I'm happy to chat further about any of this.

    
    

    
  

      
      
      
      

        Attached image
          
        New layout suggestion
        — 
      

    


  

    
    

    
  


  
Attached is a much shorter version of the text for the top... I'm still tweaking this and have to run it by legal, but we can use it as FPO.

    
  
Summary: Press Center:  Design New Image Center → Press Center:  Design New Media Library

    
    

    
  
I just realized that I forgot "logo cruelty" in comment #27.  That is being folded into this page as well, under the Firefox Logos section - and that's what you're seeing in the mockup attached.

    
    

    
  
Hi Tara,
Here's a new mock up based on your latest wireframes:

http://www.intothefuzz.com/leetom/Mozilla.com/JPG/presscenter_medialibrary_03.jpg

The Logo Cruelty section currently has around 20 examples sectioned into 3 categories: Color, Construction and Context. 
http://www.mozilla.com/en-US/about/logo/stop.html
Are we planning to use a similar toggle method as the live site, or do you want to surface them all simultaneously as in your wireframes?

Also did you want me to mock up every state of each section: ie: Logos, Screenshots, Headshots, and video?

    
    

    
  
Thanks Lee!  This looks great.  Although, the "logo cruelty" and "common mistakes" are the same thing :) lets nix "logo cruelty", please.

For the common mistakes section, I don't want to make it too complex.  Instead of surfacing ALL of those examples, and organizing them into categories, I think I'd just surface a representative batch of them and that's it - similar to my wireframe.  I'm happy to supply those logos.

I think we have the content ready to go for the screenshots, headshots, and video.  So if you could please mock those up, that would be great.  For each of these, please leave a few lines of text FPO for a short intro blurb into the section.  I'm coming by to chat..!

    
    

    
  
Hi Lee, so... here is some more content:

* The logo common mistakes for Firefox was just sent in a separate email.
* The visual guidelines for mozilla currently points to this page:  http://www.mozilla.org/foundation/identity-guidelines/mozilla-foundation.html, but that is no longer relevant.  So, we'll have to work together to re-create a few representative samples of common mistakes.  Should be quick and easy.  I'll follow up with you directly on this one.

* For the Screenshots section, we'll need to break it out between Firefox desktop, and Firefox mobile.  The screenshots are all here (scroll down): http://www.mozilla.com/en-US/press/images.html 

* The videos can also be found on the same page when you scroll down.  

* The Headshots can all be found in the bug for the spokesperson bios:  https://bugzilla.mozilla.org/show_bug.cgi?id=608372  We need to have a thumbnail grid of their headshot, their name, their title, a link to download the high res, a link to download the low res, and a link to their bio.

    
    

    
  
Thanks Lee.  These *rock*.  Here are some quick edits:

* Please see attached for updated copy for the intro blurb.
* Shannon will follow up with short intros for the other section.
* I have some more feedback per section below:

Additional Guidelines tab:
* For Firefox, please include the information around "minimum clear space".  I have that information attached.   You can also find it, here: http://www.mozilla.com/en-US/about/logo/style.html
* For Mozilla, If you can construct a similar image to show the minimum space requirements, that would be great.


Common Mistakes tab:

* For Firefox, it seems like we have some open space to add two more images.  Could you add two of the three I've attached please?

* For Mozilla:
-- would you mind putting an "X" across all the images?  as we have done for the FF common mistakes.
-- Could you please take the black border off the patterned one?  
-- Could you put one in a very different font? the one in the bottom right is a different font, but not as obvious.

    
    

    
  


  

    
    

    
  
Hi Tara,
Updated Logo Common Mistakes mockup here:
http://intothefuzz.com/leetom/Mozilla.com/JPG/presscenter_medialibrary_03_logomistakes.jpg


and here's a mockup for Additional Guidelines:
http://intothefuzz.com/leetom/Mozilla.com/JPG/presscenter_medialibrary_03_guidelines.jpg

I'm not sure if you sent the copy via email (comment 35, bullet 1) but it's easy enough to flow in. I can do both when I get the new intro blurb from Shannon.

    
    

    
  
Looks great.  Lets move forward on adding the other links and copy updates per our IM discussion.  Looking to wrap this up by tomorrow.  Thanks!

    
  
Blocks: 615715

    
    

    
  
Looks great Lee.  Thanks. A few minor copy tweaks (as discussed) and we're all set.

    
    

    
  
Hi Lee.  Here's the copy for the other sections:

Screenshots:
Below are Mozilla product screenshots that you may use for print, Web and broadcast.  Please note that screenshots and related product images must be unaltered, they cannot be annotated or modified in any way. Please refer to our usage guidelines for more details. 

Headshots:
Please click on the image for downloadable, high-resolution headshots of Mozilla spokespeople. Make sure to check out the biographies section [link] for more background information on each person. 

Videos:
Mozilla is pleased to provide b-roll footage and other video assets for media use. If you are unable to download the b-roll for any reason please contact press@mozilla.com. 

And please adjust the paragraph styling of the first tab, as discussed yesterday.  We should be all set.  Any other copy edits are minor and can be fixed later.. I want to get this over to build asap.  Thanks!

    
    

    
  
THANK YOU !!!  closing and jumping over to the build bug.
Status: NEW → RESOLVED
Closed: 14 years ago
Resolution: --- → FIXED

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: