Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

Designer ควรรู้พื้นฐานการ code?

Why designer should know some code?

มเคยอ่านบทความนึงจากต่างประเทศอาจจะจำเนื้อหาภายในไม่ได้ทั้งหมด แต่โดยรวมแล้วบทความดังกล่าวนั้นพูดถึงเรื่องของ designer กับ coder ใจความสำคัญคือผู้เขียนต้องการจะบอกว่า  Designer should design, Coder should code ไม่ควรสับการทำงานไปสับการทำงานมา ซึ่งแม่งก็ต่างจากตัวของผมเองอยู่พอสมควรช่วงที่ต้องทำ startup ทั้งของ Preorderich และ Parking Duck โดยพื้นฐานแล้วผมเริ่มมาจาก coder ธรรมดา ที่พอมีพื้นฐานพวก sketch, photoshop ประกอบกับซอฟแวร์อื่นๆ ของ Adobe อย่าง Premier pro และ Illustrator บ้าง เพราะช่วงที่อยู่มัธยมเน้นไปทางด้านนั้นเป็นหลัก ก่อนที่จะผันตัวเองมาเป็น coder เต็มตัวช่วงขึ้นมหาลัยเป็นต้นมา

Startup หรือ SME เล็กๆ ในประเทศไทยค่อนข้างต่างจากหลายๆ ที่อยู่พอสมควรครับ เนื่องจากมีทรัพยากรในเรื่องของเงินทุน และบุคลากรที่จำกัด จึงต้องหาคนสร้าง product ที่สามารถทำอะไรๆ ได้หลายอย่าง-หลายส่วน เพื่อลดต้นทุนอันที่พอจะลดลงไปได้ก่อน นั่นคือประเด็นหลักเลยที่ผมอยากจะเขียนในเรื่องนี้

ทำไม designer ควรรู้พื้นฐานการ code บ้างที่จริงก็อาจจะนำไปใช้กับพวก software house ด้วยก็ได้ แต่อยากจะเขียนถึงกรณีที่เป็น scope เล็กๆ ก่อน เพื่อไม่ให้บทความนี้มันยาวเกินไป ผมขอไม่เอาเรื่องของ UX เข้ามาเกี่ยวกับเรื่องของ designer ก่อนในตอนนี้ เลยขอทึกทักไปก่อนเลยว่า designer ในบทความที่เขียนนี้ พอรู้เรื่องของ UX มาบ้างก็แล้วกัน

ส่งงาน design ไปให้ coder

ลองจินตนาการว่า เรากำลังทำงานเป็นทีมอยู่นะครับ designer ทำงานส่วนของตัวเองเสร็จ มีแบบที่สวยงามเรียบร้อย ส่งต่องานไปยัง coder ให้ทำการตัดงานนั้นขึ้น mobile/web ถ้า coder เป็นผู้ที่มีประสบการณ์ทำงานพอสมควร ก็พอที่จะรู้ library ที่จะต้องใช้ให้เหมาะสมกับงาน design ที่ได้รับมานั้น ผมยกตัวอย่างเช่น carousel(หรือที่เรียกว่า slider ก็ได้)

designer ออกแบบปุ่ม control ซ้ายขวา พร้อมมี thumbnail เป็นรูปภาพขนาดเล็ก ไหนจะหน้าตาของ carousel ที่แปลกตา ไม่ได้หาเจอที่ไหนมาก่อนตามความต้องการของลูกค้า ผมว่าตรงนี้แหละที่น่าจะเป็นเรื่องปวดหัวหรือเป็นปัญหาสำหรับ coder ที่ต้องหา library หรือเขียน script ขึ้นมาให้ตรงตามงาน design นั้น หรือยกตัวอย่างง่ายๆ เลยก็ได้ บางงาน coder ต้องเข้าเน็ตเสิร์จหาข้อมูลตามเว็บไซต์ต่างๆ เพื่อให้ได้หน้าตาตามแบบที่ design เป็น นี่ไม่นับรวม coder หน้าใหม่ประสบการณ์น้อย ที่อาจจะต้องหา code พวก CSS หรือ JavaScript อีก

ยกตัวอย่างเช่นรูปภาพด้านล่าง เป็นการส่งไฟล์ design จากโปรแกรม skecth ต่อไปให้ทีมที่เป็น coder

parking duck new website

ดูเหมือนนี่ก็ไม่มีอะไรแตกต่างอย่างที่เราเคยเจอกันในปัจจุบันใช่ไหมครับ เมื่อ coder ได้งาน design มาก็นำไปตัด ไปเขียนจัด layout ให้ตรงตามแบบที่ได้มา ถ้าเป็น layout พื้นฐานง่ายๆ แบบด้านบนก็ไม่มีอะไรมาก ใช้เวลาในการเขียนไม่นานเท่าไหร่ แต่ถ้าเมื่อไหร่ก็ตามที่โดนเพิ่มงานขึ้นมาอีกนิดอย่างเช่น

ขอรถสีเหลืองวิ่งได้แต่ต้องช้ากว่าสีแดง รถสีแดงวิ่งช้ากว่าสีเขียวประมาณครึ่งวินาที พระจันทร์ขึ้นลงได้ เฟรมด้านหลังเปลี่ยนเป็นตอนกลางวัน มีพระอาทิตย์ขึ้น, textbox ตรงกลางอยากได้แบบมี autocomplete หรือพิมพ์แล้วขึ้น dropdown เลือกจังหวัดได้ ตรง example อยากให้กดที่เขตนั้นแล้วเด้งค่าขึ้นไปอยู่ที่ textbox เลยอะไรทำนองนี้

นี่แค่ layout ง่ายๆ นะครับ แต่ความต้องการที่จะให้มีโน้นมีนี่มันหนักฝั่ง coder อยู่พอสมควร.. ไหนจะต้องจัด layout ให้ตรงตามแบบเป๊ะๆ แล้ว ต้องมานั่งหา library หรือเขียน script ตามที่ลูกค้าอยากได้อีก

ถ้า designer พอรู้ code บ้าง จะช่วยให้งานไวขึ้นหรือไง?

ผมเห็นด้วยนะ. ในฐานะที่ตัวเองก็เป็นทั้งคน design และ code ผมคิดว่าถ้าต้นทางอย่าง designer พอรู้เรื่อง code บ้างอาจจะทำให้คนที่รับงานต่อไป happy มากขึ้น ใช้เวลาน้อยลง มันเหมือนคนนึงทิ้งไกด์อะไรไว้ให้คนที่รับงานต่อ ทั้งเรื่องของความรู้สึกที่อยากจะได้ในงานนั้น แล้วก็ไหนจะ layout ที่ออกมาตามแบบถูกต้อง ยกตัวอย่างดังภาพด้านล่างครับ เหมือนกันทุกอย่าง แต่มี guide เข้ามาให้นิดหน่อย

designer to coder

เสียเวลาฝั่ง design ขึ้นนิดหน่อย เขียน note ไว้ให้อีกไฟล์แล้วแปะส่งให้ coder ไปทำงานต่อ อย่างน้อยถ้าเขียน keyword ในการ search ไว้ก็จะช่วยลดเวลาในการทำงานลงได้มาก coder happy, designer happy น่าจะเป็นทางเลือกที่ดีสำหรับธุรกิจหน้าใหม่อย่าง startup หรือ SME ที่ยังมีเงินทุนในการหาคนที่จำกัด

ที่นี้ลองมองเป็นอะไรที่ลึกกว่านี้นิดนึงว่าถ้าหาก designer บางคนรู้ syntax ที่ต้องใช้ในการเขียน จะช่วยลดระยะเวลาในการทำงานมากขึ้นอีกแค่ไหน ผมขอยกตัวอย่างของ iOS ที่ต้องเขียนตาม convention ของภาษา

ios App with guideline

คิดว่าน่าจะช่วย coder หน้าใหม่ หรือคนที่ต้องข้ามไปเขียนทั้ง mobile/web อย่างผมได้ค่อนข้างเยอะพอสมควร ที่ยกตัวอย่างมานี้ก็น่าจะช่วยให้คุณผู้อ่านเห็นภาพกันมากขึ้นแล้วนะครับ ว่าถ้า designer สามารถเขียนหรืออ่าน code เบื้องต้นได้บ้าง จะช่วยให้คนในทีม happy มากขึ้นกว่านี้ แล้วงานก็จะออกมาเสร็จก่อนเวลาพอสมควรเลยครับ

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

 

Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..