ดาวน์โหลดโปรแกรมฟรี
       
   สมัครสมาชิก   เข้าสู่ระบบ
ไทยแวร์รีวิว
 

รีวิว Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

เมื่อ :
|  ผู้เข้าชม : 5,712
เขียนโดย :
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+Whimsical+%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%87%E0%B8%A3%E0%B9%88%E0%B8%B2%E0%B8%87+%28Wireframe%29+%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2+%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%A3%E0%B8%A7%E0%B8%94%E0%B9%80%E0%B8%A3%E0%B9%87%E0%B8%A7
A- A+
แชร์หน้าเว็บนี้ :

ออกแบบ Wireframe อย่างง่ายและรวดเร็วด้วย Whimsical

การออกแบบผลิตภัณฑ์สักชิ้นหนึ่งนั้นใช้ทั้งต้นทุนเวลา และต้นทุนทางความคิด ดังนั้นการสื่อสารที่ตรงประเด็น ใช้เวลาได้เหมาะสม และสื่อความหมายได้ถูกต้องจึงเป็นหนึ่งในหัวใจสำคัญของการทำงานที่มีประสิทธิภาพ โดยเฉพาะการทำงานในยุค Digital Disruption อย่างปัจจุบัน ที่ธุรกิจในหลายภาคส่วนต่างมีผลิตภัณฑ์ทางเทคโนโลยีเพิ่มขึ้น ซึ่งการสร้างโครงร่าง (Wireframe) หรือ การสร้างโครงร่างการจัดวางหน้าจอของเว็บไซต์ ซอฟต์แวร์ และแอปพลิเคชั่นต่างๆ นั้น เป็นจุดเริ่มต้นหลังจากทีมได้รับความต้องการ (Requirement) มาจากลูกค้าแล้ว Wireframe จะทำให้ทีมเข้าใจตรงกันว่าผลลัพธ์ที่ต้องการจากผลิตภัณฑ์ชิ้นนั้น ๆ ต้องออกมาในทิศทางใด เมื่อเข้าใจตรงกันแล้วทีมออกแบบจึงเริ่มลงมือสร้างตัวต้นแบบ (Prototype) หรือ แบบจำลองผลิตภัณฑ์ ในขณะที่ทีมพัฒนาซอฟต์แวร์สามารถลงมือทำ Backend บางส่วนล่วงหน้าไว้ก่อนได้

สมัยก่อนคนสร้าง Wireframe โดยการวาดลงกระดาษ ซึ่งมีความลำบากในการแก้ไขงาน และไม่สามาถทำงานร่วมกันหลายคนในเวลาเดียวกันได้ ดังนั้น Digital Wireframe จึงเข้ามาแก้ไขปัญหาในส่วนนี้ เพื่อทำให้ทีมออกแบบ ทีมพัฒนาธุรกิจ และทีมพัฒนาซอฟต์แวร์ ทำงานร่วมกันได้สะดวก และเห็นภาพตรงกันว่าผลิตภัณฑ์ที่ต้องการนั้นจะมีหน้าตาและการใช้งานได้อย่างไร

Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

Whimsical เครื่องมือออกแบบ Wireframe คืออะไร?

Whimsical (วิมสิคัล) คือ Digital Wireframing ซึ่งเป็นเครื่องมือออนไลน์ (Online Tool) ที่จะเข้ามาช่วยให้คนที่ไม่ใช่นักออกแบบสามารถสร้าง Wireframe เบื้องต้นได้ง่ายขึ้น เพราะไม่ต้องใช้ความเข้าใจในการใช้เครื่องมือออกแบบมากนัก เมื่อเทียบกับการสร้าง Wireframe ด้วย โปรแกรม Sketch หรือ โปรแกรม Adobe XD และช่วยให้นักออกแบบประหยัดเวลาในการวาง Layout เพราะ Whimsical มีทั้งเทมเพลตสำเร็จรูป (Template) ไอคอน (Icon) และตัวช่วยการออกแบบ (Design Element) ต่างๆ ที่พร้อมใช้งานภายในแพลตฟอร์ม (Platform)

โดยในปัจจุบันองค์กรที่ใช้ Whimsical นั้น มีดังนี้ airbnb/ shopify/ NETFLIX/ INTERCOM/ deliveroo และ Microsoft 

ข้อดีของ Whimsical

  • User Friendly Interface  : มีหน้าจอที่เข้าใช้ง่าย ทำให้ใช้งานได้สะดวก ไม่จำเป็นต้องมีพื้นฐานการใช้ Tools มาก่อน
  • Saas / Cloud-based เป็น Online Tool : ไม่มีข้อจำกัดในเรื่องอุปกรณ์ หรือ ระบบปฏิบัติการใดๆ ว่าจะต้องเป็น Windows/ macOS หรือว่าจะต้องเป็นคอมพิวเตอร์ตั้งโต๊ะ คอมพิวเตอร์โน้ตบุ๊ค อุปกรณ์พกพา อย่างโทรศัพท์มือถือ แท็บเล็ต (Tablet) ซึ่งการทำงานบนเว็บไซต์ได้นั้นทำให้ทีมสามารถร่วมทำงานหลายคนพร้อมกันในครั้งเดียวได้
  • Pre-Built Design System : มีเครื่องมือ และตัวช่วยการออกแบบ (Design Element) ที่พร้อมใช้งาน มาให้เลือกเยอะแยะมากมาย ช่วยให้ผู้ใช้งาน ไม่ต้องมาเริ่มนับหนึ่งใหม่
  • Collaboration Tools : เครื่องมือที่สนับสนุน ช่วยให้สามารถทำงานพร้อมกันหลายคนได้ โดยใช้เเค่ การเชิญเข้าร่วมผ่านทางอีเมล (E-Mail Invitation)

ข้อเสียของ Whimsical

  • Lack or Slowing Down The Computer : เมื่อดึงตัวช่วยการออกแบบ ออกมาใช้งานเยอะ ๆ หรือมีคนใช้งานบอร์ดเดียวกันพร้อมกันหลายคนทำให้แก้ไขบอร์ดจะช้าลงตามลำดับ

Features ของ Whimsical เครื่องมือออกแบบ Wireframe

การสร้าง การเพิ่ม การลบ Board 

Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

เราสามารถสร้าง Board ได้หลายรูปแบบโดยจะใช้ Templates ที่ Whimsical มี Element ไว้ให้สำหรับการสร้าง Flowchart, Wireframe, Stickey Notes และ Mind Map หรือจะปรับประยุกต์ใช้ให้เขากับชิ้นงานที่ตนเองต้องการได้ 

สำหรับ Free Version เรามีสิทธิ์ในการสร้าง Board ได้เพียง 4 บอร์ด โดยที่ไม่สามารถสร้าง Board มากกว่านี้ได้ แม้เราจะลบ Board ของ Floder Example ไปแล้วก็ตาม เราทำได้แค่ Restore บอร์ดเดิมได้เท่านั้น 

การจัดการ Workspace

Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

Workspace ใน Whimsical มี 2 แบบ ได้แก่ Personal Workspace และ Team Workspace 

สำหรับ Personal Workspace นั้น เราสามารถแชร์ลิงค์ให้คนอื่น View และ Comment ได้ ถ้าต้องการให้คนอื่นสามารถ Edit งานของเราได้นั้น ตัว Board จะต้องอยู่ใน Team Workpace

การจัดการ Team

Whimsical เครื่องมือออกแบบโครงร่าง (Wireframe) อย่างง่าย และรวดเร็ว

ก่อนที่เราจะสร้าง Team ได้นั้น เราต้องสร้าง Team Workspace ขึ้นมาก่อน โดยเราสามารถเพิ่มคนเข้ามาในทีมที่สร้างได้โดยการเชิญผ่านอีเมล หรือ แชร์ลิงค์ให้กดเข้าร่วม ซึ่งลิงค์ที่แชร์นั้นมีอายุได้ถึง 30 วัน 
Role ที่อยู่ในทีมนั้นมี 2 แบบ ได้แก่บทบาทผู้แก้ไข (Editor Role) และ บทบาทผู้ชม (Viewer Role)

ทั้งนี้ ในส่วนของผู้ชมนั้น จะสามารถทำได้แค่ดูข้อมูล (View) และคอมเมนต์ (Comment)  มีแค่ในขณะที่บทบาทของผู้แก้ไข (Editor Role) จะสามารถแก้ไข (Edit) งานในบอร์ดได้

อ่านรายละเอียดเพิ่มเติมได้ที่ : https://help.whimsical.com/en/articles/3438981-what-is-the-difference-between-a-team-and-a-workspace

Whimsical เครื่องมือออกแบบ Wireframe ที่เหมาะทั้งนักออกแบบและผู้ใช้ทั่วไป

Whimsical เป็นเครื่องมือในการออกแบบ Wireframes ที่คนไม่ได้จบสายออกแบบมาสามารถใช้งานได้ง่าย ในขณะที่ช่วยนักออกแบบประหยัดเวลาในการหาตัวช่วยการออกแบบ หรือ Design Element ต่าง ๆ Whimsical นั้น มี รูปแบบสำเร็จรูปต่างๆ ให้เลือกมากมาย โดยหลักๆ คือผังงาน (Flowchart) โครงร่าง (Wireframes) บันทึกช่วยจำ (Stickey Note) และ แผนผังความคิด (Mind Map) เป้นต้น

ซึ่งแนวการใช้งานนั้นเหมาะกับบริษัทผู้พัฒนาซอฟต์แวร์ (Software Developer Company) และดิจิทัลเอเจนซี่ (Digital Agency) เพราะ เป็นกลุ่มองค์กรที่มีความเกี่ยวข้องกับการออกแบบประสบการณ์การใช้งานของผู้ใช้งาน (User Exeperience -UX) ในด้านซอฟต์แวร์มากที่สุดนั่นเอง


ที่มา : whimsical.com

 
0 %E0%B8%A3%E0%B8%B5%E0%B8%A7%E0%B8%B4%E0%B8%A7+Whimsical+%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B9%81%E0%B8%9A%E0%B8%9A%E0%B9%82%E0%B8%84%E0%B8%A3%E0%B8%87%E0%B8%A3%E0%B9%88%E0%B8%B2%E0%B8%87+%28Wireframe%29+%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2+%E0%B9%81%E0%B8%A5%E0%B8%B0%E0%B8%A3%E0%B8%A7%E0%B8%94%E0%B9%80%E0%B8%A3%E0%B9%87%E0%B8%A7
แชร์หน้าเว็บนี้ :
Keyword คำสำคัญ »
เขียนโดย
นักเขียน : Editor    นักเขียน
 
 
 

รีวิวที่เกี่ยวข้อง

 


 

แสดงความคิดเห็น