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 Writing คืออะไร
Design

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

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

ส่อง Data ครบรอบ 5 ปี Skooldio เติบโตขึ้นอย่างไรบ้าง?

Skooldio เริ่มก่อตั้งขึ้นในเดือนมีนาคมปี 2017 เริ่มกันด้วยทีมเพียงไม่กี่คน ที่มี Passion ร่วมกัน คือการพัฒนาศักยภาพของคนไทย ให้มีสกิลที่เป็นที่ต้องการของตลาดในยุคปัจจุบัน ตลอด 5 ปีที่ผ่านมา เราได้ผจญภัยกับการเริ่มต้น เป็นแพลตฟอร์มเรียนออนไลน์เจ้าแรกๆ ของไทย ...

More in:Design

Web Design Font Pairing Design

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

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...
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 ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
Business

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

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

Comments are closed.