Some Eclipse Foundation services are deprecated, or will be soon. Please ensure you've read this important communication.

Bug 404930

Summary: Design for Kepler landing page
Product: Community Reporter: Ian Skerrett <ian.skerrett>
Component: WebsiteAssignee: 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 Flags
Landing Page
none
Highlights page
none
Project Page
none
Height Comparison Image of past releases none

Description Ian Skerrett CLA 2013-04-04 14:34:10 EDT
We need to design a landing page for Kepler, something similar to the www.eclipse.org/juno page.  Anyone have suggestions for the graphics and/or design?
Comment 1 Nathan Gervais CLA 2013-04-04 14:41:53 EDT
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.
Comment 2 Wayne Beaton CLA 2013-04-04 14:44:29 EDT
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
Comment 3 Christopher Guindon CLA 2013-04-04 14:50:15 EDT
I wonder if we should include some jQuery animation for the background like on this page:

http://css-tricks.com/examples/StarryNightMoving/
Comment 4 Wayne Beaton CLA 2013-04-04 15:10:50 EDT
(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...
Comment 5 Christopher Guindon CLA 2013-04-12 08:45:02 EDT
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.
Comment 6 Nathan Gervais CLA 2013-04-17 10:34:26 EDT
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!
Comment 7 Nathan Gervais CLA 2013-04-17 10:35:05 EDT
Created attachment 229806 [details]
Landing Page

Kepler Landing Page
Comment 8 Nathan Gervais CLA 2013-04-17 10:35:30 EDT
Created attachment 229807 [details]
Highlights page
Comment 9 Nathan Gervais CLA 2013-04-17 10:36:49 EDT
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.
Comment 10 Wayne Beaton CLA 2013-04-17 11:00:15 EDT
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..."
Comment 11 Ian Skerrett CLA 2013-04-17 11:07:28 EDT
(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.
Comment 12 Nathan Gervais CLA 2013-04-17 11:19:38 EDT
(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?
Comment 13 Nathan Gervais CLA 2013-04-17 11:22:15 EDT
Apologies we started the highlights with Indigo.
Comment 14 Wolfgang Schell CLA 2013-04-17 11:22:43 EDT
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
Comment 15 Nathan Gervais CLA 2013-04-17 11:31:39 EDT
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.
Comment 16 Nathan Gervais CLA 2013-04-17 11:35:36 EDT
(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?
Comment 17 Denis Roy CLA 2013-04-17 16:55:28 EDT
I think it's brilliant.
Comment 18 Chris Aniszczyk CLA 2013-04-17 17:05:49 EDT
+1 love it
Comment 19 Christopher Guindon CLA 2013-04-18 16:06:38 EDT
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?
Comment 20 Christopher Guindon CLA 2013-04-18 16:08:29 EDT
> 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
Comment 21 Chris Aniszczyk CLA 2013-04-18 16:12:52 EDT
(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.
Comment 22 Christopher Guindon CLA 2013-04-19 15:32:58 EDT
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**
Comment 23 Christopher Guindon CLA 2013-06-12 11:19:28 EDT
Changing the status to Fixed. We are done with this page.
http://eclipse.org/kepler/
Comment 24 Markus Keller CLA 2013-06-28 08:09:36 EDT
*** Bug 387930 has been marked as a duplicate of this bug. ***