Applying the design-based learning model to foster undergraduates’ web design skills: the role of knowledge integration

Abstract

The purpose of this research was to design a course based on the design-based learning (DBL) model to improve undergraduates’ web design skills, and to explore the differences in learning effectiveness of students with different levels of knowledge integration. The quasi-experimental design was adopted in this study. Ninety-two participants studying general education courses in a university in southern Taiwan were selected to participate in this study. The instruments included the Web Design Skills Test and the Knowledge Integration Scale. The study found that the use of the DBL strategy in teaching could improve the web design skills of the experimental group students, especially those students with insufficient web design skills in the initial stage. In addition, students with a high level of knowledge integration had better improvement in their web design skills. The implication of this research is that DBL is a suitable web design skills training strategy for students with insufficient web design skills. If students could be reminded to integrate knowledge while studying, their learning outcomes may be better.

Introduction

People all over the world have entered the Internet generation using mobile devices to browse webpages in the past decade (Dianat et al., 2019; Glassman & Shen, 2014). In order to be able to provide better web browsing experience on different mobile devices or desktop computers, responsive web design (RWD) technology emerged, which changed the considerations of traditional website design according to the screen sizes of devices (Glassman & Shen, 2014). For example, the designer needs to design a webpage with two kinds of page layouts at the same time. Facing the needs of RWD and system renewal, how to plan a cross-platform webpage that meets the needs of companies or schools has become one of the issues that workers need to pay attention to today (Bao & Zhang, 2020; Danesh & Catanio, 2020). The current web design thinking is an ability that students should possess (Ritzhaupt & Martin, 2014; Wang & Wang, 2011) and that they can use in the future to coordinate work such as business presentations and product promotions (Aladwani & Pavlia, 2002; Chang et al., 2020). However, the research on students’ web design skills or courses is limited in the field of computer education (Wang & Wang, 2011). This also shows the importance of programming skills teaching and research focusing on web design.

Programming education can not only promote learners’ computational thinking, but can also improve their logical thinking and problem-solving skills (de Vries, 2006; Jamil & Isiaq, 2019; Ke, 2014; Mecca et al., 2021; Wang & Wang, 2011). The improvement of these abilities is an important issue for cultivating manpower, and should be strongly emphasized in higher education. Regarding programming skills teaching methods, some scholars suggest that design-based learning (DBL) can be used as a teaching strategy to improve upon traditional lecture-based teaching (Ke, 2014; Tsai, 2019). DBL places learners in real situations and guides them to design works with relevant domain knowledge in the process of problem solving (Fortus et al., 2004; Ke, 2014). DBL allows learners to learn through practice, and to use the knowledge learned in the classroom to accumulate practical experience and integrate it into real situations. Therefore, this research aimed not only to integrate DBL into programming education, but also to echo the education reform advocacy that programming education courses should be valued at all levels of education (Kalelioǧlu, 2015).

DBL and project-based learning are similar teaching strategies. If the learning outcomes of project-based learning focus on artifacts, systems, and solutions design, this kind of learning tends to be DBL (Gómez Puente et al., 2013; Tsai, 2019). Although the project-based learning processes are more general, it is more important in the DBL approach to allow students to plan and reflect on the learning process by using a systematic teaching strategy (Gómez Puente et al., 2013). Whether it is project-based learning or DBL, both allow students to use cooperative learning to produce projects. People’s working tasks in a real environment are often presented in the form of projects, and it is suggested that school education regard project learning as one of the ways to cultivate related abilities (Lin, 2018). The focus of project-based learning or DBL is that students learn in an inquiry-based learning environment so that they can use interdisciplinary knowledge to solve various problems (Hathcock et al., 2015; So et al., 2018; Zhang et al., 2021).

During this learning process, knowledge integration may help students understand problems more comprehensively, and integrate concepts in different knowledge domains to complete artifacts (Lin, 2018; Xu et al., 2020). If students combine knowledge with related concepts in the process of designing a project, they may expand their experience in different subjects (So et al., 2018). By integrating learned skills and ideas, students may apply knowledge to problem solving practice and gain meaningful understanding (Elder & Paul, 2008, 2012). The above discussion shows that knowledge integration may play a certain role in DBL. It implies that students with different levels of knowledge integration may have different learning outcomes. Therefore, DBL was used as a strategy in this study to explore its effect on students’ web design skills. Meanwhile, the factor of students’ knowledge integration was taken into consideration.

Web design and related skills

To build a website requires programming skills in several fields, such as Hypertext Markup Language (HTML), JavaScript language, Cascading Style Sheets (CSS), and related skills to integrate the webpages (Danesh & Catanio, 2020; Ritzhaupt & Martin, 2014). Moreover, experience and training of web designers are crucial factors of web design (Tao, 2008). It has been revealed that web design not only involves interdisciplinary knowledge, but the education and training received by designers is also one of the influencing factors of web design. Wang and Wang (2011) pointed out that students in web design courses may not be able to learn all programming languages thoroughly. However, teachers should require students to have general knowledge of programming languages and web design guidelines.

The goal of web design emphasizes functions, quality, and user-centered operation (Aladwani & Pavlia, 2002; Dianat et al., 2019). Britt and Gabrys (2002) pointed out that website design requires considering several skills: integration, sourcing, corroboration, and searching. Besides, users focus on content and service needs and require search quality and safety (Aladwani & Pavlia, 2002). Usability is one of the important evaluation indicators of website performance (Dianat et al., 2019; Tao, 2008). The above studies showed the diversity of web design concepts.

Some scholars (Britt & Gabrys, 2002; Kontos, 2016) have proposed some web design guidelines as a reference for instructors. Kontos (2016) suggested that students have to carefully follow the four basic principles of web design when creating a website: matching purpose and target audience; arranging the web pages meaningfully; using consistent cues throughout; and designing to navigate through the website easily. Tao (2008) generalized several web design guidelines from previous studies, including page content, general principles, instructional design, interface usability, multimedia presentation, screen layout, interaction style, and interaction usability. Web design guidelines are less related to programming technology, but are more related to system and user interface design (Tao, 2008). Web design guidelines require students’ practice to make them practical skills. Although web design guidelines can be concepts taught in the classroom, learning by doing can allow students to transform these abstract concepts into practical skills.

To summarize the above discussion, web design includes webpage design and website planning, which should consider user usability. The teaching of web design covers the webpage design guideline concept and the skills of webpage programming.

Design-based learning (DBL)

DBL involves constructing meaningful and attractive situations for learners to design works in which they have the opportunities to apply their prior knowledge and problem-solving skills (de Vries, 2006; Doppelt et al., 2008; Fortus et al., 2004; Hathcock et al., 2015; Ke, 2014). When designing and producing personalized and creative projects, learners can construct cognitive concepts, consolidate learned skills, and design artifacts to meet actual needs in real life by engaging in problem solving (Chen & Chiu, 2016; Doppelt et al., 2008; Hathcock et al., 2015; Lin et al., 2020). Fortus et al., (2004, 2005) proposed a DBL cycle, including the steps of identifying and defining the context, background research, developing personal and group ideas, constructing artifacts, and feedback. In this cycle, students first try to identify the problem in the course, and then the teacher guides them to carry out background research and engage in group discussion. Students can also use a variety of prerequisite skills to learn and apply knowledge and skills to design artifacts according to their personal learning preferences and methods. In addition, teachers or peers can provide timely feedback (Fortus et al., 2004, 2005), and learners’ learning motivation may improve with the challenge of real situations. If the project design is cooperative in nature, this will provide the opportunities for learners to work together in a team. The role of the teacher may change from a knowledge-telling lecturer to the role of learning facilitator (Kolodner, 2002). DBL is thus similar to the project-based learning approach.

The project-based learning approach emphasizes problem solving experience (Seman et al., 2018), and cultivates learners’ skills of thinking critically (Lin, 2018). Learners extend their thinking on a specific topic and integrate relevant knowledge in the process of hands-on learning. Students are expected to use the skills they have gained to solve problems and choose suitable tools to complete projects. By planning their own projects, learners can organize research and implement a variety of learning strategies to solve real-life problems (So et al., 2018). In addition, in the project-based learning strategy, teachers become the facilitators of learning, guiding learners in learning skills and evaluating their performance. The project-based learning process often involves group learning, and learners attain more learning outcomes through the process of brainstorming in their group discussion (Seman et al., 2018). It can be found that learners’ knowledge or skills in project-based learning seldom come directly from the teacher, but are obtained when the students are engaged in special tasks and participate in real problems (Seman et al., 2018; So et al., 2018). Compared with the project-based learning model, the DBL model focuses on artifact design. If teachers plan the tasks and the evaluation criteria for learners in DBL, the learners will use the artifact design as the foci of learning. The learners are surrounded by tasks from action planning, knowledge learning to execution, and extend the depth and breadth of their skills during the hands-on process. The learners complete the products through repeated knowledge construction, design evaluation, and group discussion.

The traditional computer teaching model is mainly carried out through teachers’ lectures and students’ passive listening, supplemented by repeated exercises to improve learning performance (Tsai, 2019). However, this passive learning process makes it difficult for students to think flexibly and apply what they have learned (Zhang et al., 2021). This knowledge transfer using the unidirectional scholar on the stage approach has been challenged (Hartwell et al., 2017). In the DBL teaching model, learners are placed in real situation to conduct inquiry-based learning activities (Fortus et al., 2004; Hathcock et al., 2015). Through the task-based learning environment, students learn actively and focus on artifact design for inquiry learning (Chen & Chiu, 2016; Hathcock et al., 2015; Robertson & Howells, 2008). Participating in design activities allows learners to use resource purposefully to try to solve problems, and assists them in building new understanding of learning targets and real-world problem-solving skills (Fortus et al., 2005; Hathcock et al., 2015). Learners have to propose ideas of solutions, plan steps during the implementation process, and integrate the concepts learned through trial and modification. In addition, artifact creation can concretize abstract concepts to easy-to-understand concepts. Teachers may demonstrate related concepts in a DBL environment to develop students’ practical skills (de Vries, 2006; Ke, 2014; Tsai, 2019). Learners can evaluate the feasibility of the finished artifact during the testing process and reorganize the idea to enter the next stage of design.

Knowledge integration and learning

Knowledge integration is defined as the process whereby learners sort, add, distinguish, organize, and evaluate phenomena observed in the classroom and in their daily life experience, and improve and generate ideas through reflection when learning scientific knowledge (Lin, 2018; Linn et al., 2004). Knowledge integration is not only the integration of different disciplines and skills, but learners have to connect different sources and levels of knowledge to think when explaining scientific phenomena or scientific problems. The learners can further integrate new ideas and existing ideas to construct systematic knowledge (Lee & Liu, 2010; Liu et al., 2008; Luo & Chea, 2020; Safadi, 2018; Ulus & Oner, 2020; Xu et al., 2020). Knowledge integration can be regarded as a dynamic process of linking, distinguishing, organizing, and structuring ideas regarding learning content, and learners with knowledge integration can interpret scientific issues in different knowledge contexts in multiple modes (Clark & Linn, 2003; Ulus & Oner, 2020). Clark and Linn (2003) pointed out that effective teaching should train learners to expand, revise, restructure, and reconnect their ideas. Web design involves interdisciplinary integration. For the design of website layout, materials, colors, and functions, students’ learning is a dynamic knowledge integration process.

In order to avoid the traditional teaching model being too rigid, some scholars (Lin et al., 2020; Linn & Eylon, 2006; Luo & Chea, 2020; Schneider, 2012) believe that teachers may assist students in integrating the knowledge of science and other disciplines into their design thinking. The research of Linn and Eylon (2006) revealed that knowledge integration strengthened the breadth and depth of students’ thinking in exploring science-related issues. If learners can induce knowledge integration behavior when learning, it may be helpful for their learning. In addition, knowledge integration can reduce the fragmentation of learners’ knowledge, and form long-term comprehension by integrating knowledge to enhance learning performance (Schneider, 2012).

Since DBL is based on design thinking, learners need to use a variety of prerequisite skills to learn. In this process, learners not only purposefully use tools and materials to solve problems, but they also need to know what to do and what to think, and integrate ideas from different disciplines to create (Fortus et al., 2004, 2005). Therefore, learners may be guided in the knowledge integration to organize the knowledge learned in the classroom and daily life, think efficiently, and stimulate new ideas to solve problems (Xu et al., 2020). It can be seen that having the ability to integrate knowledge may improve the effectiveness of DBL learning.

Research hypotheses

Based on the above discussion, using a course designed with the DBL model and students’ knowledge integration may promote students’ web design skills. The purpose of this research was therefore to use the DBL course to explore its effect on students’ web design skills, and to explore the role of knowledge integration in the course. The hypotheses addressed in the study are as follows:

H1

The use of the DBL model results in a difference in students’ web design skills.

H2

There are differences in the learning effectiveness of students with different levels of knowledge integration in the DBL course.

H3

Different ability students have different perceptions of web design in the DBL course.

Methodology

Research design

A quasi-experimental design was adopted in this study as shown in Table 1. The two groups took the Web Design Skills Test (Sect. “Instruments”) before the experiment. Students in the experimental group took the DBL course to learn web design, while students in the control group took a standard programming course which mentioned web design. Afterwards, students in the experimental group conducted experimental intervention (in the course designed with the DBL model), which lasted for 18 weeks. After the intervention, the two groups took the same Web Design Skills Test and completed the Knowledge Integration Scale (Sect. “Instruments”).

Table 1 Research design of this study

Participants

Students from a university in southern Taiwan were selected as the participants in this study. The university was located on the Kaohsiung city. Among the liberal arts education courses, a total of 92 students in two classes were purposively sampled, with one class being the experimental group (n = 50) and one class being the control group (n = 42). The experimental group class was selected since the objective of the course was web design. The control group class was selected since the objective of the course was programming, which could be used as a comparison. The difference between the two groups of students in the pre-test of the Web Design Skills Test did not reach significance (t = 0.03, p > 0.05), and therefore their web design skills were similar. The age of the students ranged from 18 to 23, with an average age of 20.55. Among these participants, 65 were males (70.7%) and 27 were females (29.3%), while 62 (67.4%) were science majors and 30 (32.6%) were non-science majors. The proposal of this study had been approved by the Human Research Ethics Committee at National Cheng Kung University (No. NCKU HREC-E-107-212-2), and informed consent was provided by all participants.

Instruments

The Web Design Skills Test was adopted from the web design level C test of Taiwan National Technician Skills Certification. This test is a standard Taiwan workplace skills test, and candidates who passed the paper-and-pencil test could obtain certification (Ministry of Labor, 2018). The web design level C test items were released for the practice purpose of interested students (http://onlinetest.slhs.tp.edu.tw). The research team selected 20 items from the website and confirmed their content through two information educators. The difficulty, discrimination, and reliability of the test were confirmed to be used to evaluate the learning effectiveness of the students in this study. The average difficulty of this test was 0.56, and the average discrimination was 0.39. The validity was analyzed using the Rasch model (Rasch, 1960), and the mean square errors (MNSQ) of the construct fit index ranged from 0.84 to 1.25, which were within the acceptable cutoff range from 0.6 to 1.4 (Linacre & Wright, 1994). In terms of reliability, the KR20 coefficient of the total test was 0.77, which was acceptable (George & Mallery, 2003). A sample item is as follows: In the HTML syntax, which one is correct when linking to a bookmark? (1) < a href = “#myphoto” > ; (2) < a name = “myphoto” > ; (3) < a href = “http://www.kimo.com.tw” > ; (4) < a link = “myphoto” > . There were 20 items in total and 5 points were awarded for each correct answer. The total score ranged from 0 to 100 points.

The Knowledge Integration Scale was adopted from the KIPSSE scale developed by Lin (2018). Linn et al. (2004) proposed the knowledge integration learning point of view, including the procedures of add, distinguish, organize, and evaluate with knowledge. Linn and Eylon (2006) then modified it into interactive procedures of eliciting existing ideas, adding new ideas, developing criteria for evaluating ideas, and selecting ideas based on relevant empirical research. The Knowledge Integration Scale was designed according to the above suggestions. A sample item is: I was able to integrate the knowledge of different fields in the project. There were 10 items in this 4-point Likert scale (1 = strongly disagree, 2 = disagree, 3 = agree, and 4 = strongly agree). The total score ranged from 10 to 40 points. The Cronbach’s alpha coefficient of this scale was 0.96, which was acceptable (George & Mallery, 2003).

The interview protocol. Since the research team had the purpose to investigate the learners’ web design learning in more depth, the following question was asked in the interviews: What were your gains during the weekly homework or artifact design for this course?

Research process

In the pre-test phase, students took the Web Design Skills Test. In the teaching intervention phase, teachers conducted three lessons a week for a total of 18 weeks. The students learned in the computer classroom during the teaching intervention period. The teaching in the experimental group was based on the DBL cycle proposed by Fortus et al., (2004, 2005), including identifying and defining the context, background research, developing personal and group ideas, constructing artifacts, and feedback (Table 2). This course also followed the suggestions of Tsai (2019), by emphasizing the hands-on formative evaluation activities in the course. Each week, there was a formative evaluation activity for web design. At the end of the semester, there was a personal artifact design assignment. During the teaching intervention period, the teacher’s role was to guide the students to study smoothly, observe the students’ learning conditions, and act as a learning facilitator. In the post-test phase, the Web Design Skills Test and a Knowledge Integration Scale were administered one week after the experiment, and the interviews were conducted.

Table 2 The course design with the DBL model

Data analyses

In the quantitative analyses, the pre-test of Web Design Skills Test was used as a covariate, and the analysis of covariance (ANCOVA) and Johnson-Neyman technique were used to examine whether the DBL course had the effect on the learning effectiveness of students. The statistical significance cutoff for the p-values was set as 0.05. Besides, the post-test score of the Knowledge Integration Scale was used to divide experimental group students into three groups, with 1 standard deviation (SD) above the average and 1 SD below the average as the boundary. The effect sizes were used to compare the differences in the web design skills of these three groups of students.

In terms of qualitative analysis, the students’ interview data were recorded and coded. After the data were collected, two information educators coded separately, using axial coding (Glesne, 1992): (1) Web design guideline concept; (2) Webpage programming. In order to facilitate the summary and sorting of data, the research team coded according to the types of data collected. Among them, the first code represented the date. The second code indicated the student number. The third code represented the research axis. For example: D1225-S001-A1 represented the interview data of the student number S001 on research axis 1.

Results

Before analyzing the differences of each group, the descriptive statistics of each variable are presented as Table 3. In the experimental group, the pre-test average was 57.50 points and the SD was 16.23 points, while the post-test average was 78.30 points and the SD was 11.23 points. In the control group, the pre-test average was 57.38 points and the SD was 18.58 points, while the post-test average was 58.45 points and the SD was 19.89 points. Compared with the control group, the experimental group had a larger increase between pre-test and post-test according to the effect sizes.

Table 3 The pre-test and post-test of students’ web design skills

The difference in post-tests between two different learning groups

The differences in web design skills of the two different learning groups of students after the experiment are compared in this section. In the regression coefficient homogeneity test before ANCOVA, the result was F(1, 88) = 8.59 (p < 0.05), reaching significance. The results showed that the data of the two groups violated the homogeneity of the regression coefficients within the group, and the Johnson-Neyman technique was suggested for analysis (Pedhazur, 1982).

The regression lines of the two groups are shown in Fig. 1 after analysis using the Johnson-Neyman technique. The two regression lines of the experimental group and the control group intersect at the point of 81.25. When the participants’ pre-test scores were below 81.25, the experimental group students outperformed the control group students in the post-test. When the participants’ pre-test scores were above 81.25, the difference in the post-test between two groups did not reach significance. The above finding showed that the experimental intervention had the expected effect on students with lower web design skills (score < 81.25) in the pre-test. Based on the analyses above, H1 was supported.

Fig. 1

The regression lines of the two groups in the web design skills test

In Table 4, the three rows of table represent the three conditions in the pre-test. When students’ pre-test score was at mean score − 1 SD (M = 40.20), the difference between the two groups in the post-test was 27.59 (t = 7.34, p < 0.001), and the effect size was 1.49. According to Cohen‘s (1988) definition, the d values of small, medium, and large effects are 0.2, 0.5, and 0.8, respectively. The effect size of this condition was therefore large. When students’ pre-test score was at mean score (M = 57.45), the difference between the two groups in the post-test was 19.79 (t = 7.45, p < 0.001). The effect size was 1.07, which was a large effect size. When students’ pre-test score was at mean score + 1 SD (M = 74.69), the difference between the two groups in the post-test was 11.98 (t = 3.18, p < 0.01). The effect size was 0.65, which was a medium effect size. The above comparison revealed that the experimental group had better scores than the control group in the three conditions of the pre-test. The above results show that the experimental treatment had effects on students’ web design skills, and had a greater effect on students whose pre-test scores were equal to or lower than the mean. Students with different initial web design skills had different learning outcomes. Students with medium and low initial web skills had better learning outcomes.

Table 4 Johnson-Neyman technique analysis for students’ web design skills

The difference in post-test between different knowledge integration groups

The improvement of web design skills of students in different knowledge integration groups is compared in this section. That is to say, experimental group students were divided into three groups based on the scores of the Knowledge Integration Scale to compare with each other. As shown in Table 5, a paired sample t test was used to compare the difference between the pre-test and post-test of students’ web design skills. The low knowledge integration group improved from the pre-test mean of 54.21 to the post-test mean of 71.32 (t = 5.81, p < 0.001), and the effect size was 1.10. The effect size of this condition was large. The medium knowledge integration group improved from the pre-test mean of 63.00 to the post-test mean of 81.00 (t = 5.03, p < 0.001). The effect size of this condition was large (1.13). The high knowledge integration group improved from the pre-test mean of 56.25 to the post-test mean of 84.06 (t = 5.56, p < 0.01), and the effect was large (1.64). From the comparison of the pre-test and post-test differences in the web design skills of the three groups of students, the high knowledge integration group was better than the medium and low knowledge integration group in the improvement of web design skills. The above results also showed that the knowledge integration had a moderating effect on the experimental intervention of this study. The students with different degrees of knowledge integration had different learning outcomes. The high knowledge integration group had the better learning outcomes. Based on the analyses above, H2 was supported.

Table 5 Paired sample t test in web design skills of students in different knowledge integration groups

Students’ perceptions of the course based on the DBL model

The students with lower scores in the pre-test were mostly web design beginners. They expressed that they had an understanding of web design, and the skills they learned in the DBL course were useful. These skills included web design skills and HTML language programming.

This course gave me a preliminary understanding of web design (D1225-S025-A1).

Every week I could learn a little HTML web design method. It is very useful for newbies who are new to web design for the first time (D1225-S029-A2).

This course improved my web design skills (D1225-S044-A2).

This course let me learn how to write HTML5 (D1225-S058-A2).

This course let me understand the webpage design process (D1225-S013-A1).

Students with higher scores in the pre-test might have experience in web design. They expressed that they had a better understanding of web design in the DBL course. These skills include planning to set up a website and designing personal webpages.

This course let me learn how to design and set up a website (D1226-S041-A1).

I successfully designed a dedicated webpage of my own. I can use it in the future (D1225-S004-A1).

I learned the basic skills of setting up a website from the course (D1225-S043-A1).

The students with lower scores in the pre-test expressed what they learned from the DBL course while those students with higher scores expressed more about how to set up a website. Based on the qualitative analysis of the students’ interview data, H3 was supported.

Discussion

This study revealed that students in the experimental group had better web design skills than students in the control group did after the DBL course. This was roughly in line with the results of previous studies (Hathcock et al., 2015; Ke, 2014). However, research on the relationship between DBL and improvement of web design skills has been rare, which highlights the contribution of the current study. Hathcock et al. (2015) found that DBL could enable students to gain creativity in STEM activities. Ke (2014) found that students could cultivate mathematical thinking by designing programming artifacts in DBL. The design-based curriculum emphasized allowing students to learn actively during the learning process and increased their participation in real situations (Kalelioǧlu, 2015). In the learning process, DBL required the completion of the artifacts through cognitive challenges, and provided immediate feedback and a sense of accomplishment (Ke, 2014). Such a process may strengthen the learners’ intrinsic motivation and invest in cognitive efforts so as to improve their high-order thinking skills.

In the process of designing works, learners could apply the concepts learned in class to design works, and reflect their work through a series of hands-on activities (Elder & Paul, 2008; Kalelioǧlu, 2015; Tsai, 2019). Zhang et al. (2021) found that students better understood what abilities had been acquired and what abilities they should pay attention to in the process of DBL. This kind of outcome-based education was helpful for students to set learning goals. Tao (2008) pointed out that the development of web design guideline concepts is better for students to achieve in practice by hands-on activities. These processes may allow learners to repeatedly use concepts to achieve effective learning, and also refine and consolidate their programming concepts (Tsai, 2019) and web design skills. The above discussions may explain why the experimental group students in this study had better development of web design skills in DBL.

According to the research results, the teaching effect of DBL was greater for students with low pre-test scores. However, the teaching materials might not be challenging enough for the students with high pre-test scores, and their learning effect might thus not be as good as that of students with low pre-test scores. A complete teaching strategy for programming beginners needs to provide learners with an environment to engage in completing, modifying, and extending their programs (Chang et al., 2000). DBL is a purposeful learning process, in which teachers set learning goals and provide scaffolding for students (Hathcock et al., 2015), and guide them to learn related knowledge. Students with low pre-test scores could learn enough to meet reasonable learning goals, and the appropriate scaffolding might prevent them from feeling frustrated in learning with insufficient prior knowledge of web design. In addition, students could also combine their background knowledge and daily life interests in their web design works. The instant feedback and sense of accomplishment might strengthen the motivation of learning (Ke, 2014; Tsai, 2019) and enhance the fun of learning web design. DBL may also have enhanced students’ metacognitive skills (Ke, 2014) which was helpful for learning outcomes of students with low pre-test scores (Ellerton, 2015). There was evidence of their progress and knowledge gain after the DBL learning experience (Ke, 2014). The results revealed that DBL provided students with clear learning goals and was helpful for the development of students’ web design skills.

This study found that students in different knowledge integration groups had different degrees of increase in web design skills after the DBL course. The students in the high knowledge integration group had a higher degree of increase in web design skills than those in the middle and low knowledge integration groups. The findings of this research showed that the DBL course was more conducive to the web design learning of the high knowledge integration group. The above results have not been found in previous studies, which provided the innovative contribution of this research to the literature. DBL courses require students to be able to search for resources on the Internet to learn. Students with high knowledge integration were better able to add, distinguish, organize, and evaluate (Linn et al., 2004) related web design knowledge on the Internet, and had better learning performance. DBL courses that emphasize learning to complete the artifact goal might help students with high knowledge integration to obtain the concepts and skills related to web design.

The learning of web design is a series of design thinking and problem-solving processes. The process of design thinking is balancing the current experience perspectives with the exploration of new ideas (Lin et al., 2020). When students are placed in practice, they internalize the concepts in practice and apply their concepts in new contexts (Elder & Paul, 2008). Therefore, knowledge integration is an important ability for students to complete tasks, including knowing what to do and what to think (Lin, 2018). Xu et al. (2020) found that as students’ knowledge integration progresses, they had improved accuracy in problem-solving works, and had a better understanding of core ideas. Due to the process of knowledge integration, students’ learning achievement my also improve (Safadi, 2018). If students’ knowledge structure becomes more integrated, they may develop from a lower cognitive stage to a higher cognitive stage (Ellerton, 2015; Nie et al., 2019). This may be the reason why students in the high-knowledge integration group had made more progress in web design skills in this study.

Students had to combine different ideas and integrate different disciplines to complete their web artifacts in DBL (Britt & Gabrys, 2002). The DBL course could arouse students’ ideas about web design and they could evaluate whether the content of the design needed improvement. Therefore, the learning effectiveness of students in the high knowledge integration group were better than those in the middle and low knowledge integration groups, and could effectively use concepts to complete the learning assignment after the DBL teaching. However, although students in the middle- and low-knowledge integration groups were not as effective as those in the high-knowledge integration group, their learning effects in web design skills still reached large effect sizes in DBL. This result showed that DBL courses were suitable for students with different levels of knowledge integration. Based on the above research results, they revealed that students’ knowledge integration ability had a moderating effect on the influence between the DBL course and improvement in students’ web design skills.

Conclusions and suggestions

After the undergraduates in the experimental group had completed the DBL course in this study, their web design skills were better than those of the control group students; this finding revealed that the DBL model resulted in a difference in students’ web design skills (H1). Such learning was more effective for students whose pre-test scores on web design skills were lower. After further analyzing the total scores of the web design skills of the students in the experimental group, this finding showed that students with different levels of knowledge integration had different learning outcomes (H2). In other words, students’ knowledge integration had a moderating effect on their learning performance. Knowledge integration was a crucial factor when learners improved their web design skills in the DBL course. The results revealed that the students in the high-knowledge integration group improved their web design skills more than the middle- and low-knowledge integration groups did. Observed from the qualitative data, students expressed that DBL had taught them web design guideline concepts and webpage programming and different ability students had different perceptions of web design (H3).

For the majority of undergraduates, the teaching effect of DBL courses is better than that of general programming language courses. The above showed that DBL courses may effectively improve web design skills. Therefore, it is suggested that teachers could use DBL strategies in teaching web design skills. The DBL strategies can be used in teaching web design to provide learners with clear learning goals. In addition, since web design needs to integrate web concepts and other related knowledge (Britt & Gabrys, 2002), the higher the knowledge integration ability of students, the better the learning effect. Using hands-on courses to enhance students’ ability to integrate knowledge may effectively enhance students’ ability to design web pages. Therefore, it is suggested that teachers could guide students from the perspective of knowledge integration in DBL teaching. Specific learning goals were used in the DBL course to guide students in the learning process to enhance their personal knowledge integration ability of add, distinguish, organize, and evaluate (Linn et al., 2004), which may help learners integrate relevant knowledge and skills to complete the learning goals. Teachers could guide students to set their learning goals first, and then provide assistance for each student’s learning needs. These all require knowledge integration ability as a medium to achieve the goals set by the learners themselves.

There were research limitations in this research. Due to research resources, the sample was taken from a university in southern Taiwan. Since the university admissions method in Taiwan is mainly based on academic achievement as the screening criterion, the homogeneity of students in the same university was relatively high. Follow-up research may recruit students from different regions or with different characteristics to verify the findings of the current study.