Página
This list is an evolving collection of official & community design resources, guides and user research. See something missing? Let us know in the chat!
Decidim design system (0.28+)
Based on Populate's redesign for version 0.28, this Figma file will be maintained by the community and aims to serve as an ever-evolving library for the upcoming versions.
Figma file
Why do we need it?
The design system is a central library of pre-built UI components (buttons, forms, etc.) and design guidelines. This saves development time and ensures designers aren't recreating the wheel.
A design system allows for faster and easier expansion of the platform by providing a foundation for future features. Furthermore, it is an essential element in building a designer-developer collaboration to work together as a team.
Design system constraints
Reflect all components as they exist on Decidim 0.28 running on try.decidim.org.
-
Do not change existing elements.
Challenge
Speed up the design of new pages.
Design a user-friendly design system.
Create a starting point for future versions of the design system.
-
Initiate a transition process to make the platform’s design more consistent.
What has been done?
All pages were analyzed to determine commonly used elements and patterns.
Common colors and text styles were defined.
Commonly used elements were analyzed to define common patterns and master components were created for them.
-
Multipurpose master components were created for most of the elements to initiate a transition to add consistency across similar elements in Decidim.
Recommendations
Reuse components as much as you can unless you can’t keep a good user experience with the existing elements. Avoid adding new components, they will make harmonization harder.
Create a clear spacing system.
Use left and right margins across all the pages more consistently.
Standardize vertical margins to create some vertical rhythm.
Decrease minor differences in cards across all pages to make them look more consistent.
Guides
Decidim Design Guide
This guide is a resource for designers and developers who need to customize, develop new modules, and integrate new features. Official design guide (nightly)
Developer Accessibility guidelines
The purpose of this guide is to provide some simple tips on how to follow the accessibility guidelines when developing the Decidim user interface. Decidim official website
Design resources
Decidim UI iconset (0.28+)
Remixicons is the standard for the icons you can find in the redesigned Decidim interface available since 0.28. You can also find them all in the Figma file above. Decidim UI iconset
Gov.uk's Design system
Gov.uk's design system is a reference to organize the Figma file the product team is using, based on the above Decidim design system (0.28+). Figma file
(Legacy) Decidim design system (0.24-0.27)
This Figma file was maintained by the community and covers most of the components, screens and design patterns up to version 0.27. Figma file
Looking for the current design system (0.28+)? Click here
(Legacy) Decidim UI iconset (0.X-0.27)
Ionicons was the standard for most of the icons you can find in the Decidim interface prior to the Redesign implementation. However, some icons in Decidim were custom (not available in this set). Decidim UI iconset
User research
Metadecidim heuristics review (2023)
Resulting from the work of Katarina & Carol, this work document contains recommendations to improve metadecidim's UX. Read the report
Usability tests (2023)
Resulting from the work of Katarina & Carol, these figma files contain recommendations to improve Decidim's usability. (full results from the tests coming soon) Figma file with comments, Figma prototype, Main flows (.png format)
Accessibility for Dyslexia audit (2022)
Pierre Mesure collaborated with students to evaluate text accessibility in the context of dyslexia and propose solutions to improve usability for text-based content. View the Figma file here
Perceived credibility of Geneva's Decidim platform (2020)
Using a quantitative (attrakdiff method) and qualitative approach (user interviews), Octree researched a stratified sample of the population to determine it's perceived usability, credibility and attractivity among non users. Read the full report here
Tools & utilities
Image compression
ImageOptim is a free utility which allows to optimize image compression for web: available here.
Fellow communities
Open Source Design
A community of designers and developers pushing for more open design processes and improving the user experience and interface design of open-source software: https://opensourcedesign.net/
Designers in OSS
A research exploring common challenges, goals and practices of designers contributing to OSS: https://github.com/sprblm/Diary-Studies-Designers-in-OSS/blob/main/findings-report.md
Compartir