This article presents a methodological framework in order to integrate interaction patterns validated during the development of web software to contribute to reducing the differences between user interface design and software development. The proposal is based on three aspects: (1) a systematic method to link documented interaction patterns (such as online validation, multi-step flows) with functional requirements during the requirements engineering process; (2) an experimental tool that uses customer adaptation to convert high-fidelity prototypes (designed in Figma/Sketch) into semantic and modular HTML/CSS/JS code, including business logic linked to interaction patterns, and (3) a testing approach that combines the System Usability Scale (SUS) with case studies to validate the effectiveness of the method. The iterative process encourages collaboration between users, designers and developers, prioritizing consistency between user expectations and technical specifications. The tool’s architecture comprises modules to import design metadata, enrich components with pattern-based rules, and generate reusable code. The contributions lay the foundation for future research in pattern-based design automation and its integration into software development environments.

错误:搜索内容不能为空,请输入英文关键词
错误:关键词超出字数限制,请精简
高级检索

Web Development Based on Design-Transfer Through Client Adaptations

  • Jonathan Delgado Guerrero,
  • Leandro Antonelli,
  • Diego Firmenich

摘要

This article presents a methodological framework in order to integrate interaction patterns validated during the development of web software to contribute to reducing the differences between user interface design and software development. The proposal is based on three aspects: (1) a systematic method to link documented interaction patterns (such as online validation, multi-step flows) with functional requirements during the requirements engineering process; (2) an experimental tool that uses customer adaptation to convert high-fidelity prototypes (designed in Figma/Sketch) into semantic and modular HTML/CSS/JS code, including business logic linked to interaction patterns, and (3) a testing approach that combines the System Usability Scale (SUS) with case studies to validate the effectiveness of the method. The iterative process encourages collaboration between users, designers and developers, prioritizing consistency between user expectations and technical specifications. The tool’s architecture comprises modules to import design metadata, enrich components with pattern-based rules, and generate reusable code. The contributions lay the foundation for future research in pattern-based design automation and its integration into software development environments.