Lay the Wiki on its back on a flat surface, and pinch the skin at the loose part in the lower belly………
Only joking, as we know a wiki isn’t a furry woodland critter that makes a durable Davy Crockett style hat. A Wiki is a website, with pages that can be easily updated via an interface, using simplified mark-up language. We are using Confluence, a “simple, powerful wiki that lets you create and share pages, documents and rich content with your team.”
What is the Difference between Designing and Skinning?
I’d define skinning as styling pages that already exist, a bit like redecorating a hall with outdated floral borders along the skirting boards. Whereas design is a process, where every stage is considered, from conception to sign-off.
I have already written about when you should and shouldn’t re-skin a site, it is generally frowned upon unless fresh functionality is being added. Skinning a wiki is different; it is a way of creating a bespoke skin that is true to the branding of your company or institution.
Aims
- I wanted to approach the project as if I were designing for the corporate site. Even though I knew I would be working with pre existing code and structure, I still wanted to work from a finished design developed in Photoshop.
- I wanted to work with the same web fonts as the corporate site: Arial for headings and Verdana for regular text. Also to use consistent spacing, line-heights, link-colours etc
- I wanted to create a look and feel consistent with the GO portal, to contrive the semblance of a single application when navigating between the two.
Photoshop Designs
As noted in my previous post about GO, I’ve been determined to dispense with any conspicuous decoration, especially repeated background images and drop-shadows, I wanted the design to have a clear, utilitarian quality.
The wiki breadcrumb and dropdown menus match the tabs in GO. The background images are white PNGs with their alpha transparency set to 30%; the background colour of the header can be altered, and consequently the tab’s transparent background image appears as a tint of that colour.
An example of this colour effect with the skin applied to the mail system:
The wiki will include intranet sites for University departments; they will be accessed via customised GO panels. We intend these sub-sites to have visually interesting and instantly navigable homepages.
Applying the design to Confluence
I soon realised that my idealistic intentions were a little impractical, when I noted the amount of page layouts, and methods of displaying data that Confluence offered. To try to design up front for every consequence was naïve, so I decided to stick to the most basic layouts only, and then play it by ear.
Confluence has a whole heap of style sheets with many generations of classes. Without Firebug and the Web Developer toolbar for Firefox, it would have been like deciphering the riddle of the sphinx.
As designers tend to do, I started from the top. Getting the breadcrumb, search-bar and drop-down menus to look indistinguishable from GO, this seemed fairly straightforward; then I cross checked it in IE7 and Opera and I quickly remembered how much easier it is to style your own code.
After this I concentrated on the basics: headings, paragraphs, lists, links, tables and forms, really trying not to be drawn toward the more idiosyncratic elements. When I approached elements that were unconsidered in the preparatory stage, I tried to apply principles that were consistent with what I already had. I removed borders, margins and text indents that busied the page composition, defining spatial consistency and alignment.
Was I Successful?
Well I’m still trying to iron out some cross browser quirks, especially where elements are floated, and CSS attributes have been inherited in varying orders, so this question is slightly premature. This will be an ongoing project that will throw up conflicts as different departments evaluate how they want their content to be displayed.
Evaluating things from how it looks in Firefox, I’m fairly pleased with the results; the pages look less like Confluence pages, and more like Edge Hill web pages, but there are still many echoes of the default look and feel. I think I have been successful in spacing the layout so that the pages flow better, and are easier to speed-read and analyse at a glance.
Where Now?
- Internal faculty and departmental sites will gradually be moved into Confluence over the coming months replacing the current intranet.
- The skin will be adapted appropriately for other systems like online mail and Blackboard.
