Closed Bug 858627 Opened 12 years ago Closed 12 years ago

Design Updates for the FX Marketplace

Categories

(Marketplace Graveyard :: Consumer Pages, defect, P1)

Product:
Marketplace Graveyard
Component:
Consumer Pages
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED
Milestone:
2013-05-02

People

(Reporter: mmaslaney, Assigned: mmaslaney)

References

Details

(Whiteboard: [fireplace])

Attachments

(16 files)

Home Screen
293.96 KB, image/png
Details
Build Assets
284.51 KB, application/zip
Details
Feura Sans v1 Drop
1.04 MB, application/zip
Details
Settings Gear 24x24
1.74 KB, image/svg+xml
Details
Settings Gear 24x24 – OnTouch, Active
1.74 KB, image/svg+xml
Details
Desktop Settings Gear 30x30
1.73 KB, image/svg+xml
Details
Desktop Settings Gear 30x30 – OnHover, Active
1.75 KB, image/svg+xml
Details
Blue Icons
26.19 KB, image/svg+xml
Details
Gray Icons
26.17 KB, image/svg+xml
Details
White Icons
26.23 KB, image/svg+xml
Details
Tab Gradients
1006 bytes, image/svg+xml
Details
Desktop Feedback Overlay
91.09 KB, image/png
Details
Rating Submission
44.56 KB, image/png
Details
Rating Submission
110.83 KB, image/png
Details
Desktop Logo
11.40 KB, image/png
Details
Desktop Logo 2x
24.89 KB, image/png
Details
Attached image Home Screen —
The April 5th drop contains the following design updates: Home Screens, App Details screens Category screens Category dropdown Search lists Featured list Location of the Mockup (Zipped Sketch File): https://www.dropbox.com/s/f2mrrkohn1gmee9/Marketplace_Explore_June_v4.zip Location of PNGs: https://www.dropbox.com/s/zkyf1pja8fh0kb7/FX_Marketplace_Screens_June.zip
I should note that there are no API changes necessary for this bug.
-> nobody. If we need to break this bug up, I can help
Assignee: clouserw → nobody
Blocks: 859531
Priority: -- → P1
cvan's gonna get mad that I'm jumping in here, but can we get SVGs for any of those assets? E.g.: the dropdown arrow would be much better as an SVG than as a PNG (both in terms of size and retinability).
Flags: needinfo?(mmaslaney)
Sure thing. Going forward, should I deliver in the SVG format instead PNG?
Flags: needinfo?(mmaslaney)
(In reply to Michael Maslaney from comment #5) > Sure thing. Going forward, should I deliver in the SVG format instead PNG? It really depends on the asset. The dropdown arrow is a great example because it's super simple: there's no gradients and the curves are simple enough that the SVG could probably be written by hand. OTOH, the Marketplace logo would be much better as a PNG, since the orange bag is gradiented in more ways than I can count. I'd say the rule of thumb is that if the individual asset is monocolor/flat, it's probably best as an SVG. Another notable note on SVG is that we can swap out the color of the SVG on the fly. That means that if the image has a hover state which is a different color, we don't need to have a separate SVG for that (we can just change the fill color with CSS).
(In reply to Michael Maslaney from comment #0) > Created attachment 733914 [details] > Home Screen > > The April 5th drop contains the following design updates: > > Home Screens, > App Details screens > Category screens > Category dropdown > Search lists > Featured list > > Location of the Mockup (Zipped Sketch File): > > https://www.dropbox.com/s/f2mrrkohn1gmee9/Marketplace_Explore_June_v4.zip > > Location of PNGs: > > https://www.dropbox.com/s/zkyf1pja8fh0kb7/FX_Marketplace_Screens_June.zip It sounds like the zip with PNGs has more pages than the zip with sketch files in it (settings, etc.). Do you have the sketch files?
Wil, Maureen and I have a couple of tweaks to make before we deliver the settings page. This item will be delivered by the end of the week.
It should be noted that the redesigned settings page is going to require some rewrite and refactoring because it combines multiple views together into one. Not a huge issue, but we should be focusing on the purely cosmetic changes first. So don't feel rushed, we've got time before that page rolls around.
Basta, I believe we are going to stick with the tabs for the time being. It's likely to just be cosmetic changes.
Just as well!
(In reply to Michael Maslaney from comment #10) > Wil, Maureen and I have a couple of tweaks to make before we deliver the > settings page. This item will be delivered by the end of the week. Many of these also seem to have a/b options. What's going on there?
Updated screen shot list: https://www.dropbox.com/s/zkyf1pja8fh0kb7/FX_Marketplace_Screens_June.zip The previous folder had visual explorations and future iterations included.
Thanks
Attached file Feura Sans v1 Drop —
Version 1 of Feura Sans (attached) has finally been released. MozTT and Feura are practically identical, so there should be no major change (visually) to the mocks. Please find the updated mocks (replaced MozTT with Feura) below: https://www.dropbox.com/s/9cniqclcr4uu9lh/Marketplace_Explore_June_v5.zip
Michael, can I please get vectors of the following: Desktop_Settings_Gear.svg Desktop_Settings_Gear_Active_Onclick.svg Settings_Gear.svg Settings_Gear_Active.svg If you look at the source for those four (and the logo/wordmark ones too, which I've already exported as PNG), you'll notice these `.svg` files are actually bitmap images as data URIs with `data:image/png`.
APRIL 22nd DROP Updates: • Settings for Mobile • Settings for Desktop • Settings Interaction – Drop Down Menu • Search Related Terms • Feura San Replacements Link: Mocks https://www.dropbox.com/s/ile6gi7h9gsf3kk/Marketplace_Explore_June_v6.zip Screens https://www.dropbox.com/s/gupfskdzn2x6f2a/FX_Marketplace_Screens_June.zip Chris, I will get you the gear SVGs, today.
Can we close this bug now?
Can we design the OnClick to be 15% darker?
Blocks: 864373
(In reply to Michael Maslaney from comment #20) > APRIL 22nd DROP > > Updates: > > • Settings for Mobile > • Settings for Desktop > • Settings Interaction – Drop Down Menu I filed bug 864373 > • Search Related Terms > • Feura San Replacements What do these mean and which mockups are these specifically? I looked through the screenshots zip and there are 33 pngs - it appears to include designs for already delivered pages? Would you reattach and only include the new pages? Thanks.
No longer blocks: 864373
Blocks: 864373
Search Related Term: Skinning the related terms drowdown Feura Sans Replacement: Replaced a couple items that were still using Moz with Feura. All mocks are inside one Sketch file, the PNGs are more for reference.
(In reply to Michael Maslaney from comment #27) > Feura Sans Replacement: Replaced a couple items that were still using Moz > with Feura. I still don't know what this means. What pages did this affect specifically?
(In reply to Wil Clouser [:clouserw] from comment #28) > (In reply to Michael Maslaney from comment #27) > > > Feura Sans Replacement: Replaced a couple items that were still using Moz > > with Feura. > > I still don't know what this means. What pages did this affect specifically? I've already replaced everything in the CSS to use Feura Sans - not an issue.
(In reply to Michael Maslaney from comment #7) > SVG Format: > > https://www.dropbox.com/sh/h1zkwozm0djd3co/mzyvzODOpG/Projects/Apps/ > Marketplace/Explore_Mode/Assets/Development/FX_Marketplace_Build_Assets_svg. > zip This link appears to be broken - could you re-post it? I'm specifically looking for the category icon svgs. Thanks!
I'll remind you when you get in, but could you slice this SVG into two sections please? https://github.com/mozilla/fireplace/blob/master/hearth/media/img/pretty/tab.svg Like so: http://f.cl.ly/items/341T1B1T382Z1h2t023U/Screen%20Shot%202013-04-25%20at%209.51.55%20AM.png (which I can then flip horizontally for the right side) http://f.cl.ly/items/2t0u291G460m3S3D411v/Screen%20Shot%202013-04-25%20at%209.52.15%20AM.png This will enable us to stretch the tab dynamically to fit localized names, such as this translation of "Popularity" to Pig Latin: http://f.cl.ly/items/3R2f3W16340V0A0m2B0N/Screen%20Shot%202013-04-25%20at%209.53.51%20AM.png
Attached image Tab Gradients —
As requested...
VERSION 7 DROP Updates to the operator shelf to include: • Reversing the order of "All Categories" and "Operator Shelf" within the Category Drop-down (All Categories should appear first). • Removing the "Popular" and "New" tabs from the Operator Shelf list view. Mock Link: https://www.dropbox.com/s/nls88r6yrjjdhky/Marketplace_Explore_June_v7.zip Reference Screens: https://www.dropbox.com/s/a03ozkxz2w1xafe/Operator_Shelf.zip
Whiteboard: [fireplace]
No longer blocks: 864373
VERSION 8 DROP Updates to the Desktop Feedback section: • Feedback on desktop is now an overlay Mock Link: https://www.dropbox.com/s/bc70t5q73zv1vnj/Marketplace_Explore_June_v8.zip
Michael: Would it be possible to have the new icon for mapping/navigation as svg when you have a spare moment? Also, would it be possible to consider making the category icons a consistent width? This would make it a lot easier to align the icons correctly with the text. As per https://github.com/mozilla/fireplace/pull/85#issuecomment-17213647
Also the v8 mock link is broken currently.
Attached image Rating Submission —
VERSION 9 DROP Updates: • New Rating Submission pages for Mobile and Desktop Mock: https://www.dropbox.com/s/amx6dx0pbz2xqa4/Marketplace_Explore_June_v9.zip
Cvan: I will get these assets to you, asap. Stuart: Please use the version 9 link above. As far as icons are concerned, resizing each icon to the same width would be a major project. The majority of icons would have to be completely reworked, which would take a significant amount of time. The plan for "down the road" is to redesign the set to share a similar style and size. As for now, I can provide you the new icons you have requested.
Not to bombard you, but so everything's in one place - can we get that polished version of the logo with the good drop-shadow on the basket? (Bug 867279 comment 0)
Absolutely, working on it as we speak.
Assignee: nobody → mmaslaney
VERSION 10 DROP Updates: • New Review List page (Mobile + Desktop) • New Report Spam page (Mobile + Desktop) • New Report Abuse page (Mobile + Desktop) • New Privacy Policy page (Mobile + Desktop) Mock: https://www.dropbox.com/s/oayfhfwp82udgcy/Marketplace_Explore_June_v10.zip
Awesome - everything has been delivered! Thank you! All future assets will be requested for and delivered in individual bugs.
Status: NEW → RESOLVED
Closed: 12 years ago
OS: Mac OS X → All
Hardware: x86 → All
Resolution: --- → FIXED
Target Milestone: --- → 2013-05-02
VERSION 11 DROP (Also dropped on bug: 867896 ) Updates: • New Upsale module for desktop and mobile Mock: https://www.dropbox.com/s/lwhjlwv76t2wp07/Marketplace_Explore_June_v11.zip
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: