<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/"><channel><title>Articles | Open Source Design</title><link>https://opensourcedesign.net/resources/articles/</link><description>Articles from the Open Source Design community: guides, essays, and reposts about designing in the open.</description><language>en</language><copyright>© 2026 Open Source Design. Content licensed under CC BY-SA 4.0.</copyright><lastBuildDate>Mon, 20 Jul 2026 18:44:37 +0000</lastBuildDate><generator>Hugo 0.164.0</generator><docs>https://www.rssboard.org/rss-specification</docs><atom:link href="https://opensourcedesign.net/resources/articles/feed.xml" rel="self" type="application/rss+xml"/><image><url>https://opensourcedesign.net/images/opensourcedesign-logo-icon.png</url><title>Open Source Design</title><link>https://opensourcedesign.net/</link><width>144</width><height>144</height></image><item><title>Beginners Guide to OPEN SOURCE Design via Victory Brown's Hashnode.dev page</title><link>https://opensourcedesign.net/resources/articles/beginners-guide/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/beginners-guide/</guid><pubDate>Mon, 02 Nov 2020 00:00:00 +0000</pubDate><dc:creator>Victory Brown</dc:creator><author>Victory Brown</author><description>Repost from Victory Brown’s Hashnode blog page. Victory Brown is an Open Source Design Community member Victory Brown about what it’s like to begin contributing to Open Source as a designer for the first time with advice, tips and tricks on how to make that experience successful.
An inspirational quote from the article at the end is one that most, if not all open source designer can share:
“For someone who had never heard of open source until recently, I’ve found it to be quite addictive, it’s my desire to have more designers join the community, improve and develop the open source space.</description><content:encoded>&lt;p&gt;Repost from Victory Brown&amp;rsquo;s Hashnode blog page. Victory Brown is an Open Source Design Community member &lt;a href="https://learnwithnie.hashnode.dev/beginners-guide-to-open-source-design"&gt;Victory Brown&lt;/a&gt; about what it&amp;rsquo;s like to begin contributing to Open Source as a designer for the first time with advice, tips and tricks on how to make that experience successful.&lt;/p&gt;
&lt;p&gt;An inspirational quote from the article at the end is one that most, if not all open source designer can share:&lt;/p&gt;
&lt;p&gt;&amp;ldquo;For someone who had never heard of open source until recently, I&amp;rsquo;ve found it to be quite addictive, it&amp;rsquo;s my desire to have more designers join the community, improve and develop the open source space.&lt;/p&gt;
&lt;p&gt;The open source community is waiting for what design initiatives can impact the entire software industry. The open source community is waiting for design minds like you. The future is not just Open, the future is Design.&amp;rdquo;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://learnwithnie.hashnode.dev/beginners-guide-to-open-source-design"&gt;View the article on Victory Brown&amp;rsquo;s hashnode.dev here&lt;/a&gt;&lt;/p&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/beginners-guide/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item><item><title>COVID-19 ILLUSTRATIONS</title><link>https://opensourcedesign.net/resources/articles/covid19-illustrations-2020/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/covid19-illustrations-2020/</guid><pubDate>Thu, 20 Aug 2020 00:00:00 +0000</pubDate><description> Based on recommendations from The World Health Organization and others, you’ll find symbols to communicate good hygiene and social distancing. While we can’t be like front line brave medical professionals across the globe, we hope these icons/illustrations aid in communicating some of the most important things people can do to protect themselves and their communities.</description><content:encoded>&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-cover_hu_186d1701c162930c.avif 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-cover_hu_a2b4831ad3b30804.avif 623w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-cover_hu_d2a9aa0e0fe639bb.webp 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-cover_hu_1a5194ea06bba9ea.webp 623w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-cover.png"
alt="A set of COVID-19 awareness icons"
loading="eager"
fetchpriority="high"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="623"
height="229"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;p&gt;Based on &lt;a href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019"&gt;recommendations from The World Health Organization&lt;/a&gt; and others, you’ll find symbols to communicate good hygiene and social distancing. While we can’t be like front line brave medical professionals across the globe, we hope these icons/illustrations aid in communicating some of the most important things people can do to protect themselves and their communities.&lt;/p&gt;
&lt;h2 id="free-covid-19-awareness-icons"&gt;Free COVID-19 Awareness Icons&lt;/h2&gt;
&lt;p&gt;All solid COVID-19 illustrations are available &lt;a href="https://app.biorender.com/"&gt;Open Source&lt;/a&gt;. A trial for some period to incorporate these can be availed at &lt;a href="https://app.biorender.com/"&gt;bioRENDER&lt;/a&gt;.
Use them however you can in your signage, reports, sites, apps and projects. And please share any of your efforts – we’d love to see them and help boost awareness and helpful information.&lt;/p&gt;
&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-hygiene_hu_6ae7c850ef03ef4e.avif 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-hygiene_hu_a4210ce6a9609734.avif 617w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-hygiene_hu_5fe8e2dd0a1a826b.webp 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-hygiene_hu_d85e060502fa67d6.webp 617w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-hygiene.png"
alt="Icons illustrating good hygiene practices like hand washing"
loading="lazy"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="617"
height="208"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-distancing_hu_53f744bc7084955b.avif 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-distancing_hu_4b22b44c45cdc3a6.avif 615w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-distancing_hu_699e4fbc8fe388ec.webp 480w, https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-distancing_hu_fe85b80e21b2fae2.webp 615w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/covid19-illustrations/covid19-icons-distancing.png"
alt="Icons illustrating social distancing recommendations"
loading="lazy"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="615"
height="313"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;h2 id="about-biorender"&gt;About BioRender&lt;/h2&gt;
&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/biorender-logo_hu_5ef3d0b2a64d6158.avif" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/covid19-illustrations/biorender-logo_hu_c8223e40647b070c.webp" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/covid19-illustrations/biorender-logo.png"
alt="BioRender logo"
loading="lazy"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="306"
height="304"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;p&gt;BioRender envision a world where science is universally communicated and understood through visuals. Represent science with intuitive visuals that can be understood by everyone. ACCESSIBLE. Anyone can use the platform - no drawing or design skills required.&lt;/p&gt;
&lt;h2 id="who-guidelines-against-covid-19-"&gt;WHO guidelines against COVID-19 :)&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;To protect yourself and others against COVID-19, clean your hands frequently and thoroughly.&lt;/li&gt;
&lt;li&gt;Use alcohol-based hand sanitizer or wash your hands with soap and water.&lt;/li&gt;
&lt;li&gt;If you use an alcohol-based hand sanitizer, make sure you use and store it carefully.&lt;/li&gt;
&lt;li&gt;Remember that washing your hands with soap and water is also effective against COVID-19.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Stay healthy, safe, and awesome to each other, folks. Do keep washing your hands!!&lt;/p&gt;
&lt;p&gt;&lt;a href="https://github.com/Erioldoesdesign"&gt;Eriol&lt;/a&gt; guided and motivated me to write this article :))&lt;/p&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/covid19-illustrations-2020/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item><item><title>Use your artistic skills to help open source via opensource.com</title><link>https://opensourcedesign.net/resources/articles/use-your-artistic-skills-to-help-open-source/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/use-your-artistic-skills-to-help-open-source/</guid><pubDate>Thu, 13 Aug 2020 00:00:00 +0000</pubDate><dc:creator>Jeff Macharyas</dc:creator><author>Jeff Macharyas</author><description>Repost from OpenSource.com for an article from Jeff Macharyas about Open Source Software projects and how Open Source Design connects projects that need design help with the designers who can help them.
View the article on Opensource.com here</description><content:encoded>&lt;p&gt;Repost from OpenSource.com for an article from &lt;a href="https://opensource.com/users/jeffmacharyas"&gt;Jeff Macharyas&lt;/a&gt; about Open Source Software projects and how Open Source Design connects projects that need design help with the designers who can help them.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://opensource.com/article/20/6/open-source-design"&gt;View the article on Opensource.com here&lt;/a&gt;&lt;/p&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/use-your-artistic-skills-to-help-open-source/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item><item><title>Open source design needs better collaboration tools</title><link>https://opensourcedesign.net/resources/articles/osd-needs-better-collaboration-tools/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/osd-needs-better-collaboration-tools/</guid><pubDate>Mon, 27 Mar 2017 00:00:00 +0000</pubDate><description>Despite the rising awareness and acceptance of UX design, in particular on the web, it has failed to gain much traction in open source software. If for argument’s sake, we take UX design to have started in 1995 when Don Norman started work for Apple as a “user experience architect”, even though it has a longer history, then the fact that design has failed to make much impact in the open source world for over 20 years suggests that there are structural and systemic barriers that make design and open source development as compatible to each other as oil and water.</description><content:encoded>&lt;p&gt;Despite the rising awareness and acceptance of UX design, in particular on the web, it has failed to gain much traction in open source software. If for argument&amp;rsquo;s sake, we take UX design to have started in 1995 when &lt;a href="https://www.invisionapp.com/inside-design/a-brief-history-of-user-experience/"&gt;Don Norman started work for Apple as a &amp;ldquo;user experience architect&amp;rdquo;&lt;/a&gt;, even though it has a longer history, then the fact that design has failed to make much impact in the open source world for over 20 years suggests that there are structural and systemic barriers that make design and open source development as compatible to each other as oil and water.&lt;/p&gt;
&lt;p&gt;In this post, I will argue the need for better communication and collaboration platforms by looking at some of the fundamental characteristics of open source design and development and propose some starting points.&lt;/p&gt;
&lt;p&gt;The goal of OSD is to improve the user experience of open source software. Because open source software development is distributed, certain critical infrastructure is necessary. I am talking about a way for designers to share and build upon ideas, interact, reach consensus and collaborate with other designers and all the other stakeholders involved in the creation of software.&lt;/p&gt;
&lt;p&gt;You may think that we already have such tools. Just look at GitHub! But when we consider the target user and use case of such tools, it becomes clear that there are no complementary equivalents for designers. Even worse, there is no tool to bridge the gap between designers and developers. GitHub and the like cater exclusively to developers&amp;rsquo; unique needs and abilities. In doing so, it excludes other stakeholders and becomes a developer silo. Design is not like this. It cannot exist in isolation. Design is about understanding, facilitation and collaboration between all the relevant stakeholders. This is why I consider collaboration tools to be so important to design. Surprisingly, the closed source world is not a great deal better off. The Atlassian and Google ecosystems are the best that I can think of, and these were not built as a platform for design.&lt;/p&gt;
&lt;p&gt;A true collaboration platform for designers must, in some sense, bring in all stakeholders. This is where the very immature and untested idea for a collaborative design and development environment comes in. More details about this vision can be found on this &lt;a href="https://slides.com/studiospring/dcd/"&gt;slide deck&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Because of the nature of open source software, collaboration tools are even more critical and have different needs from commercial or closed source development:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;All the stakeholders are distributed.&lt;/strong&gt; Not just users, but designers and developers. No one stakeholder may ever be in the same room as any other stakeholder! Online communication suddenly becomes far more complex and important.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Anyone can contribute.&lt;/strong&gt; This raises issues of quality and decision-making.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Let&amp;rsquo;s have a look at some other characteristics of open source software:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Users are often developers or have high tech empathy.&lt;/li&gt;
&lt;li&gt;The maintainer (often a &amp;ldquo;non-designer&amp;rdquo;, to put it delicately), is the decision-maker, gate keeper and arbiter of good design.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This raises thought-provoking questions often overlooked in discussions about open source design: is design even needed in open source software? If the end user and creator are the same kind of person, then the design is already user-centric. And should design follow the same model as open source development, in which anyone can make a pull request? As we all know, on the internet, nobody knows that you are a dog! This can be a problem because design is harder to judge than code.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.publicdomainpictures.net/view-image.php?image=174322&amp;amp;picture=dog-using-laptop-computer"&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/dog_hu_5f172a4432577af7.avif" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/dog_hu_43b779bd84dae026.webp" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/dog.png"
alt="Dog using a laptop computer"
loading="eager"
fetchpriority="high"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="375"
height="321"
/&gt;
&lt;/picture&gt;
&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Photo credits: Derivative of photo by &lt;a href="https://www.zazzle.com/roughcollie*"&gt;Karen Arnold&lt;/a&gt;. &lt;a href="https://creativecommons.org/publicdomain/zero/1.0/"&gt;Creative Commons Public Domain&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;In writing about the right tools for OSD, I am putting the cart before the horse. The systemic problems are too large a topic for this post, but they must be identified and addressed first. However, open source design is at such an embryonic stage that even something as fundamental as a dedicated area for discussion and idea exchange to bootstrap the movement does not exist. This is why I have tried to identify our immediate needs, so that a more suitable tool than GitHub Issues or StackExchange can be found.&lt;/p&gt;
&lt;p&gt;The diagram below shows characteristics of different collaboration platforms used to develop open source software, depending on the user (developer or designer) and whether it is project specific or agnostic. There is currently no dedicated platform for designers to discuss open source design in general (box number 3), so I have merely exercised my imagination to describe its characteristics. Reddit has a &lt;a href="https://www.reddit.com/r/opensource/"&gt;forum for open source&lt;/a&gt;, and StackExchange has a &lt;a href="https://ux.stackexchange.com/"&gt;UX forum&lt;/a&gt;, but I would argue the tone and nature of discussion is different from what we have and need here. Finally, the last box (5) is a totally different platform, which I described earlier as a collaborative design and development environment. This would be a platform that takes in to account the unique characteristics of open source software and ideally would be built from the ground up as a platform for design, for all stakeholders.&lt;/p&gt;
&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/osd_collaboration_tools_hu_618edfa69912dbeb.avif 480w, https://opensourcedesign.net/images/articles/osd_collaboration_tools_hu_1bd013cd36dfee35.avif 561w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/osd_collaboration_tools_hu_c436482905c4e478.webp 480w, https://opensourcedesign.net/images/articles/osd_collaboration_tools_hu_ecad0e69e8dd7125.webp 561w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/osd_collaboration_tools.png"
alt="Open source design and development collaboration platforms"
loading="lazy"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="561"
height="800"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;p&gt;The next steps are to:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;decide what kinds of discussion and collaboration OSD actually wants to support.&lt;/li&gt;
&lt;li&gt;determine the requirements for those types of collaboration.&lt;/li&gt;
&lt;li&gt;find the tools that best meet the above requirements.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;A platform for people to discuss open source design and development is admittedly a very niche area and the fact that no such platform exists may speak volumes. But it is better to fail in the attempt, than fail for lack of trying, and the fact that we have, in my opinion, outgrown GitHub Issues, is a promising sign. I hope this post makes our situation clearer and will stimulate further discussion and action.&lt;/p&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/osd-needs-better-collaboration-tools/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item><item><title>5 Steps to Design a UX that People Love</title><link>https://opensourcedesign.net/resources/articles/5-steps-to-design-a-ux-that-people-love/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/5-steps-to-design-a-ux-that-people-love/</guid><pubDate>Sat, 21 Nov 2015 00:00:00 +0000</pubDate><description>Research, prototyping, and testing. The easy way. Presented to you by the co-founder of Loomio.
My brother Matthew Bartlett and I have been contributing design to the open source project Loomio for a while now.
In the past couple of weeks we’ve stumbled on a design process that is working really well for us.
1. Find a problem worth solving. Thinking in terms of problems people have or jobs people want to do is a great way to stay focussed on creating a useful user experience, rather than a whizz-bang cool feature that nobody wants.</description><content:encoded>&lt;h2 id="research-prototyping-and-testing-the-easy-way"&gt;Research, prototyping, and testing. The easy way.&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;Presented to you by the co-founder of Loomio.&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;My brother &lt;a href="https://medium.com/u/521536fcadc7"&gt;Matthew Bartlett&lt;/a&gt; and I have been contributing design to the open source project &lt;a href="https://www.loomio.com/"&gt;Loomio&lt;/a&gt; for a while now.&lt;/p&gt;
&lt;p&gt;In the past couple of weeks we’ve stumbled on a design process that is working really well for us.&lt;/p&gt;
&lt;h2 id="1-find-a-problem-worth-solving"&gt;1. Find a problem worth solving.&lt;/h2&gt;
&lt;p&gt;Thinking in terms of &lt;em&gt;problems people have&lt;/em&gt; or &lt;em&gt;jobs people want to do&lt;/em&gt; is a great way to stay focussed on creating a useful user experience, rather than a whizz-bang cool feature that nobody wants.&lt;/p&gt;
&lt;p&gt;For this example, we’re looking at redesigning the search experience for Loomio. The first step is to talk to people and ask what are you searching for?&lt;/p&gt;
&lt;p&gt;
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_afc6fe5ec32e18c2.avif 480w, https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_146b71488d74c8ad.avif 960w, https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_c9745115f8561fee.avif 1568w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_6b05d57e764928ad.webp 480w, https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_32996bdae3fe87c1.webp 960w, https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search_hu_ea489a42adc0c666.webp 1568w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/5-steps-ux/asking-loomio-community-about-search.png"
alt="Matt uses Loomio to ask the community about search"
loading="eager"
fetchpriority="high"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="1568"
height="1066"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;h2 id="2-research-how-other-people-solve-it"&gt;2. Research how other people solve it.&lt;/h2&gt;
&lt;p&gt;In some respects, all UX design is ‘open source’, even if the underlying code is hidden: if you can play with the software, you can learn how it works.&lt;/p&gt;
&lt;p&gt;Here’s the result of a couple hours of research into how other popular apps handle search:
&lt;picture&gt;
&lt;source type="image/avif" srcset="https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_b6bea2c57990900e.avif 480w, https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_9e4e3a362bf8dcbf.avif 960w, https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_5cd3519ab7d79e1b.avif 1600w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;source type="image/webp" srcset="https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_ae05d3975411980f.webp 480w, https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_ccd1be5177080ff2.webp 960w, https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_55aa404f88c3a78c.webp 1600w" sizes="(min-width: 56rem) 56rem, 100vw" /&gt;
&lt;img
src="https://opensourcedesign.net/images/articles/5-steps-ux/researching-how-apps-do-search_hu_ff027753b47eba18.jpg"
alt="L-R: Loomio, Facebook, Gmail, Inbox, Google, Trello"
loading="lazy"
decoding="async"
class="mx-auto my-6 block rounded-lg shadow-sm"
width="1600"
height="786"
/&gt;
&lt;/picture&gt;
&lt;/p&gt;
&lt;p&gt;In this case, Matt created &lt;a href="https://youtu.be/LtT0_zjNyAk"&gt;a little video&lt;/a&gt; to distill what he learnt from the research, and share it with the rest of the team.&lt;/p&gt;
&lt;h2 id="3-make-an-interactive-prototype-based-on-what-youve-learnt"&gt;3. Make an interactive prototype based on what you’ve learnt.&lt;/h2&gt;
&lt;p&gt;Looking at a single screen won’t tell you much  -  you need to consider the whole workflow in context: all the steps that the user goes through to complete the task. It’s called a workflow because it should flow.&lt;/p&gt;
&lt;p&gt;We use Sketch for drawing mockups and InVision to stitch them together into interactive prototypes. (You can learn about how we use these tools in &lt;a href="https://www.loomio.com/blog/2015/07/07/design-for-developers/"&gt;this talk I gave recently&lt;/a&gt;.)&lt;/p&gt;
&lt;p&gt;So for the Loomio Search example, Matt made &lt;a href="https://youtu.be/4xhG_9BnNZQ"&gt;this video demonstrating&lt;/a&gt; how the parts fit together.&lt;/p&gt;
&lt;p&gt;Video is a good a way of sharing a workflow, but quick animated gifs are even better! With a tool like &lt;a href="https://recordit.co/"&gt;RecordIt&lt;/a&gt; you can record an interaction, and upload and share it in a few seconds, which makes it effortless to get feedback:&lt;/p&gt;
&lt;p&gt;
&lt;figure class="my-6"&gt;
&lt;video
class="mx-auto block rounded-lg shadow-sm"
autoplay loop muted playsinline
preload="metadata"
data-gif-video
width="539"
height="371"
aria-label="A Demo of Search"
&gt;
&lt;source src="https://opensourcedesign.net/images/articles/5-steps-ux/search-demo.webm" type="video/webm" /&gt;
&lt;source src="https://opensourcedesign.net/images/articles/5-steps-ux/search-demo.mp4" type="video/mp4" /&gt;
&lt;img src="https://opensourcedesign.net/images/articles/5-steps-ux/search-demo.gif" alt="A Demo of Search" loading="lazy" decoding="async" width="539" height="371" /&gt;
&lt;/video&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;This gif took me about 20 seconds to record and share. Gifs are also awesome for help documentation, developer QA, and marketing, but that’s a whole other blog post :P&lt;/p&gt;
&lt;h2 id="4-test-learn-iterate-deploy-repeat"&gt;4. Test, learn, iterate, deploy, repeat.&lt;/h2&gt;
&lt;p&gt;The next step is to test these prototypes with real humans. Testing can be super lightweight: you will learn a lot just by watching a friend or colleague try to interact with your prototype for a few seconds.&lt;/p&gt;
&lt;p&gt;As soon as we’re confident we’ve got a design that is an incremental improvement on the existing UX, we get it built and into people’s hands as soon as possible: &lt;em&gt;You learn so much more from &lt;strong&gt;use&lt;/strong&gt; than you do from &lt;strong&gt;opinions&lt;/strong&gt;!&lt;/em&gt;&lt;/p&gt;
&lt;h2 id="5-its-all-about-love"&gt;5. It’s all about love!&lt;/h2&gt;
&lt;p&gt;“Product design” is a process, it’s not a job that comes with a start and an end. It’s an ongoing relationship between the people building the thing, and the people using the thing. Like any other relationship, you need to pay attention to the details and communicate abundantly. Your job as a designer is to learn what makes your users happy, and what makes your devs happy.&lt;/p&gt;
&lt;p&gt;It also helps if you can occasionally blow their minds with something they never asked for! ♥&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Originally written by &lt;a href="https://medium.com/@richdecibels"&gt;Richard D. Barlett&lt;/a&gt; on &lt;a href="https://medium.com/open-source-design/open-source-design-just-steal-everything-5c44ca793721#.dwn7xt73a"&gt;Medium&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;em&gt;I write about working together. Loomio cofounder (&lt;a href="https://www.loomio.com/)"&gt;https://www.loomio.com/)&lt;/a&gt;. Enspiral member (&lt;a href="http://enspiral.com"&gt;http://enspiral.com&lt;/a&gt;).&lt;/em&gt;&lt;/p&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/5-steps-to-design-a-ux-that-people-love/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item><item><title>Why open source designers need tools beyond text and code</title><link>https://opensourcedesign.net/resources/articles/text-based-tools-for-designers/</link><guid isPermaLink="true">https://opensourcedesign.net/resources/articles/text-based-tools-for-designers/</guid><pubDate>Sat, 23 May 2015 00:00:00 +0000</pubDate><description>Text is the predominant means of creating and collaborating on software. Design is a visual and spacial activity. For those who design software and websites there is a non-visual world that needs to be navigated and taken into account: text in the form of program code and comments.
This has historical and technical reasons, beyond that computer programs are essentially created in code. But the text based tools and culture of creation and collaboration have severe drawbacks for designers who are part, or are striving to be part, of the creation of software. This is particulary relevant in the open source community, where many collaborators (among them potentially designers) work jointly to create and improve software.</description><content:encoded>&lt;p&gt;Text is the predominant means of creating and collaborating on software. Design is a visual and spacial activity. For those who design software and websites there is a non-visual world that needs to be navigated and taken into account: text in the form of program code and comments.&lt;/p&gt;
&lt;p&gt;This has historical and technical reasons, beyond that computer programs are essentially created in code. But the text based tools and culture of creation and collaboration have severe drawbacks for designers who are part, or are striving to be part, of the creation of software. This is particulary relevant in the open source community, where many collaborators (among them potentially designers) work jointly to create and improve software.&lt;/p&gt;
&lt;h2 id="the-case-against-designing-in-code"&gt;The case against designing in code&lt;/h2&gt;
&lt;p&gt;There is no shortage of pleas and instructions for designers to learn to code. I argue that for the sake of better design, it makes little sense to do this work in code (at least for most designers).&lt;/p&gt;
&lt;p&gt;To use code as a tool for design, ideation, communication, and adjustments is a process that creates a lot of friction. It demands constant switching between the definition space – the code – and the outcome – the resulting appearance and structure.&lt;/p&gt;
&lt;p&gt;Empirical research shows that feedback loops play a crucial role in creative tasks.&lt;sup id="fnref:1"&gt;&lt;a href="#fn:1" class="footnote-ref" role="doc-noteref"&gt;1&lt;/a&gt;&lt;/sup&gt; For designers this involves evaluating how a preliminary design looks, is structured, or behaves and then apply changes and see if the result is satisfying.&lt;sup id="fnref:2"&gt;&lt;a href="#fn:2" class="footnote-ref" role="doc-noteref"&gt;2&lt;/a&gt;&lt;/sup&gt; Look at sketching: You can quickly draw what a product or a website may look like. You evaluate what is good or bad about the drawing, think it through and iteratively make changes The feedback is instant: if you slip and the crooked line messes up the design you see it right away. If the slip actually adds something good, you see it too.&lt;/p&gt;
&lt;p&gt;This instant feedback is what&amp;rsquo;s to lose if we always design in code.&lt;/p&gt;
&lt;p&gt;But should designer ditch the resolution to learn to code? Not always. There are things that are best expressed in code: maybe a gesture or a new kind of menu. It will enable communicating your ideas to programmers and estimate the technical difficulties involved in implementation. But while design-in-code is touted to be &lt;em&gt;the&lt;/em&gt; skill-to-learn for (web) designers it shouldn&amp;rsquo;t come with the loss of core thinking models and processes for many designers.&lt;/p&gt;
&lt;p&gt;So rather than learning to code for designing, you may be better off keeping design a visual process and learn to program for communication and realization of the design.&lt;/p&gt;
&lt;h2 id="collaboration-text-based-tools-are-not-silver-bullets"&gt;Collaboration: Text based tools are not silver bullets&lt;/h2&gt;
&lt;p&gt;There are many well established means to communicate in (Open Source) Software projects: Mailinglists, IRC, Bugtracker and Git, an immensely popular version control system. For all of these tools, but particularly with git, you will find many pleas online that designers use it for version control and collaboration. In addition, they argue, there is little choice anyway if one wants to contribute to an open source project.&lt;/p&gt;
&lt;p&gt;But while tools like Git and IRC are well established, they pose some problems for in design. These tools are primarily text based and visual assets need to be somehow linked or embedded. They are not first class citizens.&lt;/p&gt;
&lt;p&gt;Communicating about layouts, icons or workflows is possible, but tedious. Images often need to be uploaded and linked. When talking about them, images need to be referenced by some ad-hoc-system, parts of the image need to be described to refer to them. The text-space is a weak substitute for the visual space the design happens in. A long winded, cumbersome communication is the result and ambiguities arise (with often participants in the conversation scrolling up and down long threads to reference designs). This contributes to the lack of participation and acceptance of designers in open source projects and contributes to the view that designing together is hard and possibly done best by a lone genius.&lt;/p&gt;
&lt;p&gt;To enable designers to contribute to open projects it is not enough that they learn about code and technology: they need tools that match their workflow and enable them to collaborate with programmers. Just telling them to adapt is not a viable, design-thinking, solution.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;If you like to support the creation of libre tools for (open source) designers, have a look at &lt;a href="https://github.com/opensourcedesign/resources/issues/16"&gt;some of our ideas&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
&lt;div class="footnotes" role="doc-endnotes"&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id="fn:1"&gt;
&lt;p&gt;Donald Schön: &lt;em&gt;Designing as reflective conversation with the materials of a design situation&lt;/em&gt;, 1992.&amp;#160;&lt;a href="#fnref:1" class="footnote-backref" role="doc-backlink"&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id="fn:2"&gt;
&lt;p&gt;»sketching provides a temporary, external store for tentative ideas, and supports the ‘dialogue’ that the designer has between problem and solution.« (Chapter 1, ›Design Ability‹) »…Drawing…gives the flexibility to shift levels of detail instantaneously; allows partial, different views at different levels of detail to be developed side by side« (Chapter 4, ›How Designers Think‹) in Nigel Cross: &lt;em&gt;Design Thinking – Understanding how designers think and work&lt;/em&gt;, 2011.&amp;#160;&lt;a href="#fnref:2" class="footnote-backref" role="doc-backlink"&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;p style="margin-top:2em;font-size:0.9em;color:#666;"&gt;&lt;a href="https://opensourcedesign.net/resources/articles/text-based-tools-for-designers/"&gt;Read more on opensourcedesign.net →&lt;/a&gt;&lt;/p&gt;</content:encoded><category>Resources</category></item></channel></rss>