Warning

As per Where, this page and ones related to themes should be moved to http://themes.tiki.org

I have been thinking about why we are all having so much trouble getting a set of temlates for our beloved Tiki that look "WOW!" and I think I have found the cause.

I thought it might be good to open a debate on a wiki page, to allow me to explore my ideas further and see if anyone else has some better ideas. So please add/delete/edit on this page.

The problem

However hard we all try we never seem to obtain that instant "WOW!" when somebody looks at a Tiki themes.

MLP's thoughts

[+]

Now the first thing I want to say is, I think, the recent work on themes is a real achievement and thanks to all those who have worked so hard to get us to where we are with some MUCH better looking default themes.

I don't want to denigrate all the hard work that has gone on recently, I want to start planning for even better things to come in 4.0 and 5.0.

I also understand that the design of a Tiki site is not really a primary concern to some of us. This is a point of view I also support, I have created some very useful;l; tools for people with the existing layout, and this is the acid test as far as I am concerned.

The fundamental cause of the problem

It has dawned on me that from a design perspective the fundamental problem with all our themes is the grid

If you come from an art-school back ground you will have attended many lectures on the subjects of "proportion" and "balance". But for the rest of us who decided to do some work at college, we have little theoretical training in these subjects. However we are all very sensitive to the design issues it raises, there is a natural proportion that we see all around us in nature even in our own bodies.

The ratio of the distance between our finger tips and wrist and the distance between our finger tips and elbow, it is a third. This proportion has been called the divine proportion it forms a fundamental part of the thinking of many great artists and designers throughout history.

Even with no formal art-school training we are all very sensitive to the proportions we find in a design.

A very important ratio is the so called "Golden Ratio" or "Divine Ratio" this has be the core part of the arts and played a major role since at least the Renaissance. Leonardo showed how this ratio can be used to divide up the human face, and maybe this is why we humans find the proportion appealing. Many books published in the 1500 to 1700 were laid out precisely to a grid based on this ratio. There is evidence that the Greeks built many of their buildings with this ratio at the center.

This Golden ratio is phi (you know from school days: 1.61... !)

So in its simplest form, a grid of "Divine" proportions would have a side column of width 38% and a main column width of 62%. (Take 100%, divide by 1.61 and round up)

The symptom : a droopy mustache

The result of the existing 3 col grid is best summarised as a "droopy mustache". Thin columns hanging down on each side of the central one, with a hat on top.

It is the grid that dominates the existing design. The fixed widths of the left and right columns dominate the layout completely. However a designer works on this grid, the unappealing nature of this grid dominates. Changing fonts, colors and adding graphics will not fix the fundamental problem. The proportions of the grid dominate.

There are many options for the grid to use. It is quite common for web designs to use a grid based on columns all with the same widths, often referred to as a symmetrical grid. In the example bellow I show a 1/3:1/3:1/3 grid.

The grid on the right is of more appealing proportions. You can see, in the example, the grid is not restrictive, elements on the page can overlap columns. This gives you options to "infer" the grid and provide interest, excitement and flexibility while working within the grid it self.

In the example above, I have tried to show how the basic 3 column grid can support and interesting collection of elements that span across a number of columns. But it is the balanced proportions of the grid that provide the foundation for a better design.

Grids used in content heavy websites - Newspapers

I feel it appropriate to consider many Tiki sites to be content heavy. This makes it inappropriate to consider design arrangements that use a lot of space and reduce the number of elements on the page to the minimum.

A useful area to examine is a similar content rich website - those of newspapers.

The traditions of newspaper design go back to the very early days of printing and design. Newspapers have been designed to present beautifully and clearly a lot of information. They have to do this every day and so have a very heightened understanding of the need for "automatic" layout based on a grid theme and formatting rules for the elements found on the page. This models quite a few aspects of the challenges of a Tiki web site layout.

In the world of newspaper print design, the has been a gradual decline in the use of the traditional 8 column grid and this is being replaced with a 6, or 7 column one.

The print version of the Guardian in the UK really shook up the newspaper world when is started to use a 5 column grid. Interestingly on the web Guardian.co.uk uses a fixed width 6 column grid.

The Times OnLine uses a basic two column grid with a Golden ratio.

The Telegraph is without a strong single grid and it leads to a confused feeling to the site. This is to be expected.

Fixed and Fluid - two ways to maintain the proportions of a web design

I am suggesting that to get the "WOW" we must ensure the proportions of the grid dominate what the viewer sees.

To obtain this dominance of the proportions of the grid, there are two options in web design:

A fixed width design - lots of debate is possible about what size screen to support, but a fixed width of 800-30 = 770 pixels is very common. The designer can then specify the columns in pixels and be reasonably confident of the proportions the viewer sees.
An fluid design - here we must define all our column widths in percentages. Obviously this presents a large challenge for web designers, they give up the ease of knowing the width of the page and provide a more accommodating layout for the viewer. One side point in these designs it is important to limit the length of a line of text. If a line of text is too long it seriously reduces the speed it is possible to read it. So a max-width defined in em should be included with this approach.

Not finished, I will add a lot more later ...

Some good examples

A design, by the design director of the New York Times Online, that puts an 8 column grid right to the front of the design http://www.subtraction.com/ He has a good presentation at http://www.scribd.com/doc/2402815/Grids-are-good-Design (Sorry! This document is not publicly available.)

My response

For many sites, the medium seems to have fit the message

When this page was made I (Gary/chibaguy) wrote a comment in reply (below), but the topic has come up again (fall 2012) so I wanted to respond in the page. In my opinion, if Tiki themes never look "WOW" (a claim I also disagree with, as there have been many examples of visually impressive Tiki sites), the problem isn't the tools and design flexibility Tiki provides. It's just because most Tiki sites apparently haven't placed a high priority on "looking WOW"; more often they are web sites for collaboration or for more utilitarian presentation of information, and function has been more important than form.

Design flexibility

In order for the design to be "WOW", certain conditions need to prevail. Here are some to do's:

Need to be even more flexible in Calendar - Not done
Need to be flexible on menus - Not done
Need to be more flexible to create tracker forms with any layout - Not done

The moustache isn't mandatory

The concept of a main center column along with side columns for information modules originated as a portal/collaboration layout where this makes sense. If it produces a "droopy moustache", that didn't seem to bother the site users. The key point, though, is that a Tiki site can avoid the look simply by changing the column widths, turning off one or both columns, putting the modules in or above or below the main content, using a grid layout in the main content area, or making any of a number of other layout choices. Tiki has a lot of layout flexibility, arguably as much as or more than any other CMS or wiki software.

Theme demo is misleading

A reason Tiki themes that are part of the package and available via themes.tiki.org may all "look the same" (in regard to "the droopy moustache") is because they're being demoed on a site where we don't take pains to vary the module configuation per theme, so (with the exception of modules that are theme-specific) they are all skins on the same bones, so to speak.

Imagination

The main point is, to go for a "WOW" appearance, just do it; don't stick with the installed theme or its proportions. Put a bunch of things in the Top Modules and/or Topbar Modules zones, or don't put anything there; don't use the side columns at all, or use them with some site features but not others; use a golden grid or other layout rather than the default one; use 960gs or another grid layout in the wikitext areas (including blogs and articles, etc.). It's possible now (though admittedly we could make it easier to specify the container class name). The bottom line, I think, is it comes down to imagination and some design ability, but this is true for any software.

That said, we want to continue to make Tiki easier to theme, but I think pretty much anything a designer wants to do is already possible.