ปั๊มกราฟิกไม่ทัน? เขียนโปรแกรมเอาสิ

ที่ Skooldio เราจัดเวิร์คชอปกันเกือบจะทุกวัน ทั้ง Public และ In-house บางวันมากกว่าหนึ่งเวิร์คชอป และในทุกๆ เวิร์คชอป ก็จะมีการแจกสื่อการสอน ที่จัดกันหนักขึ้นเรื่อยๆ ทั้งรูปแบบและกราฟิกต่างๆ

ซึ่งในการจะออกแบบของให้สามารถรองรับเวิร์คชอปที่หลากหลาย และมีจำนวนมากขึ้นเรื่อยๆ ก็จำเป็นจะต้องคิดหาวิธีการทำให้รวดเร็วโดยที่ยังคงคุณภาพไว้ให้ได้ และนี่คือเรื่องราวการแก้ปัญหาในแบบของ Skooldio ที่มีความบ้าจี้ และจัดหนักจัดเต็มกันทุกเรื่อง!

Table of Contents

สุมหัวคิดเพื่อแก้ปัญหา
การท้าทายตอนเที่ยงคืน
เขียนโค้ดข้ามคืน
ผลจากการอดนอน
นำมาใช้จริง

สุมหัวคิดเพื่อแก้ปัญหา

เนื่องจากจำนวนคอร์สและเวิร์คชอปมีมากขึ้นเรื่อยๆ แต่จำนวนคนในทีมเท่าเดิม การออกแบบ graphic สำหรับโปรโมท และทำเอกสารประกอบการเรียนให้กับทุกๆคอร์ส จึงกลายเป็นงานที่ล้นมือของทีม design และทำให้ประสิทธิภาพของทีมลดลง

เพื่อจะแก้ปัญหานี้ Skooldio ไม่ยอมให้เป็นหน้าที่ของทีม design ฝ่ายเดียว ทุกๆ ทีม ทั้ง design, developer, และ business ของ Skooldio ต่างเข้ามาร่วมสุมหัวคิดหาทางออกสำหรับเรื่องนี้กัน

การท้าทายตอนเที่ยงคืน

จากการสุมหัวคิดกัน ก็ได้ทางออกมาหลายๆ ทาง แต่ก็ยังไม่ตรงใจทุกฝ่าย จนกระทั่งมี designer คนนึงเสนอขึ้นมาว่า

“เอ้ย! ไหนๆ ก็ต้องทำแล้ว ทำไมเราไม่ทำ generator เพื่อ generate รูป graphic เหล่านี้ได้แบบไม่จำกัดไปเลยล่ะ เนี่ยแข่งกันทำคนละ 1 แบบ”

พร้อมกับทำ prototype ขึ้นมาด้วย Javascript library ที่ชื่อว่า P5.js ส่งมาใน Slack ตอนเที่ยงคืนวันนั้น เสมือนกับเป็นการท้าทายคนอื่นๆ

เขียนโค้ดข้ามคืน

เมื่อ Designer ท้ามา Dev อย่างเราจะไปยอมได้ยังไง… ท้ากันไปท้ากันมาอยู่สักพัก ในที่สุดก็รวมตัวกันได้ 3 คน มาแข่งกันเขียนโค้ดกันตอนเที่ยงคืน ประกอบไปด้วย designer, developer, และ director ของ Skooldio โดยโจทย์คือการสร้าง generator ที่สามารถ generate รูป graphic ที่มีความแตกต่างกันไปในทุกๆ ครั้งได้

ผลจากการอดนอน

แม้จะมีประสบการณ์การเขียนโค้ดกันมาทุกคน แต่ก็ถือว่ายังเป็นมือใหม่ในการทำ generative design รวมถึงการใช้ library p5.js เลยต้องมาเริ่มต้นอ่าน documentation กันใหม่หมด เขียนกันข้ามคืนจนสุดท้ายก็ได้ generator มา 3 แบบ และนี่ก็คือผลงานจากการอดนอนครั้งนั้น

แบบที่ 1

โดย Thanon Vongprayoon ตัวแทนจาก #TeamDesigner

แบบนี้มีไอเดียมาจากการนำวงกลม ที่มีขนาดและสี (ตาม CI ของ Brand) ที่แตกต่างกันมาเรียงกันแบบ random เน้นความเรียบหรู

แบบที่ 2

โดย Tadpol Rachatasumrit ตัวแทนจาก #TeamDeveloper

แบบนี้มีไอเดียมาจากการนำรูปทรงหกเหลี่ยม ซึ่งเป็นรูปทรงของโลโก้ Skooldio มาเรียงกันเป็นตาราง แล้วพัฒนาต่อให้ แต่ละหกเหลี่ยมในแต่ละช่องตารางมีความแตกต่างกันทั้งสี, ขนาด และ ตำแหน่งที่จะถูก offset ออกจากช่องแต่ละช่อง

แบบที่ 3

โดย Ta Virot Chiraphadhanakul MD ของ Skooldio ตัวแทนของ #TeamBizDev

แบบนี้เริ่มต้นจากการเลือกใช้ pattern 4 อัน คือ เส้นแนวตั้ง, เส้นแนวนอน, เส้นแนวทแยง, และจุด นำมารวมอยู่ด้วยกัน แล้วพัฒนาต่อให้แต่ละ pattern มีสี, ขนาด, และตำแหน่งการวาง ที่แตกต่างกันไป

นำมาใช้จริง

หลังจากที่ทำกันเสร็จก็นำมาประกอบกันได้เป็น graphic generator ที่พร้อมให้ทีม design นำไปใช้ generate รูป graphic ต่างๆ เพื่อนำไปปรับใช้กับคอร์สต่าง ๆ ดังที่เห็นกัน

พอทำกันจนเสร็จ ก็เพิ่งมาพบว่า เราไม่ใช่ทีมแรกที่อยากจะแก้ปัญหานี้ New York Public Library ก็มีโปรเจคสร้างปก e-book เช่นกัน https://www.nypl.org/blog/2014/09/03/generative-ebook-covers