Adobe CS4 Web 2.0 Design Workflow

เนื่องจากว่าได้ทราบลิงค์งานนี้ Adobe CS4 Web 2.0 Design Workflow จาก twitter และด้วยความที่งานของผมก็เกี่ยวข้องกับการออกแบบ ก็เลยอยากไปดู workflow ว่าคนอื่นเขามีเทคนิคอะไรเพิ่มเติมรึเปล่า ก็เลยเข้าไปนั่งฟังด้วยครับ

งานนี้จัดขึ้นที่ หอศิลป์กรุงเทพมหานคร โดย Thai Adobe Flex User Group ผู้บรรยาย : Jedt Sitthidumrong

เนื้อหาหลักๆคือแนะนำ Workflow ในการออกแบบเว็บไซต์ที่ถูกต้องเพื่อความรวดเร็ว และลดขั้นตอนยุ่งยากในการทำงานในฝั่งการออกแบบ โดยใช้ Software หลักๆคือ

• Adobe Fireworks
• Adobe Dreamweaver
• Firebug(Firefox extension)

โดยใช้ Fireworks ในฝั่งการออกแบบ mockup และใช้ dreamweaver/firebug ในฝั่ง coding/debugging

เนื้อหาด้าน Adobe Fireworks CS4

• ระวังการใช้ Stoke ในการออกแบบ mockup เพราะถ้าออกแบบผิดแล้วต้องการขยาย scale ที่ดูสวยงามในแต่ละ resolution จะแตกต่างกันโดยสิ้นเชิง
• อย่าใช้ Adobe Illustrator ในการออกแบบโดยเด็ดขาด เนื่องจากปัญหาเรื่อง scaling และความไม่เท่ากันในหน่วย point/pixel (ลองจากทำ stoke แล้วยืดขยายดู)
• สร้าง Master Page ใน Adobe Fireworks ทุกครั้งที่ทำงาน เพื่อลดความซ้ำซ้อนของ element หลักในหน้าเว็บ(หน้าอื่นๆก็จะ inherit จาก Master Page)
• ฝัง Meta Data(Description, Tagging, Copyright, Author, etc.) ทุกครั้งเมื่อทำงาน เพื่อความสะดวกในการค้นหา ลดความซ้ำซ้อน
• Stoke แบบ Hardline ขอบจะคมเต็ม pixel, Softline ขอบจะฟุ้ง(เกิดจากการทำ Anti Aliasing)
• การทำ Roll-Over ให้ใช้การสร้าง State แล้วค่อยไปสร้าง Behavior (เทคนิคนี้เหมือนทำบน Dreamweaver แต่ส่วนตัวผมไม่แนะนำในการทำงานจริง เพราะ coding ที่ Adobe ใช้ปรับแต่งต่อยาก)
• Graphic Library มีแถมมาให้ใน Adobe Fireworks ใช้งานได้เลยจาก common library
• Adobe Fireworks CS4 มีฟังก์ชั่น “Export to Flex Skin” เพื่อเพิ่มความง่ายในการออกแบบ Flex Application โดยทำ template ในหน้าเดียว
• ใช้ฟังก์ชั่น Align เพื่อจัดการเรื่องตำแหน่งและขนาดของ element ทั้งหมด(แนะนำเทคนิคนี้ เพราะง่ายมาก ไม่ต้องไปเล็ง)
• ควรใช้การ Export to PDF เพื่อให้ลูกค้ารีวิว (เนื่องจาก pdf สามารถให้ลูกค้าวาด comment ในตัว viewer แล้วบันทึกส่งกลับมาพิจารณาต่อได้ (โปรแกรม Preview ในแมคใช้ฟังก์ชั่น Annotate)
• สามารถสร้าง Popup menu โดยการใช้เทคนิค swap image ใน behavior อีกเช่นเคย

เนื้อหาด้าน Adobe Dreamweaver CS4

• เวลาทำเว็บทุกครั้ง ต้องประกาศ tag <!DOCTYPE> ทุกครั้ง เพื่อบอก version ของ html และแนะนำให้ใช้ “XHTML”
• ใช้ cmd+option+click เพื่อดูรายละเอียดของ element ต่างๆ (คล้ายๆ Firebug)
• ลดขั้นตอนในการทำงานโดยการใช้การ Edit Original ที่ Fireworks แล้วกด Done เพื่อกลับมาแก้ที่ Dreamweaver ต่อได้(ลดขั้นตอนการทำงานข้ามโปรแกรมได้ดีมาก)
• ใช้การ “Clocking” ไฟล์ เพื่อป้องกันการ Upload ไฟล์ขึ้นไปซ้อนทับกัน (แต่ผมแนะนำให้ใช้วิธีการทำ subversion เพื่อความคล่องตัวในการทำงาน)
• ให้ลูกค้าใช้ Firefox ในการรีวิวงาน(เนื่องจากพัฒนาบน Firefox เป็นหลักเนื่องจากได้มาตรฐาน Web Standard) เมื่อทำใกล้เสร็จค่อยให้แก้ Bug ในส่วนของ Internet Explorer (เพราะ IE มันเรื่องมากในมาตรฐานเว็บ ลูกค้าบางคนยังใช้ IE6 ซึ่งจะ 10 ปีเข้าไปแล้ว)

CSS Design Workflow – การทำงานกับการออกแบบ Style Sheet ให้ออกแบบใน Firefox เป็นหลักแล้วค่อยทำ css hacking กับ IE6,7,8 แยกไฟล์กัน เพื่อลดความซ้ำซ้อน

• Reset CSS
• CSS Layout (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))
• CSS Text (IE6,IE7,IE8(แยกแต่ละไฟล์เพื่อทำ Hacking))

จะว่าไปส่วนใหญ่ผมมักจะทำ mockup บน photoshop โดยอิงจาก 960.gs template เพื่อความสะดวกในการวาง grid เว็บ แล้วค่อยมา hardcode ใน TextMate (Dreamweaver จึงไม่ค่อยมีประโยชน์อะไรกับผมมากนัก) แต่หลังจากนี้คงจะลองเอา workflow นี้ไปทำงานดูครับ

No related posts.