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

ui-design-Cover
Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
psychology ux ui blog cover
Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

More in:Design

Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

การเล่าเรื่องที่ดี อย่าเป็นร้านซูชิบุฟเฟต์ 199 บาท ที่อิ่มจุก ๆ จนคนเอียนไม่อยากกินอีก แต่จงเล่าเรื่องแบบเชฟซูชิโอมากาเสะ ที่พิถีพิถันและปรับให้เหมาะสำหรับผู้ทานจริง ๆ จนคนได้ลิ้มรสแล้วติดใจ รู้สึกอยากกินต่อเรื่อย ๆ นี่คือคำแนะนำเพื่อให้คุณสามารถ Pitch ...
Business

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Table of ContentsWhy Motion?ส่วนแรกคือประโยชน์ที่มีต่อสมองของ Userนอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design ...

Comments are closed.