From mockups to user interface models: An extensible model driven approach

Sketching web applications with mockup tools is a common practice that improves the process of elicitation and validation of requirements in web applications. However, mockups are used as a "quick and dirty" way of gathering requirements, thus discarded before development. As a consequence, concepts captured in them are usually lost in the manual transformation between mockups and the final user interface. In this paper we present a model-driven approach that overcomes this problem by importing mockups and then transforming them into a technology-dependent model. Development then begins from the imported version of the mockups.Publicado en Lecture Notes in Computer Science book series (LNCS, vol. 6385).Facultad de Informátic

From mockups to user interface models: An extensible model driven approach

Sketching web applications with mockup tools is a common practice that improves the process of elicitation and validation of requirements in web applications. However, mockups are used as a "quick and dirty" way of gathering requirements, thus discarded before development. As a consequence, concepts captured in them are usually lost in the manual transformation between mockups and the final user interface. In this paper we present a model-driven approach that overcomes this problem by importing mockups and then transforming them into a technology-dependent model. Development then begins from the imported version of the mockups.Publicado en Lecture Notes in Computer Science book series (LNCS, vol. 6385).Facultad de Informátic

Collaboration Between Developers and Designers

Customer-facing applications are essential for businesses. Therefore, a good user experience is fundamental for their success in the market. Companies nowadays employ highly specialized people in front-end development and User Experience (UX) & User Interface (UI) design to achieve this goal. Their collaboration is critical, and raises some efficiency challenges in the software industry. This work focuses and is applied on OutSystems, a low-code platform that inherits these challenges. While there are some code-generation plugins for popular design tools, these do not generate code for low-code platforms. Therefore, the transformation process from design to development is done 100% manually, which is highly inefficient. Our goal is to accelerate this transformation process from a design model to a development model to mitigate this inefficiency. To do so, we developed an approach using model transformation techniques that automates part of the process. Namely, it automates the generation of application pages/screens by composing the screen mockups in a design technology (such as Figma or Sketch) with a library of reusable UI components to instantiate the design in a front-end technology (such as OutSystems). Our approach was validated by a professional team of front-end developers from an established enterprise-grade low-code platform who applied and evaluated this work on some of their past real projects. Preliminary results show an overall acceptance of the developed tool with a possible increase of 150% to 400% in the value that they can deliver without investing more effort than they already do today. This mitigates a bottleneck faced by development teams today. To increase the value, they could offer to customers (e.g., by producing more application screens in the same period), they would need to recruit new collaborators whose skill set is high on demand. This work delivers major efficiency improvements and lessens the severe lack of qualified professionals, by allowing existing ones to produce more without investing further effort.As aplicações são algo essencial para as empresas. Uma boa experiência de utilizador é fundamental para o sucesso destas aplicações no mercado. Hoje em dia, para alcançar este objetivo, as empresas empregam pessoas altamente especilaizadas em desenvolvimento Front-End e de UX (User Experience) & UI (User Interface) design. A colaboração destas equipas é crucial e de momento apresenta desafios de eficiência na indústria do software. Este trabalho foca-se na OutSystems, uma plataforma low-code, que tem subjacente estas ineficiências que estão presentes em toda a industria. Embora atualmente existam alguns plugins de geração de código para as ferramentas de design populares, estes não geram código para plataformas low-code. Portanto, o processo de transformação de design para desenvolvimento é um processo 100% manual, o que resulta em perdas de eficiência que serão refletidas no valor final entregue aos clientes. O nosso objetivo é acelarar este processo de conversão de um modelo de design para um modelo de desenvolvimento Front-End para mitigar esta ineficiência. Para tal, desenvolvemos uma abordagem utilizando técnicas de transformação de modelos que automatizam parte do processo. Nomeadamente, este automatiza a geração de páginas/ecrãs de aplicações através da composição de mockups de ecrãs numa tecnologia de design (como o Sketch) com uma biblioteca de componentes de UI reutilizáveis para instanciar o design numa tecnologia Front-End (como a OutSystems). A nossa abordagem foi validada por uma equipa profissional de desenvolvimento Front-End de uma plataforma low-code de nível empresarial que aplicaram e avaliaram o trabalho em projetos passados reais da equipa. Os resultados preliminares mostram uma aceitação global da ferramenta desenvolvida, com um possível aumento entre 150% a 400% no valor que conseguem oferecer. Isto permite mitigar um ponto de fricção que as equipas de desenvolvimento encontram de momento. Para aumentar o valor que a equipa consegue entregar aos clientes (por exemplo, através da produção de mais ecrãs no mesmo período de tempo), estes necessitariam de empregar novos colaboradores cujas habilidades têm elevada procura. O nosso trabalho oferece uma alternativa mais económica para o aumento da eficiência e ao mesmo tempo diminui o impacto da escassez de profissionais qualificados, ao permitir que os já existentes consigam produzir mais sem investimento adicional da sua parte

Interface Interaction Designer Integrated With Widgets

Application is a completely intuitive wire framing tool, principally went for experienced web designer that permits you to outline, make, and test wireframes and models. The application contains highlights like determination modes, widget styles, and the dynamic board administrator. It has three straightforward targets; the unmistakable presentation of Main gatherings of data, Layout/structure of data and Core representation and depictions of client interface co-operations. Similarly as with different tool in the rundown, Application gloats a move and customize highlight that permits you to gather your wireframe effortlessly and without a requirement for coding and all tasks can be imparted to different engineers to permit outline groups to work collectively on the same wire frame. Applications intelligence implies that the architect has the capacity offer thoughts with associates, customers and partners from the soonest phases of advancement, and its proficiency implies any adjustments and further improvements can be made rapidly

Closing the Gap Between Designers and Developers in a Low-Code Ecosystem

Digital systems play an important role in the strategy of companies nowadays as they are crucial to achieve their business goals as well as gain a competitive advantage. This is particularly true for systems designed for the end-users market. Not only has the number of such systems been growing steadily but the requirements and expectations of users regarding usability and performance have also increased. Developing software systems is a complex process that comprises several stages and involves multiple professionals responsible for different tasks. Two stages of the process are the design and implementation of User Interfaces. UX and UI designers produce artifacts such as mockups and prototypes using design tools describing what should be the systems behavior, interactivity and look and feel. Next, Front-end and Back-end developers implement the system according to the specifications defined by designers. Designers and developers use different methodologies, languages, and tools. This introduces a communication gap between both groups, and hence collaboration between them is not always smooth. This ends up causing less efficient processes, rework and loss of information. Developers sometimes overlook the importance of User Experience and Front-end De velopment. The corresponding project stages suffer when collaboration between groups is not optimal. Problems are particularly striking during the transition from design arti facts to front-end code. The procedures for doing this are often manual, very error-prone, and time-consuming for developers that end-up completely re-doing the designers’ work in the target web technology. The aim of this dissertation is to improve the efficiency of collaboration between de signers and front-end developers in the OutSystems ecosystem. This was carried out by developing a tool that transforms UX/UI design artefacts into low-code web-technology using model transformation and meta-modelling techniques. The approach has been evaluated in practice by a team of professional designers and front-end developers. Re sults show savings between 20 and 75% according to the project complexity in the effort invested by development teams in the above mentioned process.Os sistemas digitais têm um papel muito importante hoje em dia na estratégia das empresas, uma vez que as ajudam a atingir os seus objetivos de negócios assim como a ganhar vantagem competitiva face às demais. Isto é particularmente verdade para os sistemas destinados ao mercado dos utilizadores finais. Não só aumentou significativamente o número de tais sistemas como aumentaram também os requisitos e expectativas dos seus utilizadores. O desenvolvimento de sistemas de software é um processo complexo que envolve um número alargado de profissionais com diferentes perfis. Duas das fases são o design de interfaces e a sua implementação. Os UI e UX designers produzem um conjunto de ficheiros utilizando ferramentas de design descrevendo o comportamento, interação e aparência do sistema. Os Front-end e Back-end developers implementam as funcionalidades do sistema com base nas especificações dos designers. Designers e developers trabalham utilizando diferentes metodologias, linguagens e ferramentas. Isto introduz uma lacuna entre os grupos e dificulta a sua colaboração, originando processos menos eficientes, trabalho refeito e perda de informação. Os engenheiros de software por vezes negligenciam disciplinas tais como a Experi ência do Utilizador e o Front-end. Estas fases dos projetos são prejudicadas quando a colaboração entre os grupos não é ótima. Os problemas são particularmente evidentes durante a transição entre design e Front-end. Os procedimentos são manuais, altamente propensos a erros e demorados para os developers, que acabam por refazer o trabalho dos designers na tecnologia web desejada. O objetivo desta dissertação é melhorar a eficiência da colaboração entre designers e front-end developers no ecossistema OutSystems. Isto foi levado a cabo desenvolvendo uma ferramenta capaz de transformar artefactos de UX/UI em low-code utilizando transformações de modelos e técnicas de meta-modeling. A abordagem foi avaliada em prática por uma equipa profissional de designers e front-end developers. Os resultados obtidos mostram poupanças entre os 20 e os 75% de acordo com a complexidade do projeto no esforço investido pelas equipas de desenvolvimento no processo mencionado acima

From mockups to user interface models: An extensible model driven approach

Sketching web applications with mockup tools is a common practice that improves the process of elicitation and validation of requirements in web applications. However, mockups are used as a "quick and dirty" way of gathering requirements, thus discarded before development. As a consequence, concepts captured in them are usually lost in the manual transformation between mockups and the final user interface. In this paper we present a model-driven approach that overcomes this problem by importing mockups and then transforming them into a technology-dependent model. Development then begins from the imported version of the mockups.Publicado en Lecture Notes in Computer Science book series (LNCS, vol. 6385).Facultad de Informátic

M2Flex: a process metamodel for flexibility at runtime

International audienceExisting design and development methods do not meet designers' and developers' needs. They are difficult to learn and to use; they are complex, sequential and rigid and thus far from being adapted, reliable and efficient. This paper presents M2Flex, a process metamodel for highly supporting flexibility. M2Flex is based on a recent definition of flexibility along four dimensions: (1) versatility, the ability of the metamodel to provide various equivalent choices, (2) granularability, the possibility of defining components with several levels of details, (3) completeness, the possibility of defining optional components and pre-defined reusable results and (4) distensibility, the capacity of the resulting process model to be extended or reduced at runtime. This paper shows how M2Flex is original by the flexibility it offers to designers and developers at runtime

YODA – Your Only Design Assistant

Converting user interface designs created by graphic designers into computer code is a typical job of a front end engineer in order to develop functional web and mobile applications. This conversion process can often be extremely tedious, slow and prone to human error. In this project, deep learning based object detection along with optical character recognition is used to generate platform ready prototypes directly from design sketches. Also, a new design language is introduced to facilitate expressive prototyping and allowing the creation of more expressive and functional designs. It is observed that the AI powered application along with modern web technology can significantly help streamline and automate the overall product development routine and eliminate hurdles from the product development process