[โดนใจ] iPlotz : Online Wireframe Tool

วันนี้มาแนะนำตัวช่วยในการออกแบบ interface ของเวบไซต์ค่า โดยเราจะใช้การสร้าง wireframe ขึ้นมาเพื่อให้เห็นโครงสร้าง และภาพรวมของเวบไซต์ ซึ่งจริงๆ ก็สามารถทำได้ง่ายๆ โดยการเขียนลงในกระดาษ แต่ว่าถ้าเราต้องนำเป็นเป็น phototype หรือตัวอย่างงานให้นายจ้างของเราละก็ ลายมือไก่เขี่ย กับลายเส้นเน่าๆ อาจจะทำให้เค้าไม่ประทับใจเราเท่าไหร่ วันนี้ก็เลยจะมาแนะนำเวบไซต์ iPlotz ซึ่งเป็นเครื่องมือในการสร้าง Wireframe ออนไลน์กันค่า

รู้จัก Wireframe กันก่อน

Wireframe เป็นการโครงสร้างพื้นฐานที่ใช้ในการออกแบบ interface เพื่อให้เห็นโครงสร้างการทำงานและความสัมพันธ์ภายในเว็บไซต์ โดยจะเป็นการแสดง layout ที่เป็นองค์ประกอบพื้นฐานของหน้าเวบนั่นเอง ซึ่งจะช่วยให้ผู้ร่วมงานมีภาพความคิดที่ตรงกัน และทำให้เวลาไปออกแบบจริงได้ตรงตามความต้องการ

iPlotz คืออะไร

iPlotz.com is a fascinating online wireframe tool. Simple drag-and-drop tools (in an attractive pencil-sketch style) make it easy for even a non-designer like me to map out a common web interface. This includes, of course, forms that are increasingly in demand.
ที่มา : http://jasonfriesen.ca/news/archives/2009/03/16/fascinating-online-wireframe-tool-iplotz-com/

สรุปแล้ว iPlotz ก็เป็นเว็บแอพพลิเคชั่นที่เข้ามาช่วยในการสร้าง wireframe, จัดการโปรเจ็ค และทำให้การทำงานกับคนอื่นง่ายดายยิ่งขึ้น โดยการที่เป็นเว็บนั้นทำให้สามารถทำงานได้อยู่บนหลาย OS ไม่ว่าจะเป็น windows, mac หรือ linux แต่ Browser ที่ใช้จะต้องรองรับการใช้งานของ Flash ด้วยนะคะ

การสร้าง Wireframe แบบ online ด้วย iPlotz

สมัครเป็นสมาชิกก่อนนะคะ โดยถ้าเลือกแบบสมัครฟรีจะสร้างได้เพียงโปรเจ็คเดียว และสร้างหน้า wireframe ได้เพียง 5 หน้า แต่นั่นก็เพียงพอกับโปรเจคเ็ล็กที่ออฟรับมาเลยค่า
เลือกการสร้าง wireframe
สร้างหน้าที่ต้องการ
ลากส่วนที่ต้องการมาใช้ในการออกแบบจากด้านล่างได้เลยค่า
สามารถปรับการแสดงผลให้อยู่ในรูปแบบของการสเก็ตช์, window หรือ mac ได้จากแถบด้านล่าง
ทำการ export งานออกมาในรูปแบบต่างๆตามต้องการ