Algorithmic Design approaches allow the inclusion of speed, flexibility and versatility in the production of personalised visual artefacts, which can be an added value for the automatic generation of these artefacts. In the world of music, most of the time, artists want to transmit on the cover of their albums the essence and personality of its content. This way, if its development is allied to tools that help the process, extracting the musical content to make it visual, there is a speeding up of this method.

Being this a project proposed by me to my supervisors and framed within my master's thesis, I had already defined at an early stage that it would result in a system embedded on a website.

Sound Shape is a system that automatically designs album music covers through a data-driven approach, which creates visuals that represent the sound features of the various tracks that compose the album itself.

The system is developed using web technologies and uses the Spotify API to gather the information, classification, and audio features of the tracks of the selected album. The generated visuals are created by the employment of a set of rule-based approaches informed based on the album and track analysis.

After the generation, users can fine-tune and/or modify the generated covers in a bespoke interface.

Taking into account the practical design process, the methodology chosen for this project was the Four Stage Design Process, introduced in 2000 by Nigel Cross.

This simple descriptive model of the design process is based on the essential activities that the designer performs. Thus, through this methodology, the development of this work was subjected to an iterative evaluation of its objectives, constraints and other criteria contained in its design brief.

Visual Mapping and Output

This phase consists of creatively exploring the theme to understand the problems that may arise. In this case, the biggest problem of this project consisted in mapping the sound elements found in music albums to visual elements. Hence, several visual experiments were carried out, for both the mapping and the final outputs.

Interface Wireframes

As this project is set in a more artistic and experimental context, explorations were also carried out regarding its interface.

It was defined early on that the interface would be simple and straightforward so that both original and created music albums would not be immersed and camouflaged in the interface.

The generation phase is translated into the search for solutions to the problem previously encountered, in this case, for the mapping of sound elements to visual elements. A survey of design proposals is made and results start to be generated through the system. Over time, the mapping becomes more complex and it is possible for the user to manipulate the results.

At this stage, the interface will also evolve as experiments are made and also as it is necessary to introduce elements to manipulate the visual elements.

The following Figma file shows most of the phases iterated for the development of the tool and its visual output.

Architecture

Style Guide

Final Result

All of this work resulted in this interface...

... capable of producing works such as these:

Website

The final result is online! 🎉
You can try it yourself through the following button:

In order to gain a better understanding regarding the state of the tool, as well as its effectiveness, usability tests were carried out.

During the tests, the designers were guided so that they first tried the tool, generating at least three music album covers. At the end, the users were asked to evaluate the components of both the generated object and the generation process.

14 answers were collected. The main objective of this questionnaire was to understand what the opinions were, how designers interacted with the tool, as well as to understand if they considered the tool a possibility in real contexts.

The survey consisted of 22 questions, divided into four groups.

👩‍💻 In the first set, the questions were related to the designers, the area in which they worked, and their relationship with algorithmic practices.

💿 The second set had the sole purpose of asking users to provide some of the covers they generated while handling the tool.

🖼 In the third set, the focus was directed towards the visual outcome of the generated covers.

✨ Finally, in the fourth set, the questions were directed at the tool itself, with a focus on the tool's handling options.

In the communication phase of the practical project of this dissertation a paper was written and submitted for a conference.

Simultaneously, several mockups of the generated covers applied to various objects were developed. In an initial phase applied to vinyls and, later, applied to various merchandise objects like t-shirts and tote-bags. This final decision was made due to the suggestion of some respondents in the evaluation phase.

Through the analysis of the results obtained in the evaluation phase, it was possible to realize that the tool has sufficient means to be used by designers in specific real contexts! 🎉
However, there is still room for improvement and addition of new features, as suggested by most participants in the evaluation sessions. Still, this project is probably the most difficult thing I've done in my life, which makes me especially proud that I faced some personal difficulties and never gave up.

🎼 Not as easy as I thought: Throughout the development of the tool, it was possible to note the lack of studies on the relationships between musical genres and graphic elements, which meant that the covers generated had a greater focus on the refining aspect.

⏱ If I had more time: It was also possible to conclude that the generated covers were consistent and, although different, work as a whole. BUT, future work sould focus on adding refinement options according to the feedback analysed through the usability tests.

🙅‍♀️ No limits: The possibility of using more sound elements intrinsic to the album to generate a greater diversity of visual elements should also be explored.