xuv's notebook

http://medialab-prado.es/article/ilgru_call_projects

Julien

Deswaef

Brussels

Belgium

http://xuv.be

Design with Git

SVG, git, inkscape, collaborative, distributed, graphical diff

Git is a distributed version control system now wildly used in the free software world to collaborate and keep track of source code. Since designers today use more and more code to create their work, they naturally turn to Git as a tool to manage their work in progress. The web design community is already making extensive use of sites like github to share code and libraries that improve their creative process.

With the project “Design with git”, the idea is to see how Git can be integrated more into a graphical designers workflow and create tools that would give a visual feedback of the design changes and collaborations on a specific project.

To be more concrete, would'nt it be nice to see the visual differences between two version of the same .svg file? This could also be applied to any other ascii/xml encoded design files. Could we add visual git commands to tools like Inkscape, for example, to help designers work on collaborative and distributed projects and encourage them to share and reuse their work. This could be applied to font, 3D, and layout design softwares also.

During the workshop, a specific GUI will be created and added as an extension of the Inkscape software. It will able the user to perform basic Git commands, navigate and manipulate a version tree, and display visual differences between two commits. Inkscape has been chosen because it is a poular software among font, web and/or graphic designers in general. It is also easily extensible and uses SVG as its default file format. But of course, the principles could be applied to any design software supporting text encoded files.

As a designer, we usually think in visual terms. Let's see how we could emulate the benefits of distributed source code in the rich colors of a designer's world.

With the project “Design with git”, the idea is to have Git as an integrated tool of a graphic designer's workflow and create the necessary interface elements that would give a visual feedback of the design changes, evolutions and collaborations on a specific project.

To be more concrete, wouldn't it be nice for a designer to see the visual differences between two version of the same .svg file (or any ascii/xml encoded file)?

We believe this could help them work on collaborative and distributed projects and encourage them to share more and reuse their own work.

As a designer, we usually think in visual terms. Let's see how we could emulate the benefits of distributed source code in the rich colors of a designer's world.

• Animating a git repository The successive commits during a 24 pages comic creation using Inkscape has been animated into a 2 min movie
• Terminal Grotesque is an open source font by Raphaël Bastide available on Github. Many design works by Raphaël are available on github which encourages collaborations and forking.
• Open Source Publishing, a graphic design studio using open source tools, has a git repository for all their projects.

Since version control systems work best with text, we are looking for file formats that are represented as such. Not that it's impossible to use a version control system with binary files. Though, to my knowledge, you get all the benefits from using it by using mainly text files. For example, a version control system can tell you exactly the differences between two version of the same text file and point you exactly where those differences are but it can only tell you that a binary file has been changed but not how.

So we are looking for design files that are represented in an open textual format. As an obvious basic examble, any html/CSS files work. For raster images, textual file formats are quite rare.

Here is a non-exhaustive list of open textal file formats used in design softwares:

• SVG
• ODG (Open Document Drawing)
• DXF
• OBJ
• ASCII STL
• WRL
• SFD (Fontforge)
• GLIF (Glyph Interchange Format)
• PS (Postscript)
• XPM (X Pixmap)
• ASCII PNM (Netpbm)
• ORA (Open Raster)
• SLA / SCD (Scribus)

SVG is a becoming a wildly used format. Most modern browsers can display it. The format has been around for quite a while and many (if not all) graphic softwares support it. It's also quite an easy human readable format.

Inkscape is also becoming a well respected graphic tool in the open source design community. It can import and export multiple graphic file formats. The interface is quite easy to apprehend and it uses SVG as a base file format. Inkscape is also extendable and uses python as scripting language. Inkscape is a tool used by webdesigners, illustrators, font designers and graphic designers in general.

Git is the trending version control system of today. His popularity (with websites like Github or Gitorious) and distributed capabilites make it a tool of choice for every designer concerned with efficient production workflow and collaboration.

As stated, SVG and Inkscape are already well interdependent. It seems obvious and almost trivial to integrate the features of Git within Inkscape.

• Have the basic Git commands available in the GUI (init, add, commit, branch, push, pull, merge,…)
• Have the commit history displayed as usable graph so the designer can go back in time and recall older versions.
• Build a special viewer that can display the differences between two commits in different ways.

I believe that the two weeks workshop at Medialab Prado is sufficient to build this specific extension of the Inkscape software, create the necessary GUI, gather enough experience from the different participants and test it in real conditions. The extension would then be ready to use in production environements and if proved useful, its principles could be later applied to any design software supporting text encoded files.

C/C++ programmer, Python programmer, Git guru, Inkscape user, Icon designer. Any person with experience in Inkscape development would be a ideal.

none

• Building roadmap of the project, discussing planning and features
• Reading the necessary developper documentation of Inkscape
• Implementing the basic functionnalites of the project (creating gui elements and basic git functionnalites)
• Implementing the graph viewer.
• Implementing the diff viewer.
• Testing it in real conditions.
• Publishing the Inkscape extension.

Git and Inskcape documentation

(a representation of the diff viewer)

Julien Deswaef is a designer working in the fields of the web, live video and free culture. He graduated from computer graphic design in ESA, Saint-Luc Brussels in 2000 and then worked for video post-production companies. He has been veejaying for more than 10 years with the art collectives Requiem4tv and The Metahub. Using free software as an ethical and practical choice, his works range from web design to product design, video installations and illustrations. For a couple years, he has been teaching drawing and computer graphics in different art schools in Brussels and he is a now a student of Patrick Pouillard at Beaux-Arts academy of Saint-Gilles.

The main goal behind this project is to encourage collaboration among the design community by easing the gap between distributed version control systems and graphic design tools. The benefits of using version control systems are clear to the programming community, but they require a visual adaptation to make the designer feel at home too. The visual representation of a collaboration could also push designers into unexpected areas of development.

The time-frame of the Medialab Prado workshop is sufficient to get this project started, tested and pushed into production. Due to the popularity of Git and Inkscape, this project could then spread quickly among the design community and be rapidly integrated into many designers' and their studio's workflow.

If this approched is proved to be right and productive, this could encourage others to port these features to other softwares and areas of graphic design.

Fluent in HTML/CSS/Javascript. Works only with open source design software on a Gnu/Linux system (Inkscape, Gimp, Blender). Basic python scripting capabilities. Processing user. Large experience in live video set up for different kinds of events.

Yes.