การออกแบบเพื่อนักพัฒนา

นักพัฒนามักมองข้ามการออกแบบ ส่วนนักออกแบบก็มักมองข้ามโค้ด ช่องว่างนี้เองที่ทำลายคุณภาพของผลิตภัณฑ์

ผมอยู่ตรงกลางระหว่างสองโลกนี้ ผมรัก CSS ที่สะอาดตาและ Typography ที่สวยงาม มุมมองแบบสองด้านนี้ช่วยให้ผมสร้างผลิตภัณฑ์ที่ดีขึ้นได้

ปัญหาของการแบ่งแยก:

ผมใช้ Design Systems เพื่อแก้ปัญหานี้ โดยผมมองว่า Design Systems คือข้อตกลง (contracts)

ผมไม่ใช้คำว่า "สีน้ำเงิน" หรือ "16 พิกเซล" แต่ผมใช้ Tokens

เมื่อนักออกแบบเปลี่ยน Token ใน Figma นักพัฒนาก็แค่แก้ไขตัวแปรเพียงตัวเดียวใน CSS ผลิตภัณฑ์ทั้งหมดก็จะยังคงความสม่ำเสมอ วิธีนี้ช่วยลดการทำงานด้วยมือและลดข้อผิดพลาด

ผมออกแบบภายใต้ข้อจำกัด และผมไม่แสร้งทำเป็นว่ามันไม่มีอยู่จริง ผมพูดคุยกับวิศวกรเกี่ยวกับเรื่องการแลกเปลี่ยน (trade-offs) ผมเสนอวิธีการรักษาประสบการณ์ผู้ใช้ (UX) ที่ดี โดยไม่ทำให้การเขียนโค้ดนั้นยากจนเกินไป การออกแบบจึงกลายเป็นการทำงานร่วมกัน แทนที่จะเป็นการส่งต่องาน (handoff) เพียงอย่างเดียว

อัตลักษณ์ของแบรนด์ (Brand identity) เป็นมากกว่าแค่เรื่องของภาพลักษณ์ แต่มันเริ่มต้นที่บุคลิกภาพ

คำเหล่านี้จะเป็นตัวนำทางในทุกการตัดสินใจ ทั้งการเลือกฟอนต์ รูปภาพ และน้ำเสียง (voice) ส่วนภาพลักษณ์ที่เห็นก็เป็นเพียงการถ่ายทอดบุคลิกภาพนั้นออกมาเป็นพิกเซล

ไม่ว่าคุณจะสร้าง Dashboard หรือสร้างแบรนด์ กระบวนการทำงานของคุณคือสิ่งสำคัญ ภาพสกรีนช็อตเป็นเพียงแค่เปลือกนอก ผู้คนจำเป็นต้องเห็นบริบทและตรรกะที่อยู่เบื้องหลังงานของคุณ

การออกแบบไม่มีวันสิ้นสุด ผมปล่อยผลิตภัณฑ์ออกไป สังเกตการณ์ และปรับปรุงให้ดีขึ้น

งานออกแบบที่ดีที่ปล่อยออกไปได้ในวันนี้ ดีกว่างานออกแบบที่สมบูรณ์แบบแต่ไม่เคยถูกปล่อยออกมาเลย จงใช้ฟีดแบ็กจริงเพื่อพัฒนาไปทีละก้าวเล็กๆ

แหล่งที่มา: https://dev.to/visionapi/designing-for-developers-how-i-bridge-code-and-creativity-2kgf