GIZ Open Source Design Manual

Why design the Open Source way?

Open source is a form of licensing agreement that allows users to freely modify an existing project, generate a new one, or even derive a larger project from an existing one by enhancing the original work. Works that use these licenses are often made collaboratively. As open source has established itself, a culture of practices and norms have developed around the concept. At its best, open source culture enables the equal exchange of ideas within a community to harness group creativity, ease of use, and flexibility. Open source software is typically free of charge, and often so too is support, provided on a community-driven and best-effort basis. Using (as opposed to making) open source software often incurs a lower total cost of ownership than its closed source and proprietary alternatives.

At GIZ, our diverse network of partners and collaborators demands that we work with a variety of software tools and platforms. This diversity can result in incompatible standards and licenses being used, causing compatibility issues when working across different groups. This manual provides best practices for reducing friction and avoiding loss of work during collaboration, drawn from our experience at GIZ. This guide also understands the advantages of using proprietary products such as those provided by Microsoft and Adobe, and describes working compromises that minimize inconvenience and disruption. This guide provides recommendations for both desktop applications for creating documents and assets as well as web-based alternatives in case installing local software is not possible. We prioritise widely supported standardised data formats throughout.

The goal of these guidelines is to provide a pragmatic approach in order to enhance collaboration across the GIZ ecosystem. Following these guidelines will improve the interoperability across GIZ contributors and partner projects. We broke this down into three major areas:

1. Open Standards: Introduction and best practises pertaining open standards and file formats for best compatibility across the GIZ community

2. Software & Tools: Various software options for creating and converting design assets and documents while adhering open standards

3. Licensing: Introducing Creative Commons licenses to cover licensing guidelines for design assets and documents

Additionally, at the end of this manual we will provide a set of resources for design asset templates that respect guidelines and best practises outlined in this manual

Open Standards

As more documents go digital, we have to start thinking about how to maintain long-term access to that data. This is especially critical for documents that have lasting importance and significance, such as legal contracts and government documents. Choosing the file formats that can be read and supported by multiple software providers can help ensure long-term access to documents. Even if one provider disappears, changes strategy, or dramatically change their prices, the data remains accessible through other providers. The digital format in which information is stored can either be “open” or “closed”. An open standard is one that is available for everyone to use, free of charge, and capable of being built upon – for example into new software products, without any limitations. Developers can use these to produce multiple software packages, services, and products by using these formats. 

In short: A file’s format – the way that it’s saved and encoded – determines what data it can store, what you can do with it, and which programs can open it. You can read more about the definition of open standards on OpenSource.com.

A “closed” file format is one that is proprietary. Usually this means that the technical details of the format, including its specification, are secret and known only to its original creators. It may also mean that the format is protected by copyright, trademarks, or patents, and is therefore only usable by those who have obtained (purchased) the necessary rights – even if the specification has been made public. Using proprietary file formats can create dependence on third-party software or file format license owners. The latter type of closed format can cause significant challenges to reusing the information stored in it. Additional software or licensing may be required tomorrow in order to continue to access data which you create today.

The GIZ project will be primarily focused on image and text documentation processes. This includes branding assets, marketing materials, and communication kits. Vector files should always be stored as .svg instead of the proprietary .ai (limited to being used only by Adobe Illustrator). In this case, .svg is the open standard that can easily be read and modified without vendor lock-in or being inaccessible due to license losses. As it is basically a subset of another open standard called XML, it can be modified in a text editor, without a graphics user interface.

Converting proprietary formats to Open Standards

Often applications used to create data files support multiple data formats, allowing you to choose between them. If, for example, you’re viewing a document online in Google Docs, you can click File and Download to bring up a list of formats to which you can convert the document. These include Microsoft Word, PDF, and plain text.

There is no standardised process for converting proprietary formats to open standards. It always depends on the complexity of the format and the files, and varies from format to format. For example, converting a file from .ai to .svg using Adobe Illustrator may be as easy as exporting as .svg from the software, but sometimes something can go wrong in the process, which may go undetected until the results are closely inspected. These edge cases are the hardest ones to work around – usually an error in an .ai to .svg conversation may require rewriting or recreating the assets and then export them as .svg to ensure maximum compatibility.

Creating design assets for GIZ

There are lots of tools available to create visual assets (graphics) for any need. While the current industry standard is Adobe Creative Cloud, GIZ tries to keep proprietary software and standards to a minimum. When this was not possible or difficult, the minimum we aim for are open atandards. In the following, we will go through recommended tools, the various file formats they support, and limitations they pose in different conversion settings.

Recommended project formats are file formats we suggest to use as source files for assets, while recommended export formats are those we suggest for file outputs. For internal usage, please use recommended project formats to maintain a high level of compatibility across projects.

GIMP

GIMP is a free and open-source graphics editor used for image retouching and editing, free-form drawing, converting between different image formats, and more specialized tasks. GIMP can be used for opening and changing many types of file formats. GIMP is released under GPLv3+ licenses and is available for Linux, macOS, and Microsoft Windows. It also offers a Wiki page with explanations and detailed information as to how to use and understand the product.

GIMP is an alternative to Adobe Photoshop, recommended for creation of raster (non-vector) graphics. It outputs Open Standard files, it's extensible, flexible, and easy to use. The latest version of GIMP provides several new features with an easier-to-use user interface.

Inkscape

Inkscape is a free and open-source vector graphics editor. This multi-platform application can be used to create and edit vector graphics such as illustrations, diagrams, line arts, charts, logos, icons, and complex paintings. Inkscape's primary vector graphics format is the Open Standard Scalable Vector Graphics (SVG); however, many other formats can be imported and exported. It is licensed under the General Public License (GPL).

Inkscape is an open alternative to Adobe Illustrator and recommend for creation of vector graphics for the GIZ project. It can output SVG files and PNG raster graphics. The interface is relatively self-explanatory; almost everything is accessible from a single drop-down menu or icon.

This is going to be the software that GIZ will use the most to create digital assets, as its a well-supported project and the current version is stable. While there is plenty of other proprietary and/or Open Source software that can create SVGs (including Adobe Illustrator), Inkscape is the one that we recommend. Try it and start building up some experience with the software. If it’s not a suitable option for your needs, Adobe Illustrator can still be used, but keep in mind that output should only be in the SVG format.

LibreOffice Draw

LibreOffice Draw is a free and open source vector graphics editor. Draw lets you produce anything from a quick sketch to a complex plan and gives you the means to communicate with graphics or diagrams, flowcharts, and even technical drawings. It supports open standards that allow you to use documents from other programs so you don't have to isolate yourself or your workflow into a LibreOffice world. LibreOffice Draw uses Open Document Format for Office Applications (ODF) (.odg graphics extension) as its default output format as an international standard file format.

LibreOffice Draw can be useful to edit PDFs as an alternative to Adobe Acrobat. While text and font might not translate well, it often does the job when a small edit in a PDF is needed.

Diagrams.net

Diagrams.net (formerly draw.io) is an open source online platform created to help you design flowcharts, process diagrammes, organigrammes, UML, ER diagrammes, network diagrammes, and much more. You can create your own custom shape libraries or use their large collection of shape libraries. These offer hundreds of visual elements, making it simple and easy working with metadata to pack more useful information into your diagrammes. With numerous shape libraries offering hundreds of visual elements, Diagrams.net covers every use case you can think of for creating diagrammes by embedding them within Atlassian Confluence and Jira software.

Draw.io lets you import and export files into open standards such as .svg, .png, .jpeg, .pdf, and .xml.

We recommend using diagrams.net together with its native Confluence integration. Especially in situations where you might be unable to install software on your device. It can be used from the web browser and store files on the cloud or your device. While designed as a flowchart and diagrams application, it can also replace the need for a vector editor as Inkscape, especially for basic communication design tasks.

Publishing Documents

Open standards are not exclusive to design. Text documents are a crucial part of GIZ work processes and there are times when they have to be compatible with design tools. These formats often overlap, and we will go through the most important types of document formats, which can impact the design. In this guide, we will cover the primary types of documents that have an impact on design processes.

LibreOffice Writer

LibreOffice Writer is part of the open source LibreOffice suite and can export files to HTML, XHTML, XML, Adobe Portable Document Format (PDF), and several versions of Microsoft Word files.

The key difference between LibreOffice and Microsoft is that LibreOffice is an open source and free suite of office products, while Microsoft Office is a proprietary office suite that requires users to purchase a license. Both will run on multiple platforms, and both offer similar functionality – with the exception that Microsoft Office will not run natively on Linux.

LibreOffice Impress

LibreOffice Impress is a tool for creating multimedia presentations and slide shows.

Impress provides common multimedia presentation features, including special effects, animations, and drawing tools.

It is integrated with the advanced graphics capabilities of LibreOffice Draw and Math components. Slideshows can be further enhanced using Fontwork special effects texts, as well as sound and video clips. Impress is compatible with the Microsoft PowerPoint file format and can also save your work in numerous graphics formats, including Macromedia Flash (SWF).

Confluence

Confluence is an online proprietary publishing platform, designed for collaborative projects work. It is also compatible with multiple software or open platforms, from writing a document in markdown language to organizing team meetings in the same cloud. Confluence can be also used to convert office documents including but not limited to .docx and .odt file formats. This is ideal if you need to edit Microsoft Office or LibreOffice documents without any installed software while still avoiding Google services.

Cryptpad

Cryptpad is an online open source platform that helps you set up documents and that allow for collaboration. It offers a sheet pad and a presentation pad equivalent to LibreOffice Impress where you can export the file in an .md format.

If your project is more advanced, you can also use their pad for creating code files, a smart board where you can design your ideas, polls, or even a task manager that helps you keep track of your to-do list. Everything is compatible with Open Standards, so you can export and include them into different projects, share with your team, or even using an embedded code by attaching it in your file.

Cryptpad offers a drive where every record is stored, encrypted, and you can see all the projects you have been working on as well as other projects your teammates have shared with you.

Scribus

Scribus is free and open source desktop publishing software available for most desktop operating systems. It is designed for layout, typesetting, and preparation of files for professional-quality image-setting equipment. Scribus can also create animated and interactive PDF presentations and forms. Example uses include writing newspapers, brochures, newsletters, posters, and books. It is released under the GNU General Public License.

Scribus is an alternative software to Adobe InDesign, used for preparing brochures, lay-outing, print files etc. It can work with CMYK (used for print) and RGB (digital).

File Conversion Tools

There are many downloadable tools and online platforms that can help you to convert open standards. In this section, we will present some ways to do that in desktop software, online platforms, as well as in a command line.

LibreOffice

While using LibreOffice, you can convert files manually by using the Save As option and choosing the format.

You can use the command line to quickly convert one or more files. For example, to transform a LibreOffice Impress slide deck to PDF, you'd type the following:

You can pdf with the file extension of the format that you want if you need a different file format. The --headless option means LibreOffice will run only on the command line and exit after completing the requested task.

Turning to the command line is a great way to convert several files at once. If, for example, you want to convert all of the Microsoft Word documents in a folder to the Open Document Text format (used by LibreOffice Writer and many others) then you'd type:

The conversion takes far less time than opening all files in LibreOffice Writer and doing a manula file format conversion.

Pandoc

Pandoc is a software tool that allows you to convert various text markup files. It supports (among other) .pdf, .docs, and .odt. It offers a detailed guide with instructions for you to follow for installation and use.

You're not just limited to straight conversions. You can also add a table of contents, typographic quotes, custom headers, and/or syntax highlighting to the resulting file. Take a look at Pandoc's documentation for details and the Open Standards it allows you to convert.

Zamzar

Zamzar is an online file conversion platform that lets you convert documents, images, videos, sound, and many more to Open Standards. As you are not required to install it, you can use it from any browser, even mobile.

BatchPhoto Espresso

BatchPhoto Espresso is another free online image converter, which means you don't need to download any software to use it.

After uploading an image, BatchPhoto lets you choose another format to convert it into, resize, crop, and rotate it, as well as add special effects like grey scale conversion and swirl, overlay text, and adjust brightness, contrast, and sharpness, among other basic edits.

BatchPhoto Espresso also lets you rename the picture and choose a quality and size before saving it to your device. It can be used on any operating system that supports a web browser, including Windows, Linux, and macOS.

Licensing

When you create a piece of software, in most countries, it's automatically protected by copyright. This means that all rights to your work are protected by copyright and nobody else may reproduce, distribute, or create derivative works from your intellectual property without permission from the copyright holder (you).

This stops other people from using your work, and may lead to nobody using your work, which may defeat the purpose of sharing it. If you want to share your work, but also want to retain some degree of control, then it's important to choose the right license that controls how it may be used or shared.

Creative Commons Licenses

The Creative Commons is a family of licenses first created by Stanford law professor Lawrence Lessig to encourage creative people to offer up their creative works for others to legally build upon and share, including text, music, pictures, and video.

Creative Commons licenses are standardised, easy-to-understand, copyright licenses that allow creators of content to communicate which rights they reserve and which rights they give away for the benefit of others. Creative Commons licenses build upon, rather than replace, copyright. They mean you don't have to negotiate individually over specific rights for works you produce, and have been held up in courts of law. Crucially, the licenses were designed specifically for the digital space, so that content that is offered under the terms of the Creative Commons is easy to search for, discover, and use. Around 500 million works have been licensed under Creative Commons since it launched.

Creative Commons is not an appropriate license for software code. It is a better fit for creative assets (like images and audio) used in software projects. The Creative Commons tool provides convenient advice on which Creative Commons license to choose.

There are several types of Creative Commons Licenses such as:

Attribution (CC BY)

This lets other people distribute, remix, and build upon your work – even commercially – as long as they credit you. This is the most flexible of licenses.

Attribution-ShareAlike (CC BY-SA)

This lets other people distribute, remix, edit, and build upon your work – even commercially – as long as they credit you and license their new creations under the same terms. All new works based on yours will therefore have the same license. This is the license used by Wikipedia.

Attribution-NoDerivs (CC BY-ND)

This license allows for redistribution, commercial, and non-commercial, as long as it is not changed and is credited to you.

Attribution-NonCommercial (CC BY-NC)

This lets other people distribute, remix, and build upon your work as long as they credit you and don't use it for commercial projects – this means it cannot be sold or used for profit. The creator has to credit you with the original work, but they don't have to license the works that they created based on yours with the same terms.

Attribution-NonCommercial-ShareAlike (CC BY-NC-SA)

This lets other people distribute, remix, and build upon your work as long as they credit you and don't use it for commercial projects. They also have to license their new creations under identical terms.

Attribution-NonCommercial-NoDerivs (CC BY-NC-ND)

This license is the most restrictive, only allowing others to download your works and share them with others as long as they credit you, but they can't change them in any way or use them commercially.

Best licensing practises for GIZ content

For content (including graphics, video, audio, and similar creative assets) we use the Creative Commons Attribution-ShareAlike 4.0 International License. That ensures GIZ assets can be remixed by other users and creators, yet GIZ is credited and work that is based on our assets need to have the same license (so that others may benefit from the same freedoms in future).

Design Resources

Fonts

The Open Font Library contains more than 6,000 individual fonts from more than 250 contributors. It also gives you a guidebook to understand how to actually design a font, what formats and licenses are supported, how to submit a font, and also update them.

The League of Moveable Type is a community of font designers and creators who license their collection of fonts under the SIL Open Font License and host their source files on GitHub.

FontSpace is a website where you can download fonts. A filter helps you find the right one for you needs and can help you find the ones that are available under an open license.

Font Squirrel is another general hosting site for fonts, all of which are free for commercial use. The site enables you to specifically filter for Open Source licensed fonts if you choose. It also comes with a Font Identifier where you can upload your image and the generator matches the font for you.

Google Fonts has an extensive catalogue designed for use with their API service, where you can integrate open fonts into your own projects. Each font comes in 135 different languages. Please note that embedding Google Fonts in your website has privacy implications. You should consider not using the Google Fonts Content Delivery Network, and instead host the fonts you use on your own system.

Broble is also another open source font collection, where you can find open fonts to use for your projects. You can also submit your fonts and become part of the community.

Illustrations

unDraw is a sizeable collection of free vector illustrations. You can colour manage directly from the website or you can download them in copyright-free SVG files for your customised design.

IRA Design is a hosting site where you can create illustrations by using hand-drawn sketch components. IRA Design helps you scale your final illustrations by using .ai, .svg, or .png formats to bring your illustrations to life.

Many Pixels is an illustrations provider where you can download in a .png or .svg format file and use them for free in a commercial or non-commercial work for your landing pages, blog posts, newsletters, and many other projects. If you want customised illustrations, Many Pixels offers a team of designers to assist you in any project.

Vivid.js is focused on software developers. Vivid.js is a dynamic SVG icons library that is designed to give life to website designs by using html5 data attributes. Vivid.js SVG icons can be download and customised as needed in different designing software like Photoshop and even Sketch. They provide clear documentation on their GitHub page and you can follow their step-by-step guide.

Delesign is a provider with illustrations, logos, icons, and many more design elements. The search is useful and you can customise images to suit your brand.

Logobridge is a collection of unused logos all under Public Domain, so you are free to use them for your projects, commercially and non-commercially too. Logobridge also offers a customized logo design service.

Paper Illustrations is an illustration hosting site under Creative Commons license and it is also compatible in Sketch, Adobe, Office, and G Suite tools using the Icondrop plugin to give you access to a range of illustrations to choose from.

404 Illustrations is a website with different and funny illustrations and ideas for your 404 page. Every case is saved in a Google Drive folder, so you can download illustrations.

Vector Graphics

Vector Creator is made for everyone who is new to the design world and wants to learn how to create custom illustrations, with a helpful and supportive community.

Publicdomainvectors.org offers copyright-free vector images accessible in .eps, .svg, .ai, and .cdr formats. There are around 65,000 Public Domain vector images available to choose from and they are free to edit, distribute, as well as use for unlimited commercial purposes. You can also generate your own customised vectors in their own SVG generator.

Synfig is a free and Open Source vector creation software. Synfig lets you transform any vector shape into another by giving you tools to have full control over your artwork. It also lets you generate 2D animation without having to animate frame by frame. Synfig is cross-platform and works on Windows, OS X, Mac, and Linux. It is licensed under GNU GPL v3.

Vectr lets you quickly and intuitively create vector graphics. It is used to create 2D graphics and graphics for business cards, greeting cards, websites, illustrations, resumes, brochures, posters, presentations, and icons. It imports and edits SVGs and bitmaps that can be used as a background. It imports in .ai, .eps, .png, and .jpeg file formats.

Photography

Unsplash is one of the best hosting sites to get Open Source images. All images are free for any type of use. It provides an API for developers that allows them to access the uploaded images through an API, which is well documented and maintained.

Pexels allows you to download images in many predefined sizes, or the original image size, or even a custom sizes of your choice.

Flickr community is one of the biggest hosting sites for open images. While searching, you can also filter by license type or rights.

Smithsonian Open Access is the best hosting site if your project needs some 2D and 3D digital modelling. You can download, share, and reuse this collection of images and data from 19 Smithsonian's Museums, research centres, and archives.

Open Source Design Community

Open Source Design is a community of designers and developers who improve open design processes as well as improve the user experience of open source software. This community writes articles, lists jobs, runs events, and presents talks targeted at developers and designers interested in working on and designing in open source. This is an active and supportive community forum and is a great resource for learning more about Open Source.