ABOUT THE PROJECT
At the time of the proposal, XWiki didn't have a responsive skin. The goal was to investigate several frameworks in order to integrate a mobile-first framework into XWiki's platform. XWiki is an extensible open source platform for developing collaborative applications on top of the wiki paradigm.
The Junco skin played a double role: being a technical prototype for the Twitter Bootstrap framework integration inside XWiki, and providing a new homepage for XWiki.org's website.
Desktop View
Tablet View + Mobile View
COMPONENT: Carousel
As part of the homepage design process, I've also proposed a nested cube approach to showcase the structure of XWiki projects, that are flexible, extensible and built on top of each other. I've created the cubes using Inkscape and coded the animations in CSS.
CSS Animations & Carousel entries
COMPONENT: Documentation
The following is an example of documentation page that can be found on the site. The images showcase different skin components (typography, code macro, message macro, etc.)
MY ROLE
From a technical perspective, I was responsible of investigating multiple responsive front-end frameworks, selecting one and analysing how hard would be to integrate it inside XWiki's platform.
I've implemented the Junco skin as a technical prototype, analysing the integration of the Twitter Bootstrap framework, the LESS language, the Bootswatch themes and Font Awesome inside XWiki, while also analysing the switch to HTML5 doctype.
From a design perspective, I was responsible of making the design proposals for XWiki's website skin. This included the homepage, a documentation page example and how the website will behave when viewed on multiple resolutions.
I've used Junco as a practical example and redesigned on top of it XWiki.org's homepage. The main objective was to provide a responsive homepage that highlights XWiki's projects, extensions and the community behind it.
After successfully analysing the integration and providing the homepage example based on the Junco skin, the Twitter Bootstrap integration became part of XWiki's roadmap and additional developers were assigned to achieve this objective. This resulted in the creation of the Flamingo skin, which has Junco as its technical precursor.
I prefer to interact and create the design in the environment it will live in, so I usually code my proposals directly in HTML+CSS.
These design proposals are discussed inside the XWiki Community, which is an Open Source community around the XWiki platform.
