Design

ชีวิตดีขึ้นทันตาเห็น แค่เปลี่ยนมาใช้ Balsamiq วาดหน้าจอ

หากใครกำลังมองหาเครื่องมือที่ใช้ในการวาดหน้าจอ แต่มันหาที่ตอบโจทย์เรายากเหลือเกิน ในวันนี้เราเองอยากจะนำเสนอเครื่องมือดีดีที่ใช้ในการวาดหน้าจอที่มีชื่อว่า “Balsamiq” หรือภาษาไทยอ่านออกเสียงว่า “บัล-ซา-มิก” พอลองอ่านออกเสียงตามแล้ว อื้มมมม…ก็ดูไม่ไทยเท่าไหร่นะ ! เราไปเริ่มทำความรู้จักกับเครื่องมือวาดหน้าจอที่ตอบโจทย์ในหลายมุมมองและไม่ซับซ้อนตัวนี้กันเลยดีกว่า

Balsamiq คืออะไร ?

“Balsamiq” หรือ “บัล-ซา-มิก” คือ เครื่องมือที่ใช้ในการวาดหน้า (Wireframe) สำหรับผู้เริ่มต้น (จริง ๆ ไม่เริ่มต้นก็ใช้งานได้ แต่อยากจะบอกว่ามัน Easy to use จนกระทั่งผู้เริ่มต้นก็ใช้งานได้แบบไม่ต้องเป็นกังวล) ซึ่งเป็นเครื่องมือที่มีลูกเล่นการใช้งานได้อย่างหลากหลาย และยังมีประโยชน์แบบ 2 in 1 พูดยังกับเนสกาแฟ 5555555 แต่มันเรื่องจริงนะทุกคน ! เพราะสามารถออกแบบหน้าจอที่ต้องการได้ทั้ง Web Browser และ Mobile Application โดยสามารถติดตั้งผ่านเครื่องคอมพิวเตอร์ของคุณได้โดยง่าย หรือจะใช้งานออนไลน์ผ่าน Google Chrome ก็ทำได้สบาย ๆ แค่ดาวน์โหลดจากลิงก์ Balsamiq Wireframes (FREE TRIAL) 

ทำไมต้องเปลี่ยนมาใช้ “Balsamiq”

น้อง ๆ นักศึกษาหลายคนที่เรียนสายไอทีหรือทำงานในสายไอที คงหนีไม่พ้นปัญหาการหาเครื่องมือที่ช่วยในการวาดหน้าจอ และเราเชื่อว่าเกินกว่าครึ่งเริ่มต้นการร่างหน้าจอหรือวาดหน้าจอด้วยกระดาษ ! เพราะอะไรหน่ะหรอ ? มันไว รวดเร็ว คิดออกเขียนได้ทันที ร่างหน้าจอแปปเดียวก็ภาพแล้วว่าอะไรเป็นอะไร แต่รู้ไหม ? มันมีข้อเสียแอบแฝงที่คุณอาจคาดไม่ถึงหลายอย่างเลยนะ

• กระดาษหาย หน้าจอคุณก็หาย Oh my god ! ของเดิมวาดไว้แบบไหน ? 
• เก็บรักษาไม่ดีวางกอง ๆ ไว้ ไม่รู้หน้าไหนเป็นหน้าไหนต้องเรียงใหม่
• แก้ก็แสนจะลำเข็ญและยากเย็นเพราะลบจนกระดาษเปื่อย
• อยากจะประชุมกับทีมให้ดูหน้าจอก็ทำได้ลำบาก เพราะวาดลงกระดาษที่ทุกคนต้องมามุงอยู่ที่เดียวกัน
• อยากจะส่งงานต่อให้กับ Graphic Design ก็ต้องมานั่งอธิบายกดไหนไปไหน
• คิดและวาดอย่างไว ๆ กลับมาดูก็ลืมว่าตรงนี้จะใส่อะไรลงไปบ้าง
• มีการเพิ่มฟีเจอร์ใหม่ทำให้หน้าจอเดิมที่วาดไว้ต้องเปลี่ยนยกเซ็ตก็แค่วาดใหม่ทั้งหมดอีกครั้งบนกระดาษแผ่นใหม่ T^T ยากเย็นแท้
• จะส่งหน้าจอให้ลูกค้าช่วยคอนเฟิร์มก็ทำได้ยากเพราะต้องสแกนทีละแผ่น กว่าจะสแกน รวบรวม หมดเวลาไปแล้วกว่า 20 นาที
• ต้องมีอุปกรณ์อื่น ๆ ถึงจะวาดหน้าจอได้ ไม่ว่าจะเป็นกระดาษ ดินสอ ปากกา ยางลบ ไม้บรรทัด (เหมือนย้อนวัยไปเรียนศิลปะ) พร็อบต้องพร้อมเพราะใช้เม้าส์วาดไม่ได้

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

 

เปลี่ยนมาใช้ Balsamiq กันเถอะ !

ดาวน์โหลดและติดตั้ง Balsamiq

ก่อนจะเริ่มต้นใช้งาน Balsamiq ทุกคนติดตั้ง Balsamiq กันแล้วรึยัง ? หากยังให้ทุกคนดาวน์โหลดและติดตั้งจากลิงก์ Balsamiq Wireframes (FREE TRIAL) หลังจากดาวน์โหลดและติดตั้งกันเรียบร้อยแล้ว ทุกคนสามารถเข้าใช้งานได้ผ่านช่องทางนี้

1. คลิกไดรฟ์ (Drive)
2. คลิกใหม่ (New)
3. เลือกเพิ่มเติม (More) > Balsamiq Wireframes

 

เริ่มต้นวาดหน้าจอด้วย Balsamiq

ตั้งสติกันก่อน ! ว่าจะวาดหน้าจอที่ใช้งานบนอะไร

ปี๊น ๆ บีบแตรเรียกสติ ! ทุกคนคิดกันก่อนว่าหน้าจอที่เราต้องการจะวาดเป็นหน้าจอที่ใช้งานผ่านอะไร เช่น Web Browser หรือ Mobile Application ติ๊กต๊อก ๆ ถ้าทุกคนคิดออกแล้วให้เริ่มต้นค้นหาหน้าจอที่ต้องการจะวาดผ่านช่องค้นหากันได้เลย

• หากวาดหน้าจอบน Web Browser ให้ค้นหาคำว่า “Browser Window”
• หากวาดหน้าจอบน Mobile Application ให้ค้นหาคำว่า “iPhone”

 

เพิ่มองค์ประกอบลงในหน้าจอให้ดูสมบูรณ์มากยิ่งขึ้น

หลังจากที่ทุกคนได้คำตอบแล้วว่าจะวาดหน้าจอบน Web Broswser หรือ Mobile Application สิ่งขาดที่ไปไม่ได้เพื่อความครบถ้วนสมบูรณ์ของข้อมูลให้ทุกคนค้นหาองค์ประกอบที่ต้องมีในหน้าจอนั้น ๆ เช่น Text Input, Text Area, Date Picker, Button, Icon, Image, Search, Table, Sorting, Placeholder, Checkbox, Radio, Dropdown, Rectangle และเริ่มหยิบองค์ประกอบที่ต้องการใส่ลงไปในหน้าจอเพื่อให้เกิดความสมบูรณ์และเห็นภาพชัดเจนมากยิ่งขึ้น

 

เชื่อมโยงหน้าจอด้วยปุ่มต่าง ๆ ก็ง่ายแสนง่าย

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

1. คลิกปุ่มที่เราต้องการให้ลิงก์ไปยังหน้าจอ
2. คลิกแถบเครื่องมือด้านขวาที่ไอคอนรูปตัวไอ
3. เลื่อนลงไปยังหัวข้อ Link > เลือกหน้าจอที่เราต้องการให้ลิงก์ไปเมื่อกดปุ่ม

 

Gimmick ! Balsamiq ก็มีไม่น้อยกว่าเครื่องมือไหน ๆ

Balsamiq เป็นมากกว่าเครื่องมือที่ช่วยให้การวาดหน้าจอเป็นเรื่องง่ายสำหรับคุณเพราะมีลูกเล่นเสริมที่ช่วยอำนวยความสะดวกและตอบโจทย์ให้กับคนวาดหน้าจออย่างมากมาย ไม่ว่าจะคุณจะ…

• อยากเปลี่ยนชื่อหน้าจอให้สื่อมากกว่านี้ แค่คลิกขวาและเลือก Rename

 

• อยากเปลี่ยน Skin ของการวาดหน้าจอจาก Sketch เป็น Wireframe ก็ทำได้ง่ายแค่คลิกแถบเครื่องมือและเลือก Skin ใหม่ได้ตามใจตลอดเวลา

 

• อยากจัดข้อความให้ชิดซ้าย ชิดขวา หรือกึ่งกลางทั้งหมดให้เท่ากัน แค่ลากคลุมข้อความ 1 2 3 4 ที่ต้องการและเลือกชิดซ้าย ชิดขวา หรือกึ่งกลาง

 

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

 

• อยากเปลี่ยนประเภทตัวอักษรก็ทำได้โดยง่าย แค่คลิกแถบเครื่องมือและเลือกประเภทตัวอักษรที่ต้องการ

 

• อยากจะเปลี่ยนสี ทำตัวหนา ทำตัวเอียง ขีดเส้นใต้ข้อความให้มีความแตกต่างก็ทำได้ง่าย ๆ แค่ 2 คลิก

 

• อยากจะ Comment ก็ทำได้สบาย ๆ ด้วยการคลิกคลุมส่วนที่ต้องการและ Comment กันได้เลย

 

• อยากจะแชร์หน้าจอไปให้คนภายในทีมได้เห็นทั่วกันก็แค่คลิกแชร์และพิมพ์ชื่ออีเมลที่ต้องการ

 

• อยากจะสร้างลิงก์หน้าจอไปแปะตามที่ต่าง ๆ ก็ทำได้ง่ายแค่คลิกขวาที่หน้าจอและเลือก Create Link

 

ฟีเจอร์โดดเด่นของ Balsamiq

Balsamiq ถือเป็นเครื่องมืออีกตัวที่มาแรงในตลาดวาดหน้าจอเพราะใช้งานง่ายและไม่ซับซ้อน ซึ่งมีฟีเจอร์โดดเด่นที่ตอบโจทย์ต่อคนวาดหน้าจอได้อย่างตรงจุด

• แชร์หน้าจอให้ทุกคนเข้ามาดูได้พร้อมกันบน Google Chrome
• Comment ให้แก้ไขตอนไหนก็ทำได้และทำได้ง่ายด้วยแค่ 2 คลิก
• ช่วยกันแก้หน้าจอพร้อมกันในเวลาเดียวกันได้เป็นอย่างดี
• ใส่ลิงก์ที่ปุ่มเพื่อไปยังหน้าจอที่ต้องการได้เลยในทันที
• กู้คืนหน้าจอที่ลบออกแล้วไปอยู่ในถังขยะได้
• ลูกเล่นเยอะแยะมากมาย หาประเภท Field แบบไหนก็เจอ
• ใส่ภาพหรือไอคอนเพิ่มเติมเข้าไปได้
• ลืมบันทึกไม่ใช่ปัญหาเพราะ Balsamiq บันทึกให้อัตโนมัติทุกครั้งที่เพิ่มข้อมูล
• ไม่ต้องส่งไฟล์ไปมาเพราะทำออนไลน์จะทำเครื่องไหนก็ทำได้ ไม่ยุ่งยาก

 

และท้ายที่สุดนี้ ตัวผู้เขียนเองก็หวังเป็นอย่างยิ่งว่าทุกคนคงจะได้จะได้รู้จักกับเครื่องมือวาดหน้าจอที่น่าสนใจไปอีก 1 ตัว และอยากให้ทุกคนลองเปิดใจกว้าง ๆ และหันมาใช้ Balsamiq เครื่องมือที่ช่วยให้การวาดหน้าจอเป็นเรื่องง่ายสำหรับคุณ ! ตอบโจทย์สำหรับน้อง ๆ นักศึกษาและกลุ่มคนทำงานที่กำลังมองหาเครื่องมือที่ใช้ในการวาดหน้าจอที่ช่วยลดระยะเวลาและทำให้งานของคุณเดินไปข้างหน้าได้รวดเร็วมากยิ่งขึ้น