Automated User Interface Prototyping Framework Integrating Cognitive and Visual Design Principles to Improve Usability and Layout Clarity.

Abstract

Effective user interface (UI) design requires a harmonious balance between visual appeal, cognitive usability, and layout consistency. However, current automatic UI generation approaches primarily focus on visual appearance or component detection and lack a unified framework that integrates cognitive principles, color intelligence, and structural reasoning. Furthermore, existing methods suffer from limited layout generalization, poor interpretability, static color selection, and inconsistent behavior across screens. In this context, this work proposes an automated UI prototyping framework that integrates the Faster region-based convolutional neural network (Faster R-CNN)-based component detection and CIECAM02 uniform color space (CAM02-UCS)-driven perceptual color modeling, enriched with cognitive and visual design principles. The Faster R-CNN is used to identify UI components and infer hierarchical structures from large-scale interface datasets. An enhanced color generation module analyzes brand or reference images to ensure perceptually uniform, harmonious, and usability-compliant color themes using CAM02-UCS. These outputs are further optimized through cognitive design rules, including Gestalt grouping, Fitts' and Hick's laws, attention-based spacing, and visual hierarchy modeling, to automatically generate refined, task-oriented UI layouts. Experiments conducted on RICO, ENRICO, and Guo's UI Color Datasets show that the proposed system achieves 92.4% component detection accuracy, improves layout clarity and reading order accuracy by 18.7%, and produces color palettes rated 24.5% more harmonious by designers compared to baseline methods. User evaluations also indicate a 31% reduction in perceived cognitive load and a 28% increase in design consistency across screens. These findings demonstrate that combining deep learning-based structural understanding with perceptually grounded color modeling and cognitive design principles produces UI prototypes that are highly efficient, aesthetically coherent, and user-friendly. This framework establishes a novel, end-to-end approach to intelligent and human-centered automated UI prototyping.