Transform
Ideas Into Gems

let JindaTheme build platforms for your business

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

In: SEO and Tools Published: 10/07/2019

บางครั้งลูกค้าที่ต้องการให้ผู้รับจ้างเห็นภาพคร่าวๆ ว่าผลิตภัณฑ์น่าจะออกมาเป็นลักษณะไหน หรือพยายามจะอธิบายภาพที่อยู่ในหัวออกมาเป็นคำพูดให้ทุกคนเห็นตรงกันนั้นไม่ใช่เรื่องง่าย การวาด 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 เพื่อออกแบบ และสร้างรูปทรงคร่าวๆ ก่อนจะย้ายขึ้นมาใช้โปรแกรมที่มีรายละเอียดความเชี่ยวชาญมากกว่านั้นก็ทำได้ในภายหลัง

This might interest you

image

“Above the fold” – ทำไมเราควรเอาสิ่งที่สำคัญไว้ที่ด้านบนของเว็บ?

ในเชิงเทคนิคแล้ว คนทำเว็บไซต์จะมีศัพท์คำนึงที่เรียกกันว่า "Above the fold" ครับ สำหรับคนที่ไม่เคย... Read more >
image

อยากมีระบบชำระเงินบนเว็บไซต์, แอปฯ ต้องคำนึงถึงอะไรบ้าง?

ช่วงหลังโควิดนี้เป็นช่วงที่อุตสาหกรรมไอทีกลับมาบูมอีกครั้ง หลายธุรกิจมีการเปลี่ยนแปลงทั้งโครงสร้า... Read more >
image

ข้อเสียบางอย่างเมื่อซื้อธีม WordPress มาใช้

WordPress ถือเป็น CMS ที่ได้รับความนิยมในการทำเว็บไซต์อย่างต่อเนื่อง ด้วยการตั้งค่าที่รวดเร็ว มีร... Read more >

Please fill up this form

Our team will estimate the price from your details and send a quotation to your email.

Notifications

Thank you, we have received your message.

preloader

Preparing, please wait a moment.