The brand design feld has been witnessing a shif towards Dynamic Visual Identities, particularly System-based Visual Identities, which ensure brand recognition through a coherent visual language rather than relying on a singular graphic mark. Although increasingly relevant, this domain remains underexplored, with limited resources available to guide designers in its development. To address this gap, we present a web-based tool which has the goal of supporting the creation of visual identities.
The rise of new technologies has led to the emergence of Dynamic Visual Identities (DVIs) [
One increasingly prominent form of DVI is based on an approach that ensures brand
recognition through a coherent visual language rather than a singular graphic mark [
To address this gap, we propose the web-based tool DynamicIDioms, shown in Figure 1, designed to
ofer a comprehensive toolkit for the development of Dynamic Visual Systems [
The tool also showcases the potential of parametric and automated design processes to achieve
varied outcomes, an expanding approach in the design feld [
As seen in Figure 1, the user interface is well-structured, with dividing lines between sections and buttons. The light grey background emphasises the canvas area, where the visual outcomes are displayed, while providing a good contrast with the remaining interface elements. The main interface is composed of the canvas, a button to manipulate the background, buttons corresponding to the uploaded graphic elements, and other functionalities such as format, export and access to the gallery. These interface features always remain visible, supporting an uninterrupted workfow and user orientation. Collectively, these features enhance usability while enabling playful parameterdriven visual experimentation.
The website architecture is structured around the features that will be detailed in the following subsections.
Users upload one or multiple SVG fles that are parsed and rendered within the DOM and placed in the canvas. Buttons corresponding to each uploaded SVG pop up at the top of the interface as tabs. Elements appear in the order in which they are uploaded, determining their stacking position, either above or below other elements. If users want to change their order, elements can be rearranged by dragging and dropping their corresponding buttons. Additionally, each button has an option for deleting, allowing to easily remove elements that are not desirable anymore.
Each graphic element has its own dedicated section for customisation, which is expanded or collapsed when clicking on the corresponding buttons. When an element is selected, the remaining ones are dimmed by adjusting their opacity. This facilitates the identifcation of which element is being manipulated.
Users can decide if graphic elements are static or dynamic. Static elements stay equal in each iteration, while dynamic elements are variable. For each element, there is a menu “composition” where users can defne the elements’ position, degree of rotation, size, and colour.
For dynamic elements users can select one or a combination of the following variation mechanisms: colour variation, content variation, position, repetition, rotation, scale, and shape transformation. Variation mechanisms are the only interface elements that have bright colours to highlight their importance on the development of dynamism.
Each mechanism triggers JavaScript functions that apply CSS transformations to the SVG element. For each variation mechanism, users can defne a range of values (minimum and maximum) with a dual-handle slider, in which the variation will occur. For colour variation and content variation, users select a number of colours or upload a set of images that will be picked randomly for each iteration.
Users can select and combine diferent variation mechanisms to explore diverse forms of dynamism, as demonstrated in Figure 2. The sequence in which these mechanisms are applied infuences the results, e.g. applying rotation before repetition results in the repetition of the rotated element, whereas applying repetition before rotation results in the rotation of the repeated elements. The interface allows an easy way to delete applied variation mechanisms and enables the reordering of mechanisms via a drag-and-drop functionality, providing users with an easy way to experiment with diferent forms of dynamism.
Below the canvas, a button “GIVE ME DYNAMISM!” allows the generation of dynamism. This button triggers a function that gets the values of all dynamic elements and randomises them, enabling users to check varied results with each click. This button is of higher importance because not only it demonstrates visual dynamism but also how parametric and automated systems can quickly generate diverse outcomes.
Given its central role in the experimental process, it has been deliberately positioned at the centre of the interface and visually distinguished from other interface elements.
Options like “1×1”, “4×5”, “16×9”, or custom dimensions allow users to change the canvas size and test their visuals in diferent formats. When the size is changed, graphic elements adapt their positions to the new format.
The generated images can be exported in PNG format. Furthermore, users can download a text fle containing the underlying grammar of that experiment. These values represent the rules of the visual language, detailing the variation mechanisms and the respective range of values of each dynamic element. This allows users to understand the parameters that generated that visual language.
Users can save their favourite results in a gallery section by clicking the “save to gallery” button. In the context of visual identities, this feature is critical as it enables users to review multiple generated options side by side, highlighting the overall coherence across variations. The gallery helps users perceive the experiment not as isolated results, but as a unifed, dynamic system. While the “GIVE ME DYNAMISM” button provides a sense of real-time variability, it is the whole that reveals the full potential of the visual language, as demonstrated in Figure 3. Additionally, users can export all saved gallery visuals together in PNG format for further use.
The tool has proven to be a valuable resource to users, not only to understand the mechanisms behind dynamic identities but also as a creative aid, given its unpredictable results. Due to the possibility of using personal designs and to the amount of variation mechanisms that can be combined in diferent ways, the possibilities for outputs are unlimited, as evidenced by the examples in Figure 4. It is also possible to observe that each experiment achieves dynamism while maintaining coherence, as each iteration is based on the same set of rules. Moreover, this tool highlights the advantages of using computational tools, not only for designing coherent visual systems but also for expanding creativity.
I would like to express my gratitude to my supervisors, João Miguel Cunha and Tiago Martins, for their guidance, support, and encouragement throughout the development of this work. I would also like to thank Sérgio Rebelo for his kindness and support.
During the preparation of this work, the author used ChatGPT and Grammarly in order to: Grammar and spelling check, improve writing style. Afer using these tools, the author reviewed and edited the content as needed and takes full responsibility for the publication’s content.