3 เครื่องมือช่วยออกแบบ wireframe ยอดนิยม

Publish Published: 10/07/2019 Category Category: SEO and Tools

บางครั้งลูกค้าที่ต้องการให้ผู้รับจ้างเห็นภาพคร่าวๆ ว่าผลิตภัณฑ์น่าจะออกมาเป็นลักษณะไหน หรือพยายามจะอธิบายภาพที่อยู่ในหัวออกมาเป็นคำพูดให้ทุกคนเห็นตรงกันนั้นไม่ใช่เรื่องง่าย การวาด wireframe หรือแบบร่างของแอพฯ เว็บไซต์ออกมาให้คนอื่นพอเข้าใจว่าทำงานอย่างไร อยากมีอะไรอยู่ตรงไหนน่าจะเป็นวิธีที่ดีกว่า และวันนี้เราจะมาแนะนำเครื่องมือที่เป็นที่นิยมในการออกแบบ หรือให้อยู่ในรูปแบบ wireframe กันนั่นเองครับ

1. Adobe XD

โปรแกรม Adobe XD

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

Adobe XD ยังสามารถออกแบบเว็บไซต์ โมบายแอพฯ​ ได้อย่างรวดเร็ว และมีเครื่องมือหลายอย่างช่วยอำนวยความสะดวก ถือเป็นโปรแกรมที่ควรมีติดเครื่องเอาไว้ เมื่อต้องการใช้งาน หรือมีไอเดียวิ่งเข้ามาก็สามารถเปิดทำงานได้เลยทันที ไฟล์สามารถส่งออกเป็นรูปภาพ หรือส่งเป็น .xd ให้คนอื่นที่มีโปรแกรมเปิดดูเหมือนกันได้

2. Sketch

โปรแกรมออกแบบ Sketch
https://www.sketch.com/

โปรแกรมสำหรับนักออกแบบมือสมัครเล่น ไปจนถึงมืออาชีพ ไม่ว่าจะเป็นดีไซเนอร์ในบริษัทใหญ่ระดับโลกก็น่าจะเคยใช้งานโปรแกรมนี้มาแล้วทั้งนั้น และในตลาดซอฟแวร์งานออกแบบ โปรแกรม Sketch นี้ก็ได้รับความนิยมอยู่เรื่อยๆ รวมทั้งบริษัทจินดาธีมเอง เราก็ใช้โปรแกรม Sketch ในการออกแบบงานทั้งเว็บไซต์ และ โมบายแอพฯ ให้กับลูกค้าอยู่เป็นประจำ ข้อดีคือสามารถทำงานบน MacOSX ได้อย่างเต็มประสิทธิภาพ มีเครื่องมืออื่นๆ ให้เลือกติดตั้งเสริมได้เรื่อยๆ

แต่ข้อเสียก็คือเป็นโปรแกรมที่ต้องเสียเงินซื้อมาใช้งาน และใช้งานได้เฉพาะบนเครื่อง MacOSX เท่านั้นครับ

3. Draw.io

โปรแกรมออกแบบ
https://www.draw.io/

ถือเป็นอีกโปรแกรมนึงที่สามารถทำงานได้ออนไลน์ผ่านเว็บไซต์ ข้อดีคือเราไม่ต้องพกพาไฟล์งาน หรือติดตั้งลงคอมก่อน เราสามารถเข้าไปที่เว็บไซต์ https://www.draw.io แล้วก็เริ่มการออกแบบได้เลยทันที ข้อดีของเว็บไซต์นี้คือเหมาะกับผู้ที่ยังไม่มีประสบการณ์ออกแบบมากนัก เพราะมีเครื่องมือสร้างรูปทรงให้เยอะมาก ไม่ว่าจะเป็นเลขาคณิต, flowchart, network diagram รวมไปถึงไอคอนต่างๆ ที่สามารถนำมาใช้งานได้เลยทันที และสามารถใช้งานได้ฟรีด้วย

ทั้ง 3 โปรแกรมที่เราแนะนำมานี้สามารถใช้งานทดแทนกันได้ในระดับหนึ่ง โดยเฉพาะ Adobe XD และ Sketch นี่เรียกได้ว่าเป็นคู่แข่งกันที่สามารถใช้งานทดแทนกันได้แทบจะ 100% คุณผู้อ่านสามารถเลือกใช้งานได้ตามความเหมาะสม หากไม่ต้องการติดตั้งโปรแกรมลงเครื่องก็ใช้ draw.io เพื่อออกแบบ และสร้างรูปทรงคร่าวๆ ก่อนจะย้ายขึ้นมาใช้โปรแกรมที่มีรายละเอียดความเชี่ยวชาญมากกว่านั้นก็ทำได้ในภายหลัง