The story behind WordCamp Bangkok 2019 Logo & Design

สิ่งหนึ่งที่หลายคนที่ได้มาร่วมงาน WordCamp Bangkok 2019 เมื่อวันที่ 16-17 กุมภาพันธ์ 2562 ที่ผ่านมา ต่างพูดถึงกันมากคือ การออกแบบ logo และ graphic ต่างๆ สำหรับงานในครั้งนี้ วันนี้เราจะมาเล่าถึงเบื้องหลังกันแบบหมดเปลือก เผื่อว่าจะช่วยจุดประกายสำหรับคนที่สนใจอยากจะมาเข้าร่วมทีมในครั้งถัดไป หรือเป็นแรงบันดาลใจสำหรับจัดงานอื่นๆ ก็ตาม

เราเริ่มต้นจากทีม Organizer ที่จัดงานในปีก่อนๆ เปิดรับสมัครและหาคนมาร่วมอาสาเป็น Organizer โดยมี นก (Pantip Treerattanapitak) เป็น Lead Organizer สำหรับงานในปีนี้ หลังจากได้พูดคุยกันและแบ่งหน้าที่ว่าใครอยากทำหน้าที่ในส่วนไหน เราก็ได้แบ่งทีมย่อย ซึ่งทีม Design ประกอบไปด้วย

  • หนุ่ม Nhum (Pathompong Sangkajit) เป็น Frontend Developer – ซึ่งเคยมีประสบการณ์ในการจัดงานตั้งแต่ปี 2017, 2018 มาก่อน มีส่วนสำคัญในการตัดสินใจต่างๆ ของทีม
  • หมูใหญ่ Mooyai (Khomsun Chaiwong) เป็น Designer / Developer – ซึ่งปีนี้ได้เข้ามาร่วมทีม Organizer เต็มตัว หลังจากปีก่อนได้ส่วนทำไฟล์ออกแบบบางส่วนเนื่องจากทีมปีก่อนขอให้ช่วย ปีนี้เลยอยากจัดเต็ม
  • บอย Boy (Witthaya Santiwitthayawong) เป็น Designer / Developer – หลังจากได้ร่วมงาน WordCamp Bangkok 2018 ก็รู้สึกประทับใจ community นี้ และได้ไปร่วม WordCamp Tokyo 2018 ด้วย ทำให้ยิ่งมีกำลังใจมาขอเข้าร่วมทีมเป็น Organizer ครั้งนี้

เราเริ่มนัดประชุม Design Team กันครั้งแรกช่วงกลางเดือนตุลา’61 ซึ่งครั้งนั้นเป็นการ brainstorm ideas ว่า เราจะให้ theme งานของปี 2019 ออกมาเป็นรูปแบบไหนดี ซึ่งหนุ่ม, หมูใหญ่และบอยก็ได้ทำ initial logo design มาเสนอกันหลายแบบหลายไอเดียมาก นกบอกว่า “ปีนี้ไม่เอาไทยๆ” แต่สุดท้ายหลังจากคุยกันทาง zoom.us ก็ได้ข้อสรุปมาว่างานปีนี้เป็นอารมณ์แบบไทยๆ ที่ทันสมัย — อ้าววววว

โลโก้แรกที่เป็นจุดเริ่มต้นของการ develop logo ต่อ

หลังจากนั้น หมูใหญ่ ที่ถนัดเรื่อง typography ก็ได้ลองปรับและดราฟท์ calligraphy ขึ้นมาใหม่ ซึ่งไอเดียในตอนนั้นก็ยังไม่ชัดเจนเท่าไหร่ แต่ทุกคนในทีมพอจะเห็นแนวทางว่าสามารถเอามาช่วยกัน discuss และ develop ไปในแนวทางที่ทุกคนต้องการได้ จึงได้ออกมาเป็น

หมูใหญ่ได้ทำการเสก logotype นี้ขึ้นมาภายในคืนเดียว!

หลังจากนั้น บอยก็ได้รับไม้ต่อจากหมูใหญ่ ในการเก็บดีเทล รายละเอียด จัดให้เข้า grid / golden ratio และดู balance เพื่อ finalize logo design ให้จบเป็นอย่างแรก

สีแดงคือโลโก้แรกที่หมูใหญ่ทำมา / สีดำคือโลโก้ที่บอยปรับให้เข้า grid

หลังจากนั้นก็ทำ color variations ต่างๆ ให้ทีมงานช่วยกันเลือก สีที่เลือกมาเป็นส่วนผสมของสีที่ดูเหมาะกับการเป็นงาน event และชุดสีที่กำลังจะมาเป็นเทรนด์ในปี 2019

ผลโหวตเลือกหมายเลข 2 และได้ Finalize Logo และ Identity สำหรับงานครั้งนี้

หลังจากบอยกับหมูใหญ่ช่วยกันปรับดีเทลต่างๆ จนพอใจแล้ว ก็ได้ออกมาเป็น final logo
ขอขอบคุณ Cadson Demak ที่ได้สร้างฟอนต์ Chonburi / Bai Jamjuree ไว้ใน Google Fonts
ซึ่งค่อนข้างตอบโจทย์สำหรับใช้เป็น identity และเป็น webfont ในเว็บของงานด้วย

ขั้นตอนการออกแบบโลโก้ตั้งแต่เริ่มจนจบใช้เวลาเพียงแค่ 2 สัปดาห์ เพื่อให้งานในส่วนอื่นๆ สามารถไปต่อได้ ทีม Design จึงจำเป็นต้องเร่งทำงานในช่วงแรกนี้มาก

หลังจากที่ได้โลโก้มาแล้ว โจทย์ต่อไปคือ เราควรจะมี key visual / graphic elements อื่นๆ สำหรับเพิ่มเติมตกแต่งให้งานมีสีสันและน่าสนใจยิ่งขึ้น ในส่วนนี้บอยได้เสนอไอเดียเกี่ยวกับภาพจิตรกรรมไทย (Reference) แต่มาประยุกต์ให้ดูทันสมัยเข้ากับยุคปัจจุบัน และสื่อถึงบรรยากาศของงานด้วย

draft sketch
Final Key Visual / Graphic Elements for WordCamp Bangkok 2019

หลังจากได้ Logo และ Key Visual ของงานแล้ว สิ่งหนึ่งที่เป็นสีสันของงาน WordCamp ก็คือ Wapuu มาสคอตของ WordPress ซึ่งเหมือนเป็นธรรมเนียมไปแล้วว่า ในแต่ละครั้งจะมี Wapuu ที่ออกแบบมาพิเศษเฉพาะสำหรับครั้งนั้นๆ

สามารถอ่านรายละเอียดเพิ่มเติมเกี่ยวกับ Hanuman Wapuu ได้ที่ https://2019.bangkok.wordcamp.org/introducing-hanuman-wapuu/

“หนุมานวาปุ” วาดโดย ใบหยก มาดาวิศิษฎ์ (หญิง)

ทีม Design ใช้เวลาในการทำส่วนของ Identity / Key Visual ทั้งหมดประมาณ 1 เดือน เป็นช่วงที่ยากมากที่สุด แต่พอทำออกมาได้แล้ว หลังจากนั้นทุกอย่างจะง่ายขึ้นมาก รวมถึง Organizer ที่ทำหน้าที่ในส่วนอื่นๆ ด้วย สามารถเห็นภาพได้ตรงกัน การนำไปประยุกต์ใช้ในส่วนต่างๆ ก็ง่าย เช่น การคิดเรื่อง Swag (ของที่แจกฟรีในงาน), อาหารและเครื่องดื่มในงานที่เราสรุปกันว่า เราจะมีบุฟเฟ่ต์ขนมไทยในช่วงบ่าย และ “ยาหม่อง” สำหรับคนที่มาฟัง sessions ต่างๆ แล้วรู้สึกมึนงง เพราะปีนี้เรามี Sessions มากถึง 28 sessions ในวันเดียว!

หลังจากทีม Design ก็จะมีหน้าที่ออกแบบเกือบทุกสิ่งที่ต้องการ design สำหรับงานนี้ และจำเป็นต้องทำงานร่วมกับทีมอื่นตลอดเวลา แต่สิ่งที่ดีคือ เราสามารถแบ่งงานกันทำได้ ช่วงไหนใครไม่มีเวลาทำ ก็สามารถแบ่งไปให้คนอื่นช่วยได้ รวมถึง Organizer คนอื่นๆ เช่นทีม Content / PR ก็สามารถทำ Featured Image เองได้ เพราะมี guideline มาชัดเจน

สำหรับ Website (ที่กำลังเปิดดูอยู่นี้) มีข้อจำกัดค่อนข้างมาก เนื่องจากเป็น Multisite จากทาง wordcamp.org Central ซึ่งเราไม่สามารถเพิ่ม Themes หรือ Plugins ต่างๆ ได้เลย การจะปรับ Design ของเว็บนั้นจึงต้องทำผ่าน Custom CSS อย่างเดียวเท่านั้น ซึ่งในส่วนนี้หนุ่ม ที่เป็นคนรับผิดชอบดูแลเว็บของงานเป็นหลัก และบอยได้มาช่วยปรับเรื่อง CSS ให้หน้าตาเว็บเข้ากับ Identity ของงานในปีนี้

การ Custom CSS ทั้งเว็บใน Customizer นั้นยากลำบากมาก เนื่องจากไม่สามารถ test ได้เหมือนกับที่เราทำเว็บทั่วไปใน local / staging และการจะมาปรับ CSS แบบ real-time ตอนที่เว็บเปิดใช้งานแล้วก็อาจจะดูไม่ดีสำหรับคนที่เข้ามาเยี่ยมชมเว็บ แต่เนื่องจากปีก่อนๆ หนุ่มได้วางโครงสร้างไว้ทั้งหมดแล้ว ปีนี้จึงสามารถยกมาใช้ได้เลย แต่ในปีนี้เราได้ตัดสินใจเปลี่ยน Theme ที่ใช้เป็น CampSite 2017 เนื่องจากทาง Central ได้แนะนำให้ใช้เพราะว่าอัปเดตใหม่ มีฟีเจอร์ต่างๆ เพิ่มเติม และโชคดีที่สามารถใช้ Remote CSS จาก Github ได้โดยตรง ซึ่งเราใช้วิธีการสร้าง local ขึ้นมาในเครื่องตัวเอง แล้วทำการ compile Sass ด้วย CodeKit และ Push ขึ้น Git ซึ่งสามารถไปดู Custom CSS code ได้ที่ https://github.com/inhumba/WordCamp-Site/tree/master/wc-bangkok-2019

สิ่งหนึ่งที่เป็นอุปสรรคสำหรับทีม Design คือเรื่องเวลา ทั้งเรื่องของเวลาที่ว่างไม่ตรงกัน และเรื่องของเวลาที่แต่ละคนจะต้องแบ่งเวลาส่วนหนึ่งจากการทำงานปกติมาทำงานเพิ่มเติมนี้ด้วย ซึ่งทุกคนมาด้วยใจ ไม่มีค่าตอบแทนใดๆ แต่สิ่งที่ได้รับมีค่ามากกว่านั้น และโชคดีที่ปีนี้เรามีคนเข้ามาร่วมเป็น Organizer เพิ่มขึ้น และทุกคนเก่งมากๆ จึงทำให้งานเป็นไปตามที่วางแผนกันไว้ตั้งแต่แรก

ตลอด 4 เดือนที่ผ่านมา เราใช้เวลาในการประชุมด้วยกัน เจอกันทุกคืนวันพุธ ผ่านทาง zoom.us และยังมีพูดคุยกันทาง Slack และจัดการงานต่างๆ ผ่านทาง Trello รวมถึงนัดเจอกันตามที่ต่างๆ ซึ่งสามารถช่วยให้พวกเราสื่อสารกันได้ตลอดเวลา ซึ่งเป็นสิ่งสำคัญที่สุดในการทำงานร่วมกัน และทำให้เรารู้จักและเข้าใจกันมากขึ้นด้วย

และที่ขาดไม่ได้เลยคือ นก Lead Organizer ของเรา ที่ทุ่มเทอย่างมากสำหรับงานในครั้งนี้ จัดการให้ทุกอย่างเป็นไปตามแผน จัดประชุมกับทุกทีม คุยกับ Organizer ทุกคน (รวมถึงตามงานด้วย :D)

ในฐานะทีม Design อยากขอบคุณทุกท่านที่มาร่วมงานและท่านที่มาไม่ได้แต่คอยติดตามอยู่ ขอบคุณ Speakers, Volunteers, Sponsors ผู้ใจดีที่ช่วยสนับสนุนให้งานในครั้งนี้เกิดขึ้นได้ ขอบคุณชาวต่างชาติที่มาและไม่ได้มาที่พูดถึงงานนี้ ขอบคุณทีม Organizers ทุกคนที่ร่วมแรงร่วมใจด้วยกันตลอดช่วงเวลาที่ผ่านมา ขอบคุณเสียงตอบรับทุกคำติและชม ขอบคุณทุกท่านที่ให้ความสนใจอยากจะเข้าร่วมเป็น Organizer สำหรับ WordCamp ครั้งถัดไป ซึ่งเราอาจจะมี Surprise! ต้องคอยติดตามกันต่อไป… 🙂

One Reply to “The story behind WordCamp Bangkok 2019 Logo & Design”

Comments are closed.