Design in common

This publication aims to present a contributive approach to design and web development through the methods, tools, and deliverables created for the website and visual identity of the design research laboratory at CY Design School, the Transition Design Lab.

Its purpose is to highlight and promote key areas of improvement and relevant reflections for the collective design and development of websites that are efficient, accessible, visually appealing, and functional. In summary, this article explores topics related to contribution and collaboration in design and web development.

The design process began with defining a design brief that outlined the project's expectations, constraints, and initial input data. This exercise was conducted collaboratively using FigJam (external link), an online whiteboard tool. This was the team's first introduction to the tools and deliverables used by designers. The brief was co-constructed using the VRAP (external link) method, a strategic design model created by Praticable (external link) (formerly Collectif Bam (external link)), designed to cohesively address all key aspects of a project.

For the Transition Design Lab’s website and visual identity project:

• Vision encompassed the laboratory’s values and philosophical principles, represented through keywords, along with its communication objectives. The team aimed to convey a serious, collective, and welcoming image.

• Relation focused on identifying the key stakeholders and beneficiaries of the project, including researchers, associates, and partner organizations.

• Action defined the expected functionalities of the website and visual identity. This stage clarified the choice of CMS (Content Management System).

The website's administration had to be user-friendly, simple, and aligned with the team’s expectations and technical skills. Additionally, the CMS needed to allow for quick and easy content creation, efficient indexing using tags and internal links, and integration with HAL (external link), a platform for research publications, theses, and articles. Another priority was incorporating a portfolio section to showcase artifacts, digital and non-digital objects produced by the lab.

Finally, the team sought a fast-loading website that was minimalist in both aesthetic (visual) and functional (technical) aspects to minimize environmental impact. For all these reasons, the laboratory chose Osuny (external link), an open-source, free, and eco-designed CMS developed by Noesya (external link), a cooperative committed to ethical and aesthetic digital solutions. Additionally, the fact that Osuny is a French CMS developed by a cooperative was another decisive factor in its selection.

Notably, Osuny’s Figma file provides an overview of all its components and features. During the Design Brief workshop, the team reviewed Osuny’s design system, available in the Figma community, to verify that the CMS met their needs.

Lastly, the Perception aspect of VRAP focused on the visual and aesthetic choices for the Transition Design Lab. The visual identity had to be serious, clear, didactic, and accessible. Once again, Osuny proved to be the right choice, aligning with the aesthetic requirements of the project.

Lastly, the Perception aspect of VRAP focused on the visual and aesthetic choices for the Transition Design Lab. The visual identity had to be serious, clear, didactic, and accessible. Once again, Osuny proved to be the right choice, aligning with the aesthetic requirements of the project.

Once the brief was completed and approved, the next step was defining the laboratory’s visual identity. A graphic charter was required for the website, posters, and other materials. To achieve this, two intermediate deliverables were created:

• A FigJam file (like the design brief), called Moodboards, used to create visual inspiration boards.

• A Figma file named Graphic Research, used to explore and refine the final graphic elements for the lab.

Once the visual identity was finalized, a graphic charter was officially delivered and continuously refined until the website launch. This document, created in Figma, established the identity’s styles and variables, which were later integrated into the website prototype.

The charter included:

• Color system (for the website and research programs) with accessibility best practices (AAA contrast standards).

• Typography and usage guidelines.

• Logo variations and icons.

• Compositions and design elements.

• Guidelines for image integration (formats, relevance, file size).

• Illustrations and external file references (such as graphic research and the website prototype).

A graphic asset folder was also created, updated regularly, and shared with the entire team. This folder contained all graphical exports in various formats (JPG, PNG, SVG).

Alongside the creation of the visual identity, the team worked on the structure of its website. This exercise was also carried out using FigJam, Figma's collaborative whiteboard. Once again, the collaborative nature of online design tools fosters collective work, reduces back-and-forth exchanges, and increases interaction and discussion—unlike email exchanges, for example. Speech, direct and spontaneous exchange, although somewhat degraded by videoconferencing tools, remains essential in design practice. The creation of the website plan, or sitemap in English, was condensed into a few hours of discussion. Once the workshop was completed, the sitemap was validated, with only minor updates made afterward. This workshop format helps frame a project phase and validate the delivery of an intermediate deliverable—the sitemap.

The sitemap is a crucial step in website design, addressing both content structuring and indexing. The team defined the main site sections, which are featured in the header, as well as the composition of each page. To complete this mapping work, the team continuously checked their proposals against Osuny’s Figma theme. A necessary back-and-forth between the FigJam sitemap and the Figma design system of the Osuny theme helped validate or refine the site's structure and page composition.

With this sitemap in place, content writing could begin. The editorial team produced the site’s texts based on this plan, which was also used to generate the first pages in the administration interface, commonly referred to as the back office. This was made possible as Noesya had deployed the system online a few days earlier. As a result, the editorial team could already insert some content and monitor the development progress. Content and design evolved simultaneously.

Once the prototype was completed, it was time to develop the interface. At this stage, the prototype was continuously inspected using Figma's Dev Mode to build the site's code. On the development side, Osuny includes a Sass stylesheet dedicated to variable configuration. The first step of the development process was to modify the available variables in the configuration.sass file.

Creating variables is therefore a practice that exists both during the design phase in Figma and during development with stylesheets (CSS, Sass). They are, in fact, very similar—if not identical.

For the development of our website, a few additional stylesheets were added alongside the configuration.sass file. At the same time, through Osuny's admin interface, the team added the site's content, as prefigured in the Figma prototype. A few weeks later, the website was ready for the official launch of the research chair, The Design of Decision-Making (external link).