วิธีทำ mockup, wireframe ด้วย balsamiq mockup 3

<p><strong>วิธีทำ mockup&comma; wireframe ด้วย balsamiq mockup 3<&sol;strong><&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-0&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>หลาย ๆ คนยังทำ mockup หรือ wireframe สำหรับวางโครงสร้างเว็บหรือแอพลิเคชั่น สำหรับนำเสนอลูกค้า<br &sol;>&NewLine;ด้วย photoshop ซึ่งทำให้เสียเวลาในการทำงานมากเกินไปโดยไช่เหตุ และยังแก้ไขได้ลำบากอีกต่างหาก<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>โปรแกรม balsamiq mockup ถูกสร้างมาให้ใช้งานง่าย และตอบโจทย์คนทำงานได้เป็นอย่างดี<&sol;p>&NewLine;<p><strong>ข้อดีของโปรแกรม<&sol;strong><br &sol;>&NewLine;&&num;8211&semi; ใช้งานง่าย ใช้เวลาในการทำความเข้าใจโปรแกรมน้อย<br &sol;>&NewLine;&&num;8211&semi; มีเครื่องมีค่อนข้างครบ ตอบโจทย์ทั้งโมบายและเว็บ<&sol;p>&NewLine;<p><strong>เริ่มใช้งาน balsamiq<&sol;strong><&sol;p>&NewLine;<p>1&period; โปรแกรไม่ฟรีนะครับ ดาวน์โหลดแบบ trial version ได้ที่ https&colon;&sol;&sol;balsamiq&period;com&sol;download&sol;<br &sol;>&NewLine; หรือดาวน์โหลดเวอชั่นเก่ากว่าที่ได้ https&colon;&sol;&sol;balsamiq&period;com&sol;download&sol;archives&sol;&quest;prefix&equals;mockups-desktop&sol;2&period;2&sol;<&sol;p>&NewLine;<p>2&period; ทำการติดตั้งโปรแกรม เราจะได้หน้าตาเริ่มต้นของ mockup ประมาณนี้ครับ &lpar; ผมใช้ balsamiq&period;com 3&period;3&period;3 &rpar;<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-1&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>3&period; ดับเบิ้ลคลิ๊กที่ blank page ซ้ายมือครับจะมี popup ขึ้นมา เราจะตั้งชื่อว่าหน้าแรก สำหรับทำ web mockup<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-2&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>4&period; ทดลองสร้างเมนูหลักของเว็บเรา เลือกไอเทม Button Bar บนแทบเมนูด้านบนครับ<br &sol;>&NewLine; นอกจากไอเทมที่ตัวโปรแกรมมีให้ใช้งานแล้ว เรายังสามารถ import รูปหรือ icon เข้ามาใช้งานได้นะครับ<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-3&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>5&period; โปรแกรม balsamiq จะใช้เครื่องหมาย &comma; &lpar; full stop &rpar; ในการคั่นระหว่างเมนู เพราะฉะนั้นเราสามารถเพิ่มเมนูเท่าไหร่ก็ได้ เช่น หน้าหลัก&comma;สมาชิก&comma;เกี่ยวกับเรา&comma;ติดต่อเรา<&sol;p>&NewLine;<p> ซ้ายมือถือคือ option ของไอเทมนั้น ๆ ที่เราโฟกัสอยู่ เราสามารถปรับค่าต่าง ๆ เช่น สี ขนาดไอคอน รวมถือการเชื่อมโยงไปหน้าอื่น ๆ ได้จากส่วนนี้นะครับ<&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-4&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>6&period; สุดท้าย เราสามารถเลือกรูปแบบการแสดงผลของ mockup ของเราได้ 2 แบบนะครับ คือแบบ sketch และแบบ wireframe โดยคลิ๊กที่ปุ่ม project setting มุมบนขวามือ<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-5&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-6&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;<p>7&period; save project เป็น &period;bmpr สามารถส่งให้คนอื่น ๆ แก้ไขได้ และทดลองกดปุ่ม play ขวามือบน แค่นี้ก็สามารถพรีเซ้นงานเจ๋ง ๆ ได้แล้วครับ<br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;วิธีทำ-mockup-7&period;png" alt&equals;"วิธีทำ mockup&comma; wireframe" &sol;><&sol;p>&NewLine;