All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

DocTeam/Wiki Design Rebrush

From TYPO3Wiki
Jump to: navigation, search
This page belongs to the Documentation Team (category DocTeam)

This page is dedicated to work on the rebrushing of the wiki!

notice - Draft

Change the {{draft}} marker to {{review}} when you need a reviewer for text and TypoScript. info


Specifications and related working sheets

  • Find meaningful thematic units for the menu items and place them right.

Aims for the new Design

Before we make a decision concerning the design, there are some questions to answer:

  • What do we want to use the wiki for? Should it be a kind of website? Or should it look like a wiki because it is used as a wiki?
  • Which elements ensure the typical look and feel of TYPO3? (The orange line, the navigation menu on the left, the logo, something else?)
  • Must the design of all TYPO3 sites really be the same? What needs to be identic in all sites? What could/should be different?

We also may think about the content:

  • Where are the several contents located? Are they well sorted or do they have a really chaotic structure?
  • Which portal has which kind of function? Is there some double content?
  • Is it possible to distinguish between the different portals so that the user always knows on which portal he is located and which functionality he can expect?
  • Which design elements and which look and feel is necessary to bring the special functionality of a particular portal out? (e.g forge, wiki,, etc.)

And then?

  • When we found out these things we can build a bridge between the functions and the design. So first let`s start with the functions. And let`s get familiar with the content structure of the wiki as well as all portals around.
  • Designing for so many people always is difficult because everyone has it`s own liking. The only way to satisfy the majority of people is to be able to explain why a design really needs to be like it is.


Without the orange bar by Sabine


With orange bar by Sabine


With orange bar by Fabien


With orange bar having the most important links and orange as active-state

Daniels iPad-drawing WikiDesign proposal (Klick to open PDF) (The application "Adobe idea" makes it possible to draw with the fingers)

Comments and Voting

I think this is good:

  • The way of presenting is a really amazing idea. (SHU)
  • The navigation bar is reasonalble like it is, because the important issues reside in the orange bar and not some things which aren`t used often. (SHU)
  • ...

I think this coud be changed:

  • I miss some thematic units. That means that each thematic unit should be differentiated from the others. (Could be done by colors or by positioning) (SHU)

To think about:

In my opinion it`s very important to let the wiki look like a wiki. Behold wikipedia. It is designed to have the association of a sheet of paper which comes into the picture from the right bottom edge. This connotation should be kept. So every person who comes to the wiki the first time knows what to expect from the site: A TYPO3 wiki which contains TYPO3 knowledge and which helps the community to organize the teamwork for high quality content generation. (SHU)

Besides we are used to find a sub navigation on the left side. (The left side is important and needs to stay darker to keep the association of the paper) (SHU)

The dropdown navigation brings all menu items to the orange bar. This makes the menü items clearly arranged, but now there is no clearly differetiation of the thematic units anymore. May there should stay a kind of navigation on the left? We should continue develop ideas. (SHU)

Orange extjs menu

Members and People

Sabine (Hueber)
sabine.hueber /
HTML/ CSS Design, Aims, Usability, new Design, defining the processes of usage
Fabien (Udriot)
fabien.udriot /
HTML/ CSS Design, Aims, Usability, new Design, defining the processes of usage
danielb /

email: replace / with @