Closed Bug 627932 Opened 10 years ago Closed 10 years ago
design Getting Started/Tour page
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 http://www.mozilla.com/en-US/firefox/central/ , right ?
(In reply to comment #1) > Just so I can run some ideas in my head, we are talking about the new version > of http://www.mozilla.com/en-US/firefox/central/ , 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 http://panic.com/transmit/ (sadly best viewed in Safari)
(In reply to comment #3) > For inspiration, I really like the Features section on > http://panic.com/transmit/ (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.
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 ---------------------------------- PSDs: http://mozilla.seanmartell.com/engagement/mocodotcom/FINALS/getting-started.psd Preview JPGs: http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started.jpg Feature Hover Tip: http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started-2.jpg Feature Description Box: http://mozilla.seanmartell.com/engagement/mocodotcom/getting-started-3.jpg ---------------------------------- Anthony, Potch: the hover mouseovers and popup decription boxes on this page will be the same as the interaction on the firstrun (https://bugzilla.mozilla.org/show_bug.cgi?id=623804) 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: http://mozilla.seanmartell.com/fennec/fimo/androidUI/index.html 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: http://desandro.com/portfolio/ - 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.
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 (http://mozilla.seanmartell.com/popup/) 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. http://ricaud.me/mozilla/getting-started-svg.html
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!
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.