หากคุณเคยขอให้นักพัฒนา “ขยายโลโก้ให้ใหญ่ขึ้น” หรือบอกดีไซน์เนอร์ว่า “ช่วยแก้ข้อผิดพลาดของฐานข้อมูลหน่อย” คุณก็ไม่ใช่

หากคุณเคยขอให้นักพัฒนา "ขยายโลโก้ให้ใหญ่ขึ้น" หรือบอกให้นักออกแบบ "แก้ข้อผิดพลาดของฐานข้อมูล" คุณไม่ใช่คนเดียวที่เคยทำแบบนั้น คนส่วนใหญ่ที่อยู่นอกแวดวงเทคโนโลยีมักใช้คำว่า "การออกแบบเว็บไซต์" (website design) และ "การพัฒนาเว็บไซต์" (website development) สลับกันไปมาราวกับว่าเป็นเรื่องเดียวกัน แต่ความจริงแล้วไม่ใช่ อาชีพหนึ่งตัดสินใจว่ารถจะมีรูปลักษณ์อย่างไรและปุ่มควบคุมควรอยู่ตรงไหน ส่วนอีกอาชีพหนึ่งคือผู้สร้างเครื่องยนต์ ระบบส่งกำลัง และระบบสายไฟ หากคุณกำลังวางแผนจะสร้างเว็บไซต์ จ้างทีมงาน หรือเปลี่ยนสายอาชีพ การเข้าใจความแตกต่างนี้จะช่วยประหยัดทั้งเงิน เวลา และลดความหงุดหงิดของคุณได้

ขอบเขตที่แท้จริงของการออกแบบเว็บไซต์

งานของนักออกแบบเว็บไซต์คือการแก้ปัญหาต่าง ๆ ก่อนที่จะมีการเขียนโค้ดแม้แต่บรรทัดเดียว พวกเขาใส่ใจว่าเว็บไซต์จะมีหน้าตาอย่างไร แต่ยังรวมไปถึงพฤติกรรมของเว็บไซต์ในมุมมองของมนุษย์ด้วย ผลลัพธ์ที่พวกเขาส่งมอบจะเป็นแนวทางให้กับทุกสิ่งที่ตามมาหลังจากนั้น

งานมักจะเริ่มต้นที่โครงสร้าง นักออกแบบจะสร้างเลย์เอาต์และ wireframes ซึ่งเป็นแผนผังขาวดำอย่างง่ายที่ระบุว่าเมนูนำทางอยู่ตรงไหน เนื้อหาจะไหลไปอย่างไร และจะเกิดอะไรขึ้นเมื่อผู้ใช้คลิกปุ่ม call-to-action ตัวอย่างเช่น wireframe สำหรับหน้าจองนัดหมายออนไลน์อาจแสดงให้เห็นว่าผู้ใช้จำเป็นต้องเห็นช่วงเวลาที่ว่างก่อนที่จะกรอกรายละเอียดส่วนตัว หากคุณวางลำดับขั้นตอนผิดพลาด ผู้คนก็จะละทิ้งการกรอกฟอร์มนั้นไป

เมื่อโครงร่างได้รับการอนุมัติแล้ว นักออกแบบจะเริ่มใส่ภาษาทางภาพ (visual language) ลงไป พวกเขาเลือกพาเลตสีที่ตรงตามมาตรฐานของแบรนด์และผ่านการตรวจสอบความต่างสีเพื่อการเข้าถึง (accessibility contrast checks) พวกเขาเลือกแบบอักษรที่อ่านง่ายบนหน้าจอมือถือท่ามกลางแสงแดดจ้า พวกเขาออกแบบปุ่ม ไอคอน และช่องกรอกข้อมูลที่มีสถานะการตอบสนอง (hover states) และลูปการตอบกลับ (feedback loops) ที่สอดคล้องกัน ทั้งหมดนี้ถือเป็นงานด้าน user interface (UI)

นอกจากนี้ยังมีศาสตร์ที่กว้างกว่าอย่าง user experience (UX) นักออกแบบ UX จะคิดถึงเรื่องอุปสรรคในการใช้งาน (friction) ทำไมกลุ่มทดสอบครึ่งหนึ่งถึงหาเครื่องคำนวณค่าขนส่งไม่เจอ? ทำไมผู้ใช้มือถือถึงต้องใช้สองนิ้วถ่างเพื่อซูมดูรูปสินค้า? นักออกแบบอาจจะจัดเรียงเมนูนำทางใหม่ แยกขั้นตอนการชำระเงินที่ยาวเหยียดออกเป็นขั้นตอนที่ชัดเจน หรือเพิ่ม micro-copy เพื่ออธิบายว่าทำไมรหัสผ่านถึงถูกปฏิเสธ เป้าหมายไม่ใช่การตกแต่ง แต่คือความชัดเจน

เครื่องมือของนักออกแบบสมัยใหม่ประกอบด้วย Figma สำหรับการทำต้นแบบร่วมกัน (collaborative prototyping), Adobe XD, Sketch (ซึ่งยังคงเป็นที่นิยมในเอเจนซีที่เน้นใช้ Mac) และ Photoshop สำหรับงานจัดการสินทรัพย์ที่เป็นรูปภาพจำนวนมาก ปัจจุบันนักออกแบบมักจะส่งมอบต้นแบบที่โต้ตอบได้ (interactive prototypes) ซึ่งช่วยให้ผู้มีส่วนเกี่ยวข้องสามารถคลิกผ่านหน้าต่าง ๆ ได้ก่อนที่นักพัฒนาจะเข้ามาเกี่ยวข้อง การจำลองตั้งแต่เนิ่น ๆ เช่นนี้จะช่วยตรวจพบความเข้าใจผิดที่ภาพสกรีนช็อตนิ่ง ๆ ไม่สามารถแสดงให้เห็นได้

บทบาทที่แท้จริงของการพัฒนาเว็บไซต์

หากการออกแบบคือพิมพ์เขียว การพัฒนาก็คือทีมก่อสร้าง งานระบบไฟฟ้า และการตรวจสอบอาคารที่รวมอยู่ในหนึ่งเดียว นักพัฒนาจะนำงานออกแบบที่ได้รับอนุมัติแล้วมาเปลี่ยนเป็นไฟล์ที่เบราว์เซอร์สามารถแสดงผลได้และเซิร์ฟเวอร์สามารถประมวลผลได้

นักพัฒนา front-end จะดูแลส่วนที่มองเห็นได้ พวกเขาเขียน HTML เพื่อวางโครงสร้างเนื้อหา, CSS เพื่อควบคุมเลย์เอาต์และรูปแบบตัวอักษร และ JavaScript เพื่อจัดการการโต้ตอบ เมื่อนักพัฒนาใช้ React ซึ่งเป็นหนึ่งใน JavaScript libraries ที่นิยมที่สุด พวกเขามักจะสร้างคอมโพเนนต์ที่ซับซ้อน เช่น ตัวกรองการค้นหาแบบเรียลไทม์ หรือตะกร้าสินค้าแบบไดนามิกที่อัปเดตข้อมูลได้โดยไม่ต้องโหลดหน้าเว็บใหม่ งานของพวกเขาคือการทำให้แน่ใจว่าปุ่มที่นักออกแบบวาดไว้นั้นสามารถส่งข้อมูลได้จริง แสดงสถานะการโหลด และแสดงข้อความยืนยันได้อย่างถูกต้อง

เบื้องหลังเลเยอร์ที่มองเห็นได้นั้นคือ back end นักพัฒนา back-end จะเขียนตรรกะฝั่งเซิร์ฟเวอร์ (server-side logic) โดยใช้ภาษาอย่าง Node.js, Python หรือ PHP พวกเขาทำหน้าที่ตรวจสอบสิทธิ์การเข้าสู่ระบบ ประมวลผลการชำระเงิน และจัดการกฎทางธุรกิจที่ตัดสินว่าผู้ใช้จะเห็นสถานะ "มีสินค้า" หรือ "สินค้าหมด" เมื่อพวกเขาสร้าง APIs พวกเขากำลังสร้าง "ผู้ส่งสาร" ที่ทำหน้าที่นำพาข้อมูล