Converting wireframe images to UI designs using conditional adversarial networks

Abstract

This study presents a novel method that uses Conditional Generative Adversarial Networks (cGANs) to transform wireframes into User Interface (UI) designs. Wireframes outline the structural and functional components of a website, serving as crucial blueprints in UI design. Converting wireframes into polished UI designs is time-consuming and labour-intensive. This automated solution minimizes manual effort by using cGANs. Due to the lack of suitable datasets, 1,000 UI screenshots were manually collected from 75 software company websites, and corresponding wireframes were created. The 700 pairs were used for training, 150 for validation, and 150 for testing. In the proposed method, wireframes are converted into UI images by the generator of the cGAN, and these images are verified by the discriminator to ensure they match real UI designs. The cGAN was trained for 100 epochs with adversarial and L1 loss functions to enhance the robustness of the model and prevent overfitting. The experimental findings show that the proposed approach is capable of producing user interface designs, greatly speeding up the design process and increasing productivity. Quantitative metrics, including the Structural Similarity Index Measure (SSIM) and the Peak Signal-to-Noise Ratio (PSNR), were used to assess the structural and visual characteristics of the generated UI images and evaluate pixel-level similarity. An SSIM of 0.76 and a PSNR of 27.6 were achieved on test data, indicating close alignment with the ground truth screenshots. This study revealed how incorporating AI accelerates software design and prototyping in UI development. Future work will focus on increasing the dataset size, covering additional domains, utilizing more sophisticated GAN architectures, and incorporating human evaluations to further validate the results.