| Summary: | Design for Kepler landing page | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | Community | Reporter: | Ian Skerrett <ian.skerrett> | ||||||||||
| Component: | Website | Assignee: | phoenix.ui <phoenix.ui-inbox> | ||||||||||
| Status: | RESOLVED FIXED | QA Contact: | |||||||||||
| Severity: | normal | ||||||||||||
| Priority: | P3 | CC: | caniszczyk, chris.guindon, david_williams, ian.skerrett, nathan, nobody, wayne.beaton, ws | ||||||||||
| Version: | unspecified | ||||||||||||
| Target Milestone: | --- | ||||||||||||
| Hardware: | PC | ||||||||||||
| OS: | Windows 7 | ||||||||||||
| Whiteboard: | |||||||||||||
| Bug Depends on: | 405988 | ||||||||||||
| Bug Blocks: | |||||||||||||
| Attachments: |
|
||||||||||||
|
Description
Ian Skerrett
My usual process for designing these landing pages usually starts with some research into the term we're using. Wikipedia talks about how Kepler pioneered orbits using polyhedra. http://www.tess-elation.co.uk/_/rsrc/1250287485086/johannes-kepler/kepler%2032%20diagrams.jpg http://www.georgehart.com/virtual-polyhedra/figs/kepler-poly.jpg Some of these designs would lend themselves well to graphic treatments as they are visually interesting. I'd like to see us move away from purple again for this year at least. Not sure how useful this will be, but the Kepler supernova remnant is pretty cool looking... http://www.nasa.gov/mission_pages/chandra/multimedia/kepler2013.html I wonder if we should include some jQuery animation for the background like on this page: http://css-tricks.com/examples/StarryNightMoving/ (In reply to comment #3) > I wonder if we should include some jQuery animation for the background like > on this page: > > http://css-tricks.com/examples/StarryNightMoving/ That's pretty cool looking. The effect is a little distracting though. Maybe something more subtle... I will try to come out with a mockup today. If anyone has more idea, feel free to post them to help me out here! We also need a concept idea for the "friends of Kepler". I really liked the idea of the Indigo 500 http://eclipse.org/indigo/friends.php I wonder if we can come up with some clever like that for Kepler. Over the last few days I've spent some time mocking up the Kepler landing pages. Hope you like it. Here's a bit of backstory. Kepler was one of the pioneers of planetary orbits, he's the one that really proved the Sun was the center of the universe, and that orbits were ovals, etc. I wanted the pages to have an old world feel like you were picking up an old book or research notes. The main graphic on the landing page is that of the Mysterium Cosmographicum[1] taken from the book of the same name which explained one of his theories that orbits were based on the shapes inside this device. I thought this made a nice parallel to the work involved with the release train and the many "orbits" of the release train. The different shapes that I'm using as bullets are some of the shapes from this device. [1] http://en.wikipedia.org/wiki/Mysterium_Cosmographicum Feedback welcome! Created attachment 229806 [details]
Landing Page
Kepler Landing Page
Created attachment 229807 [details]
Highlights page
Created attachment 229808 [details]
Project Page
Please dont feel left out if your project isnt on this mockup yet, i duplicated content to fill the space. Also some of the icons might not be perfectly lined up.
I like the look of the pages. I am concerned, however, that they're too tall. These pages shouldn't require any scrolling in an average-sized window on an average-sized monitor. (In reply to comment #8) > Created attachment 229807 [details] > Highlights page I know that this is nitpicky and we're a while away from having final text, but the text should be in present tense. "Eclipse Virgo 3.5 will deliver..." should be "Eclipse Virgo 3.5 delivers..." (In reply to comment #8) > Created attachment 229807 [details] > Highlights page How do you get to the highlights page? Not sure I like having the highlights on a sub-page. (In reply to comment #10) > I like the look of the pages. I am concerned, however, that they're too > tall. These pages shouldn't require any scrolling in an average-sized window > on an average-sized monitor. The page is longer then past landing pages but displays fully in a 1280X1024 screen and is only slightly longer than www.eclipse.org/helios > > I know that this is nitpicky and we're a while away from having final text, > but the text should be in present tense. > You're right that is nitpicky ^^. That's copy from last years Juno page. It is something we should try to remember when we're writing this years copy. (In reply to comment #11) > How do you get to the highlights page? > > Not sure I like having the highlights on a sub-page. I could try to collapse the navigation links and move highlights to the front page. Do you consider it a critical element to the front page? Juno was the first year we did highlights and I thought it was because we had a lot going on with 3.8/4.2, Any ideas on what you'd actually want to highlight for this years release? Apologies we started the highlights with Indigo. Nathan, very nice design! I like it very much. OTOH, the colours feel a bit out of place with the regular eclipse page around it (if that is the plan?). Cheers, Wolfgang Created attachment 229812 [details]
Height Comparison Image of past releases
As a point of discussion regarding the height here's an image showing relative heights of the past 4 release pages.
I'm not married explicitly to the height of the page but I thought this was an interesting data point.
(In reply to comment #14) > Nathan, very nice design! I like it very much. > > OTOH, the colours feel a bit out of place with the regular eclipse page > around it (if that is the plan?). > > Cheers, > > Wolfgang Thanks, you are correct that we wish to keep the page wrapped with the Nova theme. I know its a bit of a sharp contrast, but I'm hoping the illusion of the book is enough to bring you "inside" so to speak. I tried to use redish tones to keep the book looking warm and cozy, is that what you mean? I think it's brilliant. +1 love it What should we do about the twitter section on the Highlights page? Twitter's decided to discontinue their unauthenticated v1.0 API means that implementing a custom twitter feed could break at any time https://dev.twitter.com/blog/planning-for-api-v1-retirement I think that the default embedded timeline wont feed really well with this design https://dev.twitter.com/docs/embedded-timelines Chris, do you have any suggestions? > I think that the default embedded timeline wont feed really well with this > design https://dev.twitter.com/docs/embedded-timelines ** I think that the default embedded timeline doesn't fit well with this design https://dev.twitter.com/docs/embedded-timelines (In reply to comment #20) > > I think that the default embedded timeline wont feed really well with this > > design https://dev.twitter.com/docs/embedded-timelines > > ** I think that the default embedded timeline doesn't fit well with this > design https://dev.twitter.com/docs/embedded-timelines Please use the embedded timelines, you can create one here: https://twitter.com/settings/widgets I would probably do a search on a specific hashtag that you guys come up with for the kepler release (probably #eclipsekepler or #eclipse2013, something to that nature). There are some design tweaks you can do with the "Client Side Options" here: https://dev.twitter.com/docs/embedded-timelines Theme wise, I think there's only a light/dark option. I created the framework for the Kepler landing page (HTML & CSS) based off Nathan amazing design work! http://eclipse.org/kepler/ We still need to add actual content to the page. I am currently using Lorem Ipsum to fill up the pages. Right now, my main concern is the navigation, on the project and highlights page you need to scroll to see the navigation links. I added twitter embedded timeline because of Comment #21. The timeline is a search for #eclipsekepler. Regarding the rollovers, I simply did an "invert" in Photoshop and it came up with the light blue. **This is still a work in progress** Changing the status to Fixed. We are done with this page. http://eclipse.org/kepler/ *** Bug 387930 has been marked as a duplicate of this bug. *** |