The design and development research, first proposed by Brown and Collins in the 1990s, is currently among the well-known methods in educational research to test theory and validate its practicality. The method is also known as developmental research, design research, design-based research, formative research and design-cased and possesses conceptual underpinning and practical aspects of the "what" and "how" of "doing". This paper describes the design and development of a web-based Arabic vocabulary learning games prototype incorporating the methods and approaches of DDR for elementary learners in Centre for Foundation Studies (CFS), International Islamic University Malaysia (IIUM). The effort in generating this learning prototype attempts to design, develop and integrate a game-based learning application in an online platform. It is meant to provide an interactive learning experience for learners who have been through traditional non-computer based Arabic teaching and learning methods. Their feedbacks and responses are then gathered and analysed as the formative evaluation for the design and development principles. The exploration of the potential of use for the game-based learning prototype in teaching and learning in real setting by various experts, learners and teachers was also among the steps taken to evaluate the usability and practicality of the prototype during the design and development phases. (Contains 4 tables and 6 figures.)