The Scenarios of Artificial Intelligence and Wireframes Implementation in Engineering Education

Abstract

Artificial intelligence (AI) and related technologies have become important components of the digital economy and affect core areas of our increasingly technologically networked lives. Specific AI technology can support diverse learners and how AI is used in particular in the context of Adult Education to provide a more inclusive and flexible learning environment. Artificial intelligence has been changing education for a long time now, and it is becoming more pervasive in our lives. The authors analyzed many advantages of using AI as an educational tool, such as increasing student engagement by improving grading accuracy by automatically scoring essays with machine learning algorithms. We present a case on how wireframes can be used in website design. Several existing tools have been examined, and their ability to generate interfaces from sketches has been explored. Creating wireframes, prototypes, design mock-ups, and layouts followed the web development process and is now a significant part of website development in engineering education. The paper aims to give the direct opportunity to observe examples of AI wireframes for engineering education.

1. Introduction

The cause of inclusive education has been promoted for some time, recently, through the United Nations (UN’s) sustainable development Goal 4 [1]: to “ensure inclusive and equitable quality education and promote lifelong learning opportunities for all”. Artificial intelligence and related technologies have become important components of the digital economy and affect core areas of our increasingly technologically networked lives. AI has the potential to make a significant impact on our lives and transform our future ways of learning, working, traveling, and communicating. However, the challenges are also substantial; the uneven access to and impact of AI-based technologies on marginalized and disadvantaged groups leads to the possibility of widening the gap in digital inequalities. These groups include urban and rural poor communities, women, youth, ethnic and racial groups, migrants, people with disabilities, and mental health issues, particularly those with multiple disadvantages. The impact of artificial intelligence on learning, teaching, and education suggests that AI will change learning, teaching, and education in the next few years.

For AI to be truly inclusive, changes are required at all three levels—the algorithm, data, and end-users. The three components of Inclusive AI are diverse teams work on the algorithms, data used for training is representational of diverse users, and the applications themselves are accessible to diverse user groups [2]. The case we are providing is in line with the inclusive technologies for end users and has interest in designing effective mobile applications based on AI technologies (wireframes).

However, we are focusing on the AI problem areas related to inclusive AI, and building apps and websites for that is quite slow. Some designers would draw their ideas directly in software using their graphic tablet in an attempt to save some time. However, our research focuses on the existing practices of the modern AI-driven workflow that we envision for building apps and websites. Moreover, for web development, it is necessary to invest both time and money, as well as in predevelopment designs.

Artificial intelligence opportunities in education are related to (1) education management and delivery; (2) AI to empower teaching and teachers; (3) AI for learning and learning assessment; (4) development of values and skills for life and work in the AI era; (5) AI for offering lifelong learning opportunities for all; (6) AI for learning analytics. In such cases, the information is organized, and such systems can constantly provide information from various sources and never forget anything. One of the essential aspects of AI in education is that it promotes personal teaching and learning. Artificial intelligence personalizes education by creating individualized lessons and activities for students according to their needs and interests [3]. The development of digital tools and their increased connectivity, the amount of data generated by digital tools, and their computing power has grown enormously. This assures the deployment of intelligent systems that can recognize patterns in large amounts of data and that are increasingly capable of imitating human behaviour, especially human reasoning. Therefore, these systems can perform tasks independently or support users in performing tasks [4]. Saloi et al. [5] developed a system of personalized or private tuition that is equally exercised in the localized area alongside normal academic classes at school.

Buschek et al. [6] present a case study of user-centred development of machine learning tools for UX designers by showing a paper sketch to digital wireframe with our concept and prototype: (a) A designer sketches a GUI on paper, (b) then takes a photo of it to (c) import it into a wireframing software (Sketch) for (d) further modification. Based on this example case, we discuss lessons learned for developing ML tools, not opportunistically, but in a user-centred way that respects the needs and practices of practioners.

The systematic review [7] discussed example-based automatic website generation, and Artificial Intelligence (AI) driven website generation for individuals. The presented analysis initially segments the state –of –the art into three categories based on the dominant strategy used for automatic generation. These strategies are example-based, mock-up-driven, and artificial intelligence-driven automatic website generation. Kaluarachchi et al. [7] provided findings that show tools for wireframe design allows designing tailored and personalized websites by learning and flawlessly matching the optimal layout design, web elements, and content to generate unique, attractive, and powerful websites in minutes with just a few simple questions.

We can identify many advantages of AI in education (see Figure 1). Personalized learning aims to provide adequate instructions that are assisted through technology and encourage students to collaborate to increase their knowledge of specific topics [8].

However, if we look at artificial intelligence solutions more precisely, we can identify the following disadvantages of AI. One disadvantage is that students lose the ability to practice and learn social skills since they do not communicate with real people during lessons. This makes it difficult for them after finishing school, and they need these kinds of communication skills at work or even in the everyday social context as adults. One of the significant disadvantages of AI in education is that students only utilize results from a particular dataset; unlike a teacher’s instructions, it only shows instructions based on limited datasets. According to their algorithms, the instructions based on artificial intelligence remain the same, while teachers may become more experienced in terms of the number of years in their field [9]. Due to artificial intelligence’s attractiveness for students, teachers, and education administrators, it is necessary to prevent addiction to artificial intelligence at the exclusion of more traditional methods. Meanwhile, inclusive learning can be related to virtual reality, allowing students more control over their learning processes and giving them real-life experiences that they can apply in daily life. Skills acquired during virtual reality learning can be successfully transferred to real-world problems and scenarios. One of the most useful and inherent advantages of virtual reality technology is the ability to re-perform the procedure in a safe environment with low resources and to utilize artificial intelligence rationally [10].

To achieve this, one needs to rely on artificial intelligence to solve learning, teaching, and management problems and find out what knowledge lies in AI solutions [11]. Possible disadvantages are depicted in Figure 2.

We were exploring the most user-friendly collaborative design and prototyping tools powered by machine learning and computer vision, giving us an opportunity for front-end developers (see Figure 3). Such technology allows designers and developers to save time and focus on providing value to end users.

Conceptually, existing tools focused on technically enabling new functionality with little reporting on how this works is then integrated into concrete mockups. Moreover, it makes it difficult for designers’ practical perspectives and experiences with such ML tools to be used in practice and related to Artificial Intelligence and Wireframes Implementation in Engineering Education. Our goal is not to innovate ML but to advance our understanding of how to investigate ML opportunities for design tools in practice.

We explore a research question; i.e., how could we identify opportunities for integrating ML into an established design process in engineering education?

This paper aims to find the opportunity of technologies for engineering education in web design by using wireframes-based AI solutions.

The research is implemented in the frame of a master’s degree study programme “Information Technologies”. According to the limited number of students, we have some limitations in the sampling, methodology, and analysis in the current work. The paper consists of the chapters: literature review, analysis of the existing AI wireframes tools, methodology, results presentation, discussion, and conclusions.

2. Literature Review

AI in education (AiED) initially has been used in the form of computers and computer-related systems. Later, the form of AI usage changed to a web-based and online education platform. This allowed the use of robots in the learning process to assist teachers or play the role of teacher or instructor. The use of such platforms or tools provides an opportunity to improve the efficiency and effectiveness of teachers, resulting in a more prosperous or improved quality of teaching. AiED allows for the adaptation of learning materials to the needs and capabilities of students, which can give students an enhanced learning experience [12]. As well as this, AI influences what students learn through recommendations and how they learn. In addition, it can help identify which pedagogies are more effective and retain the learner’s attention [13].

One of the ongoing challenges in software engineering is the development of effective, user-friendly graphical interfaces. For over two decades, usability within software engineering has been researched with new methods for design and evaluation emerging. People’s interaction with technology has also evolved through gesture and speech-based interaction. However, interaction with a graphical user interface in various contexts still relies on interaction in various contexts, from business systems to mobile games. The graphical user interface is a user interface in which interface elements (menus, buttons, icons, lists, etc.) are presented to a user on display in the form of graphic images [14]. Several authors analysed using wireframes in education, but for very different purposes [15,16,17].

In the software engineering cycle for User Interface (UI) designing, there is a heavy back –and forth of prototypes between the UI concept creator, UI designer, and UI programmer before finalizing a design. This process is very time consuming and requires extensive human effort. With the recent developments in artificial intelligence and its capability to automate repetitive tasks which require little to no creativity, the UI design cycle is an ideal candidate for its application. Many algorithms are being developed to shorten this cycle, allowing rapid prototyping, and ultimately reducing cost. Moreover, various algorithms are developed to work for different levels of fidelity in wireframes [18].

Wireframes are an important part of the User Experience (UX) design process. By integrating UX into the learning process, students can understand how to design functional and user-friendly digital products and better understand the importance of taking into account end-user needs and requirements in the design process [19,20]. Schmidt et al. [21] mention the need to use prototyping in the learner experience design process, not just in the user experience design process. In this case, it is about creating learning experiences taking into account various factors, such as instructional design, technology, and emotional design.

In general, website design can be based on tools that can be tangible or digital. Tangible wireframes represent a page layout or drawing. No digital media is needed for the situation using this tool. A tangible wireframe can reveal certain aspects that do not work as well as one might think initially. Meanwhile, digital wireframes allow mock ups to be conducted digitally via a computer, mobile, or tablet device. Sutipitakwong et al. [22] found that the main advantages of tangible wireframes are (1) suitable for beginner design users; (2) increasing soft skills; (3) spending less time; (4) no prior skill is required. For comparison, the advantages of digital wireframes include: (1) being suitable for advanced design users; (2) availability of flexible design elements; (3) being suitable for complex functionality and details. Nevertheless, the authors also identified some disadvantages. Tangible wireframes are not flexible for experienced users and are limited by their out-of-the-box features. Meanwhile, the cons of digital wireframes require prior wireframing knowledge and skills in tools.

Balsamiq Wireframes Academy [23] says that a wireframe is a schematic or blueprint that is useful for helping students—future programmers and designers think and communicate about the structure of the software or website you are building.

Our paper is focusing on the wireframes that are made up of several visual components, represented in a simplified way, that aims to show the location of each of them together. AI really is the new UI; it seems planning interfaces and interaction flows that adapt should be a part of UX practice. Interestingly, this is extremely rare. Practice-focused design patterns as well as books and articles on wireframing do not discuss how to design for adaptation or how to collect the information needed for ML [24].

Few design tools support the automatic transition from paper to digital content: for example, Balsamiq and Uizard convert paper sketches directly into GUI code, skipping large parts of the digital wireframing phase. This may assure the effectiveness of the application design process, assure the creative intervention and control by designers, and motivates our investigation of ML to support the transition to wireframing instead of skipping this step. Other work used deep neural networks to “reverse engineer” UIs by generating UI code from UI screenshots preceding development towards a Uizard tool to turn sketches/wireframes into higher quality artboards [6].

Dave et al. [18] present the categories of wireframes: (1) low fidelity—simplistic, cost-efficient low-level mock ups; (2) mid fidelity—the most commonly used type of wireframes. They express more details and aim to be more visually coherent to showcase what the final product looks like with more detail and complexity; (3) high fidelity—the most detailed and closest to the desired end product. They often include the actual images to be used and may feature the content to be displayed on the actual website.

According to J. Chen et al. [25], a wireframe is a static, low-fidelity representation of a final product and is made up of several visual components, represented in a simplified way that aims to show the location of each of them together.

With wireframing tools, you can use a low-fidelity version of the product that is hand-drawn or made through software or a high-fidelity design that includes colours, images, and text and consumes more resources to create than the low fidelity. The opportunity to have a tool allowing the automatic generation of static web pages from a handmade design will allow more users to have a website in less time and at a lower cost by allowing them to have a presence on the internet. There are currently proposals to solve this problem but they are limited; they present functionality to enter a wireframe image and generate HTML code [26]. Dave et al. [18] also state that not only is a website’s functionality important but also information hierarchy and flow started to carry weight. User experience and user design studies started expanding parallel to the study of human psychology.

Wireframes often go hand in hand with design thinking in education, as wireframes can be a tool for testing and iterating possible solutions during the design thinking process. In this case, wireframes play an important role in the prototyping stage of the process allowing designers and stakeholders to quickly test and refine ideas, i.e., it is easier to communicate ideas and receive feedback. Wireframes can also be used to test key product features, such as navigation and user flows, before moving on to more advanced stages of development. This means that any potential problems or usability issues can be identified earlier in the design process [27,28,29,30,31].

It should be noted that some authors [32,33,34] also discuss the disadvantages and risks of artificial intelligence in education, despite all the advantages. One of the important identified risks is the ethical aspect. In education, ethical AI is crucial to ensure the well being of learners, teachers, and other stakeholders involved. The ethical impact of AiED may be at the individual level or may affect the relationship between different stakeholders in general. For example, erroneous learning materials may be recommended to students or impact teachers’ perception of learner progress [13]. Holmes et al. [35] discuss various areas of AiED ethics, such as the ethics of educational data, user modelling, e-learning environments, intelligent agents, the large volumes of data, and how the data should be analyzed, interpreted, and shared. Borenstein and Howard [36] emphasize the importance of developing the professional thinking of members of the AI community and offers recommendations that could help introduce students to the ethical challenges of AI: (1) training the ethical design of AI algorithms; (2) incorporating fundamental concepts of data science and data acquisition ethics; (3) offering ethics lessons in a variety of ways and on multiple occasions.

Despite the weak points of the wireframe using wireframes in the education process can benefit students by improving their engagement, motivation, and learning outcomes. Wireframes can provide students with visual representations of digital product design and learning environments to help them better understand the design process. The interactive nature of the wireframes encourages students to participate more in the design process and encourages them to become active participants in their learning because they can explore and experiment with different design concepts and ideas. In addition, it can help improve student collaboration as they create and refine their designs together. This can help foster a sense of community and cooperation and provide opportunities for students to develop teamwork and communication skills.

3. Analysis of the Existing AI Wireframes Tools

The purpose of a wireframe is to convey the initial design idea of a website or application visually. It serves as a user interface blueprint or framework that allows designers and stakeholders to understand the content hierarchy, navigation, and functionality of the final product before it is built. There is no special format for how they should be presented. Still, most characters are presented in the standard, commonly used ways (Figure 4).

Wireframes help clarify design visions, reduce later design works and changes, and ensure that the final product meets user and business requirements. There are several special applications for creating wireframes, such as (1) MockFlow—wireframing and product design software [37]; (2) Balsamiq—a quick wireframing tool [38]; (3) Uizard—a rapid tool used for designing wireframes and prototypes [39]; (4) Figma—browser-based interface design tool [40]; (5) Sketch—vector graphics editor and digital design tool [41]; (6) Axure RP—wireframing, prototyping, and documentation tool [42]. This is not an exhaustive list, also there are other wireframing tools available. However, among the more user-friendly options to create wireframes, mock-ups, and so much more, Balsamiq is one of the good choices (see Figure 5). This tool helps create digital sketches or concepts for an application or a website. Such wireframes define the initial structure of the design and are used for user testing, clarifying the basic vision of the website or as a map for the interface or layout of the product.

Another tool Uizard (see Figure 6) also has a user-friendly collaborative design and prototyping tool, and an entire team—powered by machine learning and computer vision. Both wireframe tools are used in design processes to create visual representations of websites and applications.

Products mentioned above have various functions, such as tools for outlining the structure and content of applications; element libraries with structures and symbols; interface creating and editing tools; low-fidelity mock ups; possibility to export or share. A more detailed comparison of tool features is provided in

Table 1. Comparison of Balsamiq and Uizard features.

Features	Balsamiq	Uizard
Collaboration Tools	+	−
For Mobile	+	+
For Websites	+	+
Prototype Creation	+	+
Reporting/Analytics	−	+
Usability Testing	+	+
Desktop Interface	+	−
Cloud, SaaS, Web-Based	+	+

.

Both compared tools have characteristics suitable for low-fidelity wireframes. Tools are used to create wireframes directly in the tool. Balsamiq’s user interface is simple, while Uizard has a more modern and intuitive design. Balsamiq also has limited collaboration functions, while Uizard allows real-time collaboration and version control. Another dissimilarity is related to tool integration, i.e., Balsamiq integrates with a wider range of tools, while Uizard has limited integration. The main difference is that in Uizard you can sketch ideas on paper and import them into Uizard for further editing. Additionally, it is possible to upload your Balsamiq wireframes to Uizard and use its AI features to continue your work. Uizard artificial intelligence provides the ability to convert a manually or automatically created theme from a low-fidelity prototype to a high-fidelity one.

Technology is making incredible things possible for humans today with advancements made every day, including artificial intelligence, which allows personalized learning by smart content on your phone when you need it most because of adaptive learning technology. The use of wireframes may be a good solution to allow students or teachers to interact with their designs quickly.

4. Methodology

A qualitative research method—case study—was chosen to solve the research questions related to the student’s learning of AI technologies and tools in the selected study module. A case study was chosen as a methodology that allows for an in-depth study of a specific context [43], i.e., the case study was chosen to analyse how artificial intelligence solutions can be applied in the teaching process. The data were collected during the study module “Multimedia” workshop using the Moodle system and a Google Form. During this module, students learn to identify definitions of multimedia technologies and functions of multimedia in open and distance learning. Students also analyse multimedia technologies, learn to create audio and video materials, use video conferencing, and create graphic and animation materials. A total of thirty-three first-year master’s students (twenty-eight women and five men) participated in the workshop. The workshop was facilitated by two teachers. Both teachers were responsible for Scenarios 1 and 2.

The assignment presented to students was a part of the formative assessment. We used formative assessment to collect detailed information that can be used to improve instruction and student learning while it is happening. The way it is used focuses on better learning modifications and learners’ skills. Students obtained full reflection on the assignment implementation with the aim to improve the developed results. Moreover, students shared their founding on the process of implementation wireframes by filling out the questionnaire.

One of the pedagogical aspects of the use of wireframes in the learning process is to encourage creativity, critical thinking, and inclusion. Wireframes implementation scenario presented in the paper shows a framework of the visual representation of a website, mobile application or product that allows us to define the structure of the page, hierarchy, and placement of elements, and helps engineer study programme students to plan the layout and interactions without the visual distractions of a high-fidelity mock up in the most inclusive and effective way.

In this case, wireframes visually represent ideas and concepts, allowing students to explore and experiment with various design possibilities. Another aspect is the improvement of problem-solving skills, i.e., when creating wireframes, students must analyse user needs and develop solutions to design problems. Finally, students can learn to collaborate effectively with others and communicate their ideas.

From a technological perspective, wireframes can be used to create interactive prototypes that simulate user experiences. Thus, students can learn to use these tools to create prototypes that can be tested and improved based on user feedback. It can also be mentioned that wireframes can be designed with accessibility in mind, ensuring that the user interface is easy to navigate and use for all users.

The workshop consisted of two main parts: (1) performing tasks according to the presented scenarios; (2) filling out the questionnaire (see Figure 7).

According to the previous review, the Uizard tool was chosen to complete the practical tasks. Using Uizard, hand-drawn elements are recognized and quickly converted into a digital prototype. The resulting digital design can be modified and transformed, additional components can be added, or existing elements can be deleted.

After the practical work, it was important for the students to discuss and evaluate each other’s work. This allowed for constructive feedback and for students to learn from each other’s viewpoints and perspectives. In this case, a practical assessment was created and added to the Moodle course. As previously mentioned, the workshop was organized with master’s degree students, so peer assessment can be seen as a tool for promoting collaborative learning and providing students with feedback from their peers.

5. Results

According to the literature review, wireframes were applied to scenarios in the processes of prototyping learner experiences and designing websites. A low-fidelity wireframe was used, which allowed it to quickly iterate and test different layouts and content without having to delve into visual design details. This helped to identify potential issues with user flow and usability early.

At the beginning of the study, participants learned the theoretical basics of the use of wireframes in the learning process and the functionality and use of the Uizard tool. Furthermore, the application and necessity of such tools were discussed briefly. Four different mobile application design sketches were drawn by hand in advance and given to the participants (see Figure 8).

The Login screen (see Figure 8a) consists of a form that prompts users to enter their login details, such as username, email address and password. Furthermore, this screen contains other items: a link “Forgot Your Password?”, a “Sign in” button, and a connection to a refresh page or an e-mail system. At the top of the screen is the place where the logo and course name is located. The Course Content screen (see Figure 8b) provides a detailed course overview, lesson structure, and core course material. In the Course Material screen (see Figure 8c), learners can find organized the logical sections of course material and different incorporated multimedia elements, such as images or videos. The last is the Evaluation screen (see Figure 8d), which is used for student assessments, semester work, and other module evaluation tasks. The screens also include “Home”, “Back”, “Forward”, “Search”, and “Email” buttons to enable users to communicate quickly and easily between the screens and other necessary systems.

Then two different task performance scenarios were presented.

Scenario 1.

The task of Scenario 1 was to detect and recognize the types and positions of user interface elements and automatically convert the sketches to a wireframe. Participants were asked to download sketches and display them on the screen using the Uizard tool.

Basic elements, such as input fields, images, text, and navigation buttons, were chosen and suggested automatically by wireframe pretty accurately. Unfortunately, automatically converted elements are not always positioned correctly, i.e., are not displayed in the same way as in the drawn sketch (see Figure 9a). Therefore, if necessary, the participants could adjust the digital prototype to match the design drawn in the sketches by making improvements or adjustments (see Figure 9b).

The participants also had to establish relationships between the created pages (for example, clicking the “Sign in” button on the first page will take the user to the next page, etc.) (see Figure 10). Although this feature can be very useful, it can also cause some difficulties. The relationship feature of the Uizard can be complex, especially for users unfamiliar with the principles of user interface design. Some students found it a little difficult to understand how to create and manage relationships between different elements on a page. They had additional questions about using this feature and took time to learn.

It should be noted that links to external pages are also possible, but participants did not test this function during the workshop. After completion, students shared their completed work with teachers and uploaded them to Moodle.

Scenario 2.

The main difference between this Scenario 1 and Scenario 2 is that the participants had to position the design elements manually using the Uizard toolbox and functions (see Figure 11). The same design sketches were provided for the task (see Figure 8).

Students manually added the design elements to the appropriate position on the canvas. They were able to do this using the drag-and-drop interface or by selecting items from the Uizard library. Uizard offers a series of tools that can be used to manually position design elements. These tools include movement, resize, rotate, and skew functions. Students used these tools to adjust the position, size, and orientation of selected elements. Moreover, it was possible to use a set of functions, such as align, distribute, and styling functions. Scenario 2 required students to create a relationship between screens using the interact function. As in the Scenario 1 case, after completion, students shared final projects with teachers and uploaded them to Moodle.

It should be noted that in both scenarios the students’ projects were slightly different from the given tasks. Most of them have created detailed wireframes just like the sketches they downloaded. Unfortunately, some participants created incomplete screens (i.e., the number of elements was not sufficient or the number of designed screens was less than four) or they chose not to create relationships (see Figure 12).

Thirty-three Scenario 1 projects and thirty Scenario 2 projects were completed and uploaded to Moodle. Three students did not complete Scenario 2 tasks. Projects with the same number of design elements and the same position of elements as in the sketches accounted for 100% of Scenario 1 and 60% of Scenario 2. A total of 100% of Scenario 1 projects and 63% of Scenario 2 projects had the same number of screens as in the given task. The relationship creation task was the most challenging for participants and this task was completed in 33% of Scenario 1 projects and only 20% of Scenario 2 projects. Some participants said that they did not complete the tasks completely or did not complete the tasks for different reasons.

The study was investigated during the lecture time. 30 min were given for each scenario. The results of the time required to complete the tasks for both scenarios are presented in

Table 2. Comparison of time.

Time (in min)	Participants (Scenario 1)	Participants (Scenario 2)
<10	1	2
from 10 to 20	14	5
from 21 to 30	6	10
from 31 to 40	2	5
>40	10	11

.

Table 2 shows that 42% of Scenario 1 participants took between 10 and 20 min to complete the task and 30% took a longer time limit, taking more than 40 min. 30% of Scenario 2 participants took between 21 and 30 min and even 33% required more than 40 min. Thus, it can be argued that less time was spent on the tasks when the AI-based function was used (Scenario 1), nor when the task was conducted manually, according to Scenario 2.

The main observations were as follows: after the first scenario, everything was clear and some students did not want to do the second scenario; the tasks of the second scenario were more difficult than those of the first scenario; there was not enough time to complete some tasks; the relationship building part took more time.

6. Discussion

The participants discussed each other’s completed tasks and shared experiences about interactions with AI technologies, wireframing tools, and scenarios. Some participants find that AI-based tools and solutions, in this case, wireframes, provide many benefits to professional life increasing productivity, work efficiency, and making tasks more attractive. However, it was also mentioned that there are different tools for each purpose with varying quality, price, and difficulty curves. It means that more complex tools require separate training to explain the basics and choose the best option for the target audience.

The questionnaire was intended in order to capture and reflect participants’ views on the value of wireframes. In total, 28 participants completed a questionnaire after working on the scenarios. Some participants (five out of thirty-three) did not fill in the questionnaire. This may have happened due to the time limit of the workshop. Although all participants had the opportunity to complete the questionnaire after the workshop (the questionnaire was open online for two days after the workshop), five participants still did not complete this task. Regardless of the reasons, it is important to acknowledge that the response rate for the questionnaire is 84.8% (28 out of 33 participants). The purpose of the questionnaire was to collect insights and opinions of participants on working with wireframes and the possibility of using wireframes in the future in the educational process. The questionnaire consisted of the following questions: (1) How would you assess the complexity of the scenario? (2) How would you assess the clarity of the tool? (3) How would you assess the effectiveness of the tool in terms of the time required to produce a result? (4) How would you assess the effectiveness/usefulness of the result? (5) Will you be using this tool or similar tools in the educational process? Questions were asked about both scenarios separately (see Figure 13).

The scale ranges from one to five, where one represents “very low” and five is “very high”. For the fifth question, the possible answer was “Yes” or “No”. In total, 22 users out of 28 define the scenarios and tools effective to be used in their practice.

A total of 33% of participants assessed the complexity of Scenario 1 as very high, and only 7% considered the complexity of Scenario 2 to be very high. A total of 54% of participants in Scenario 2 and 43% of participants in Scenario 1 stated that the clarity of the tool during scenarios was high. Participants rated the effectiveness of the tool in terms of the time required to produce a result: 36% (Scenario 1) and 39% (Scenario 2) think that the criteria are moderate. The effectiveness/usefulness of the result was evaluated by 39% of participants of Scenario 1 as high and 32% as very high. Meanwhile, 29% of participants (Scenario 2) assessed it as very high and also 29% as high. Finally, the participants expressed their opinion about the Uizard tool and stated several pros and cons. It was mentioned that Uizard is easy to use and allows users to create custom designs quickly, even without prior design experience. In addition, the Uizard interface is simple and user-friendly, with helpful tooltips and tutorials to guide users through the design process.

However, some participants found the platform more challenging than others, depending on their experience and comfort with the technology. Some participants noticed that the upload speed was not good when uploading photos to the platform. It can be mentioned that upload speed can be affected by various factors such as image file size, internet connection speed, or current server load.

7. Conclusions

Artificial intelligence will change learning, teaching, and education. One of the essential aspects of AI in education is that it promotes personal teaching and learning. In terms of inclusive education, personalized learning is one of the most exciting uses of AI in education. Customized learning is the process of using technology to design learning experiences that are specific to each student’s requirements and skills. AI has enabled educators to develop adaptive learning systems that can modify the pace, topic, and delivery of education based on the performance and learning preferences of the students.

This paper has presented a case for how wireframes can be used in the design of websites. A few existing tools have been examined, and their capacity to generate interfaces from sketches has been explored. Creating wireframes, prototypes, design mock-ups, and layouts followed the web development process and is now a significant part of website development for education.

There are currently proposals to solve some problems in education by using wireframes but they are limited; they present functionality to enter a wireframe image and generate HTML code. In general, a web application was built to allow the generation of web pages from pattern recognition in wireframes.

Wireframes for education can assure personalized learning, providing adequate instructions that are assisted through technology and encouraging students to collaborate to increase their knowledge of specific topics.

Limitations of wireframe tools include limited functionality and visual aesthetics. Wireframe tools are mainly designed to create static designs and can have a lower level of functionality, which could affect the ability to create dynamic or interactive designs. Moreover, since wireframes are not intended for a visually complete design, some wireframe tools may not have enough visual customization options to make wireframes look representative enough. The data based on qualitative research methodology shows students’ satisfaction with the use of wireframes as 22 users out of 28 define the scenarios and tools effective to be used in their practice. Similarly, we plan to include the future lines of research derived from this work and what improvements are needed for a better implementation of wireframes and artificial intelligence in education. Future work will be related to the study on how we can use high-fidelity wireframes in the teaching process and automatically generate the design code. Our focus will be on the effectiveness of the wireframes design processes implementation and integration into practice.