New Landing and Getting Started page (Task #1275)

Demo-Site is online (first draft of Landing Page)

...still work in progress, but some contents are already there and the integration with a CP portal works already...

http://projects.3dh.de/chiliproject/

Hey Chris,

I love the look, and it looks really great. I'm going to be really picky, so you have some feedback. I'm on a 1920x1080 resolution screen, so the way the page looks is different. I did re-size the window to look at how the page reacted.

There are some problems, when I view on a widescreen and a small screen. On the widescreen, the words move very far from the images on the carousel. Maybe try keeping the text and the image together near the center of the screen, kind of like www.openproject.org page you referenced. On smaller screens or when I snap it to half my screen, the words overlap the image, and makes it very hard to read. I have no idea how to deal with it, so it might be good for now.

The 3 columns below the carousel, the Features and Development's text act differently. So Features's text already has line breaks in each paragraph. Compared to Development's text, where there are no line breaks and therefore change depending on screen size. Personally I like the look of the Features's look, it just looks cleaner, but it does take more time to make sure it looks good.

Also more about the 3 columns, there is this weird extra space left of the Feature column. It is not very noticeable when the screen is smaller, but as the screen gets larger that extra space becomes bigger. It just bothers me because the space doesn't grow on the right of Development column. Maybe grouping the 3 columns and center them, so the space grows on both sides.

The Featurettes look really good. Maybe make the titles links to a wiki page, and make the text vertically centered between the featurette-dividers.

I don't know, if that was helpful. Please let me what else you want opinions on. But also finalize it with the others because I'm pretty new and have no idea what team wants.

Good job

Hi Francis,

thanks for your feedback! Your very detailed hints help a lot! I'll try to fix the layout as soon as possible.

For the featurettes I planned to link them to a new "User Guide" comparable to the detailed descripton of OpenProject.

My next step (after fixing the Landing Page) is to write the new User Guide page (thats really much work) - after I created the layout of this page, I maybe could need some help writing the User Guide sections ;-)

One way to work together for writing the UserGuide could be:

• I create a layout and define the content / document structure (sections)
• we both decide who covers which sections
• each section is then just filled with some screenshots and some and a description how to use the functionaliy X as notes
• later I put all the sections together and convert the notes into continuous text (this hides that everything is written by different people)

What do you think? Or do you have an other idea?

ciao,
Chris

• fixed the alignment + layout issues for the 3 columns
• added links to new userguide.html page
• first quick and dirty content list / headlines for user guide

Holger and I had a quick look and it definitely is an improvement over the current landing page :-) (I'm personally not completely sold on carousels).

Do you need help with the content?

I rewrote the landing page to:

• make the carousel more leightweight and less annoying
• reduce the text massively -> moved featurettes to separate page
• brighter design / removed dark background colors
• new links for demo page and discussion forums

Next:

• writing the user guide
• creating more screenshots

Here I could need some help of Felix & Francis.

Currently I create the rough content structure and add placeholders everywhere I need help / further information from you...

I agree will Felix and I am neither that fond of carousels. But I also agree on the improvement. These are my thoughts on the whole thing:

In the carousel there is left aligned text and buttons. In the three columns below its centered. I'd go with left even in the columns to create a more unified feel.

Instead of green buttons I'd use the red from the topbuttonrow, maybe increase the size and padding of them and make it one button per line instead of side by side.

And finally, dropshadows in the images on your images and arrows come from top left, but on the topbuttonrow the light comes just from the top.

Or maybe instead use the featurespage as front with downloadlinks above and below the text?

Hi,

thanks for your hints and reviewing the landing page. Here my thoughts:

• carousel:
  my intention was to provide a leightweight possibility to present more information than fitting on a screen without scrollbars (even on small monitors)
  ...aaaand: it's so fancy and just state-of-the art :-D
• text alignment for carousel and features:
  both are in different design / content contexts, and left align for the 3 column display destroys the fluid layout / look... the concept for this whole layout is done by a professional webdesigner - (and thus) not by me ;-) :-)
  ...target: a scalable text layout for small and up to large screens
  ...for any other page (every place outside this 3 column design) I completely agree to you: there should be only one alignment/layout all over the page
• green download buttons:
  ...just for user convenience - because nearly all big open source sites currently use green buttons for download links, so I adapted this wide spread design aspect to get more attention to the download links
  ...I asked some users about this coloring stuff and they preferred the green ones
  ...and regarding one button per line: this would break the 3 column design where the "Learn more..." links should be vertically nearly in one line / close together
• dropshadows:
  ...ok, these have to be fixed to be unified - I'll change that
• featurespage as front page:
  ...before starting the works on the new landing page I gathered some opinions of end users and colleagues about how they find the current CP site and what they would like to change and what is currently not optimal
  ...the result was: the current CP (wiki) site is to overloaded - it's hard to find the links to the interesting topics (new users: features overview + demo + forums, frequent users: download link + changelog + forums + docu)
  ...that's why other open source projects and commercial sites behave the same: the first page must not be overloaded and must not have much text - the visitors mostly just invest a few seconds to find the links and infos they are looking for
  ...comparable sites: http://www.ownlcloud.org, https://www.openproject.org, https://plan.io/
  ...I experimented with different ways, e.g. putting the featurettes below the 3 colums - see: http://projects.3dh.de/chiliproject/layout2.html and http://projects.3dh.de/chiliproject/layout1.html

So: What looks better: The featurettes as separate page or below the current 3 colums layout?

ciao,
chris

So we agree to disagree? :)

• Carousel for me feels non state-of-the-art. It feels done, done and done. planio you linked to feels way better. Nothing moving, just an image that tells the tale and cut to the chase text.
• Independent features or not, but that close to each other, same type, same fontsizes just seems awkward to me. Although I'm not that fond of centered text at all since it's a readability nightmare when it comes to more then one-two lines and best used for punchlines.
• After consideration, green is probably better. Red is, and probably always will be, an alarm/dont touch this kind of color.
• If you go for an alignment of the buttons below, maybe solve it like http://openproject.org did?

As you might understand by this, layout 2 is in my book the best one (even though it has a carousel :) since it mimics planio the most (which was the best one of the three examples you gave).

Maybe we should move this over to your forumthread instead of here?