Closed Bug 863160 Opened 11 years ago Closed 11 years ago

[Style Guide] Visual Design Guidelines for Firefox OS product page

Categories

(www.mozilla.org :: Pages & Content, defect, P2)

Product:
www.mozilla.org
Component:
Pages & Content
Platform:
x86
All
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: padamczyk, Assigned: vicky)

References

Details

(Whiteboard: ptracking)

Attachments

(1 file)

updated screens.zip
136.08 KB, application/x-zip-compressed
Details 
Since this addition contains several pages, I suggest this bug be used as a meta bug. And the sections below be split into chucks in separate bugs.

Here are the proposed sections:
00. Introduction
01. Colors
02. Fonts
03. Headers and Subheaders
04. Backgrounds
05. Lists
06. Buttons
07. Tab bars and Filters
08. Input text
09. Switchers, Check boxes and sliders
10. Keyboard and Keypads
11. Iconography [Completed already]
Victoria, will create the smaller bugs and attach the assets as needed.
Hi Patryk-

Is this additional content for the style guide?  For Mozilla's official partners?

What is your timeline?  Mike Alexis and I will manage the work via the mozilla.org kanban board.

Best,
Jen
Hi Patryk and Victoria,
Just checking in on timing for these assets as we'll need to prioritize this will all the other FFOS work and allocate resources soon. Assuming go live date will coincide with initial FFOS launch?
Flags: needinfo?(padamczyk)
Priority: P3 → P2
Summary: Visual Design Guidelines for Firefox OS product page → [Style Guide] Visual Design Guidelines for Firefox OS product page
Hey Mike, we should be able to drop the first batch next week sometime. Ideally we'd like the pages to go live around the time of the Firefox OS launch, but earlier is also okay.
Flags: needinfo?(padamczyk)
Patryk, just checking in on ETA for assets hand off.
(In reply to Mike Alexis [:malexis] from comment #5)
> Patryk, just checking in on ETA for assets hand off.

Hi Mike, I'm just about to open a bug for the type guideline.  We'll be adding more next week.  Thanks!
Depends on: 870998
Depends on: 872747
Hi Mike, the background style guide is ready :)
https://bugzilla.mozilla.org/show_bug.cgi?id=872747
Depends on: 873482
Hi, I've open a bug for the Buttons guidelines. Thanks!
https://bugzilla.mozilla.org/show_bug.cgi?id=873482
Hi, just checking in on eta for final assets for the style guide. I believe we are still waiting on Button guidelines and others.
Flags: needinfo?(padamczyk)
(In reply to Mike Alexis [:malexis] from comment #9)
> Hi, just checking in on eta for final assets for the style guide. I believe
> we are still waiting on Button guidelines and others.

Hi Mike, we should have the final assets ready next week.  Victoria and I are planning to focus on completing the guidelines by the end of next week as well. Thanks!
Flags: needinfo?(padamczyk)
(In reply to Mike Alexis [:malexis] from comment #9)
> Hi, just checking in on eta for final assets for the style guide. I believe
> we are still waiting on Button guidelines and others.

Hi Mike, just wanted to give you an update. We've made a lot of progress this week with the guidelines.  Our schedules were a little more busy then expected but the majority of the guidelines will be really early next week. Sorry for the delay, thanks!
Depends on: 884424
Header Guideline ready here:
https://bugzilla.mozilla.org/show_bug.cgi?id=884424

More to come soon, Thanks!
No longer depends on: 884424
Depends on: 884424
Hi,

I've opened the following bugs:

Colors - https://bugzilla.mozilla.org/show_bug.cgi?id=885808
Tab bars and Filters - https://bugzilla.mozilla.org/show_bug.cgi?id=885811
Input text - https://bugzilla.mozilla.org/show_bug.cgi?id=885814
Switchers and Check boxes - https://bugzilla.mozilla.org/show_bug.cgi?id=885818

We have the final two more guidelines to come next week.
Introduction
Keyboard and Keypads

Thanks!
Eric
Hi Mike,

Quick question, once any of the guidelines are ready will we be able to review them on stg before publishing?  We're thinking once they are all good to go we can publish them all at once.
Flags: needinfo?(malexis)
Depends on: 889293
(In reply to Eric Pang [:epang] from comment #14)
> Quick question, once any of the guidelines are ready will we be able to
> review them on stg before publishing?  We're thinking once they are all good
> to go we can publish them all at once.

We'll work to get these pages up on the stage site for you to review (hopefully today or tomorrow).
Flags: needinfo?(malexis)
We have these changes ready, but there is a problem keeping us from pushing them to the demo servers. Will update as soon as that is resolved.

In the mean-time, we still need URLs for the links to download the stencil PSD and fonts. Eric, will you be getting those setup on assets.mozillalabs.com?
Hi Steve,
This is the link to the "Firefox OS design Stencil Kit" (and this is the official name now): 
https://mozilla.box.com/s/5ucf52a98q1rd20eu5lm

We will have the last version of the fonts next week, so it worths to wait until then to give you the link.

Thanks!
Victoria
(In reply to Victoria Gerchinhoren from comment #17)
> Hi Steve,
> This is the link to the "Firefox OS design Stencil Kit" (and this is the
> official name now): 
> https://mozilla.box.com/s/5ucf52a98q1rd20eu5lm
> 
> We will have the last version of the fonts next week, so it worths to wait
> until then to give you the link.

Ah, I wasn't sure if we were ok linking directly to the mozilla.box.com addresses, or if that file was there to be moved to the assets.mozillalabs.com repository.
We've got these pages on a demo server for review:

https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/color-palette/

Please review - thanks.

Also, please confirm that the mozilla.box.com address is ok to use in production (see comment #18).
It is OK to link directly to Box.com, it is an official repository.

Thanks!
(In reply to Steven Garrity [:sgarrity] from comment #18)
> (In reply to Victoria Gerchinhoren from comment #17)
> > Hi Steve,
> > This is the link to the "Firefox OS design Stencil Kit" (and this is the
> > official name now): 
> > https://mozilla.box.com/s/5ucf52a98q1rd20eu5lm
> > 
> > We will have the last version of the fonts next week, so it worths to wait
> > until then to give you the link.
> 
> Ah, I wasn't sure if we were ok linking directly to the mozilla.box.com
> addresses, or if that file was there to be moved to the
> assets.mozillalabs.com repository.
I've updated the links to the stencil PSD. Where should these links point?

  <p>You can download the Feura Sans Font TTF file <a href="">here</a>.</p>
  <p>You can also download the text CSS <a href="">here</a>.</p>

From the bottom of this page: https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/typeface/
Hi Steven,
I am providing feedback on the guidelines implementation in each of the sections' corresponding bug. 
Thanks!
General Feedback:
Titles and subtitles have no difference in some cases, they use the same heading and it is confusing. Nevertheless, it is correct in the typeface giude for "Conversion formula", reading the code thwy are using the correct style but something might be overwritting the style.

Unify:
In general use "Don't" instead of "Do not Do"
Swatches square style
Download area, it's different in the previous guidelines use it as it was in the first ones, the icons guidelines.

THanks!

PS: Please, if you require my input, need info me instead of just commenting as I am in copy of hundreds of bugs, so I might miss it. Thanks
All of these changes should be up on the demo3 server for another round of review:

https://www-demo3.allizom.org/en-US/styleguide/
Can we get a final review on the latest version up at https://www-demo3.allizom.org/en-US/styleguide/

We also still need the font and font CSS urls:
https://bugzilla.mozilla.org/show_bug.cgi?id=870998#c12

Thanks.
Flags: needinfo?(vpg)
Flags: needinfo?(epang)
Depends on: 900003
(In reply to Steven Garrity [:sgarrity] from comment #26)
> Can we get a final review on the latest version up at
> https://www-demo3.allizom.org/en-US/styleguide/
> 
> We also still need the font and font CSS urls:
> https://bugzilla.mozilla.org/show_bug.cgi?id=870998#c12
> 
> Thanks.

Hi Steven,
Sorry for the delay on all this, I was off for the last month due to some HR issues.

I've created a new bug for the Introduction for the guideline:
https://bugzilla.mozilla.org/show_bug.cgi?id=900003

Also note, we do not need the Keyboard & Keyboard guidelines anymore.  So once the intro is ready we should have all the guideline pages. I'm going to review the changes Victoria requested, I'll let you know if any other changes need to be made (I'll add them to each individual bug).  Thanks for all you're great work on this!
Flags: needinfo?(epang)
(In reply to Steven Garrity [:sgarrity] from comment #26)
> Can we get a final review on the latest version up at
> https://www-demo3.allizom.org/en-US/styleguide/
> 
> We also still need the font and font CSS urls:
> https://bugzilla.mozilla.org/show_bug.cgi?id=870998#c12
> 
> Thanks.

Hi Steven, 

I've gone through the guidelines and will provide my notes on each of the corresponding bugs.  One thing I noticed is that many of the updates Victoria requested have not been complete.  Have you worked on her requests for all the guidelines or am I looking at an outdated version?  For now I'll add my comments to hers and review again when all the updates have been made. 

Thanks!
Flags: needinfo?(vpg)
Depends on: 900451
(In reply to Eric Pang [:epang] from comment #28)
> I've gone through the guidelines and will provide my notes on each of the
> corresponding bugs.  One thing I noticed is that many of the updates
> Victoria requested have not been complete.  Have you worked on her requests
> for all the guidelines or am I looking at an outdated version?

It looks like something got lost in the mix here - we'll get the updates based on Victoria's original feedback and your latest feedback sorted out. Thanks.
(In reply to Steven Garrity [:sgarrity] from comment #29)
> (In reply to Eric Pang [:epang] from comment #28)
> > I've gone through the guidelines and will provide my notes on each of the
> > corresponding bugs.  One thing I noticed is that many of the updates
> > Victoria requested have not been complete.  Have you worked on her requests
> > for all the guidelines or am I looking at an outdated version?
> 
> It looks like something got lost in the mix here - we'll get the updates
> based on Victoria's original feedback and your latest feedback sorted out.
> Thanks.

sounds good, thanks Steven!
(In reply to Eric Pang [:epang] from comment #30)
> (In reply to Steven Garrity [:sgarrity] from comment #29)
> > (In reply to Eric Pang [:epang] from comment #28)
> > > I've gone through the guidelines and will provide my notes on each of the
> > > corresponding bugs.  One thing I noticed is that many of the updates
> > > Victoria requested have not been complete.  Have you worked on her requests
> > > for all the guidelines or am I looking at an outdated version?
> > 
> > It looks like something got lost in the mix here - we'll get the updates
> > based on Victoria's original feedback and your latest feedback sorted out.
> > Thanks.
> 
> sounds good, thanks Steven!

Hey Steven, do you have an ETA of when you think the updates will be ready?

Thanks!
Flags: needinfo?(vpg)
(In reply to Eric Pang [:epang] from comment #31)
> Hey Steven, do you have an ETA of when you think the updates will be ready?

We should have these up for review on Tuesday. If it's more urgent and needed sooner, let me know and I'll see what we can do.
(In reply to Steven Garrity [:sgarrity] from comment #32)
> (In reply to Eric Pang [:epang] from comment #31)
> > Hey Steven, do you have an ETA of when you think the updates will be ready?
> 
> We should have these up for review on Tuesday. If it's more urgent and
> needed sooner, let me know and I'll see what we can do.

That sounds good seeing as we're still waiting for the final version of the font anyways.  Thanks!
(In reply to Steven Garrity [:sgarrity] from comment #32)
> (In reply to Eric Pang [:epang] from comment #31)
> > Hey Steven, do you have an ETA of when you think the updates will be ready?
> 
> We should have these up for review on Tuesday. If it's more urgent and
> needed sooner, let me know and I'll see what we can do.

Hey Steven, can you give me an updated ETA?  Will the guides + the intro page be ready for review this week?  Let me know, thanks!
(In reply to Eric Pang [:epang] from comment #34)
> Hey Steven, can you give me an updated ETA?  Will the guides + the intro
> page be ready for review this week?  Let me know, thanks!

Eric, yes we'll have everything ready to review by tomorrow at the latest.

In making the updates, we have run into some confusion about why there are requests for "Title Case" capitalization in headlines in some places, and requests for "Sentence case" in others.
(In reply to Steven Garrity [:sgarrity] from comment #35)
> (In reply to Eric Pang [:epang] from comment #34)
> > Hey Steven, can you give me an updated ETA?  Will the guides + the intro
> > page be ready for review this week?  Let me know, thanks!
> 
> Eric, yes we'll have everything ready to review by tomorrow at the latest.
> 
> In making the updates, we have run into some confusion about why there are
> requests for "Title Case" capitalization in headlines in some places, and
> requests for "Sentence case" in others.

ok great, thanks!

For title and sentence case:  

Basically all Titles, headings and subheadings should be Title case.  

Everything else should be Sentence case which is mainly captions.

Let me know if you have anymore questions.

Thanks!
Eric, we've got all the updates ready on https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/

The new intro page isn't at the /firefoxos/ yet - we don't have intro/index pages for the other sections in the styleguide, but your request does make sense. I'll see if we can get it moved to that URL, but you can review the styles/content in the mean-time.

I didn't update all of the other bugs, but all of the dependent bugs with feedback have also been implemented and are ready for review. Thanks for your patience.
Thanks Steven,  I'll try to review this today, but may not have time until Monday.  fyi we're close to having the final font..Hopefully we'll have it soon.
(In reply to Eric Pang [:epang] from comment #36)
> For title and sentence case:  
> Basically all Titles, headings and subheadings should be Title case.  
> 
> Everything else should be Sentence case which is mainly captions.

Ok, thanks - that is helpful. We made some changes to the contrary and will fix them now. One clarification, please. On pages like this one:

https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/lists/

Are items like "Light apps (default)", "List structure", etc. considered subheadings, or captions? Technically, in the HTML source, they are figcaptions, but we're styling them to look like subheadings based on the feedback we've gotten.

I'm assuming those should be Title Case too? Can you confirm? Then, it would mostly be Title Case for anything white and at the top of an image/section, and sentence case for everything else, including captions underneath images.
Hi Steven, yes what you said makes sense (and looks better in my opinion) :).
Thanks!
Hey Steven,

I've just reviewed the changes, they're looking good!

Just a few small changes

1. Introduction
- Update list in the introduction to be in the same order and wording as left tabs:

1. Color Palette
2. Typeface 
3. Headers 
4. Backgrounds 
5. Lists 
6. Buttons 
7. TabBars, ToolBars and Filters 
8. Input Areas 
9. Switchers, Check Boxes and Sliders 
10. Action Icons
11. App Icons

- Add some more space under the example app icons, they are looking a little crowded.


2. Break the paragraph lines as shown in the original design as they enumerate different concepts of the headers:

A Firefox OS header is 5 rem in height and composed of a title and two button areas.
\\
The header colour and styling depends on the type of screen it heads.
\\
There are 2 main types of headers: light and dark. The light headers are used for productivity applications while the dark headers are found on media applications.
\\
Additionally, settings and system (for example, edit mode) have their own header styling as shown below.


3. Add a line break between the following two blocks of text:

Action buttons are placed at the bottom of the screen and may have 2 different sizes, a longer button when 1 button is needed, and a shorter length when 2 buttons are needed.
//
When the button(s) affects the content of the whole screen, it is placed at the botton, divided from the rest of the content pane by a horizontal line and a 5% darker rectangle.


4. Change the text under 'Ticks' to (ON/OFF should be capitalized and bold):
- 'Ticks are mainly used on selection overlays. The ON state is denoted with a check mark, while the OFF state is invisible.


Thanks again for all your work on this!
Eric
Flags: needinfo?(vpg)
(In reply to Eric Pang [:epang] from comment #42)
> Just a few small changes

These should be updated/fixed now: https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/guidelines/
Just wanted to pop in and note that this is looking really great. Awesome work!
(In reply to John Slater from comment #44)
> Just wanted to pop in and note that this is looking really great. Awesome
> work!

Thanks John!
(In reply to Steven Garrity [:sgarrity] from comment #43)
> (In reply to Eric Pang [:epang] from comment #42)
> > Just a few small changes
> 
> These should be updated/fixed now:
> https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/guidelines/

Thanks for making the updates!  Just a couple of notes:

1. Introduction:
- In the list of guidelines change 'Typography' to 'Typeface' to match the side bar.

2. Buttons:
- There seems to be two line breaks between the two chunks of text, can you change it to 1?

"Action buttons are placed at the bottom of the screen and may have 2 different sizes, a longer button when 1 button is needed, and a shorter length when 2 buttons are needed.

When the button(s) affects the content of the whole screen, it is placed at the botton, divided from the rest of the content pane by a horizontal line and a 5% darker rectangle."

Everything else looks great!  I'll ask for an update on the font today.  Hopefully we can go live really soon.

Thanks again!
These latest updates have been made and the demo site updated. Thanks.
Attached file updated screens.zip — 
Hi Steven, Victoria just noticed that the three usage examples we've used on the action icon guide are out of date.  Can you replace them with the three attached? Thanks!

Also, we are still waiting on the font, as soon as it's ready I'll send you the link.  After that we should be good to go live :).
Flags: needinfo?(steven)
Examples on the action icon guide are now updated. Thanks.
Flags: needinfo?(steven)
(In reply to Steven Garrity [:sgarrity] from comment #49)
> Examples on the action icon guide are now updated. Thanks.

Thanks!
Hi Steven,
We're still waiting for the font to be finalized...It's taking longer then expected.  Can we launch all the guidelines and only hold back the type guideline until we have the final font?

Also, have you been able to make the intro page be https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/

Let me know,
Thanks!
Flags: needinfo?(steven)
(In reply to Eric Pang [:epang] from comment #51)
> We're still waiting for the font to be finalized...It's taking longer then
> expected.  Can we launch all the guidelines and only hold back the type
> guideline until we have the final font?

Sure - this page has been hidden for now.

> Also, have you been able to make the intro page be
> https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/

Yes, this change has been made as well.
Flags: needinfo?(steven)
(In reply to Steven Garrity [:sgarrity] from comment #52)
> (In reply to Eric Pang [:epang] from comment #51)
> > We're still waiting for the font to be finalized...It's taking longer then
> > expected.  Can we launch all the guidelines and only hold back the type
> > guideline until we have the final font?
> 
> Sure - this page has been hidden for now.
> 
> > Also, have you been able to make the intro page be
> > https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/
> 
> Yes, this change has been made as well.

great, thanks Steven.
Eric, this is now undergoing a code review. Can you confirm when we have your ok to push into production? (pending successful code review)
Flags: needinfo?(epang)
(In reply to Steven Garrity [:sgarrity] from comment #54)
> Eric, this is now undergoing a code review. Can you confirm when we have
> your ok to push into production? (pending successful code review)

Yes, I confirm we;re good to push to production minus the type guide. Thanks!
Flags: needinfo?(epang)
(In reply to Eric Pang [:epang] from comment #55)
> (In reply to Steven Garrity [:sgarrity] from comment #54)
> > Eric, this is now undergoing a code review. Can you confirm when we have
> > your ok to push into production? (pending successful code review)
> 
> Yes, I confirm we;re good to push to production minus the type guide. Thanks!

Hey Steven, since I haven't seen this go onto production can you hold off?  Patryk would like to preview this before it goes live.  I've tried the stg links but they don't seem to work anymore.  Can you send me the correct stg link?  Thanks!
Flags: needinfo?(vpg)
Flags: needinfo?(vpg) → needinfo?(steven)
Duplicating my own comment from Bug 870998 for clarity:

I've updated the font links and re-enabled the Typeface page. The pages are also back up on our demo server again: https://www-demo3.allizom.org/en-US/styleguide/products/firefoxos/
Flags: needinfo?(steven)
Hey Steven, the last list of feedback is a bit long so I'll end it to you via email.
Flags: needinfo?(steven)
Hi Steven,
I tried to check on the Guidelines yesterday and the link seems broken, did you move it out from the demo server? Can we have it again there?
Thanks!
Victoria
(In reply to Eric Pang [:epang] from comment #58)
> Hey Steven, the last list of feedback is a bit long so I'll end it to you
> via email.

Hey Steven, can you confirm that you've received the list of feedback by email and let me know of an ETA? Thanks!
(In reply to Eric Pang [:epang] from comment #60)
> Hey Steven, can you confirm that you've received the list of feedback by
> email and let me know of an ETA? Thanks!

Eric, got the feedback (it was clear and well organized, thanks). It has all been implemented. As you have noticed, the demo servers are unavailable, and IT is working on getting them back up. I'll email you a temporary URL for another temporary staging server privately in the mean time.
Flags: needinfo?(steven)
(In reply to Steven Garrity [:sgarrity] from comment #61)
> (In reply to Eric Pang [:epang] from comment #60)
> > Hey Steven, can you confirm that you've received the list of feedback by
> > email and let me know of an ETA? Thanks!
> 
> Eric, got the feedback (it was clear and well organized, thanks). It has all
> been implemented. As you have noticed, the demo servers are unavailable, and
> IT is working on getting them back up. I'll email you a temporary URL for
> another temporary staging server privately in the mean time.

ok, thanks Steven!
Commit pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/ffaf6149ece2535a630b7be2e1736d0f137689a4
Add visual design guidelines for Firefox OS
Bugs 870998 872747 8873482 872747 884424 863160
This is now in master and will be pushed into production soon.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
GReat news, thanks Steven!
fixed on stage
Hi Steven, I've seen that the guidelines are now live on production, thanks!  There's a problem with the Type guideline, the left edge under the usage example is being cut off.  Can you take a look at what's causing this?  I've also made a few edits to the Usage section since I noticed the blue lines were pointed to odd areas, I've updated the psd here: https://bugzilla.mozilla.org/show_bug.cgi?id=856837
Let me know when it's fixed and I'll take a look.

Patryk and I are going to do a pass through the guidelines to check for any other bugs. Will let you know if we find anything else. Thanks!
Flags: needinfo?(steven)
Eric, can you file a new bug for these fixes? It'll be easier to track that way. Thanks.
Flags: needinfo?(steven)
Depends on: 930031
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: