Content
View differences
Updated by Parimal Satyal over 2 years ago
### To do
* [x] Prepare first draft
* [x] Finalise draft for review by <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention> and <mention class="mention" data-id="3" data-type="user" data-text="@Niels Lindenthal">@Niels Lindenthal</mention>
* [x] [ ] Work on draft 2 based on feedback
* [ ] Get review from a front-end dev
* [ ] Make <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention> author
* [ ] Pass it on to <mention class="mention" data-id="80638" data-type="user" data-text="@Corinna Günther">@Corinna Günther</mention> Corinna
### First draft text
> ## **Adopting Primer, GitHub's Design System**
>
> At OpenProject, our goal has always been to create the best open-source project management and collaboration software. We are acutely aware that for our users, OpenProject is not just a set of features but a tool they use to get things done. And in the Product team, we want users to get them done better, easier and quicker.
>
> With each new release, we try to strike the right balance between new features, bug fixes and UX optimisations. We are aware that a good user experience also means making the interface cleaner, more consistent and more intuitive. To that end, whilst we were working on creating our own design system this past year, we realised that we could perhaps lean on the experience and expertise of more mature open source projects.
>
> Today, we are excited to announce a significant step forward in enhancing user experience by adopting [Primer](https://primer.style/design/), the open-source design system designed and developed by [GitHub](https://primer.style/design/about). In this blog post, we'll delve into what Primer is, why we made the decision to embrace it, the benefits it brings, and how this transition will impact our users.
>
> ### **Introducing Primer**
>
> Developed by GitHub, Primer provides a comprehensive collection of components, patterns, and design principles that are meticulously crafted to ensure a seamless and consistent user experience. With accessibility considerations deeply embedded in its core, Primer aligns well with our approach and values at OpenProject.
>
> ### **Why We Chose Primer**
>
> The decision to integrate Primer into our ecosystem was not taken lightly.
>
> We believe in progress through collaboration and GitHub's expertise in creating a mature design system that's both reusable and accessible caught our attention. Choosing Primer means being able to use components and patterns that have been tried, tested or are being actively developed by tested, and refined by experts who share our passion for open-source excellence.
>
> In addition to streamlining our development process, Primer empowers us to focus on what truly matters: delivering the best user experience. By adopting a pre-built design system instead of developing our own internal design system, we can dedicate more time to working on important features and optimisations in OpenProject.
>
> ### **The Benefits of Primer**
>
> Adopting Primer has a number of advantages for OpenProject:
>
> * **Consistency:** Primer establishes a unified design language that allows us to work towards a cohesive and intuitive interface across all parts of OpenProject, from the work packages module to meetings, from time and costs to settings pages.
> *
> **Reusability:** By leveraging Primer's components and patterns, we can rapidly develop new features without reinventing the wheel. This not only accelerates development but also ensures a level of quality and consistency that's hard to achieve from scratch.
> *
> **Accessibility:** Primer's accessibility-first approach aligns with our own values and allows us to ensure that our software is usable by even more people.
> *
> **Tested and Proven:** Primer has been rigorously tested and implemented by GitHub in their own software. This gives us the confidence that we're adopting a design system that's not only visually appealing but also functionally sound.
> * **Documented**: Most Primer components are already documented. Not all of it is complete but existing documentation makes it possible for our team to familiarise themselves each each component and understand the usage, limits and options of each.
>
> ### **Transitioning to Primer**
>
> Although integrating an existing design system that's mature and stable has many advantages over creating a new one from scratch, it is nevertheless a significant amount of effort. This means that OpenProject will go through a transitional period as we start integrating, testing and slowly rolling out Primer across the entire software.
>
> During this transition period, you might notice a mix of old design elements and new Primer components within OpenProject. This blending is temporary but essential. We appreciate your understanding and patience as we work through this phase.
>
> For front-end developers and designers, transitioning to a new design system like Primer comes with both challenges and opportunities. Adapting to new tooling and methodologies can be a learning curve, and there can also be unexpected challenges. Our teams are nevertheless excited to move forward with Primer.
>
> ### **Primer CSS**
>
> If you have upgraded to version 13.0, you're already seeing Primer in OpenProject. You might not see any major changes quite yet, but we have already migrated to the base Primer CSS that will serve as a foundation for further integration.
>
> ### **Meetings: the first Primer feature**
>
> In our next release, version 13.1, we are working on a completely new Meetings module built from the ground up using Primer components. This will be the first module to really showcase what Primer offers, both from the point of view of design and development and the end-user experience.
>
> We can't wait to share this first "Primerised" module with you before the close of the year.
>
> ### **Thanks to GitHub and the open-source community**
>
> We would like to express our gratitude to GitHub for developing Primer and contributing to the open-source world. This synergy between like-minded organisations showcases the power of collaboration and a shared vision.
>
> ### **What's next**
>
> We are thrilled about what Primer will bring to OpenProject and you will be able to see the first visible changes in our next release, version 13.1.
>
> We anticipate some challenges during the transitional phase and we ask for your patience and understanding as we work to provide the OpenProject community with an even better user experience.
>
> As an open source company, we also work in the open. If you would like to track progress of our integration with Primer or even contribute to it, join our [Community instance](https://community.openproject.org/) and watch or comment on [this epic](https://community.openproject.org/projects/openproject/work_packages/26448/activity).
* [x] Prepare first draft
* [x] Finalise draft for review by <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention>
* [x]
* [ ] Get review from a front-end dev
* [ ] Make <mention class="mention" data-id="72512" data-type="user" data-text="@Marc Alcobé">@Marc Alcobé</mention> author
* [ ] Pass it on to <mention class="mention" data-id="80638" data-type="user" data-text="@Corinna Günther">@Corinna Günther</mention>
### First draft text
> ## **Adopting Primer, GitHub's Design System**
>
> At OpenProject, our goal has always been to create the best open-source project management and collaboration software. We are acutely aware that for our users, OpenProject is not just a set of features but a tool they use to get things done. And in the Product team, we want users to get them done better, easier and quicker.
>
> With each new release, we try to strike the right balance between new features, bug fixes and UX optimisations. We are aware that a good user experience also means making the interface cleaner, more consistent and more intuitive. To that end, whilst we were working on creating our own design system this past year, we realised that we could perhaps lean on the experience and expertise of more mature open source projects.
>
> Today, we are excited to announce a significant step forward in enhancing user experience by adopting [Primer](https://primer.style/design/), the open-source design system designed and developed by [GitHub](https://primer.style/design/about). In this blog post, we'll delve into what Primer is, why we made the decision to embrace it, the benefits it brings, and how this transition will impact our users.
>
> ### **Introducing Primer**
>
> Developed by GitHub, Primer provides a comprehensive collection of components, patterns, and design principles that are meticulously crafted to ensure a seamless and consistent user experience. With accessibility considerations deeply embedded in its core, Primer aligns well with our approach and values at OpenProject.
>
> ### **Why We Chose Primer**
>
> The decision to integrate Primer into our ecosystem was not taken lightly.
>
> We believe in progress through collaboration and GitHub's expertise in creating a mature design system that's both reusable and accessible caught our attention. Choosing Primer means being able to use components and patterns that have been tried, tested or are being actively developed by
>
> In addition to streamlining our development process, Primer empowers us to focus on what truly matters: delivering the best user experience. By adopting a pre-built design system instead of developing our own internal design system, we can dedicate more time to working on important features and optimisations in OpenProject.
>
> ### **The Benefits of Primer**
>
> Adopting Primer has a number of advantages for OpenProject:
>
> * **Consistency:** Primer establishes a unified design language that allows us to work towards a cohesive and intuitive interface across all parts of OpenProject, from the work packages module to meetings, from time and costs to settings pages.
> *
>
> *
>
> *
>
> * **Documented**: Most Primer components are already documented. Not all of it is complete but existing documentation makes it possible for our team to familiarise themselves each each component and understand the usage, limits and options of each.
>
> ### **Transitioning to Primer**
>
> Although integrating an existing design system that's mature and stable has many advantages over creating a new one from scratch, it is nevertheless a significant amount of effort. This means that OpenProject will go through a transitional period as we start integrating, testing and slowly rolling out Primer across the entire software.
>
> During this transition period, you might notice a mix of old design elements and new Primer components within OpenProject. This blending is temporary but essential. We appreciate your understanding and patience as we work through this phase.
>
> For front-end developers and designers, transitioning to a new design system like Primer comes with both challenges and opportunities. Adapting to new tooling and methodologies can be a learning curve, and there can also be unexpected challenges. Our teams are nevertheless excited to move forward with Primer.
>
> ### **Primer CSS**
>
> If you have upgraded to version 13.0, you're already seeing Primer in OpenProject. You might not see any major changes quite yet, but we have already migrated to the base Primer CSS that will serve as a foundation for further integration.
>
> ### **Meetings: the first Primer feature**
>
> In our next release, version 13.1, we are working on a completely new Meetings module built from the ground up using Primer components. This will be the first module to really showcase what Primer offers, both from the point of view of design and development and the end-user experience.
>
> We can't wait to share this first "Primerised" module with you before the close of the year.
>
> ### **Thanks to GitHub and the open-source community**
>
> We would like to express our gratitude to GitHub for developing Primer and contributing to the open-source world. This synergy between like-minded organisations showcases the power of collaboration and a shared vision.
>
> ### **What's next**
>
> We are thrilled about what Primer will bring to OpenProject and you will be able to see the first visible changes in our next release, version 13.1.
>
> We anticipate some challenges during the transitional phase and we ask for your patience and understanding as we work to provide the OpenProject community with an even better user experience.
>
> As an open source company, we also work in the open. If you would like to track progress of our integration with Primer or even contribute to it, join our [Community instance](https://community.openproject.org/) and watch or comment on [this epic](https://community.openproject.org/projects/openproject/work_packages/26448/activity).