Wireframe, mockup, และ prototype เป็นสิ่งที่ใช้ในการออกแบบและพัฒนาเว็บไซต์หรือแอปพลิเคชัน แต่มีความแตกต่างกันดังนี้:

1. Wireframe คือการวาดรูปภาพเบื้องต้นของหน้าจอเว็บไซต์หรือแอปพลิเคชันในรูปแบบที่ไม่มีรายละเอียดมากนัก มักใช้สีขาว-ดำหรือเทาเพื่อแสดงเพียงเส้นของขอบเขตและพื้นที่ต่างๆ ที่จะมีในหน้าจอ มีไว้เพื่อช่วยให้ผู้ออกแบบเข้าใจและปรับปรุงโครงสร้างและการจัดวางเนื้อหาของหน้าจอก่อนจะเริ่มออกแบบโดยละเอียด

2. Mockup คือการสร้างรูปภาพหรือเครื่องมือจำลองหน้าจอเว็บไซต์หรือแอปพลิเคชันที่มีรายละเอียดมากกว่า wireframe โดยจะมีสีและรายละเอียดเพิ่มเติม เช่น รูปแบบตัวอักษร สีพื้นหลัง และเนื้อหาที่แสดงบนหน้าจอ มักใช้เพื่อให้ผู้ใช้และลูกค้าเห็นภาพรวมของหน้าจอและการจัดวางเนื้อหาโดยละเอียดก่อนสร้าง prototype

3. Prototype คือหน้าจอเว็บไซต์หรือแอปพลิเคชันที่ได้รับการสร้างขึ้นโดยใช้โปรแกรมเพื่อสร้างรูปภาพแบบสามมิติ ซึ่งจะให้ผู้ใช้สามารถทดสอบความสมบูรณ์และความพร้อมในการใช้งานก่อนออกแบบสมบูรณ์ มักใช้ในการทดสอบการทำงานของระบบ การตรวจสอบการใช้งาน และการปรับปรุงก่อนที่จะเปิดใช้งานจริงให้กับผู้ใช้. จึงเหลือเพียงแค่ทำ programming ใส่ logic เข้าไปให้มันทำงานได้ครบ ๆ เท่านั้นเอง ในขั้นตอนนี้จะเห็นสิ่งที่กดได้จริง ๆ ว่าถ้ากดตรงนี้แล้วจะเห็นอะไร หน้านี้มีลูกเล่นยังไง