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

Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...
Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...

More in:Design

Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
ui-design-Cover Design

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

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

Comments are closed.