Modernize Pattern Skin

The PatternSkin has a professional look. Skins follow a fashion cycle. We could tweak the skin a bit to make it look very modern. A low hanging fruit is to do something with the currently empty banner.

How about adding a subtle background image? Inspired by the MediaWiki look, I created this background banner that gives a modern look and also conveys the TWikiLogos branding message. This propsal is tracked in Bugs:Item748.

Banner background, to be right justified on banner:

Here is a screen mockup:

-- PeterThoeny - 22 Oct 2005

I think by modern you mean trendy.

If you think the space is too empty, why not think up a good idea for it?

The graphic as is is not appealing enough.

• I like it, in that it is in the background, non intrusive. -- AntonAylward

-- ArthurClemens - 22 Oct 2005

Modern design: http://ma.gnolia.com/ and http://www.alistapart.com/

-- ArthurClemens - 22 Oct 2005

It is also possible to remove the top bar (for twiki.org) and have the logo in the left bar (top).

• Can you do a Cookbook entry for that please? -- AntonAylward
  • The cookbook entry is at: http://develop.twiki.org:80/~develop/cgi-bin/view/TWiki/PatternSkinCssCookbookNoTopBar -- ArthurClemens - 24 Oct 2005

-- ArthurClemens - 22 Oct 2005

Yes, trendy is a better word.

The graphic I created is food for thought. An artist can create something much better than I can.

-- PeterThoeny - 23 Oct 2005

I enjoy playing around with graphic ideas as much as the next person - but our efforts at creating a logo has convinced me that our efforts would be better spent attracting more real graphics artists to the TWiki platform. ArthurClemens, MichaelDaum and a few others have helped raise our standards but it would be great to have a larger representation of that skill set in our community. Towards that end, I'm starting a conversation for AttractingGraphicArtists.

-- LynnwoodBrown - 23 Oct 2005

We need something of more contrast up there. The above Ts are too sallow.

What about this:

IMHO, the TWiki logo is fine in TWiki.WebHome but rather poor in the top bar, in especially because it doesn't look good on a non-white background. Rather than repeating the logo in the top bar (where it will be replaced by a company's logo anyway) I'd suggest to put the %WIKITOOLNAME% up there.

Here's the css mockup:

#patternTopBar {
  background:#FAF7E8;
  height:80px;
  background-image:url(SepiaFieldBar.jpg); 
  background-repeat:no-repeat;
  background-position:top left;
  border-bottom:5px solid #E2DCC8;
}

.patternTopBarLogo img {
  display:none;
}
.patternTopBarLogo {
  margin-top:25px;
  display:block;
}
.patternTopBarLogo:before {
  content:"TWiki";
  font-family:"Lucida Grande", verdana, arial, sans-serif;
  font-size:45px;
  color:white;
  font-weight:bold;
  text-shadow:1px 1px 1px black;
}

-- MichaelDaum - 23 Nov 2005

Yes, of course you can put an image up there. But what does it reveal? Try to find something that is about TWiki.

And the logo should be fitted in as well.

-- ArthurClemens - 23 Nov 2005

What are you talking about: the default appearance shipped with TWiki/Dakar or the TWiki.org appearance? In the first case we need something that's simply nice without carrying any further burden. In the second case we need something that imparts the twiki message. Please, please, please make this two separate issues.

Just for a moment, forget about symbolism, as this topic is about modernizing PatternSkin.

-- MichaelDaum - 23 Nov 2005

If this topic is about providing functionality, here's the documentation topic: http://develop.twiki.org/~develop/cgi-bin/view/TWiki/PatternSkinCssCookbookTopBarBackgroundImage

If it is about branding TWiki, this topic has the wrong name. So indeed, these are separate issues.

-- ArthurClemens - 23 Nov 2005

And as you can see the logo looks very bad on that page. What do you recommend then?

-- MichaelDaum - 23 Nov 2005

For TWiki branding: something along these lines perhaps - using the balloon pointer as cut-out shape:

This is a proposal, the image is not final - altough I do like the symbolism.

The documentation topic PatternSkinCssCookbookTopBarBackgroundImage should be updated with a different logo, one that fits on a dark background, and perhaps a gradient background image.

-- ArthurClemens - 23 Nov 2005

Great!!! Use it.

What about a common place where header images shipped with TWiki can be access by any skin, like attaching them to TWiki.HeaderArt. Or shall we compile a separate ArtWorkContrib? Just an idea...

-- MichaelDaum - 24 Nov 2005

I kind of like it. Suggestion: Less contrast, e.g. lighter, and blue hue of sidebar instead of gray.

-- PeterThoeny - 24 Nov 2005

Arthur, can you attach the header image you were using in your screenshot. I'd like to see it in RL. I got the impression that the colors in the header art should have more constrast or be more colorful than the text area. Or match the darker part of the gradient.

-- MichaelDaum - 24 Nov 2005

I have uploaded the PNGs. The Illustrator ai file with the white shapes is too big though (1.2MB zipped).

-- ArthurClemens - 24 Nov 2005

Michael: My concern with a darker/stronger background image is that it draws attention away from the actual content, which is not desirable in a collaborative environment.

Here are some variations on Arthur's image. I tried to make the image more clear and more light. I also created striped images, alternating lighter and darker variations of the image. Two variations on that, 1 pixel high and 2 pixel high. My favorites are header-4.gif (very light solid background, gray) and header-4-1.gif (light striped background, 1 pixel, gray)

• header-3.gif - light solid background, gray:
  

• header-4.gif - very light solid background, gray: screenshot
  

• header-4-1.gif - light striped background, 1 pixel, gray: screenshot
  

• header-4-1c.gif - light striped background, 1 pixel, cyan: screenshot
  

• header-4-2.gif - light striped background, 2 pixel, gray: screenshot
  

-- PeterThoeny - 19 Dec 2005

I liked the striped version. For some reason, I like stripes. My main concern in this case if to give administrators the possibility of customizing their top bars, and not lose it after an upgrade.

The approach used in DakarRelease for TWikiPreferences, for example, is a good one. Parhaps the TWiki.WebTopBar could have

%<nop/>INCLUDE{"Main.WebTopBar" warn="<span class='patternTopBarLogo'><a href='%WEBLOGOURL%'><img src='%WEBLOGOIMG%' border='0' alt='%WEBLOGOALT%'/></a></span><!-- /patternTopBarLogo-->"}%

instead of

<span class="patternTopBarLogo"><a href="%WEBLOGOURL%"><img src="%WEBLOGOIMG%" border="0" alt="%WEBLOGOALT%"/></a></span><!-- /patternTopBarLogo-->

This way admins that customize their top bars won't lose it, and those who doen't will have a pretty default top bar.

-- AntonioTerceiro - 19 Dec 2005

For performance I would like to avoid another INCLUDE on every page.

-- PeterThoeny - 19 Dec 2005

The striped images are so light it is hard to tell what's on them. If the image contents should be hidden it is clearly not a good image.

I also don't find the straight borders an improvement, as they deprive the headers of any playfulness they had.

-- ArthurClemens - 20 Dec 2005

The idea of the straight lines was to show paper on a table, but I see your point. OK, new version based on your feedback:

• header-5-1.gif - lightly darkened striped background, 1 pixel, rounded borders: screenshot
  

I find this image acceptable, but almost too dark. I am open to other thoughts.

-- PeterThoeny - 20 Dec 2005

OK, I recreated the bg image with smoother color palette. Here is the 1px striped background gif image (color reduction with optimized octree and error diffusion)

See also png, jpg 4x, jpg 10x, and original unstriped png version. If needed, also the 1px mask.

-- PeterThoeny - 05 Jan 2006

I have made a combination of the webbgcolor and the image. To stand next to the webbgcolor, the image must not be too light. So I made a gradient for the lines, light at the left and transparent to the right.

Try out, not tested on other browsers: http://visiblearea.com/devtwiki/bin/view/Sandbox/ (and other webs for other colors).

-- ArthurClemens - 08 Jan 2006

Arthur, we are getting there. I like the gradual change from stripes to solid.

Feedback:

• I find the image color on the right a bit too dark, it draws the eyes away from the actual content
• I find the web color on the right too distractive, and somehow does not fit into the design.
• most of us at today's meeting liked the title bar in the WebLeftBar of the Cairo version

My 2c.

-- PeterThoeny - 08 Jan 2006

I have made some changes.

The above mentioned:

Without bgcolor, with web indicator and a bit lighter image:

-- ArthurClemens - 08 Jan 2006

I like the "Without bgcolor, with web indicator and a bit lighter image" very much!!

-- PeterThoeny - 08 Jan 2006

Small suggestion to make it very clear: In the title bar, call it "Sandbox web" or "Sandbox Web" instead of just "Sandbox".

-- PeterThoeny - 08 Jan 2006

Just a suggestion. DON'T.

-- AntonAylward - 08 Jan 2006