ออกแบบหน้าจอสำหรับอุปกรณ์ต่างๆ ด้วยการพิมพ์ Wireframe ออกมาวาดเลย

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

ถ้าใครทำงานที่ต้องออกแบบ Web หรือออกแบบ App ก็น่าจะลองเอามาใช้ดูนะเนี่ย จะได้ทำออกมาแล้วใช้งานได้สะดวกสำหรับผู้ใช้

http://www.interfacesketch.com/

http://www.smashingmagazine.com/2012/09/free-download-ux-sketching-wireframing-templates-mobile/

ทำไม Adobe Photoshop Elements ถึงไม่เหมาะเอามาใช้ออกแบบเว็บ

ก่อนหน้านี้เพิ่งซื้อ Wacom Capture มาใช้ แล้วมันแถม Adobe Photoshop Elements 10 มาให้ด้วย ก็ลองๆ ดูคร่าวๆ มันก็ใช้งานได้ดีทีเดียว ก็เลยคิดว่ามันน่าจะเอามาใช้ออกแบบเว็บได้นะเนี่ย เพราะมันมีความสามารถในการ Save for Web มาให้ด้วย ซึ่งก็ใช้งานได้ใกล้เคียงกับ Photoshop ยุคเก่าๆ

แต่พอเอามาทำงานจริงๆ จังๆ ถึงได้พบข้อจำกัดหลายๆ อย่าง อย่างเช่นเรื่องของความเป๊ะ ที่มันจำเป็นสำหรับการออกแบบเว็บมากอยู่เหมือนกันเพราะมันต้องว่ากันที่ระดับ Pixel เลย แม้ Photoshop Elements จะมีระบบของ Grid + Guide มาให้เหมือนๆ กับ Photoshop ตัวใหญ่ แต่สิ่งที่ขาดหายไปคือการบอกว่าการลาก Selection ของเรามันมีขนาดกว้างxยาว เท่าไหร่ แล้วตำแหน่ง pointer มันอยู่ที่พิกัด X,Y อะไร

มันก็เลยทำให้ไม่สามารถจะสร้างกล่องที่พอเหมาะอย่างที่ต้องการได้ มันก็เลยไม่สะดวกในการออกแบบอย่างที่ควรน่ะเอง

ตอนนี้ก็เลยกลับไปใช้ Pixelmator ที่ถึงแม้ว่าความสามารถหลายๆ อย่างอาจจะสู้เจ้า Photoshop Elements ไม่ได้ แต่ก็มีความเป็น Professional สูงกว่าอยู่หน่อยล่ะ

งานนี้อาจจะต้องใช้หลายๆ โปรแกรมควบคู่กันไปตามแต่ความสามารถของแต่ละตัว :)