Homepage redesign - discussion page

We are now in de luxury position to discuss 2 proposals for the new design:

1. CarloSchulzSandbox by Carlo
2. HomeTest by Arthur

Let's speak about the merits of the designs and how to proceed.

Carlo's proposal

• superseded by Arthur's latest re-design improveents. We have just one proposal now, which integrates ideas from both.

Arthur's proposal

There are 3 main areas:

1. Introduction to Foswiki
2. Download, news, updates
3. Entry points to deeper pages

Like Carlo I have ditched the regular menu. I have tried a 3-column setup first, but found the columns got too wide. And it gives a static appearance, I prefer to have a more dynamic view, to give the impression things are moving.

• Considering that new visitors need a proper introduction to Foswiki, I have reserved a very large part of the homepage to that. We cannot assume people know anything.
• I find it important to show how Foswiki looks like, at least to start from here: video's and slideshows. Making it visible is making it understandable.
• I have added Carlo's proposal for "What others are saying"
• Like Carlo I have put emphasis on the download banner
• It is important that the homepage shows updates.
  • I find Project Update very good, but I have trimmed the items to show.
  • Foswiki in the news - the news volume is rather slim these days. I found it a waste to link to short blog posts. I don't like the table layout of the current homepage.
• What to do next? That is an important question. Here we have different target groups, easy to recognize. This can be visually more dressed, like icons for Community or Involved.

Combining the proposals

Topics to agree upon:

1. Which target groups
2. Goals of the homepage
3. Supported user flows
4. Visual design
5. (at the very end) Technical implementation.
   • Yahoo Grids is a more advanced solution than a table. both proposals now use Yahoo Grids
   • Externally link the CSS for validation

Discussion

Here's a bit of food for thought from http://themeforest.net. There's much more nice stuff on that site. I uploaded just a few that most most probably don't match Foswiki.org as a product&community site. I still feel inclined to say that the proposals so far lack state-of-the-art webdesign. You probably know that already, still I want to raise the barrier by putting up contrasting examples and to sharpen perception a bit. Have a look at themeforest or other (template) sites. Take your screenshot gun out and add inspiration.

I am very sorry for asking to go back to inspiration mode, but that's basically what is needed to get the homepage decent.

-- MichaelDaum - 12 May 2009

---

I am very sorry for asking to go back to inspiration mode, but that's basically what is needed to get the homepage decent. I don't agree that it has to do with concept or inspiration. It is mainly a matter of design execution. That need to be improved.

-- ArthurClemens - 12 May 2009

True. Don't misunderstand it. I don't meant this offensive. As I said on the ML already, the proposed frontpages clash with the design of the rest of the page. The concept probably needs to cover all of the page - not only the content area.

The proposed layouts at NewNavigationModelForTWikiDotOrg where better already.

-- MichaelDaum - 12 May 2009

Also true. But this will take another epoch before that is created/agreed/etc. We also need a shortterm solution to provide better info and entry points.

-- ArthurClemens - 12 May 2009

Sorry, no time so far to comment on my proposal.

"...get the homepage decent."

However, what we have now as a homepage is not even discussable. So from that point of view both proposal offfer a significant improvement.

They are, of course, not state of the art. But instead of leaving our homepage as it is until we have a cool "state of the art" front page (which could easily last weeks or even months), we should go ahead with one of the two proposals and improve them step by step...

-- CarloSchulz - 13 May 2009

En example of good design + good entry points + real content is Miro.

Take away: everything is made visually simple, bite sized texts, visual entry points. Video directly on the page.

-- ArthurClemens - 13 May 2009

On a second look, I have to say above design templates may look more professional but they are also quiet boring.

-- CarloSchulz - 13 May 2009

These are templates from the "corporate design" category of http://themeforest.net. That's obviously no direct fit for foswiki.org. I just provided them so that people can contrast them with foswiki...

I like Miro - looks sheep

-- MichaelDaum - 13 May 2009

I have started sketching again in Photoshop. I am trying to make the benefits more bitesized, more visual. The left works as a menu. The right side should include screenshots as well, where appropriate.

-- ArthurClemens - 17 May 2009

I like these efforts a lot. I can't wait to see them implemented. I would recommend to keep interactive content on the page (1-click) as it draws attention and is widely used by new visitors.

-- MartinSeibert - 18 May 2009

I have updated (simplified) the main message. This would be screen 1 of 7. "Next" mechanism not yet defined.

Please view in full size:

-- ArthurClemens - 19 May 2009

I really like the direction you are going to. So I will dis-continue with my proposal.

However, viewing the latest screenshot in fullsize I have the impression that things are slightly too big.

Is the big big "edit" meant as a placeholder? If not all we say to the visitor (on his first impression) is EDIT.

A second thing I was thinking about is the headline. It is overly long, isn't it? Maybe our claim should be presented as a claim and not as part of the headline.

-- CarloSchulz - 20 May 2009

Good remarks, we need to agree on this.

We are starting to focus on the messages. The words we use are all important.

The messages I want to bring is:

1. Communicate the name, so "Foswiki" needs to be in the content
2. Communicate the tagline, because this is what the project is about. This can be on the same line or just below the title.

Then the benefits:

1. Foswiki is simple to use, with a lot of power under the hood
   1. We don't have to explain "Wiki", just what you get from it (that is the first 'slide'): it improves collaboration ("empowers your team")
2. No need to learn wiki language, because we have a very good Word-like editor
3. Powerful, but (relatively) easy: dynamic pages (we won't use 'programmable' because that sounds like something lots of people cannot do)
4. You can change the layout to fit your house style / integrate with your other sites
5. Easy to convert: in any case from TWiki. Here we need other examples too, from MediaWiki and Confluence, etc.
6. For the enterprise: LDAP support, access management (other things?)
7. Support: an active and helpful community

We cannot show much of screenshots, because the appearance of Foswiki is not that special, and screenshots are not very good in telling a story.

The edit button image should invoke the idea of interactivity and simplicity.

-- ArthurClemens - 20 May 2009

Screen update:

-- ArthurClemens - 20 May 2009

Very good, I think we have the right trigger words now.

In terms of layout and font I find the part above and underneath the main teaser need a bit more balance. The top is a bit too packed.

-- CarloSchulz - 21 May 2009

Yes, I also found the balance lacking. I have tweaked some things, and added the second screen:

-- ArthurClemens - 21 May 2009

yes,better now. Especially with the lighter gray.

If not meant as a placeholder, the wording of the bullets in the "edit with ease" section could be better / less boring.

Sorry, no ideas for better copy by now

-- CarloSchulz - 22 May 2009

I think the problem is the "Among others". That should be more playful, for instance "Just do what you would expect".

Two more screens:

-- ArthurClemens - 22 May 2009

stop teasing us :P any chance we just make the topics now?

If you're mostly worried about text, thats something the wiki-hive-mind can work on together-like

(I like what I see)

-- SvenDowideit - 23 May 2009

You are right. The base is there. I am now buiding the CSS + JS for it.

-- ArthurClemens - 23 May 2009

I'm really excited by this; the screenshots look great!

-- CrawfordCurrie - 24 May 2009

I find the 7 reasons slideshow a quite massive and not very helpful in the long run, i.e. how to learn more about concept xyz. While it addresses newcomers' needs, most other types of visitors will have to scroll down and try to find something else to chew on.

• I think it would be helpful to add "learn more" links to sections. -- ArthurClemens - 24 May 2009

The middle section "Get Foswiki - Project Updates - News Highlights" is centered on the page which I find a bit awkward. There are potentially much more new infos in this middle section than in the 7 reasons slideshow. But you'll most certainly miss them as the slideshow dominates the page.

• Previous attempts tried to do too much on the homepage, without explaining the product Foswiki first. That means that some other info is pushed down or away. The position of the "vote" trigger can also be used for other news that needs attention: a new release, a security alert, etc. -- ArthurClemens - 24 May 2009

I like the bottom deep links bottom section. Maybe it is a bit hard to figure out links in there other than hovering over the text.

• The layout of the block needs to be improved. Once you see it is a menu, it becomes obvious that the items are links. -- ArthurClemens - 24 May 2009

There's too much headlines, logos and menus at the top of the page. The "FW Foswiki" stuff clashes with the "Foswiki - The free and open source enterprise wiki" headline. And then comes the "7 reasons" headline as well. Imho, we only need one "Foswiki something" at the top (which defines the page title as well).

• As you have suggested before, we can use an alternative layout for the homepage. But I rather finish this thing first. -- ArthurClemens - 24 May 2009

Paragraphs and enumerations should be aligned to a grid. For instance, line-height in the reasons list does not match spacing in the slides, i.e. "2 Edit with ease" is not aligned with "Co-write pages..." just to pick out one example.

• The 'menu' items will not align, otherwise the body will get lower and lower. -- ArthurClemens - 24 May 2009

A different background texture/color would help readers to focus on each section and separate them in a clean way.

• I have added a bg to the highlighted menu (code, no screenshot yet). -- ArthurClemens - 24 May 2009

Sorry if this sounds like niggling.

• Sure, its fine. You are making suggestions for improvements. -- ArthurClemens - 24 May 2009

-- MichaelDaum - 24 May 2009

I have added my comments above.

Any suggestions for the item "Convert from other tools"? What examples can I give?

-- ArthurClemens - 24 May 2009

http://expressionengine.com/

this page looks a lot like what we are trying to achive...

-- CarloSchulz - 25 May 2009

y

-- MichaelDaum - 26 May 2009

I have created a redesign around the benefits block:

-- ArthurClemens - 31 May 2009

mmm, pretty, is there a story behind the move to green?

-- SvenDowideit - 02 Jun 2009

I have updated the colors. But which green?

-- ArthurClemens - 02 Jun 2009

I like this a lot.

Two comments: the top left is a bit disordered. maybe the "You are .... Users" can go above the header containing the logo on the right and the searchbox on the left. That way the search box would align better with the logo. The "You are visiting this site as: WikiGuest" is a bit wordy just to say that you are not logged in. How about removing it. "Login or Register" already says that you are not logged in or registered yet.

The second comment: is about the 6 reasons. There's lots of potential in here. I can picture a slideshow (maybe using jquery.cycle) that is a bit more colorful and compact wrt the rest of the white space up there. As it is now, it tends to fall appart, i.e. the tab buttons to cycle between the 6 reasons and the section that comes below.

• Yes, please show us your ideas! -- ArthurClemens - 02 Jun 2009
• What have you got so far for each of the 6 points? -- MichaelDaum - 04 Jun 2009
  • I have four so far: see the small browser screens above. "For the enterprise" and "Support" still to go. -- ArthurClemens - 04 Jun 2009

Third ;): I preferred the green rounded corners download box in 02j instead of the open one in 02k.

-- MichaelDaum - 02 Jun 2009

It's slightly xingish but very tidy, I like it. Let's go for it and do a corresponding design for 'normal' content page views and edits. Only thing I miss is fat willi.

-- FranzJosefGigler - 02 Jun 2009

Here's a similar from http://www.dialogix.com.au/:

-- MichaelDaum - 04 Jun 2009

I was waiting for a mockup to be available before tweaking the text, but for now I am creating HomepageRedesignDraftText to hold the draft text.

-- IsaacLin - 04 Jun 2009

Can you include DonationButton at a prominent place?

-- OliverKrueger - 16 Jun 2009

New pass:

We also need to address the new Foswiki security better in the benefits.

-- ArthurClemens - 27 Jun 2009

I liked 02k.png more. The colors of the latest one are too washed out.

The "You are visiting this site as WikiGuest" can be dispensed.

-- MichaelDaum - 03 Jul 2009

I too like the 02k one more - I wonder if there is a story explaining the dramatic feeling change (it may well not be dramatic to you..?)

-- SvenDowideit - 03 Jul 2009

02k +1

-- OliverKrueger - 03 Jul 2009

Another inspiring example. As you see we don't do something absolutely new.

What I like about this design is the vivid but not overloaded colors, a balanced layout of all elements, beautiful icons, buttons and menus. Sure foswiki.org is more of a community site. So while presenting the product itself let's not forget about the people that come together here...

-- MichaelDaum - 03 Jul 2009

I still do prefer the colors of Foswiki_homepage10-collaboration.png. Foswiki already got linked with the logo and blue headline in my mind.

-- JanDreyer - 06 Jul 2009

I have used the layout of 05 with the colors of 02k:

I have also changed the logotype and tagline.

Any ideas to expand on making the community more visible? Entry points?

-- ArthurClemens - 11 Jul 2009

06c.png is better now. Some comments:

• I like the overall design of the top bar containing the logo and the horiz navi.
• The top bar content might need a bit more of a vertical balancing of the white space, i.e. above the logo.
• The two greens for Fos and wiki are a nice idea but too much I am afraid.
• The orange used in the 6 reasons does not work out. It gives a kind of negative colors effect which is a bit stressful for the eyes.
• I have the impression that the concept for the two sections "Project Updates" and "Where to go from here" don't provide a stable base for the building blocks above at the page. The idea might work out pretty well on another design that has not got a heavy weight top section on the page. This design however seems to need to be more solid down there IMHO.

-- MichaelDaum - 12 Jul 2009

Thanks for your feedback. It is good to have more eyes.

I have incorporated your comments:

-- ArthurClemens - 12 Jul 2009

Hello guys, back from my honeymoon and i really was catching fire seeing this. This is really really REALLY impressive. Not only thoughts and talking but really nice initiative Arthur!

Looking at all the color schemas and the layouts, i like the last one a lot. But, maybe iam alone again, isnt there missing a big fat "GRAB IT PEOPLE!! ON CLICK - ITS FREE"
I recognized that this idea different comparing to some people i talked to before, so maybe its just me missing such a point.

-- EugenMayer - 12 Jul 2009

Thanks Eugen. I have put more emphasis on the download link.

-- ArthurClemens - 12 Jul 2009

Can a download button be placed immediately to the left of the donate button? And perhaps the text for the Download tab in the top menu bar can be made a different colour? I agree with Eugen that the download link must be immediately obvious at a glance.

The second horizontal menu bar appears to me to be more tightly coupled visually to the section below it, rather than the section above it. I'm not sure how to alter this -- perhaps a bit of vertical space after the menu bar, and maybe with a framing thin border around both the top section and the menu bar?

-- IsaacLin - 12 Jul 2009

A version with a more promintent menu highlight, and the download and donate buttons in the menu bar:

-- ArthurClemens - 12 Jul 2009

Arthur, looks excellent.

-- MichaelDaum - 13 Jul 2009

Hehe, the style and colors look very much like the one's from a former IBM marketing campaign. Even funnier, I also sketched some designs with look and feel borrowed from that campaign earlier but I abandonned my efforts for some reasons.

Bottom line, I like this a lot.

However, I feel we make the same mistake as for the twiki hompage redesign efforts. Instead of having a not 100% perfect interim solution which will dramatically improve the homepage without too much effort, we (again) ended up in weeks and month of designing and discussing without having anything anyone profits from.

Correct me if I am wrong but my impression is that this is not going to be implemented within the next eg. two weeks?

With both initial proposals we would have improved the current situation a lot already. But instead we archieved nothing concrete at all. Just a bunch of really great sketches and designs. Which is a fantastic thing involving hours of effort but it's not worth anything for us or our users if it does not get implemented anytime soon.

So maybe we have to re-think our approach here and switch over to something like a beta - release model for our redesign efforts.

Our current homepage looks already like a beta (or even worse than that). We don't really loose anything if we improve the homepage with an interim solution.

Any thoughts or arguments against this?

-- CarloSchulz - 13 Jul 2009

Carlo, in general I agree.

However, this design is really great now and it was worth waiting for it to happen. Let's not talk it down and go ahead. These kind of arguments like "why didn't this happen earlier - even a simpler solution would have been sufficient - yadda yadda" most of the time come back as a boomerang

It takes so long because it takes so long. So be it. I'd prefer to see this in a very positive light instead because the result will be much nicer.

-- MichaelDaum - 13 Jul 2009

Please do not get me wrong, this is not meant as downtalking at all. I really appreciate the outcome of this process so far and I agree that it was worth waiting for.

I'm as well one of those who aim for the best possible solution instead of releasing something halfbaked. However, halfbaked is still better than quarterbaked and I do not believe that an interim solution would have prevented this design outcome.

So this is more a thinking about "agile" vs. "waterfall" development of design and whether our current waterfall approach towards design issues is the way to go.

-- CarloSchulz - 13 Jul 2009

all I can doo is cheer you guys along - as an ugly developer, i'd be more than thrilled with what is there atm. I would love to hear a story about where the choices come from - but thats just idle curiosity

-- SvenDowideit - 13 Jul 2009

Small addition to the latest draft: we should have a search button, not just the inline text saying "search"

• You are right. -- ArthurClemens - 14 Jul 2009
• Caution, there are two unrelated buttons nearby already -- MichaelDaum - 14 Jul 2009

-- CarloSchulz - 14 Jul 2009

For me, the current colour scheme, including the silhouetted group of people standing around, invokes a feeling of starkness. Is this the intent? Personally I would prefer a warmer look to build on the theme of community.

Carlo, though I too would have liked to see an interim version, in addition to this requiring additional effort to produce, I can see how releasing something, even if explicitly labeled as interim, could inhibit the need to kill your darlings, so to speak, when developing a creative work.

-- IsaacLin - 14 Jul 2009

One final update. Next steps:

• Create skin
• Update foswiki.org around Foswiki release 1.1

-- ArthurClemens - 20 Sep 2009

I really like the look of it and the colours.

Im not sure about the text "Contribute to this site" but I don't really have any better suggestions. Maybe "Contribute to this project"? Or "Try Foswiki"?

Looking forward to seeing this, will be great to have it with 1.1.

-- AndrewJones - 20 Sep 2009

Damn. These layouts are cool!

-- MartinSeibert - 22 Sep 2009

Wow~~!! they are really really cool!

-- CoriaXu - 11 Oct 2009

Draft descriptions of Foswiki

Draft text for the descriptions of Foswiki is located on HomepageRedesignDraftText.

Status update

I want to bring you up to date with the work in progress on the current homepage and the new site skin. This is no longer Photoshop, these are working pages!

The homepage now features a content slider that resizes with the window resize. So on a smaller screen you should still see all content.

A non-view page:

Pages except the homepage have a info bar below the main menu. This might go when we have a final solution on topic interaction:

-- ArthurClemens - 27 Dec 2009

Carlo & Arthur: how do we proceed with foswiki.org's homepage? Which dependencies are there to the WireframesForNewReleaseSkin subprojects?

While there definitely is a connection between skin design and foswiki.org itself, the homepage content and site navigation is still a thing that needs care of its own.

-- MichaelDaum - 12 Feb 2010

The new skin I'm working on aims at much better user experience when working with Foswiki and thus introduces new design and interaction principles. The web site skin Arthur is working on is much more like a visual redesign. An update of our current FoswikiSiteSkin so to say and does not introduce new interaction principles (as far as I'm aware of).

-- CarloSchulz - 12 Feb 2010

Oh so these things are independent. Wasn't aware of that. Are there other constraints that keep us back from relaunching foswiki.org in a new design and frontpage. Logo? What are the next actions to make all this happen?

-- MichaelDaum - 12 Feb 2010

I think it just needs Arthur to publish his redesign to allow testing. I'm not aware of other blockers atm.

-- CarloSchulz - 12 Feb 2010

After a lot of activity, there have been no updates since early this year. Are these still in the works?

-- PankajPant - 29 Jul 2010

Some body willing to take over the lead?

-- MichaelDaum - 29 Jul 2010

I have all this as skin on my computer. And I will continue with it. I will package it and put it in svn.

-- ArthurClemens - 30 Jul 2010