↖ back to jolocom.io

Growing list of open source design resources

Guides  •  
Nov 26, 2019
 • logged_by: Iryna

Since humbly launching in February this year, #DWebDesign became an important part of #DWebBLN meetups and is on a mission to bring back variety in design and rescue emerging Web 3.0 industries from visual sameness.

For our 3rd design meetup we decided to go beyond the topic of communication through interfaces, and also replace our traditional event recap with a list of open source design resources that we will be constantly updating.


‧ ‧ ‧


After announcing the event, we started receiving the same question from the design communities: ” What is the difference between open source design and designing for open source?”

Such a good question!

Open-source design — is a design artifact (library, guide, font, code) that is published under an open source license, and is [usually] available on GitHub in the form of source files that can be modified freely.

Examples:
Google Fonts, few font foundries, Firefox Browser, Unsplash etc.
In other words: you may work at any company and still use open source design tools and resources.

Design for open source — the process of making an open source project more human-centered, better functioning or better looking (in terms of brand communication) without retaining intellectual property of design artifacts.


To cover both facets of this “design + open source” topic, we invited two speakers to discuss…

  • designing for open source projects:
    Eileen Wagner—a designer and researcher at Simply Secure with extensive experience advising open source teams and organizations on UX design, research and user testing — she also produces open source resources to support the design community. With a focus on security and decentralization, Eileen is on the core team of Open Source Design.
  • the incentives behind designing and licensing resources that are open source…
    Martin Wecke—a designer and developer working on projects that lie at the intersection where “design meets technology”.
Impressions from the hilarious talk by Eileen

Event notes

Taking into the account that most open source projects are created and driven by developers and are equally very often distributed/remote teams, if you are a designer who recently joined an open source project, there are few communication tips for you to follow:

  1. make yourself comfortable with GitHub — most decision-making conversations happen there;
  2. get familiar with the ‘itch-to-scratch model’ and practice how to communicate against it (the idea is that open source projects start because someone, somewhere, sees a problem — the itch — and they start programming their way to a solution — the scratch. In contrast, when joining a project, designers should provide a holistic view on the problem).
    → Further reading: The Cathedral and the Bazaar, essay by Eric S. Raymond about how building cathedrals take years of planing, while bazaars are built stand-by-stand (think “feature-by-feature,” as is the case for many open-source projects);
  3. learn how to design for customizability — the main value of open source software, and know when to vote against customizability investment.

As a designer for open source projects…

  1. use Open Standards for deliverables;
  2. write for different levels of expertise — have the same content explained for design teams, dev teams, board members of the foundation, etc.
  3. build trust through visual identity — at this point having a solid visual identity and resonating with the community tone of voice will bring you more contributors;
  4. practice privacy-aware research: informed consent, minimized data, confidentiality, etc.

Try not to:

  1. track users;
  2. over-analyze competition (think coopetition, rather);
  3. put things in terms of “UX”/“usability” instead “design” to get traction within the team;
  4. aim for frictionless design (open-source concept should go with the relevant to the use-case amount of friction of the adoption and use).

Design terminology:
instead of […] use […]

“Branding” → “Identity and Values”
“Marketing” → “Outreach”
central decision making → group based decision making;
explain tech concepts to non-tech people → explain non-tech concepts to tech people.

Our favorite open-source design links

huge global libraries
Open Source Design
all “open source” posts on GitHub

for photos
Unsplash (license page)
Flickr Creative Commons

for fonts (our favorites)
Open Foundry
The League of Movable TypeUse & Modify
Velvetyne (we were surprised and very happy to have its founder among our attendees)
few more

for icons
IconMonstr (extra proud that this huge collection is created by a German artist)
Remix IconsIonicons

for illustrations
unDraw

if you want to start your own open source project
Open Source Guides

(link from our speaker)
if you want to join conversations by the Open Source Design community
start with Difficulties of design in open source

+ extra:
huge reading list of Academic Research on Usability in free and open-source software (FOSS)

What’s up next?

Thank you all for joining us at #DWebDesign! We saw how many of you were taking notes non-stop — it shows us how meaningful the talks were to the audience!

We’d also like to give special thanks to our partners & friends: Smashing Magazine for donating several copies of their first printed issue on Ethics and Privacy, the Sketch community for donating three FREE licenses and to Julius Drost for his incredible photography during the event.

Interested in getting involved?

→ join the meetup group #DWebBLN. If you are not based in Berlin and don’t have a DWebNode in your city (but damm! wish there was one!), you can start your own. Write me at [email protected].

→ want to share your design knowledge, know the next-best speaker, or have an idea to partner with us for the next DWebDesign meetup? Email us or just message me via Twitter (@IraNezhynska).

See you next time! 👋