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

wireframe_main.jpg

วันนี้มาแนะนำตัวช่วยในการออกแบบ 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

  1. สมัครเป็นสมาชิกก่อนนะคะ โดยถ้าเลือกแบบสมัครฟรีจะสร้างได้เพียงโปรเจ็คเดียว และสร้างหน้า wireframe ได้เพียง 5 หน้า แต่นั่นก็เพียงพอกับโปรเจคเ็ล็กที่ออฟรับมาเลยค่า
  2. เลือกการสร้าง wireframe
    wireframe_create_project.jpg
  3. สร้างหน้าที่ต้องการ
    wireframe_create_wireframe.jpg
  4. ลากส่วนที่ต้องการมาใช้ในการออกแบบจากด้านล่างได้เลยค่า
    wireframe_component.jpg
  5. สามารถปรับการแสดงผลให้อยู่ในรูปแบบของการสเก็ตช์, window หรือ mac ได้จากแถบด้านล่าง
    wireframe_chanve.jpg
  6. ทำการ export งานออกมาในรูปแบบต่างๆตามต้องการ
    wireframe_export.jpg
    wireframe_export2.jpg
  • ตัวอย่างการใช้งาน iPlotz ในการออกแบบ wireframe

– ภาพสเก็ตช์

wireframe_sketch.jpg

– ภาพ window

wireframe_window.jpg

– ภาพ Mac

wireframe_mac.jpg

Leave a comment