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

Homepage patch plan.png

click to enlarge

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 smile

-- 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.

Foswiki homepage6.png

click to enlarge

-- 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:

Foswiki homepage8.png

click to enlarge

-- 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:

Foswiki homepage9.png

click to enlarge

-- 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:

Foswiki homepage10-collaboration.png

click to enlarge

Foswiki homepage10-edit.png

click to enlarge

-- 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 smile

-- 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:

Foswiki homepage10-edit2.png

click to enlarge

Foswiki homepage10-dynamic.png

click to enlarge

Foswiki homepage10-layout.png

click to enlarge

-- ArthurClemens - 22 May 2009

stop teasing us stick out tongue 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:

02k.png

click to enlarge

-- 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. wink

-- FranzJosefGigler - 02 Jun 2009

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

dialogix.jpg

click to enlarge

-- 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:

05.png

click to enlarge

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 smile

-- OliverKrueger - 03 Jul 2009

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

ThoughtFarmerSnap1.png

click to enlarge

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... smile

-- 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:

06c.png

click to enlarge

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:

07.png

click to enlarge

-- 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.

07b.png

click to enlarge

-- 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:

07d.png

click to enlarge

-- 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 wink

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 smile 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 smile

-- 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

07g.png

click to enlarge

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.

20091227 homepage.png

click to enlarge

A non-view page:

20091227 attach.png

click to enlarge

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

20091227 FormattedSearch.png

click to enlarge

-- 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
 
I Attachment Action Size Date Who Comment
01_colors_green.jpgjpg 01_colors_green.jpg manage 240 K 12 May 2009 - 07:39 MichaelDaum  
02e.pngpng 02e.png manage 176 K 31 May 2009 - 12:56 ArthurClemens Homepage redesign around benefits block
02i.pngpng 02i.png manage 180 K 31 May 2009 - 22:46 ArthurClemens  
02j.pngpng 02j.png manage 172 K 01 Jun 2009 - 21:55 ArthurClemens  
02k.pngpng 02k.png manage 166 K 02 Jun 2009 - 11:22 ArthurClemens  
05.pngpng 05.png manage 130 K 27 Jun 2009 - 20:09 ArthurClemens  
06c.pngpng 06c.png manage 156 K 11 Jul 2009 - 10:42 ArthurClemens  
07.pngpng 07.png manage 150 K 12 Jul 2009 - 12:03 ArthurClemens  
07b.pngpng 07b.png manage 151 K 12 Jul 2009 - 15:33 ArthurClemens  
07c.pngpng 07c.png manage 151 K 12 Jul 2009 - 19:00 ArthurClemens  
07d.pngpng 07d.png manage 161 K 12 Jul 2009 - 20:46 ArthurClemens  
07g.pngpng 07g.png manage 190 K 20 Sep 2009 - 13:03 ArthurClemens  
1_Homepage-green.jpgjpg 1_Homepage-green.jpg manage 175 K 12 May 2009 - 07:39 MichaelDaum  
1_homepage.jpgjpg 1_homepage.jpg manage 154 K 12 May 2009 - 07:40 MichaelDaum  
1_screenBlue.jpgjpg 1_screenBlue.jpg manage 244 K 12 May 2009 - 07:39 MichaelDaum  
20091227_FormattedSearch.pngpng 20091227_FormattedSearch.png manage 144 K 27 Dec 2009 - 21:14 ArthurClemens  
20091227_attach.pngpng 20091227_attach.png manage 80 K 27 Dec 2009 - 21:14 ArthurClemens  
20091227_homepage.pngpng 20091227_homepage.png manage 289 K 27 Dec 2009 - 21:13 ArthurClemens  
2_Homepage.jpgjpg 2_Homepage.jpg manage 333 K 12 May 2009 - 07:41 MichaelDaum  
Foswiki_homepage10-collaboration.pngpng Foswiki_homepage10-collaboration.png manage 206 K 22 May 2009 - 20:29 ArthurClemens  
Foswiki_homepage10-dynamic.pngpng Foswiki_homepage10-dynamic.png manage 72 K 22 May 2009 - 20:36 ArthurClemens  
Foswiki_homepage10-edit.pngpng Foswiki_homepage10-edit.png manage 178 K 21 May 2009 - 21:53 ArthurClemens  
Foswiki_homepage10-edit2.pngpng Foswiki_homepage10-edit2.png manage 180 K 22 May 2009 - 20:29 ArthurClemens  
Foswiki_homepage10-layout.pngpng Foswiki_homepage10-layout.png manage 101 K 22 May 2009 - 21:58 ArthurClemens  
Foswiki_homepage6.pngpng Foswiki_homepage6.png manage 173 K 17 May 2009 - 19:36 ArthurClemens  
Foswiki_homepage8.pngpng Foswiki_homepage8.png manage 171 K 20 May 2009 - 07:13 ArthurClemens Large visual
Foswiki_homepage9.pngpng Foswiki_homepage9.png manage 205 K 20 May 2009 - 23:57 ArthurClemens  
Homepage_patch_plan.pngpng Homepage_patch_plan.png manage 142 K 13 May 2009 - 08:56 ArthurClemens  
ThoughtFarmerSnap1.pngpng ThoughtFarmerSnap1.png manage 361 K 03 Jul 2009 - 20:58 MichaelDaum another example
dialogix.jpgjpg dialogix.jpg manage 34 K 04 Jun 2009 - 13:49 MichaelDaum http://www.dialogix.com.au/
Topic revision: r81 - 30 Jul 2010, ArthurClemens
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy