See the original English version of this article here
สำหรับ Developer คุณเคยดู Mockup ที่ออกแบบมาอย่างสมบูรณ์แบบแล้วคิดว่า “นี่จะเป็นฝันร้ายที่ต้องเขียน Code” หรือไม่? หรือบางทีคุณอาจได้รับ Design Notes ที่กวนใจจนทำให้คุณเกาหัว? ใช่แล้ว การต่อสู้ระหว่าง Developers และ Designers นั้นเป็นเรื่องจริง แต่อย่ากังวล เพราะคู่มือนี้จะนำคุณไปสู่โลกแห่งการทำงานร่วมกันที่ราบรื่นและเว็บไซต์ที่ยอดเยี่ยม! กับ คู่มือการทำงานร่วมกับ Designer สำหรับ Web Developer
ทำไมเราต้องทำงานร่วมกัน
แน่นอนว่า การออกแบบที่ยอดเยี่ยมและเป็นเว็บไซต์ที่มีประสิทธิภาพเป็นสิ่งสำคัญ ซึ่งถ้าเว็บไซต์นั้นออกแบบอย่างสวยงามแต่ใช้งานยากก็จะสร้างความหงุดหงิด ในขณะที่เว็บไซต์ที่มี Code ที่ปราศจากข้อผิดพลาดหรือช่องโหว่ แต่มีการออกแบบที่ล้าสมัยนั้นก็ไม่น่าสนใจ ดังนั้น Designer และ Developer จึงต้องทำงานร่วมกันได้อย่างราบรื่น เพื่อสร้างเว็บไซต์ที่โดดเด่นและมีประสิทธิภาพ
Designer Speak สำหรับ Developers
Designer ชอบที่จะเรียกคำต่าง ๆ เช่น “Visual Hierarchy” และ “User Experience” แต่มีความหมายอย่างไรสำหรับ Developers? เรามาดูกัน
1. Visual Hierarchy
Visual Hierarchy (ลำดับขั้นการมองเห็น) การพิจารณาว่าส่วนใดเป็นส่วนสำคัญของเว็บไซต์คุณ
Heading คือ ส่วนหัวที่ดึงดูดความสนใจด้วยแบบอักษรที่ใหญ่ขึ้นและการออกแบบที่แข็งแกร่ง
Body Text คือ ส่วนที่เจ๋ง ซึ่งยังมีความสำคัญ แต่น่าทึ่งน้อยกว่า
ใช้ Semantic HTML (การเขียน HTML ให้สื่อความหมายได้) เช่น สำหรับ Headings และสำหรับ Paragraphs เพื่อปรับปรุงความสวยงามของเว็บไซต์ของคุณ และการเข้าถึงสำหรับ Screen Readers (โปรแกรมอ่านออกเสียงบนหน้าจอ)
2. User Experience (UX)
ประสบการณ์ของ User ซึ่งเป็นเรื่องที่เกี่ยวกับความรู้สึกของ User เมื่อได้มีส่วนร่วมกับเว็บไซต์ การทำให้เว็บไซต์ใช้งานง่ายและราบรื่นนั้น Developer มีบทบาทสำคัญอย่างมากสำหรับ UX โดยการเปลี่ยนแนวคิดการออกแบบให้เป็นเว็บไซต์ ที่มีการจัดระเบียบอย่างดีและตอบสนองได้ดี ทำให้มั่นใจได้ว่า User จะได้รับประสบการณ์ที่ยอดเยี่ยม
3. Design Tools 101
Designers ใช้เครื่องมือต่าง ๆ เช่น Figma และ Sketch เพื่อสร้างการออกแบบของตนเอง อย่างไรก็ตาม Developer ไม่จำเป็นต้องมีพื้นฐานในการออกแบบเพื่อทำความเข้าใจ และนี่คือสิ่งที่ Developer ควรรู้:
-
- Layer Comps
เหมือนกับว่า Designer หั่น Prototype (ตัวอย่างงานออกแบบ) ออกเป็นชิ้น คล้ายกับพิซซ่า ซึ่งแต่ละชิ้นแสดงถึง Layer Compositions หรือส่วนที่แตกต่างกันของเว็บไซต์ เช่น Login Form เทียบกับ Logged-in View สิ่งเหล่านี้มีความสำคัญ เนื่องจากช่วยให้ Developer เข้าใจว่าการออกแบบควรมีลักษณะและการทำงานอย่างไรในสถานการณ์ต่าง ๆ
-
- Inspecting Elements
เคยคลิกขวาบนเว็บไซต์และเลือก “Inspect” หรือไม่? นี่เพื่อน! มันมี Code ซ่อนอยู่ที่จะทำให้คุณเข้าใจถึงวิธีที่ Designer ทำงานได้อย่างดีทีเดียว ด้วยการตรวจสอบ Code นี้ Developer สามารถเข้าใจวิธีการของ Designer และค้นหาวิธีเพื่อเพิ่มประสิทธิภาพของ Code เพื่อการพัฒนาได้ นอกจากนี้ การทำความคุ้นเคยกับผลลัพธ์การออกแบบ เช่น Wireframes, Mockups และ Prototypes สามารถทำให้งานของ Developer ง่ายขึ้น
วิธีการทำงานร่วมกันเหมือนกับ Boss
เพื่อการทำงานร่วมกันอย่างมีประสิทธิภาพ Developer ควรมีส่วนร่วมในการประชุมเกี่ยวกับการออกแบบตั้งแต่ต้น การถามคำถามเป็นสัญญาณของความมุ่งมั่น (ไม่ใช่ความอ่อนแอ) การทำความเข้าใจเหตุผลเบื้องหลังการตัดสินใจในการออกแบบ ช่วยให้กระบวนการเขียน Code ราบรื่นและมีประสิทธิภาพมากขึ้น
นี่คือการเริ่มต้นการสนทนาบางส่วน ที่คุณสามารถนำไปใช้ในการอภิปรายการออกแบบ:
– User พยายามทำอะไรที่นี่? ช่วยให้เข้าใจเป้าหมายของ User และปรับปรุงกระบวนการพัฒนา เพื่อปรับปรุงและมอบประสบการณ์ที่ดีให้กับ User
– มีข้อจำกัดทางเทคนิคที่ต้องคิดหรือไม่? ช่วยให้ Developer สามารถแก้ไขปัญหาที่อาจเกิดขึ้น เช่น ความเข้ากันได้ของ Browsers กับ Hover Animations
การมีส่วนร่วมในการสนทนาเหล่านี้ตั้งแต่เนิ่น ๆ ช่วยให้ Developer และ Designer ร่วมมือกันสร้างโซลูชันที่มีประสิทธิภาพและดึงดูดสายตาได้
เครื่องมือและเทคนิค สำหรับการทำงานเป็นทีมที่ราบรื่น
การทำงานเป็นทีมที่มีประสิทธิภาพจำเป็นต้องมี “การสื่อสารที่ดี” แต่ก็มีเครื่องมือที่ช่วยอำนวยความสะดวกในกระบวนการนี้ได้ ออกแบบเครื่องมือ Handoff เช่น Zeplin และ Avocode แปลง Mockups ของ Designer ให้เป็นรูปแบบที่ Developer สามารถใช้งานได้ง่าย เครื่องมือเหล่านี้สร้างภาษากลางที่ช่วยให้ทุกคนเข้าใจการออกแบบ นอกจากนี้ การใช้เทคนิคการออกแบบที่เป็น Code-friendly เช่น การใช้ Semantic Components และรูปแบบการตั้งชื่อที่ชัดเจน จะทำให้กระบวนการพัฒนาง่ายขึ้น ด้วยวิธีนี้ Developer จึงไม่จำเป็นต้องถอดรหัสชื่อ Complex Class ทำให้งานของพวกเขามีประสิทธิภาพมากขึ้น
ทำความเข้าใจ Workflow ของ Designer
อีกหนึ่งในงานของ Designer คือการทำ User Testing โดยที่ User จริงได้มีส่วนร่วมกับเว็บไซต์ เพื่อให้พวกเขาแสดงความคิดเห็น ความคิดเห็นนี้มีความสำคัญอย่างยิ่งต่อการสร้างเว็บไซต์ที่ตรงกับความต้องการของ User เมื่อเข้าใจขั้นตอนการทำงานของ Designer จะช่วยทำให้ Developer สามารถเอาใจใส่และปรับปรุงการทำงานร่วมกันได้ สามารถรับรู้ว่า Designer มุ่งหวังที่จะสร้างเว็บไซต์ที่น่าดึงดูดและใช้งานได้จริง การสื่อสารแบบเปิด การหารือเกี่ยวกับความท้าทาย การฉลองความสำเร็จ และการใช้อารมณ์ขันสามารถส่งเสริมสภาพแวดล้อมของทีมในเชิงบวกและมีประสิทธิผลได้
สุดท้ายนี้ Developer ควรยอมรับการทำงานเป็นทีมกับ Designer ด้วยการทำความเข้าใจแนวคิดการออกแบบ การทำความคุ้นเคยกับเครื่องมือการออกแบบ และศึกษาความรู้เพิ่มเติมอย่างต่อเนื่อง แล้ว Developer ก็จะสามารถกลายเป็นสมาชิกที่ดีของทีม Designer ได้ ความร่วมมือนี้จะนำไปสู่ Project ที่ประสบความสำเร็จ ซึ่ง Developer และ Designer สามารถเฉลิมฉลองความสำเร็จร่วมกัน เพลิดเพลินกับกระบวนการและผลลัพธ์ได้
และทั้งหมดนี้ก็คือ คู่มือการทำงานร่วมกับ Designer สำหรับ Web Developer
เมื่อ หางาน IT ให้ ISM Technology Recruitment เป็นอีกหนึ่งตัวช่วย เพื่อให้คุณได้ “ชีวิตการทำงานในแบบที่คุณต้องการ” เพียงส่ง Resume มาที่นี่
ISM เชี่ยวชาญในธุรกิจ IT Recruitment & IT Outsourcing โดยเฉพาะ ได้เปิดทำการมาแล้วกว่า 30 ปี มีพนักงานทุกสายและทุกระดับทางด้าน IT ที่ได้ร่วมงานกับลูกค้าองค์กรใหญ่ที่มีชื่อเสียงและบริษัทข้ามชาติมากมาย