เรียน Google Web Designer กันแบบสบายๆ

Web Designer อย่างพวกเรา ก็เหมือนศิลปิน ที่แม้ว่าเราจะมีไอเดียเจ๋งสุดๆ มากมาย แต่สุดท้ายการเราต้องทำการ “วาด” ลงบนเฟรม เพื่อนำเสนอสุดยอดไอเดียของเราให้คนอื่นได้รับรู้ และ Google Web Designer ก็เป็นเฟรมอีกอันที่เราสามารละเลงไอเดียของเรา สู่สายตาคน (และลูกค้า) นับล้าน งั้นมาเริ่มต้นเรียนกันดีกว่า

วิธีเรียน Google Web Designer กับ Nextflow

• หากคุณเป็นมือใหม่ อยากจะลุยกันตั้งแต่เริ่มต้นก็แนะนำให้ download project ที่ผมเตรียมไว้ให้ทำตามไว้ในเครื่องให้เรียบร้อยก่อน จากนั้นลุยตามหัวข้อด้านล่างไปทีละขั้นตอน โดยจะมี video แนะนำในขั้นตอน workshop ด้วย
• หากคุณ search มาจาก Google, ทะลวงตามจาก link ที่เพื่อนใจดีแชร์ไว้บน facebook, หรือ link มาจากเว็บผู้ใจดีให้เครดิต link กลับมาที่ผม ก็สามารถดูหัวข้อที่คุณสนใจได้จากด้านล่าง เพียงแต่คุณจะ download project ไปทำตามเพื่อเพิ่มความเข้าใจก็ได้นะครับ
• หากคุณเข้ามาแล้วไม่เจอสิ่งที่คุณต้องการ แต่เราเข้าใจกันแล้วว่ามาเส้นทางเดียวกัน comment ฝากคำถามไว้ด้านล่างได้นะครับ ผมจะพยายามตอบกลับให้เร็วที่สุดเมื่อว่างจากงานอบรมครับ

หัวข้อ

1. รู้จักกับ Google Web Designer

2. วิธีสร้าง Project และเรียนรู้ User Interface (ส่วนติดต่อผู้ใช้) ใน Google Web Designer

3. การสร้าง Animation แบบสบายๆ ด้วย Google Web Designer

4. วิธีทดสอบ HTML Animation ใน Google Web Designer

5. การ publish animation ใน Google Web Designer ออกไปใช้งาน

1. ลองใช้ Google Web Designer

สำหรับพวกเราที่ยังไม่เคยหรือไม่เคยรู้จัก Google Web Designer ก็ต้องทำความรู้จักกับมันก่อน เหมือนเวลาเราไป B2S จะซื้อปากกามาใช้ซักด้าม ก็ต้องทดสอบจับมันมาขีดๆ เขียนๆ ให้คล่องมือก่อนเอากลับมาใช้บนโต๊ะทำงาน ในหัวข้อแรกเราจะมาดูกันว่า เรียน Google Web Designer ไปทำไม และใช้ทำอะไรกัน?

2. วิธีสร้าง Project และเรียนรู้ User Interface (ส่วนติดต่อผู้ใช้) ใน Google Web Designer

งาน Web Animation นั้นมีหลายแบบ ไม่ว่าจะเป็น Ads หรือ Web animation เพื่อใช้ในงาน website ต่างๆ  โดย Google Web Designer จะมีการแบ่งประเภทของ Project ไว้อย่างชัดเจน ในตอน beta จะเน้นไปที่การสร้าง Ads มากกว่า

แต่ก็สนับสนุนให้เราสามารถใช้โปรแกรมทำงานเกี่ยวกับ HTML, CSS, Javascript ด้วย แต่จากที่ผมใช้งานแล้วนั้นในเวอร์ชั่นปัจจุบัน ไม่ได้มีตัวช่วยในการเขียน code ดังกล่าวเท่าไหร่ (ยังไม่สะดวกเหมือนพวก editplus หรือ Sublime Text)

ดังนั้นเรามาดูวิธีการสร้าง Project และดูการใช้งาน Google Web Designer เบื้องต้นกันดีกว่าครับ

3. การสร้าง Animation แบบสบายๆ ด้วย Google Web Designer

Google Web Designer ออกแบบมาให้เป็นเครื่องมือสร้าง HTML5 Animation สำหรับ Ads ตั้งแต่แรก ซึ่งมันสนับสนุนการสร้าง Ads บนเจ้าใหญ่ๆ อย่าง AdMob หรือ DoubleClick ทำให้สามารถสร้าง Ads แล้วเอาไปใช้กับบริการดังกล่าวได้อย่างรวดเร็ว แต่มันก็ยังให้เราสร้างเป็น Ads หรือ Animation เปล่าๆ เพื่อเอาไปใช้แบบอื่นด้วยนะ ดังนั้นเรามาลองดูการสร้าง Web Animation และใส่ Interactive ง่ายๆ (หรือเรียกว่า Web Animation แบบไม่เชื่อมกับบริการ Ads ก็ได้ครับ) กันดีกว่า

4. วิธีทดสอบ HTML Animation ใน Google Web Designer

ความตื่นเต้นที่สุดในการทำ Web Animation เนี่ย จะคล้ายๆ กับการทำงานสายอื่นๆ คือตอนเราเอาไปเปิดให้ลูกค้าดูครับ! ซึ่งเมื่อเราสร้าง Animation รวมทั้ง กำหนด Interaction เรียบร้อยแล้ว สิ่งที่ควรทำ (และต้องทำทุกครั้ง) คือการทดสอบว่า Animation และ Interaction ทั้งหมดนั้น แสดงผลและทำงานได้อย่างถูกต้อง

เรามาดูวิธีการทดสอบ animation ใน Google Web Designer กันเลย

5. การ publish animation ใน Google Web Designer ออกไปใช้งาน

Google Web Designer ออกแบบมาเพื่อให้พวกเราสร้าง Animation บนเทคโนโลยี HTML5 ได้โดยไม่ต้องลงไปยุ่งกับการเขียน code ทั้งหมด (แต่ถ้าอยากยุ่ง ก็อนุญาติ) ดังนั้น ขั้นตอนสุดท้ายคือการนำ animation ไปใช้งานใน Website จริงๆ เรามาดูกันครับว่าขั้นตอนในการนำตัว project ไปใช้งาน จะเป็นอย่างไร

เพิ่มเติมคือเนื่องจากผมเป็นคนชอบ Adobe โดยพื้นฐาน จะมีวิธีการใข้โปรแกรมสาย Adobe เช่น Adobe Dreamweaver CC, Adobe Edge Code CC, และ Bracket สาธิดด้วยนะครับ

สรุป.. และไปต่อ

“เรียน Google Web Designer” ในตอนที่ผมเขียนอยู่นี้นั้น ยังเป็น version beta นั่นหมายความว่ามัน “ต้อง” มีข้อบกพร่อง มันต้องได้รับการปรับปรุงอีกหลายๆ จุดก่อนที่จะเป็นตัวสมบูรณ์ แต่คุณก็น่าจะเริ่มเห็นศักยภาพในการใช้งานที่น่าพิจารณาเอามาใช้งานอีกตัวหนึง (เพราะมันฟรี!) ยังไงก็ติดตามกันได้นะครับ เป็นอีกตัวที่ผมสนใจและก็จะอัพเดตตามเรื่อยๆ

ดูเครื่องมือหรือเทคนิคอื่นๆ ได้ในส่วนของ Nextflow Learn หรือสนใจมาอบรมกับผมก็สามารถดูได้ใน Nextflow training และถ้าอยากอัพเดตของใหม่ๆ ไปพร้อมกับคนอื่นๆ ก็สามารถฝาก email ไว้ที่นี่ แล้วผมจะส่ง email แจ้งทุกครั้งที่มีข่าว หรือกิจกรรมใหม่ๆ ถึง inbox ของคุณเลย

และที่สำคัญ กำลังใจในการสอนสิ่งใหม่ๆ ของผมก็จะมาจาก comment ให้กำลังใจของคุณ ติชมอะไรก็ฝากไว้ด้านล่างได้เลยนะครับ