5 สุดยอดเครื่องมือเริ่มต้นสำหรับ UX/UI Designer

Photo by Kelly Sikkema on Unsplash

ในปัจจุบันนี้ การเลือกเครื่องมือสำหรับ UX UI Designer เป็นเรื่องสำคัญมาก เนื่องจากมีเครื่องมือมากมายให้เลือกใช้งาน และการเลือกเครื่องมือที่ดีจะส่งผมต่อการทำงานอย่างมาก

“man is a tool-using animal. Without tools he’s nothing, with tools he is all” — Thomas Carlyl

เครื่องมือมากมายเลือกยังไงดีน่ะ 🎯

การเลือกเครื่องมือที่ดี ควรคำนึงถึงถึง 4 ปัจจัยดังนี้

1. Usefulness: เครื่องมือนี้ช่วยเราแก้ปัญหาได้ไหมนะ ?
2. Usability: การใช้งานใช้งานง่ายไหมนะ
3. Collaboration: สามารถใช้งานรวมกันได้หรือเปล่า
4. Integration: สามารถที่จะเชื่อมต่อกับ หรือ สามารถที่จะ hand-off ออกจาก Design Phase ได้ง่ายป่าว ?

โอเค ! คร่าวนี้มาดูเครื่องมือของผมที่ผมเลือกใช้ในการทำงานกันเทอะ : )

เครื่องมือในการสร้าง Wireframe ✏️

ทำไมต้องทำ “Wireframe” ด้วยละ

การทำ Wireframe นั้นรวดเร็วกว่าการที่จะลง User Interface (UI) เลย และที่สำคัญการที่ทำให้เราคำนึงถึง “โครงสร้าง” มากกว่า ความสวยงาม

ถ้าเทียบแล้วการทำ Wireframe เหมือนกันการเขียนแปลนบ้าน แล้ว UI ก็เหมือน interior designer ที่ทำให้แต่ละห้องสวยงามมากขึ้น

Balsamiq

Balsamiq — สุดยอดในการทำ Wireframe แบบหยาบ ( low-fidelity Wireframe )

เป็นเครื่องมือที่จะสร้าง Wireframe แบบ การ์ตูนน่ารักๆ ได้ และนั้นคือขอดีของมัน เพราะจะทำให้การทำ Wireframe ไม่ดู Serious! เกินไป แล้วจะทำให้คนดูอยากที่จะ แชร์ไอเดียหรืออยากปรับแก้มากกว่า แบบที่เรียบร้อยไปแล้ว

ข้อดีอีกอย่างนึงคือการที่ เราไม่สามารถที่จะลงรายละเอียดได้ เอ้ะ! มันดียังไงนะ ?

ในการเป็น UX UI Designer นั้น เราอยากที่จะต้องการให้ งานออกมาสวยแต่แรก และนั้นทำให้เราใช้เวลานานเกินไปในการทำ Wireframe ซึ่ง Wireframe เป็นสิ่งที่เปลี่ยน ปรับแก้บ่อย เราควรจะ focus กับการปรับแก้ให้เร็ว มากกว่า การทำให้สวย

Picture from — https://balsamiq.com/wireframes/

เครื่องมือในการสร้าง Idea ด้วย Brainstorming 🤯

ก่อนที่เราจะเริ่มการวาดหน้าจอ สิ่งที่เราควรทำคือการค้นหาปัญหา และ การเลือกปัญหาขึ้นมาแก้ไขก่อน โดยปกติการ Brainstorming เราอาจจะใช้ Design Process. เข้ามาช่วย เช่น Design Thinking / Design Sprint โดยเราจะให้ทุกคนใน Working Team มาทำ Workshop รวมกัน และถ้าเรา Remote Work จะทำยังไงละ ?

Miro — เครื่องมือที่จะช่วยให้การทำ Workshop online ดีกว่า offline เพราะว่าเราสามารถที่จะเห็น mouse ของทุกคนในทีมได้แบบ Real Time ทำให้การทำงานร่วมกันเป็นเรื่องง่ายและสนุกอีกด้วย

ทำงานร่วมกันได้อย่างง่าย และ จะเห็นเมาส์ของทุกคน

สามารถใช้งานได้ทั้ง : Web based และ Application

ราคา: แล้วแต่ package ดูรายละเอียด

ราคาเริ่มต้นจาก free ไปจนเสียเงิน

เครื่องมือสำหรับทำ User Interface กันเทอะ !

สำหรับการสร้างหน้าจอ UI นั้น ผมยังเป็นมือใหม่สำหรับ UI มีพี่คนนึงแนะนำให้ใช้เครื่องมือตัวนึงชื่อ Figma เป็นเครื่องมือที่ผมคิดว่ามันสุดยอดมาก

ขอดีของ figma คือสามารถที่จะทำงานร่วมกับ Designer คนอื่นๆ หรือ Product Owner เพื่อที่จะได้รับ feedback loop ที่เร็ว พร้อมมี plug-in ต่างๆที่สามารถที่จะติดตั้งได้ง่าย

นอกจากนี้เราสามารถ Shared งานให้กับ Developer ได้เลย เพราะมี Developer View ที่สามารถแปลง Design -> Code ได้ในระดับนึง

นอกจากนี้ยังมี Template ให้เลือกมากมายเพื่อช่วยให้เราเริ่มในการ Design ได้ง่ายขึ้น

ที่สำคัญ สามารถใช้ได้ผ่าน Brower เลยไม่จำเป็นต้องติดตั้ง Program และยังฟรีอีกด้วย (สำหรับเริ่มต้น)

ฟรี Professional สำหรับ นักเรียนและอาจารย์ น่าสนใจมากๆ !

สามารถใช้งานได้ทั้ง : Web based และ Application

ราคา: แล้วแต่ package ดูรายละเอียด

เครื่องมือสำหรับ การวางแผนการทำงาน

สำหรับเครื่องมือสำหรับการวางแผนการทำงานในแต่ละ Sprint เป็นเครื่องมือที่ขาดไม่ได้ และน้อยคนที่จะไม่รู้จักก็คือ Trello

Trello ทำหน้าที่เหมือนกระดาษบนพนังที่เราเอาไว้ใช้ List Task งานต่างๆที่เราต้อง จัดการ เหมือนกับการที่เอา post-it มาแปะไว้ที่กระดาน โดยแบ่งออกเป็นแถวๆ หรือเรียกว่า List โดยปกติ เค้าจะแบ่งเป็น 4 แถวคือ Backlog / To Do / Doing / Done

เพื่อให้เราสามารถที่จัดการกับงานของเราทุกอย่างให้เป็นระบบ

สมัครใช้ Trello ได้ที่นี้ — Click

สามารถดูวิธีการใช้เพิ่มเติม — ที่นี้

เครื่องมือสำหรับจด Note ระดับเทพ

การเป็น UX เราจะต้องมีการทำ User Interview และจะต้องมีเข้าประชุมบ่อยครั้ง ทำให้บ้างที่เราต้องการเครื่องมือที่จะจด note ต่างๆไว้ในที่เดียว

Notion เครื่องมือจดโน๊ตสำหรับชาว Millennial

Notion เป็นเครื่องมือจดโน๊ตที่มีความแตกต่างในเรื่องของความยืดหยุ่นของการทำงาน เนื่องจาก Notion มี API ที่สามารถที่จะเชื่อมต่อกับ App อื่นๆได้เช่น

• Google Map -> สำหรับแสดงแผนที่ใน Notion
• Spotify -> ไว้เปิดเพลงผ่าน Notion ได้เลย
• Figma -> สามารถที่จะแสดง Design ต่างผ่าน Brower ของ Notion ได้เลย
• และอื่นๆอีกมากมาย

ขอดีอีกอย่างของ Notion คือมี Template ให้เลือกใช้อีกมากมาย สำหรับใช้งานไม่ว่าจะเป็นสำหรับ Personal หรือจะนำไปใช้เป็น Project Management Tools ก็ได้

Personal Template on Notion

Notion ยังมี Application สำหรัย iOS เพื่อใช้จดโน๊ตในมือถืออีกด้วย

สามารถใช้งานได้ทั้ง : Web based และ Application

ราคา: แล้วแต่ package ตามนี้เลยครับ

และนี้คือเครื่องมือหลักๆที่ผมใช้ในการเริ่มต้นทำงานในสายงาน UX ครับ หากพี่ๆท่านใดมีเครื่องมือมาเสนอเพิ่มเติม สามารถแนะนำผมได้นะครับ ขอบคุณครับ :)