Design VS Code – ทำไมพวกเขาจึงควรจับมือกัน?

นักออกแบบควรเน้นที่ศิลปะของการสร้างแบรนด์ที่มองเห็นได้ของเว็บไซต์เท่านั้นหรือไม่? นักพัฒนาควรรู้วิธีเขียนโค้ดเท่านั้นหรือไม่ การพัฒนา Front-end ใน Drupal มีความสำคัญอย่างไร? มาหาคำตอบสำหรับทุกคำถามของคุณในบทความนี้

เมื่อเราเจาะลึกลงไปในการออกแบบนี้กับปริศนาเกี่ยวกับโค้ด อันที่จริงแล้วทั้งสองสิ่งนี้เป็นส่วนเสริมซึ่งกันและกัน แต่คำถามคือว่าทำไม? เหตุใดนักออกแบบ UI/UX จึงต้องเรียนรู้โค้ดและพื้นฐานของมัน และเช่นเดียวกันสำหรับนักพัฒนารวมถึงในแง่ของการออกแบบ

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

แต่ก่อนอื่น มาเริ่มกันที่พื้นฐานพร้อมตัวอย่างกันก่อน

Designing Vs Coding : ความเหมือนที่แตกต่าง

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

นักออกแบบควรเรียนรู้การเขียนโปรแกรมและนักพัฒนาเรียนรู้เกี่ยวกับ UI/UX หรือไม่

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

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

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

นี่คือเหตุผลที่แต่ละคนควรเรียนรู้พื้นฐานของทักษะอย่างใดอย่างหนึ่ง (รหัสหรือการออกแบบ) นอกเหนือจากความเชี่ยวชาญหลักของพวกเขา

1. ควบคุมรูปลักษณ์และความรู้สึกของผลิตภัณฑ์ได้มากขึ้น: โดยพื้นฐานแล้วหมายความว่าเมื่อนักพัฒนารู้ว่าการวิเคราะห์การออกแบบทำงานอย่างไรและกระบวนการออกแบบใดที่เกี่ยวข้อง เขา/เขาสามารถปรับแนวคิดการออกแบบเหล่านั้นและควบคุมผลิตภัณฑ์สุดท้ายได้มากขึ้น และทำให้ส่งสินค้าได้รวดเร็วขึ้น
2. เข้าใจผู้ใช้และนำไปใช้ในการออกแบบ: เมื่อนักพัฒนาเข้าใจผลิตภัณฑ์จากมุมมองของผู้ใช้ จะทำให้มีพลังมหาศาลในการสร้างสิ่งที่ผู้ใช้ต้องการอย่างแท้จริงและความปรารถนา ตัวอย่างเช่น เธอจะเข้าใจว่าผู้ใช้จะมีปฏิกิริยาอย่างไรต่อการพิมพ์ตัวอักษร รูปแบบปุ่มต่างๆ โทนสี ฯลฯ
3. การปรับการออกแบบ: เป็นสิ่งสำคัญเท่าเทียมกันสำหรับนักออกแบบที่รู้รหัส เมื่อเธอ/เธอรู้ว่าผลิตภัณฑ์ที่ออกแบบจะมีโครงสร้างอย่างไรในขณะที่กำลังพัฒนา เธอ/เธอสามารถปรับปรุงการออกแบบได้อย่างดีเยี่ยมและทำให้มีประสิทธิภาพมากขึ้น ซึ่งจะช่วยลดเวลาและความพยายามของนักพัฒนา

อธิบายผลที่ตามมาของการมีความเชี่ยวชาญหลักเท่านั้นด้วยตัวอย่าง

เพื่อความเข้าใจที่ดีขึ้นว่าทำไมการออกแบบและการเข้ารหัสจึงควรทำงานร่วมกัน มาดูตัวอย่างกัน

ข้างต้นเป็นตัวอย่างคลาสสิกของการใช้โครงสร้างที่ไม่ต่อเนื่องกัน โครงสร้างนี้ได้รับการจัดลำดับใหม่ในขณะที่กำลังพัฒนาสำหรับมือถือ นี่ไม่ใช่แค่การปฏิบัติที่ไม่ดีเท่านั้น ยังใช้เวลานานและยุ่งยากอีกด้วย อย่างไรก็ตาม หากนักออกแบบทราบโครงสร้างของโค้ดที่กำลังพัฒนา ก็สามารถหลีกเลี่ยงได้ง่ายและอาจหลีกเลี่ยงได้

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

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

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

จะเริ่มต้นที่ไหน

การเริ่มต้นเป็นความคิดที่ดีเสมอ สำหรับนักออกแบบ พื้นฐานที่ต้องเรียนรู้คือ HTML, CSS และ JS/jQuery เล็กน้อย มีแพลตฟอร์มและเว็บไซต์การเรียนรู้ออนไลน์มากมายพร้อมเครื่องมือ IDE แบบสดเพื่อให้คุณฝึกฝนและเรียนรู้

HTML : โครงสร้างพื้นฐานของการออกแบบต้องมาก่อน และเป็นโค้ดของผลิตภัณฑ์ใดๆ
JS/jQuery: ตัว เลื่อน ป๊อปอัป ดรอปดาวน์ และอื่นๆ อีกมากมายสามารถทำได้ด้วยสิ่งเหล่านี้
แซนด์บ็อกซ์ : เครื่องมือสดเพื่อเล่นกับโค้ดของคุณ
CSS/SCSS : การจัดรูปแบบโครงสร้างเป็นกระบวนการสร้างสรรค์ และคุณทำได้โดย CSS/SCSS
W3Schools: แพลตฟอร์มการเรียนรู้ออนไลน์ที่เรียบง่ายและเป็นแพลตฟอร์มที่ดีในการเริ่มต้น
Codrops (Tympanus): ห้องสมุดขนาดใหญ่ที่มีความคิดในการออกแบบและนักพัฒนาบนแพลตฟอร์มเดียวกัน

สำหรับนักพัฒนา คุณสามารถเริ่มต้นได้โดยทำตามแนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับ UI/UX ด้วย -
Behance: การออกแบบที่สมบูรณ์แบบสำหรับผลงานและแรงบันดาลใจระดับมืออาชีพ
Dribble: ออกแบบแนวคิดเพื่อโพสต์และรับแรงบันดาลใจจาก
Muzli: บล็อก แรงบันดาลใจ ไอเดีย
สื่อ : บล็อกเกี่ยวกับทุกสาขา (เกือบ) แนวทางปฏิบัติที่ดีที่สุด และบทช่วยสอน
Awwwards: เว็บไซต์ที่ได้รับการเสนอชื่อเข้าชิงสำหรับการออกแบบที่ดีที่สุดและผู้ชนะที่จะได้รับแรงบันดาลใจด้วย
XD/Figma/Sketch: เครื่องมือในการออกแบบหุ่นจำลอง, โครงลวดสำหรับ UI/UX

สำหรับนักออกแบบ

สำหรับนักพัฒนา

การพัฒนาส่วนหน้าใน Drupal

Drupal 8 ในฐานะ CMS เป็นเฟรมเวิร์กการจัดการเนื้อหาที่เป็นมิตรกับนักออกแบบ UI/UX มาก เนื่องจากมีข้อเสนอมากมายตั้งแต่แกะกล่อง ที่สำคัญที่สุดคือความหลากหลายของธีมที่พร้อมใช้งานและการออกแบบที่ตอบสนอง แน่นอนว่ายังมีคุณสมบัติอีกมากมายที่ฉันคิดได้ในตอนนี้ แต่ขอเก็บไว้เป็นวันอื่น

ในขณะที่นักออกแบบ UX ใช้ทักษะเชิงสร้างสรรค์ของพวกเขาและมุ่งเน้นไปที่การนำเสนอด้วยภาพของเว็บไซต์ Drupal นักพัฒนา Front-end Drupal จะเชื่อมช่องว่างระหว่างนักออกแบบ UX และผู้พัฒนา Drupal แบ็คเอนด์ พวกเขาคือผู้ที่ใช้องค์ประกอบภาพที่ส่งโดยนักออกแบบในเว็บไซต์ Drupal แม้ว่าทั้งนักออกแบบ UX และนักพัฒนา Front-end Drupal คิดในแง่ของประสบการณ์ผู้ใช้และการแก้ปัญหาที่เกี่ยวข้องกับ UX พวกเขาใช้แนวทางที่แตกต่างกันในการแก้ไขปัญหา อย่างไรก็ตาม อย่างหลังจะพบวิธีแก้ปัญหาผ่านโค้ดเสมอ
นักพัฒนา Drupal Front-end มีหน้าที่รับผิดชอบในการนำเสนอเว็บไซต์ Drupal ที่สวยงามโดยการทำงานและปรับแต่งธีมของ Drupal พวกเขาควรจะสามารถแก้ไขปัญหาส่วนหน้าที่พวกเขาจะต้องมีความรู้เกี่ยวกับ PHP, CSS, jQuery, CSS, HTML และที่สำคัญที่สุด - การออกแบบเว็บไซต์สำหรับมือถือเป็นอันดับแรก

ด้วยความนิยมที่เพิ่มขึ้นของเว็บไซต์ Drupal ที่ไม่มีส่วนหัวและสถาปัตยกรรมแบบแยกส่วน นักพัฒนา Front-end Drupal ที่มีความเข้าใจในกรอบงานการพัฒนาส่วนหน้าเช่น Angular, ReactJS, Vue.js มักจะมีความได้เปรียบในการแข่งขัน
โดยรวมแล้ว เพื่อให้สามารถพัฒนา Front-end Drupal ได้อย่างยอดเยี่ยม เราต้องก้าวออกจาก Comfort Zone และเรียนรู้ว่าพวกเขาจะสามารถสร้างและใช้งานประสบการณ์ดิจิทัลสมัยใหม่ได้ดีที่สุดอย่างไรพร้อมกับเทคโนโลยีล่าสุด