DesignLife at Skooldio

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

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

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

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

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

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

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

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

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

จากการสุมหัวคิดกัน ก็ได้ทางออกมาหลายๆ ทาง แต่ก็ยังไม่ตรงใจทุกฝ่าย จนกระทั่งมี 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

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

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

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

แบบที่ 2

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

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

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

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

แบบที่ 3

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

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

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

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

นำมาใช้จริง

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

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

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

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

สุดท้ายปัญหานี้ถูกแก้ไขกันไปได้ภายในหนึ่งคืน เรียกได้ว่าได้ทั้งงาน ได้ทั้งความสนุกสนานไปพร้อมกันเลยทีเดียว

ถ้าใครอยากได้หนังสือสวยๆ Material ดีๆ แบบนี้ มาเรียนกับเราได้ที่ www.skooldio.com

You may also like

ทำงานสาย UX ไม่ได้มีแค่เรื่องของ UX และ UI | Skooldio Blog
Design

การทำงานสาย UX ไม่ได้มีแค่เรื่องของ UX และ UI

หลายคนอาจจะคิดว่า UX/UI designer ต้องจบจากด้าน Design หรือทำงานด้าน Graphic Design มาก่อนเท่านั้นถึงจะทำได้ แต่ในความเป็นจริงแล้ว ไม่ว่าใครก็สามารถทำได้ เราทุกคนที่ทำงานสายนี้ ต่างต้องเรียนรู้เพิ่มเติมเกี่ยวกับศาสตร์นี้กันตลอด ยิ่งยุคสมัยเปลี่ยนไป ความต้องการของคนก็เปลี่ยน ...
คุยกับ Head of Experience Design แห่ง Bitkub ผู้ค้นพบว่าอยากเริ่มทำงานสาย UX ในวัย 30 | Skooldio Blog
Design

คุยกับ Head of Experience Design แห่ง Bitkub ผู้ค้นพบว่าอยากเริ่มทำงานสาย UX ในวัย 30

เคยเป็นทั้ง Web Designer ตั้งแต่ที่เว็บหางานในไทยยังไม่มีตำแหน่ง UX Designer เป็น Project Manager ที่ต้องทำ Wireframe และ User Flow โดยที่ไม่รู้ว่านี่คือเครื่องมือสำคัญในการทำ ...

More in:Design

DesignOps คืออะไร? ทักษะใหม่ของงาน UX/UI - งานของ Designer แค่ออกแบบให้เสร็จแล้วก็จบจริงไหม? | Skooldio Blog Design

DesignOps คืออะไร? ทักษะใหม่ของงาน UX/UI – งานของ Designer แค่ออกแบบให้เสร็จแล้วก็จบจริงไหม?

หลายคนในวงการ UX/UI Designer อาจเคยเจอปัญหาระหว่างการทำงาน เช่น ปัญหาการส่งต่องานให้ทีม Developer ปัญหาในการทำงานซํ้าๆ และใช้เวลาเยอะ ปัญหาการทำงานติดขัด ปัญหาเหล่านี้จะดีขึ้น พร้อมเพิ่มประสิทธิภาพในการทำงาน ได้ง่ายๆ ด้วย DesignOps ...
"ตั๊ง" กับเส้นทาง UX/UI - จากสถาปัตฯ สู่ Lead Designer บริษัทต่างชาติในวัย 26 ปี | Skooldio Blog Design

“ตั๊ง“ กับเส้นทาง UX/UI – จากสถาปัตย์ฯ สู่ Lead Designer บริษัทต่างชาติในวัย 26 ปี

Make an Income Doing What You Love สำหรับคนทำงานสายผลิตหรือ Content Creator คงจะดีไม่น้อยถ้าเราได้ทำในสิ่งที่ตัวเองรักไปพร้อมๆ กับการมีรายได้คอยหล่อเลี้ยงให้มีกำลังใจสร้างสรรค์ผลงานต่อไป แต่จะทำอย่างไร ในเมื่อการทำสิ่งที่ตัวเองรักอย่างเดียวไม่ตอบโจทย์การหารายได้ เหล่า ...
9 UX Tools ที่จะทำให้คุณเข้าใจ User ได้มากกว่าที่เคย | Skooldio blog Design

9 UX Tools ที่จะทำให้คุณเข้าใจ User ได้มากกว่าที่เคย

อย่างที่หลายๆคนรู้กันดีอยู่แล้วว่า หัวใจหลักในการทำ User Experiece (UX) Design คือการทำความเข้าใจผู้ใช้งาน รวมไปถึงปัญหาและความต้องการ เพื่อสร้างผลิตภัณฑ์ที่สามารถตอบโจทย์การใช้งานและเข้าไปแก้ปัญหาต่างๆในชีวิตประจำวันของผู้ใช้งานได้ ไม่ใช่แค่รู้เพียงปัญหาในชีวิตประจำวันของผู้ใช้งานเท่านั้น เราควรเข้าใจปัญหา ความคิด และความรู้สึก ของผู้ใช้งานระหว่างใช้ผลิตภัณฑ์ของเราด้วย โดยการที่จะรู้ ...

Comments are closed.