Closed Bug 627932 Opened 12 years ago Closed 12 years ago

design Getting Started/Tour page


(Marketing :: Design, task)

Not set


(Not tracked)



(Reporter: jslater, Assigned: smartell)





(3 files, 1 obsolete file)

For now, just a placeholder bug. Kickoff meeting with Sean, Grace, Anthony & me scheduled for next Tuesday.
Just so I can run some ideas in my head, we are talking about the new version of , right ?
(In reply to comment #1)
> Just so I can run some ideas in my head, we are talking about the new version
> of , right ?

Exactly. Same basic concept, but we want to use the latest web technology to show off the content in a more engaging and dynamic way. (Tricky part: we'll also need to have a graceful fallback to a non-HTML5 option, because there will be versions of this page for Firefox 4 users and people who are on older browsers.)
Yeah, tricky part, I envy the guys doing the in-product pages :)

For inspiration, I really like the Features section on (sadly best viewed in Safari)
OS: Mac OS X → All
Hardware: x86 → All
(In reply to comment #3)
> For inspiration, I really like the Features section on
> (sadly best viewed in Safari)

Yep, the Panic stuff is great and is a good reference point for sure. I think we can do even better, though!

Grace sent me a couple of slides to get the content discussion started. Let's plan on reviewing these when we have our kickoff meeting tomorrow.
Attached file Getting Started copy #1 (obsolete) —
Hey Sean. Attached is my first pass at the copy for the Getting Started page. I'm sure there will be edits along the way, but this is definitely close enough for you to, um, get started.

About the schedule: we basically need to have the design and development of this page finished by the end of next week, so it's important to get even a rough prototype over to Anthony as soon as possible.

PMMs, please review this copy doc when you have a chance. It's similar to what we discussed earlier, but I tried to reduce the content when possible (basically linked off to existing pages rather than recreating all the info here).
Removing the "Fx version" from the bug title. Grace & Mayumi, please correct me if I'm wrong, but didn't we decide on only having one version of this page for now?
Summary: design Fx version of Getting Started/Tour page → design Getting Started/Tour page
Getting Started page design


Preview JPGs:

Feature Hover Tip:

Feature Description Box:


Anthony, Potch: the hover mouseovers and popup decription boxes on this page will be the same as the interaction on the firstrun ( tour section. Probably best to make the code identical to avoid 2x the solutions.

Popups for the tips could use similar CSS to what I coded for Fennec's UI here, perhaps with a little extra love given to the arrow to match proper bevels/shadows:

Note: some of the blue popup tips will need to expand downward with the arrow pointing up (opposite of the sync example shown)

questions/concerns/excellent recipe for key lime pie - please contact me.
One other note:  this is the initial design.

Depending on OS and what tooltip they hover over, we'll need to add in many screenshots of the UI in its different states + each OS will need its own dotted line based on UI element placement.

Once the framework gets built, we should make a full list of assets needed and the proper screenshots per tip/feature/OS.
Thanks Sean.

Re: both FR & GS, I really like the way the little popup descriptions open up on this site: - a bit of subtle panache beyond just having it open up all at once.

Also, re: GS, the content is still somewhat in flux. The basic concept is definitely solid, but some of the specific features being called out may change (a bit). Will know for sure tomorrow.
Some notes, thinking out loud:

- The blur effect when a popup is open will only work on Firefox 3.6+ (cause it uses SVG filters). And I think it's very distractive. It was used in some Firefox4 betas for the JS alert() function but they switched to a semi-transparent effect. Type 'javascript:alert("foobar")' in today's nightly to try it.

- Do we already have something that behaves like the arrow/popup transition? The Desandro popup looks cool but I feel like the white square should expand into the blue one with a color/shape transition. Maybe we'll need to make the shapes a bit more "squary" to do this kind of transition.

- Should we use a blue shadow for unread arrows, like the one in the "instructions"? Maybe use a glowing effect by expanding and shrinking this shadow?

- Where is the role of the links inside the browser window? (Getting started, Meet the new UI, …) Do something on the current page or go to another page?

- Same question with the links at the bottom.

I'm not sure all the stuff I'm proposing are doing in a "kind-of-cross-browser" way so don't take it for granted.
a few responses:

- I'd like to try the blur effect if we can. There is also a white tint so it isn't full contrast, to fade it back further.

- I don't think we'd need to lose border-radius for the popups to work. I had a go at something similar ( and it should work fine with the arrow appearing.

- for read arrows, their bg color could be changed to a light grey instead of white.

- the links in the browser cause the large white box popup as seen in getting-started-3.jpg

- links at the bottom are alternate on-click ways to open the top nav, redundant interaction method for folk who don't get the hover.
Thanks guys. Anthony, please proceed full speed ahead as much as you're able to, but I'm also going to set up a quick phone call so we can talk through anything that needs to be discussed in real time.
A few notes from yesterday call.

- Let's try to use SVG for the dashed path. It won't be displayed on IE<9 and other old browsers but it will be easy to modify on the fly for various OS screenshots.
- Have a kind of JSON to store arrows placement that can also be used for the SVG generation.
- Try to use two PNGs for the arrow: a blue and a white version. When opening/closing an arrow, transition their opacity while changing the shape and colour of the rest of the box.
New copy doc, changes in red. Sean, let's discuss today. Thanks!
Attachment #510776 - Attachment is obsolete: true
A first test with SVG. Drawing paths is really cool.
very nice!
Anthony, that's pretty excellent! Are you generating the svg from the interest points yet? or is that hard-coded?
Still hard coded as I was experimenting with path drawing in SVG. We'll need a couple more points to make the curve smoother but I'm pretty happy with this first try.
Latest design tweaks uploaded.

Please review links in comment #9 for updated assets (JPGs and PSDs).
Thanks Sean! Anthony, let us know if you have any questions.
Resolving this bug...let's move further discussion to bug 623808. Thanks!
Closed: 12 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.