From Fedora Project Wiki


   DESIGN HUB is a collaboration tool for designers. Designers need to collaborate with each other and with developers.This tool will be a great boon to the designer community since it establishes designer<=>designer collaboration , designer <=> developer collaboration and designer <=> community collaboration.

Need for Design Hub

For Developers, we have github,subversion etc., where they can share their work. However for designers, developers and community members there is no one site stop available to do the same.Through Design Hub , we try to solve three challenges , Designer-Designer Collaboration , Designer-Developer Collaboration, Designer-Community Collaboration simultaneously.

Designer-Developer Collaboration

   A git-backed facility to store mockups is needed for designers and which  can be easily adopted by designers through the git commands. Several designers working on same project should be able to know what changes the others are doing to the repo/mockup.

Designer-Community Collaboration

   For community members to just take a look at the project and give feedback on  the mockups,a canonical place should be available to give feedbacks and to have a tour through the project.

Relevant Experience gained

   I have forked the basic prototype  proposed by Emily and familiarised myself with the codebase. I previously  worked with a ruby-on-rails based web application for social learning -  I gained my experience in  javascript, using api’s with ruby on rails which are quite essential for current project.


   My primary goal would be to solve the three challenges i mentioned above efficiently .

Designer-Developer Collaboration :

   Using the existing Sparkleshare project which uses inodes to commit, a file can be committed whenever it is modified. Using this functionality along with ruby on rails framework, we can allow others designers to fork the current project and add it to their sparkleshare folder.

The first task would be to implement the functionality of [Add to SparkleShare] button.

Designer - Community Collaboration :

   The Community members should be able to give feedback pointing to different locations in the svg. Hence, Javascript and Comment model in ruby  for each  mockup file can serve the purpose.

Also , we need a aggregate feedback to be provided .To facilitate this feature I plan on using twitter, and various other api’s to retrieve the mentions and feedbacks of the mockup / design.

Designer - Designer Collaboration :

   Designers should be able to explain the mockup, create interactive mockups on the fly over the web.
   The task would be to implement a web-ui using ruby-on-rails front-end and coffeescript ( Magic Mockup ) and integrate them in the current application.

Further, There are few more exciting features that can be added to the project. They are Omni Authorisation with twitter, github and google. Tagging and Versioning support for the mockups.

   Tagging can be achieved easily in rails using ‘act_as_taggable_on’ gem and Versioning through SparkleShare and timestamps. 

Enabling Full Screen mode while editing svg’s online.

       Full Screen mode can be achieved through javascript.

Import Pre-existing SparkleShare Repos

Solve HTML svg object embed issues :

       Avoid cropping of images when svgs are embedded in  object mode.  simple javascript can be written to avoid this and use the ‘scalable’ properties of svg’s. Alternatively , we can use already written scripts such as svg edit, scala etc.,

-Printable PDF Mockup Booklets -Better Screen by Screen Thumbnails -Various git features such as Activity Log,History and Diffs

Timeline Of Progress

May 3 - 27 : Familiarise with third party gems and apis to be used in the project. Know more about designer community at Fedora. Contact fedora contributors for suggestions on implementations.

May 27 - Jun 17 : Build a basic prototype application which has the basic functionality and models. Discuss with mentors and come up with best implementations of the features to be implemented.

Jun 18 - 25 : Implement Omni Authorisation and SparkleShare invite button feature. Deploy the application on the cloud and invite few contributors to start using it.

Jun 25 - 30 : Work on Image Mapping and write reusable javascript for implementing flicker-style notes.

July 1 - 7 : Implement Forking and Pull support for projects.

July 7 - 20 : Integrate Magic Mockup with the project and work on refactoring the code to use it for rails.

July 21 - 30 : Implement Tagging and Versioning Features. Clean the UI and write carousels ,screen - by - screen thumbnail scripts.

July 30 - Aug 2 : MID TERM EVALUATION Complete Documentation for the features added so far.

Aug 2 - 15 : Depending on Mid Term Review , Make necessary changes to the timeline. Implement Pingback and aggregate feedback using twitter api and various other potential api’s.

Aug 15 - 30 : Design a web-ui to select elements and layers from a mockup and the posts’ content to embed in a printable pdf mockup booklet.

Sept 1 - 16 : Write Consolidated tests to all the modules. Clean up code and write Complete Documentation.

Sept 17 - 23 : Rectify any bugs issued according to the feedback from other contributors.