Wireframes คืออะไร ทำไมควรรู้ก่อนสร้างเว็บ
![Wireframes คืออะไร ทำไมควรรู้ก่อนสร้างเว็บ](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F157-Wireframes%25C3%25A0%25C2%25B8%25C2%2584%25C3%25A0%25C2%25B8%25C2%25B7%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%25B0%25C3%25A0%25C2%25B9%25C2%2584%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B3%25C3%25A0%25C2%25B9%25C2%2584%25C3%25A0%25C2%25B8%25C2%25A1%25C3%25A0%25C2%25B8%25C2%2584%25C3%25A0%25C2%25B8%25C2%25A7%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%25B9%25C3%25A0%25C2%25B9%25C2%2589%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%25AA%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B9%25C2%2589%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%25A7%25C3%25A0%25C2%25B9%25C2%2587%25C3%25A0%25C2%25B8%25C2%259A-Sennalabs_1725353067428.png&w=3840&q=75)
Wireframes เปรียบเสมือน blueprint ของ website หรือ application ที่บอกรายละเอียดต่าง ๆ ที่จะมีในหน้า website หรือ application นั้น ๆ เช่น จำนวนหน้า, user flow, functionality ต่าง ๆ และอื่น ๆ
ดังนั้น wireframes จึงเป็นจุดเริ่มต้นแรก ๆ ของการเริ่มทำ website หรือ application เสมอ
ประเภทของ Wireframes
wireframes สามารถแบ่งหลัก ๆ ได้เป็น 3 ประเภท ซึ่งต่างกันที่ตัวรายละเอียดที่ใส่เข้าไป คือ
- Low-fidelity wireframes: วาดมือได้ เห็นภาพหรือไอเดียคร่าว ๆ
- Mid-fidelity wireframes: มีการวางตำแหน่งฟีเจอร์ input ข้อความต่าง ๆ
- High-fidelity wireframes: เน้นทุกรายละเอียด เหมือนของจริง
Low-Mid-High Wireframe (Source)
Low-fidelity wireframes (Lo-Fi)
Low-fidelity wireframes ถือเป็นการถอดรูปของ webpage ให้เห็นภาพเบื้องต้นคร่าว ๆ เพื่อให้เห็นภาพรวมและเป็นจุดเริ่มต้นของงานออกแบบเว็บไซต์ ไม่จำเป็นต้องใช้ซอฟต์แวร์ใด ๆ ไม่ต้องเป๊ะ no grid no scale วาดลงกระดาษได้เลย มีเพียงไอเดียภาพรวม กล่องรูป กล่องข้อความ ว่าอะไรอยู่ตรงไหน
Low fidelity wireframes เหมาะสำหรับขั้นตอนที่เพิ่งเริ่มต้น หรือเพิ่งเริ่งทำ navigation / the user flow หรือบางครั้งดีไซน์เนอร์มี product concepts เยอะมากแล้วต้องการการตัดสินใจที่รวดเร็วว่าควรเอาอะไรออก ควรปรับอะไรต่อ เป็นต้น
(Lo-fi Wireframes from Dribble)
Mid-fidelity wireframes (Mid-Fi)
Mid-Fidelity Wireframe เป็นการลงรายละเอียดมากขึ้นกว่าแบบแรก เพื่อแสดงให้เห็นว่า application จะมีส่วนสำคัญ มี feature อะไรบ้าง ที่ input เข้าไป ควรวางข้อความ หรือรูปภาพไว้ตรงไหน
จะบอกว่าเป็นแบบที่นิยมใช้ที่สุดใน 3 แบบนี้ก็ได้ Mid-Fidelity Wireframe มีเลเอาต์ที่ชัดเจนขึ้น ลงรายละเอียดมากกว่าแบบแรก และมักใช้ซอฟต์แวร์ในการออกแบบ เช่น ฟีเจอร์มีอะไรบ้าง component ส่วนต่าง ๆ อยู่ตรงไหน มีการเลือกใช้นำ้หนักฟอนต์ ขนาดเล็กใหญ่ในแต่ละจุดเพื่อแบ่งแยกหัวข้อและเนื้อหา แต่ยังไม่ใช้รูป หรือฟอนต์จริง และส่วนมากจัดทำเป็นขาวดำหรือ monochrome
Mid-fi Wireframes (Source)
High-fidelity wireframes (Hi-Fi)
High-Fidelity Wireframe หรือ UI Wireframe คือการใส่รายละเอียดทุกอย่างที่มีอยู่ pixel เป๊ะขึ้น รูป หรือข้อความที่ใส่ใกล้เคียงกับของจริง เพื่อให้เห็นภาพชัดเจน ไม่ได้เอาข้อความสมมติ หรือ lorem ipsum มาใช้เหมือน Low Fidelity ลูกค้าจะได้เห็นภาพแอปพลิเคชันที่เหมือนของจริงที่สุด
(Hi-Fi Wireframes from Dribble)
Wireframes ดียังไง?
Wireframes เป็นสิ่งที่ช่วยให้การเก็บ requirements มีคุณภาพ และทำให้แต่ละฝ่ายเข้าใจ feature ต่าง ๆ ที่จะทำขึ้นตรงกันได้โดยง่าย
ข้อดีอีกอย่างของการทำ wireframes สำหรับคนที่ต้องการทดสอบ startup idea คือเพียงแค่คุณวาด wireframes ขึ้นมาแล้วนำไปเก็บ feedback จาก users คุณก็สามารถที่จะตรวจสอบสมมติฐานของคุณได้โดยไม่ต้องเสียเงินแม้แต่บาทเดียว
วิธีการทำ Wireframes
(Reference: lucidchart.com)
การทำ wireframes ทำได้หลายแบบขึ้นอยู่กับความละเอียดที่ต้องการ ขั้นแรกอาจร่างขึ้นมาโดยใช้ดินสอก่อนก็ได้ วาดเพียงคร่าว ๆ ว่าเวลา users เข้ามาใช้งานจะต้องเจอกับอะไรบ้าง แค่ flow ที่เป็นใจความสำคัญก็พอ
ยกตัวอย่าง การทำ wireframes ใน e-commerce เว็บไซต์ เราสามารถร่างขึ้นมาแค่ 5 หน้าหลัก ๆ ดังต่อไปนี้
- หน้า sign up / log in
- หน้า product list page
- หน้า product details page
- หน้า Cart
- หน้า Checkout page
เราสามารถลงรายละเอียดเพิ่มเติมได้ โดยอาจเพิ่ม flow อื่นที่อยากให้มีใน e-commerce เว็บไซต์ เช่น หน้า user profile หรือหน้า order tracking
หลังจากนั้นก็ลง details เกี่ยวกับ feature หรือ function ต่าง ๆ ของเรา ยกตัวอย่างเช่น user จะสามารถ register ด้วยอะไรได้บ้าง เช่น เบอร์โทร อีเมล์ Facebook ฯลฯ และจะสามารถชำระเงินโดยใช้ช่องทางอะไรได้บ้าง เช่น เงินสด บัตรเครดิต โอนเงิน ตัดแต้ม ฯลฯ หรือ ในส่วนของเนื้อหาข้อมูลต่าง ๆ ที่เราอยากได้จาก user ไม่ว่าจะเป็น ชื่อ เบอร์โทร อีเมล วันเกิด เราก็สามารถที่จะกำหนดได้
ติดตามอ่านบทความดี ๆ ที่น่าสนใจ ไม่ว่าจะเป็น Machine Learning, Startup, Design, Software Development และ Management ทาง Senna Labs Blog ได้ทุกวัน
![Senna Labs](/_next/image?url=%2Fsenalabs.jpg&w=3840&q=75)
![](/_next/image?url=%2Fimages%2Fsubscribe.webp&w=3840&q=75)
Subscribe to follow product news, latest in technology, solutions, and updates
บทความอื่นๆ
![Inbound Marketing การตลาดแห่งการดึงดูด](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F100-InboundMarketing%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%2595%25C3%25A0%25C2%25B8%25C2%25A5%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B9%25C2%2581%25C3%25A0%25C2%25B8%25C2%25AB%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B8%25C2%25B6%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B8%25C2%2594%25C3%25A0%25C2%25B8%25C2%25B9%25C3%25A0%25C2%25B8%25C2%2594-Sennalabs_1725347953676.png&w=3840&q=75)
![How SennaLabs helped S&P Food transform their online e-commerce business](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F112-HowSennaLabshelpedS%2526PFoodtransformtheironlinee-commercebusiness-Sennalabs_1725348387846.png&w=3840&q=75)
![การเปลี่ยนทิศทางผลิตภัณฑ์หรือแผนธุรกิจ Startup หรือ Pivot or Preserve](/_next/image?url=https%3A%2F%2Fsennalabs.s3.ap-southeast-1.amazonaws.com%2Fblogs%2F171-%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B9%25C2%2580%25C3%25A0%25C2%25B8%25C2%259B%25C3%25A0%25C2%25B8%25C2%25A5%25C3%25A0%25C2%25B8%25C2%25B5%25C3%25A0%25C2%25B9%25C2%2588%25C3%25A0%25C2%25B8%25C2%25A2%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B4%25C3%25A0%25C2%25B8%25C2%25A8%25C3%25A0%25C2%25B8%25C2%2597%25C3%25A0%25C2%25B8%25C2%25B2%25C3%25A0%25C2%25B8%25C2%2587%25C3%25A0%25C2%25B8%25C2%259C%25C3%25A0%25C2%25B8%25C2%25A5%25C3%25A0%25C2%25B8%25C2%25B4%25C3%25A0%25C2%25B8%25C2%2595%25C3%25A0%25C2%25B8%25C3%25A0%25C2%25B8%25C2%25B1%25C3%25A0%25C2%25B8%25C2%2593%25C3%25A0%25C2%25B8%25C2%2591%25C3%25A0%25C2%25B9%25C2%258C%25C3%25A0%25C2%25B8%25C2%25AB%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%25B7%25C3%25A0%25C2%25B8%25C2%25AD%25C3%25A0%25C2%25B9%25C2%2581%25C3%25A0%25C2%25B8%25C2%259C%25C3%25A0%25C2%25B8%25C2%2599%25C3%25A0%25C2%25B8%25C2%2598%25C3%25A0%25C2%25B8%25C2%25B8%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%2581%25C3%25A0%25C2%25B8%25C2%25B4%25C3%25A0%25C2%25B8%25C2%2588Startup%25C3%25A0%25C2%25B8%25C2%25AB%25C3%25A0%25C2%25B8%25C2%25A3%25C3%25A0%25C2%25B8%25C2%25B7%25C3%25A0%25C2%25B8%25C2%25ADPivotorPreserve-Sennalabs_1725353511742.png&w=3840&q=75)
Let’s build digital products that are simply awesome !
We will get back to you within 24 hours!ติดต่อเรา![](/_next/image?url=%2Fimages%2Ftell-us-arrow.webp&w=384&q=75)
![Contact ball](/_next/image?url=%2Fimages%2Fcontact-ball.webp&w=3840&q=75)
![Contact us bg 2](/_next/image?url=%2Fimages%2Fcontact-us-bg-2.webp&w=3840&q=75)
![Contact us bg 4](/_next/image?url=%2Fimages%2Fcontact-us-bg-4.webp&w=3840&q=75)
![Contact us bg 1](/_next/image?url=%2Fimages%2Fcontact-us-bg-1.webp&w=3840&q=75)
![Ball left](/_next/image?url=%2Fimages%2Fball-left.png&w=1080&q=75)
![Ball right](/_next/image?url=%2Fimages%2Fball-right.png&w=1920&q=75)
![Ball left](/_next/image?url=%2Fimages%2Fball-left.png&w=256&q=75)
![Ball right](/_next/image?url=%2Fimages%2Fball-right.png&w=384&q=75)
![Sennalabs gray logo](/_next/image?url=%2Fimages%2Fsennalabs-gray-logo.webp&w=256&q=75)