Designers Italia
The Design System for the Italian Public Administration
Designers Italia is the main source for design of Public Administration services: guidelines, tools, a design system and a community of designers to foster collaboration and promote the role of human-centered design during the development of public services.
Intro
On this page we present the design system created for the Italian Public Administration and the Designers Italia tools available to developers.
The goal is to provide kits - documents, guides, or software - that can save time and money to the Public Administration and that constitute a solid starting point for the design and development of modern, inclusive and maintainable apps and websites. Some of these projects are already active, while others are foreseen by the roadmap. To stay up-to-date with the evolution of the projects, we recommend registering with the Designers Italia newsletter.
The site designers.italia.it contains:
- References to the current version of the Design Guidelines.
- A series of kits for the design of services of the Public Administration.
- The blog with use case of the kits.
The source code of the site itself is hosted in a GitHub repository open to any kind of contribution.
UI Kit
The UI Kit is a set of visual components already ready to build the interface of a site or an app, following the guidelines for the digital services of the Public Administration. The kit is built with Sketch and defined in an open and collaborative way on GitHub together with the designers community. The UI Kit is the reference point for UI components and patterns intended to be implemented using the Web Development Kits, shown below.
Many Public Administration projects are using the UI Kit to define their own interfaces, including models for sites of the municipalities and sites of schools.
For questions and discussions about the UI Kit, on Developers Italia Slack, you can refer to the channel #design-ui.
Web Development Kit
The Web Development Kits are a set of tools for the front end development of websites and web applications. They are HTML, CSS and Javascript libraries that allow you to create sites that comply with the Design Guidelines and code the provisions of the UI Kit. As of today, the most stable, updated and mature web development kit is Bootstrap Italia, based on the open-source library Bootstrap 4.
Bootstrap Italia
The Bootstrap 4 based kit is the reference point for the development of Public Administration projects. The main purpose is to make available to the community of developers, in line with the Design Guidelines, syntax, tools, plugins and conventions of an instrument already known and used by many, such as Bootstrap 4.
Bootstrap Italia is already used on some successful projects, such as the prototype of the website of the Municipality of Cagliari and the Docs Italia website.
Other projects, such as sites for schools, themes for the main CMS (Wordpress, Drupal, Joomla, Plone, Entando, etc.) and generators of static sites (Hugo, Jekyll, etc.), are under evaluation or planning. The only one currently available, still under construction, is the Wordpress Theme.
To report a site, an app or a theme created with Bootstrap Italia, you can open an issue on the Bootstrap Italia repository or write a post on the forum!
Web Toolkit
The Web Toolkit was the first project meant to help the creation of websites for the PA: it is already used by many websites, especially some municipalities and ministries. The feedback received on the use of the Web Toolkit by organizations and suppliers contributed to the definition and creation of the Bootstrap Italia reference kit.
For this reason, the Web Toolkit is no longer the subject of significant updates since 2017.
Design React Kit
The project aims at building a set of components and a common presentation layer based on React. The focus of the project was, at least at this early stage, web apps and hybrid mobile applications based on React Native. The React Kit is not yet complete because many of the components present on Bootstrap Italia have not yet been converted for use as React components.
Design Angular Kit
The project aims to build a set of components and a common presentation layer based on Angular. The kit is not yet complete.
The contributions on the kits are very important, so if you think you can help with feedback, useful information, bug reports or code, please help!
For questions and discussions on the Web Development Kits, you can refer to the channel #design-devel.
Other useful design kits
Web development is only part of the service processing cycle according to the Design Guidelines. Designers Italia provides kits covering the entire design cycle of a service, from research to information architecture, passing through tests with users. For more information, you can start from the Kit page on the Designers Italia website.
For questions and discussions on these design kits, you can refer to the channel #design-service.
