Aug 23, 2020

3 min read

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

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

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

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

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

Usefulness: เครื่องมือนี้ช่วยเราแก้ปัญหาได้ไหมนะ ?
Usability: การใช้งานใช้งานง่ายไหมนะ
Collaboration: สามารถใช้งานรวมกันได้หรือเปล่า
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 ดูรายละเอียด

เครื่องมือสำหรับทำ 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