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.

ธรรมดาผมก็ชอบฟังเพลงอยู่แล้ว แถมต้อง “ฝังปก” กับ iTunes ด้วยเพื่อความสวยงามในการ browse บน iPhone
แต่แล้วปกเพลงธรรมดาๆ ที่ผมสงสัยว่า “มันจะสื่ออะไร” สุดท้ายผมก็เจอสิ่งที่ซ่อนอยู่

ใช้เวลากับรูปสักหน่อยนะครับ มี 2 ปกครับ แล้วค่อยไปดูเฉลยด้านล่าง :

bbb cover(art)

bbb cover(art)

====================================

เฉลย :

รูปบนใช้คำว่า base ball bear Love Mathematics ไว้ (วิธีการมองให้เอียงหัวไปทางซ้าย)

รูปล่างใช้คำว่า base ball bear Change ไว้ (วิธีการมองให้เอียงหัวไปทางขวา)

ทั้งสองรูปนี้ผมว่าเจ๋งมาก เพราะเป็นการนำเอาแค่ตัวอักษรมาทำการจัดเรียงจนได้ภาพศิลป์ออกมา ไม่ว่าจะใช้เทคนิคแบบ mirror หรือ เน้นสีเฉพาะส่วนเพื่อสร้างเป็นภาพใหม่ แต่ความหมายยังคงถูกซ้อนไว้เหมือนเดิม แต่เป็นที่น่าสังเกตว่าภาพที่สร้างขึ้นมามักจะสมมาตร และรักษาระยะห่างเท่าๆกันครับ

No related posts.

เนื่องจากว่าบล๊อกผมที่ผ่านมาใช้ theme ที่อาจจะดูเวอร์มากเกินไป เลยนั่งคึกออกแบบใหม่ เพราะเริ่มจากเห็นชาว twitter ใช้รูปการ์ตูนที่วาดเอง โดย @Urinn
และผมก็เกิดอาการคึก วาด avatar ใช้เองบ้าง ด้วยทักษะอันน้อยนิดกับ wacom ขาวเนียนของผม ได้ออกมาเป็น http://twitpaint.com/iovq3y ที่ดูโรคจิตและไม่เหมือนตัวจริง 555

เลยเกิดอาการ design-addict ขึ้นมาทันใด เลยจัดการโมบล๊อกนี้ซะใหม่ ให้ดูใช้ง่ายขึ้น สะอาดขึ้น แต่ไม่รู้ว่าจะถูกใจกันรึเปล่านะครับ

handmade by @meddlesome

Theme นี้ชื่อว่า “handmade” พัฒนาต่อจาก WP Theme Wuwei , icon เกือบทั้งหมดวาดด้วยมือจึงใช้ชื่อว่า “handmade” รวมถึงใช้ Font ลายมือจาก @Tpagon

ที่สำคัญบล๊อกนี้ประกาศไม่รองรับ Internet Explorer 6 เพราะใช้ transparent png เพียบ เปลี่ยนไปใช้ firefox กันครับ เพื่อความสุขของ Web Developer

theme ยังไม่เสร็จ 100% นะครับ ถ้ามีอะไรจะแนะนำก็บอกได้เลยครับ ขอบคุณทุกท่าน

No related posts.