Loading...
 

Why Tiki themes never look WOW

 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.

Image


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.

Image


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:

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

Further reading

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:

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.

Related links

alias

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools