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.