Development of an Artificial Intelligence Model Able to Generate Designs for Software Interfaces

La génération d’interfaces graphiques (GUI) est un domaine de recherche récent qui ne compte pas encore de nombreuses oeuvres. Cependant, l’application de ce domaine peut avoir un impact positif dans la création de sites Web, d’applications et d’autres logiciels. Lors de la conception d’une interface utilisateur graphique (GUI), les concepteurs professionnels s’inspirent souvent du travail des autres pour définir le style lors de la phase de conception. Bien que cela soit une partie critique de la conception d’interface, la recherche d’exemples de conception inspirants et pertinents prend du temps. La plupart des concepteurs utilisent des mots-clés pour rechercher de l’inspiration, mais une entrée basée sur des contraintes pourrait être bénéfique pour les concepteurs afin d’obtenir de l’inspiration à partir d’exemples ayant la structure attendue. Dans notre recherche, nous nous intéressons à la génération de conceptions GUI nouvelles, créatives et intuitives basées sur les contraintes des concepteurs. Notre contribution dans ce domaine commence par une méthode proposée, appelée GUILGET. GUILGET prend comme entrée un graphe de contraintes basé sur des graphiques appelé « graphique d’agencement GUI » (GUI-AG) et produit une disposition GUI réaliste en respectant la contrainte donnée. Notre méthode est basée sur des transformateurs et met en oeuvre de nouvelles techniques inspirées du processus de conception GUI du monde réel. Ces techniques comprennent l’ajout d’informations hiérarchiques à l’entrée, l’inclusion des éléments enfants à l’intérieur de leur parent en utilisant une perte, la séparation des composants enfants partageant le même parent en utilisant une perte, et une grille avec une taille de cellule prédéfinie où tous les bords des composants sont ajustés au bord de grille le plus proche.

Abstract

GUI generation is a recent area of research that does not involve many works yet. However, the application of this area can have a positive impact in the creation of websites, applications, and other software. When designing a Graphical User Interface (GUI), often professional designers get inspired by others’ works to define the style during the ideation phase. While this is a critical part of the interface design, searching inspiring and relevant design examples is time-consuming. Most designers use keywords for searching inspiration, but constraint-based input could be beneficial for designers to get inspiration from screens having the expected structure. In our research, we are interested in generating new, creative, and user-friendly GUI designs based on designer constraints. Our contribution in this area starts with a proposed method, named GUILGET. GUILGET takes a graph-based constraint as input called GUI arrangement graph (GUI-AG) and produces a realistic GUI layout in respect to the given constraint. Our method is based on transformers and implements new techniques inspired from the real world GUI design process. These techniques comprise the addition of the hierarchical information in the input, the inclusion of the children inside their parent using a loss, the separation of children components that share the same parent using a loss function, and a grid with predefined cell size where all component borders are snapped to the closest grid edge.