!!! Mediawiki has been upgraded !!!
Slack integration has been disabled for now due to an incompatibility.
If you want to testdrive the new skin (Tweeki), make sure your language settings are set to 'en - English' in your preferences!

Wiki Skin

From Brixel - Hackerspace Hasselt
Jump to: navigation, search

Project: Wiki Skin
Description: Wiki Skin
Status: New
Participants: Woutervdn
Edit tags: Wiki Skin

We started out using a MediaWiki because it had a lot of functionality and is pretty save. We opted that our public website should not be our wiki since the wiki wasn't polished enough.

The problem was that we didn't want a separate "frontend"-website with CMS either. Therefor Wouter built the Plain-Practical-PHP-Page-Parser. Although this was a novel idea, it doesn't work as we'd want it to.

Recently Johan came up with the idea to overhaul our wiki into something a bit more attractive. Wouter thinks this is a great idea and decided to think about it.


  • Never made a wiki template
  • We want to ditch PPPPP and use this for real
  • Wiki's are ugly and information on how to make it more beautiful kinda sucks


  • Build something beautiful

Assessing the current wiki pages and structures

The current setup of the wiki layout "works" for editor purposes. But it isn't fun or nice to browse (compare to medium.com for example). Before we start to see what we can change, lets take a look at what is there.

the wiki template


the template logo

As with most websites, the logo is on the top left. it enables users to know on which website they are. Also, clicking on the logo will, most of the time, bring you back to the main page of that website.


the template sidebar

Underneath the logo we find the sidebar which is, on our wiki, the main source of navigation. Most of the time the main navigation is in a horizontal top bar but since we've got a lot of links, the sidebar makes sense.

Top Settings & User Bar

Top bar with settings and user bar

The top bar is a bar with general settings it's pretty much out of the way where it doesn't distract. This is a good thing since we don't need to access it often anyway.

Page with Page Tabs

the real content area with tabs

This is the main area of the website where the actual content of that page comes in to play. Generally speaking we want this part of the page to be only about the content and not about anything else.

Since the wiki has a lot of edit functions, the main area is accompanied with a top menu that allows for editing etc. This however should not distract from the main target: reading what's on the page.


the template footer

The wiki footer is a general purpose footer with some page information and site information.

Thinking about UX and page design principles


One of the problems with our current theme is that it isn't responsive. This is a problem, especially since we use mobile devices more and more these days.

The overhauled wiki should, without a doubt be responsive

UX - Feel

The current theme has a fairly Spartan feel to it: you click => you go to another page => that page gets rendered with new content. Nothing pops, appears or is hidden from the eye.

This is both a benefit and a disadvantage. On the one hand you can see everything with the glance of an eye, on the other hand our page looks always cluttered. Making certain objects appear only when they are needed is a big advantage for us.

A little javascript wouldn't hurt.

UI - Look

The general look of our theme should scream: new and innovation. Instead the current version screams: OLD and 90S.

Flat Design or Rounded Corners,... there are a lot of things to choose. What is a good question though is if we want to give images a prominent spot in our design or not.

Also, the page looks pretty cluttered at the moment. We can ask ourselves if it wouldn't be better to put the main navigation in a horizontal bar. Or maybe we can hide the sidebar like Medium.com does.

To make our website look more un-cluttered we could also group the top-settings-and-user-bar as well as the page-edit-tabs in to 1 button and only reveal it's contents when you hover over them.

All in all I think we should focus on people READING our text, they should have the best experience. The people editing the text shouldn't be left in the cold, but for every 1 edit we want X people to read what's on that page


Some things are not where they should be in my opinion.

  • The last time a page was edited shouldn't be in the footer but right underneath the main-body.
  • Most of the links in "tools" are pretty much unused and all of them are mostly useful for people editing the page. They should appear as a "page tools" button right next to the "edit page" button.


No remarks at the moment...

Making the wireframe

I'm doubting between 2 ways of handling navigation either do it like most sites with a horizontal menubar like :

Or do it with a hidden sidebar like:

Both have their benefits, but in case of the medium approach, we should make absolutely sure that everybody knows that the menu is their (on Medium you have to press the M button, we need something more obvious).

All groups of buttons/links should be GROUPED under 1 button: DECLUTTER!

Tables in the main area should be handled differently. Make them fixed so they scroll with the page (like the mozilla developers page).

Making the design

Design to HTML

Wikify the html