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 project or even derive a larger project from an existing project,  making the work more advanced. Working in open source, however, also means working within the culture of open source. This means being equally open to an exchange of ideas in the community to make something more creative, user-friendly and flexible.  Open source software is often free and so is a world of support through the communities surrounding each piece of software. It’s main advantage is a lower total cost of ownership when compared with closed source and proprietary alternatives.

At GIZ and openIMIS, our diverse network of partners and collaborators means we work with a variety of software tools and platforms. This lack of standardized information output often results in licensing and compatibility issues when working across different groups. This manual intends to solve at least a part of this problem by outlining best practices we can follow to reduce friction as part of our collaboration experience at openIMIS. This guide also understands the advantages of using proprietary tools such as Microsoft or Adobe software and provides compromises without completely shifting your software stack. We recommend using desktop applications for creating documents and assets, however we know that some guidelines and rules prevent you from installing additional applications onto a device. In many of these cases, we provide alternatives such as using open formats or even offering online tools that can be used from a web browser.

Following these guidelines whenever possible will improve the interoperability across openIMIS contributors and partner projects, including other GIZ projects.  The goal for these guidelines is to provide a pragmatic approach in order to create an impact across the openIMIS open systems. Fully switching to open source is not likely or practical for many organisations and this guide provides best practises.

Open Formats

In a world where paper documents increasingly get replaced by electronic records, long term access to the data becomes critical. This is especially the case for legal contracts and government documents that stay valid and relevant over decades, or even longer. GIZ is also facing this challenge. Just as paper and pens have been available from multiple manufacturers and vendors , document file formats and the applications creating these file formats need to be supported by and available from multiple vendors. This guarantees long-term access to data, even if companies disappear, change their strategies or dramatically change their prices. The formats in which information is published can either be “open” or “closed”. Open format means the software and format are available to anyone, free of charge, and available for people to build into their own software and products without limitation set by intellectual property rights. Developers can use these to produce multiple software packages, services, and products by using these formats. 

Basically: A file’s format – the way that it’s saved and encoded – determines what you can do with it and which programs can open it.

A “closed” file format is one that is proprietary – that is, trademarked and therefore only to be used by those who have paid for the rights to use – and the specification is not publicly available or because the file format is proprietary and even though the specification has been made public, reuse is limited. Using proprietary file formats for which the specification is not publicly available can create dependence on third-party software or file format license holders. The latter type of closed format can cause significant challenges to reusing the information encoded in it, forcing those who wish to use the information to buy the necessary software.

The openIMIS project will be primarily focused on image and text documentation purposes. This includes branding assets, marketing material, and communication kits. Vector files should always be stored as .svg instead of the proprietary .ai (limited to being used only in Adobe Illustrator). In this case, .svg is the open format that can easily be read and modified without vendor lock-in or being inaccessible due to license losses. As it is at its essence a version of XML, it can be modified without even using a GUI application such as Inkscape.

Converting proprietary formats to open formats

The application you used to create the original file will let you save it as something else. 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 standardized process converting proprietary formats to open formats. It always depends on the complexity of 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. 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.

File Conversion Tools

There are many online (and not only) platforms that can help you to convert open formats. In this section, we will present some ways you can convert open formats in your desktop software, online platforms and even using terminal for people that would love to pick up some new skills while working on the projects.

LibreOffice

While using LibreOffice, you can convert files manually by using the Save As option and choosing the format. You can also convert files directly in the terminal.

You can run LibreOffice from 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:

soffice --headless --convert-to pdf mySlides.odp

You would have to replace pdf with the extension of what file format you want to convert to. If we go into details and you don’t want LibreOffice to open an empty window on your desktop you can enter the --headless option.

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 LibreOffice Writer format, you'd type:

soffice --headless --convert-to odt *.docx

The conversion takes far less time than opening all files in LibreOffice Writer and doing the conversion manually.

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, for example, add a table of contents, typographic quotes, custom headers, and syntax highlighting to the resulting file. Take a look at Pandoc's documentation for details and the open formats it allows you to convert.

Zamzar

Zamzar is an online file conversion platform that lets you convert documents, images, videos, sound, and many more open formats. 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 grayscale 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, it's automatically protected by copyright. This means that you retain all rights to your source code and nobody else may reproduce, distribute, or create derivative works from your work.

It may also lead to no one using your code, which defeats the purpose of sharing it.

So, if you want to share your work, but also want to protect it in some way, it's important to know and consider the licensing options available for your work.

Creative Common Licenses

The Creative Commons is a movement that was started by Stanford law professor Lawrence Lessig to encourage creative people to offer up their creative works – protected by copyright law – for others to legally build upon and share, including text, music, pictures, and video.

Creative Commons licenses are easy-to-understand copyright licenses that allow creators of content to communicate which rights they reserve and which rights they waive for the benefit of other users. Creative Commons licenses don't replace copyright, but they do mean that you don't have to negotiate individually over specific rights for pieces of content. Crucially, the license was designed specifically to work with the internet, 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 or audio) used in software projects. If you are still not 100 percent sure which license you want to use, you can use the Creative Commons tool.

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 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 attribute you to the original work, 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 practices for openIMIS content

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

Creating design assets for openIMIS

There are lots of tools available to create visual assets (graphics) for any need. While the current industry standard is Adobe Creative Cloud, we try to keep proprietary software to a minimum. When this was not possible or difficult, the minimum we aim for open formats. 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

GIMP

GIMP is a free and open-source raster 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 further offers a Wiki page where it gives explanations and detailed information as to how to use and understand the product.

GIMP is the first alternative software to Adobe Photoshop, recommended for creation of raster graphics for the openIMIS project. It outputs open format files, it's extensible, flexible, and easy to use. The latest version of GIMP provides several new features with an easier-to-use UI.

GIMP can also open and work with PSD (Adobe Photoshop files), but with a reduced feature set and less-than-ideal end results. GIMP may not preserve all text information or layer styles but if you have no access to Photoshop it might be a good enough solution.

We recommend outputting to XCF (GIMP files) so they can be shared and reused easily in the future.

Inkscape

Inkscape is a free and open-source vector graphics editor. This multi-platform can be used to create or edit vector graphics such as illustrations, diagrams, line arts, charts, logos, icons, and complex paintings. Inkscape's primary vector graphics format is 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 openIMIS project. It can output SVG files and PNG raster graphics. The interface is friendly and not bloated with features: Almost everything is accessible from a single drop down menu or icon.

This is going to be the software that openIMIS 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 we recommend. Try it and start building up some knowledge and experience around the software. If it’s not a suitable option for your needs, 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 formats 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.

Diagrams.net

Diagrams.net (formerly draw.io) is an open source online platform created to help you design flowcharts, process diagrams, org charts, UML, ER diagrams, network diagrams and much more. You can create your own custom shape libraries or use their large collection of shape libraries which offer hundreds of visual elements, making it plain and easy working with metadata to pack more useful information into your diagrams.

With numerous shape libraries offering hundreds of visual elements, Diagrams.net covers every use case you can think of for creating diagrams by embedding them within Confluence and Jira.

Draw.io lets you import and export files into open formats 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

While not specifically exclusive to design, text documents are a crucial part of openIMIS work processes and often require tight compatibility with design tools. Whilst these formats are often overlapping, we will go through the primary types of documents which often have an impact on how design processes are too.

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, free suite of office products while Microsoft Office is a commercial office suite product package that requires users to purchase a license. Both will run on multiple platforms and both offer similar functionality.

However, running Microsoft Office on Linux is not possible.

LibreOffice Impress

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

Impress provides all the common multimedia presentation tools, such as special effects, animation, 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 Microsoft PowerPoint file format and can also save your work in numerous graphics formats, including Macromedia Flash (SWF).

Confluence

Confluence is a online proprietary publishing platform, purpose-built for growing teams that need a secure and reliable base from which to collaborate on projects. 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 make quick collaborative documents. It offers different possibilities where you can work your project on and expand it. Cryptpad offers a writing pad where you can import and export your paper in .html format or .doc format. 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 so you can keep track of your To Do list. Everything is compatible with open formats if you want to export them and attach into different projects to share them 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 and 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).

Design Resources

Fonts

The Open Font Library contains over 6,000 individual fonts from over 250 contributors giving you a guidebook to understand how to actually design a font, what formats and licenses are supported, how to submit 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 OFL (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL) and host their source files on GitHub.

FontSpace is a font download site where you can filter fonts to your use but only those available under an open license.

Font Squirrel is another general hosting site for fonts, all of which are free for commercial use, but 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 and extensive catalog designed for use with their API service, where you can integrate open fonts into your own projects and it comes in 135 different languages. Please note that embedding Google Fonts in your website might have privacy implications. You should consider not using the Google Fonts CDN but host the fonts you want yourself.

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

Illustrations

unDraw is created to help you with a set of illustrations for your project where you can customize them completely free. You can color manage directly from the website or you can download them in copyright-free SVG files for your customed 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 and use them for free in a commercial or non-commercial way for your landing pages, blog posts, newsletters and many other projects. If you want customized illustrations, Many Pixels offers a team of designers to assist you in any private projects you want to develop.

Vivid.js is focused in developers, mainly for JavaScript Devs. 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 ca be download and customized as per needs in different designing software like Photoshop and Sketch as well. They have a well explained documentation on their GitHub page so you can follow the guide step by step.

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 giving you the possibility to download between illustrations presented there.

Delesign is a provider with illustrations, logos, icons and many more designs where you can search and customize them after your project's 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 costumized logo only for your project and you can find the assets on GitHub too.

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

Vector Graphics

Vector Creator is made for everyone who is new to the design world and wants to learn how to create customed illustrations. Vector Creator has it's own forum where you can be a part off and share your thoughts on different topics.

Publicdomainvectors.org offers copyright-free vector images accessible in .eps, .svg, .ai and .cdr formats. Between 65,000 vector images in public domain you can choose and are free to edit, distribute and use the images for unlimited commercial purposes. You can also generate your own customized vectors in their own svg generator.

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

Vectr lets you to 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 edit 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. Every single image uploaded to Unsplash is an image that you can use in any activity and vise versa.
It provides an API for developers that allows them to access the uploaded images programmatically 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 size you choose by yourself.

Flickr community is one of the biggest hosting sites for open images. While searching for your unit you can also choose between licenses you need and in different sizes of the image.

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

Open Source Design Community

Open Source Design is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. This community writes articles, runs a job board, puts on events, provides resources, and presents talks targeted at developers and designers interested in working and designing in Open Source.

They have a forum where everyone is welcomed to ask question, have discussions or even contribute in open projects. If you would like to get involved with the projects and the community, the forum is the place to start.