ทำ wireframe แบบเร็วๆ

หนึ่งในขั้นตอนการทำเว็บไซต์ ซึ่งถือว่าเป็นขั้นตอนขั้นพื้นฐานที่เราสมควรจะทำ นั่นคือขั้นตอนการวางแผน และส่วนหนึ่งของการวางแผนที่สมควรทำที่สุด (แต่เห็นน้อยคนจะทำ) นั่นคือการทำ wireframe

การทำ wireframe คือการวาดหน้าตาโครงสร้างเว็บไซต์อย่างง่ายๆ ทั้งนี้เพื่อแสดง function ที่จะมีในหน้านั้นๆ ระบบการใช้งาน การ navigate ทั้งนี้เพื่อเช็คความเรียบร้อยก่อนที่จะลงมือทำ design ต่อไป และเพราะการไปปรับที่ design ใน photoshop เลยนั้นเป็นเรื่องที่ค่อยข้างยุ่งยากและใช้เวลามาก การทำ wireframe แบบง่ายๆ ที่ไม่จำเป็นต้องเป็น designer ก็ทำได้นั้น จะช่วยลดเวลาในการทำงานไปได้มากพอสมควร

ที่ผมเห็นคนทำ wireframe ในปัจจุบันนั้น ส่วนใหญ่แล้วจะใช้ tools อยู่ไม่กี่ตัว เช่น Illustrator, PowerPoint, Excel, Word, Visio

เผอิญว่าช่วงนี้ได้อ่าน magazine ชื่อ Practical Web Design Magazine ซึ่งอยู่ในเครือของ .net magazine อ่านมาได้ 2-3 เล่มแล้ว (ราคาเล่มละ 500 แพงเอาการอยู่แต่ว่าหากได้อ่านหมดก็คุ้มนะ) แล้วก็ได้ไป download podcast ของ Web design TV (WDTV) ลงมาดู เห็นว่ามีการพูดคุยถึงเรื่องของ tools ที่เอาไว้ช่วยทำ wireframe หรือ prototype

อ่านรวมๆแล้ว ได้ข้อสรุปมาประมาณ 4 ตัว ดังนี้

1. Protoshare (www.protoshare.com) เป็นเว็บไซต์ให้บริการสำหรับการทำ wireframe โดยสามารถเข้าดูได้ทั้งคนทำและลูกค้า โดยเว็บนี้จะคิดค่าบริการเป็นรายเดือนไป แล้วแต่ package



2. Axure (www.axure.com) โปรแกรม Axure สำหรับ PC เท่านั้น ตัวนี้แนะนำสุดๆ (ใน podcast ก็มีการสอนใช้โปรแกรมนี้ถึงสองตอน) ดูหน้าตาแล้วก็น่าใช้ดี ท่าทางจะใช้ง่าย



3. Balsamiq (www.Balsamiq.com) ตัวนี้เป็น application ของ AIR แต่ดูจาก interface แล้ว เหมือนว่าจะดูเด็กไปนิด

4. Flash Catalyst (http://labs.adobe.com/technologies/flashcatalyst/) โปรแกรมจาก Adobe ที่มีข่าวมาประมาณ 1ปีได้แล้วว่าจะทำการเปิดตัวออกมาพร้อมกับตัวโปรแกรม commercial อื่นๆ




ต้องบอกว่า ตอนนี้ยังไม่ได้ลองเลยซักโปรแกรมหนึ่ง แต่ว่ากำลังจะลองตัว Axure เพราะคิดว่าน่าจะ work ส่วน Protoshare นั้นมีให้ลอง 30วัน เดี๋ยวจะลองเข้าไปทดสอบดูด้วยอีกทาง ส่วนสองตัวหลัง Balsamiq กับ Flash Catalyst นั้น ดูเหมือนจะต้องรอดูกันไปก่อน เพราะว่าตัว Balsamiq นั้น interface ดูไม่น่าใช้งาน เอาไปให้ลูกค้าดูคงไม่ค่อย pro ส่วนตัว Flash Catalyst นั้น ตัวที่ใช้งานได้ยังไม่ออกมาให้เราได้ทดสอบกันเลย

** ข้อมูลจาก PodCast Web Design TV (WDTV) และ จดหมายจาก Juan Sanchez เรื่อง Planning Tools จาก Practical Web Design Magazine ฉบับที่ 185 เดือนกุมภาพันธ์ 2552 **