เริ่มพัฒนาการออกแบบของคุณ (ตามความหมายจริง)

เหตุใดจึงถึงเวลาที่นักออกแบบต้องเรียนรู้การเขียนโค้ด ฉันเชื่อว่านักออกแบบในปัจจุบันจำเป็นต้องทำอะไรมากกว่าแค่สร้างอินเทอร์เฟซผู้ใช้ที่ดูดี บทบาทของนักออกแบบได้เปลี่ยนแปลงไป และตอนนี้เราคาดหวังว่าจะต้องเชื่อมช่องว่างระหว่างความคิดสร้างสรรค์กับเทคโนโลยี ทักษะที่ดีที่สุดอย่างหนึ่งที่เราสามารถเพิ่มลงในชุดเครื่องมือเพื่อทำสิ่งนี้ได้ก็คือ การเขียนโค้ด ตอนนี้ ดูสิ มีการถกเถียงอย่างดุเดือดเกี่ยวกับเรื่องที่ว่านักออกแบบ ฉันคิดว่าการแบ่งแยกระหว่างนักออกแบบและนักพัฒนานั้นใช้ไม่ได้ผลอีกต่อไปแล้ว มันไม่สามารถตอบสนองความต้องการ ในปัจจุบันได้ ใครก็ตาม แม้แต่ผู้พัฒนาเองก็ตาม ที่ทำงานกับอินเทอร์เฟซก็ควรมีความรู้สึกที่ดีในด้านการออกแบบ ควรเรียนรู้การเขียนโค้ดหรือไม่ ในการพัฒนาผลิตภัณฑ์ ในขณะเดียวกัน การตัดสินใจออกแบบไม่ควรจำกัดอยู่ในกฎเกณฑ์หรือคู่มือที่เข้มงวดที่กำหนดโดยผู้ที่ขาดความเข้าใจในเรื่องต่อไปนี้: ปฏิสัมพันธ์, เทคโนโลยี หรือ การเข้ารหัส ในระหว่างกระบวนการนี้ การออกแบบ (ทางด้านขวา) และการใช้งานจริง (ทางด้านซ้าย) มักจะมีลักษณะดังนี้: และคุณ (นักออกแบบ) เป็นเพียงผู้เดียวที่สามารถแก้ไขปัญหานี้ได้ ฉันขอเสนอโค้ดให้กับคุณ ซึ่งเป็นยาวิเศษที่ช่วยให้คุณสร้าง UI ออกมาได้ดังที่คุณฝันเอาไว้ ท้ายที่สุดแล้ว มีการกล่าวอย่างถูกต้องว่า การออกแบบไม่ใช่บุคคล แต่มันคือฟังก์ชั่น การเขียนโค้ดทำให้เราปรับตัวเข้ากับการออกแบบการเปลี่ยนแปลงของตลาดได้ดีขึ้น การออกแบบกำลังเปลี่ยนแปลงอย่างรวดเร็ว และทักษะต่างๆ ที่เราจำเป็นต้องตามให้ทันก็เปลี่ยนแปลงเช่นกัน ฉันไม่ได้บอกว่าเร็วๆ นี้เราจะได้เห็นตำแหน่งอย่างเป็นทางการที่เรียกว่า “นักออกแบบ-นักพัฒนาผลิตภัณฑ์” แต่แน่นอนว่านายจ้างกำลังมองหาคนที่สามารถก้าวข้ามกรอบของการออกแบบแบบเดิมๆ ได้ พวกเขาต้องการนักออกแบบที่: เข้าใจ - พฤติกรรมของมนุษย์ สามารถทำงานร่วมกันระหว่างทีมได้ และมีส่วนสนับสนุนมากกว่าแค่การสร้างภาพ นักออกแบบที่เข้าใจการเขียนโค้ดจะมีข้อได้เปรียบที่ไม่เหมือนใคร เพราะพวกเขาทำงานร่วมกับทีมได้ดีกว่า พวกเขาสามารถเปลี่ยนแนวคิดให้กลายเป็นโซลูชันที่ใช้งานได้จริงและน่าสนใจซึ่งตอบสนองความต้องการของผู้ใช้จริงได้ การออกแบบ UI แบบดั้งเดิมนั้นไม่เพียงพอ การทำความเข้าใจว่าสิ่งต่างๆ ถูกสร้างขึ้นมาอย่างไร ไม่ว่าจะเป็นเฟรมเวิร์ก ฐานโค้ด และระบบที่ขับเคลื่อนการออกแบบของเรา ช่วยให้เราสร้างประสบการณ์ที่ไม่เพียงแต่สวยงามเท่านั้น แต่ยังทำงานร่วมกับเทคโนโลยีที่ขับเคลื่อนประสบการณ์เหล่านั้นได้อย่างราบรื่นอีกด้วย เราไม่ได้แค่สร้างหน้าจอที่ "สวยสะดุดตา" อีกต่อไป เช่นในช่วงโครงการล่าสุดที่เกี่ยวข้องกับ กรอบงานโอเพ่นซอร์สสำหรับการสร้างแอปจากฐานโค้ดเดียว ทำให้ฉันตระหนักว่าความรู้ในการเขียนโค้ดมีความสำคัญเพียงใดในการตัดสินใจออกแบบอย่างรอบรู้ กระพือปีก หากไม่รู้จักเทคโนโลยี การออกแบบแอนิเมชัน การเปลี่ยนฉาก หรือองค์ประกอบการเคลื่อนไหวให้ทำงานภายในขีดจำกัดของทีมพัฒนาจะยากกว่ามาก แอนิเมชั่นสำหรับ เป็นไปได้เนื่องจากฉันได้เรียนรู้วิธีการเขียนโค้ด แอป Veggie Grower บน iOS สำหรับชาวสวนชาวเยอรมัน https://dribbble.com/shots/14455168--Slider-for-Veggie-Grower-iOS-App-for-Germany-gardeners?embedable=true ประโยชน์ของการเขียนโค้ดยังมีมากกว่าแค่ทักษะเท่านั้น การเขียนโค้ดยังสามารถเปลี่ยนแปลงวิธีการทำงานของสมองได้อีกด้วย ความท้าทายในการเขียนโค้ดแต่ละครั้งจะจุดประกายการเชื่อมต่อใหม่ๆ ในสมองของฉัน การเขียนโค้ดจะปรับตัวและพัฒนาไปในทางที่ดีขึ้น ซึ่งช่วยฉันในด้านอื่นๆ ด้วย วิทยาศาสตร์แสดงให้เห็นว่าเส้นทางประสาทใหม่จะเกิดขึ้นเมื่อเราเรียนรู้สิ่งที่ยากหรือไม่คุ้นเคย เช่น การเขียนโค้ดหรือการเล่นเครื่องดนตรี ทักษะใหม่ไม่เพียงแต่ช่วยเพิ่มความสามารถเท่านั้น แต่ยังช่วยปรับสมองของเราใหม่ด้วย เราจะปรับตัวและยืดหยุ่นมากขึ้นเมื่อเผชิญกับความท้าทาย การเขียนโค้ดช่วยให้มองเห็นมุมมองของนักพัฒนา นักออกแบบที่สามารถเขียนโค้ดได้จะช่วยให้การทำงานร่วมกันกับนักพัฒนานั้นง่ายขึ้น ส่งผลให้กระบวนการต่างๆ ราบรื่นขึ้นและผลิตภัณฑ์มีคุณภาพดีขึ้น การเขียนโค้ดช่วยให้เราสร้างสรรค์งานออกแบบที่ใช้งานได้จริงและสมจริงมากขึ้น ทำให้ชีวิตของนักพัฒนาง่ายขึ้นและลดความขัดแย้งระหว่างทีม เมื่อเราเข้าใจโค้ด เราก็จะสามารถสื่อสารแนวคิดของเราได้ดีขึ้น และเปลี่ยนวิสัยทัศน์สร้างสรรค์ให้กลายเป็นโซลูชันที่ใช้งานได้จริง ฉันจะอธิบายเพิ่มเติมเกี่ยวกับแอป Veggie Grower กับ "ลูก" ของฉัน ข้อผิดพลาดที่ใหญ่ที่สุดของฉันคือการทำให้ UI มีความซับซ้อนมากเกินไปเพราะลูกค้ายืนกรานว่าต้องมี "ปัจจัยที่น่าตื่นตาตื่นใจ" เราต้องการสร้างความประทับใจแต่พลาดเป้าไป UI จริงของแอปใน App Store ออกมาไม่ดีนัก (ดูหน้าปกของเรื่องนี้ด้านบน) สิ่งนี้สอนฉันให้รู้ว่านักออกแบบจำเป็นต้องทำหน้าที่เป็นแนวป้องกันด่านแรกสำหรับนักพัฒนา เราต้องตอบโต้เมื่อแนวคิดทางธุรกิจเริ่มหลุดลอยไปในดินแดนที่ไม่สมจริง เพื่อปกป้องผลิตภัณฑ์และ UX ไม่ให้ซับซ้อนเกินไป เราสามารถหาทางแก้ปัญหาที่ชาญฉลาดเพื่อเปิดตัวแอปได้ ฉันใช้แอนิเมชั่นของ Lottie ผสมผสานกับแอนิเมชั่นที่ฉันสร้างขึ้นเอง ทักษะการเขียนโค้ดของฉันมีประโยชน์มากในเรื่องนี้ ช่วยให้เราขัดเกลาสิ่งต่างๆ ได้ดีพอที่จะเปิดตัวได้ การเรียนรู้การเขียนโค้ดเปลี่ยนมุมมองที่มีต่อการออกแบบของฉันไปโดยสิ้นเชิง ฉันเริ่มมองเห็นสิ่งต่างๆ จากมุมมองของนักพัฒนา เข้าใจถึงความท้าทายที่พวกเขาเผชิญ เช่น การสร้างสมดุลระหว่างฟีเจอร์ที่ซับซ้อนกับข้อจำกัดด้านงบประมาณ และการหาจุดกึ่งกลางที่สมจริงระหว่างไอเดียใหญ่ๆ กับสิ่งที่สามารถทำได้จริง เข้าใจถึงปัญหาของนักพัฒนาเทียบกับรู้ว่าเมื่อใดควรยืนหยัด การเขียนโค้ดทำให้ฉันมีความเห็นอกเห็นใจต่อด้านการพัฒนาของกระบวนการ สิ่งสำคัญคือต้องตระหนักว่านักพัฒนามักเผชิญกับแรงกดดันมหาศาลในการทำให้ทุกอย่างทำงานได้ หลังจากใช้เวลาหลายวันในการแก้ไขข้อบกพร่อง สิ่งสุดท้ายที่พวกเขาต้องการคือการจัดการกับองค์ประกอบการออกแบบที่ซับซ้อนซึ่งเพิ่มความซับซ้อนที่ไม่จำเป็น นี่คือจุดที่เราในฐานะนักออกแบบต้องเข้ามาช่วยแก้ปัญหา เราต้องมุ่งมั่นเพื่อความเรียบง่ายและความชัดเจน โดยต้องรักษาสมดุลระหว่างรูปแบบและฟังก์ชันที่ตอบสนองทั้งผู้ใช้และนักพัฒนา ไม่ได้หมายความว่าจะต้องทำให้การออกแบบทั้งหมดเรียบง่ายจนดูจืดชืด แต่หมายถึงการใช้กลยุทธ์ในการแบ่งอินเทอร์เฟซออกเป็นส่วนประกอบที่จัดการได้และสร้างขึ้นได้ ซึ่งนักพัฒนาสามารถเข้าใจและนำไปใช้ได้ง่าย ตอนนี้เรามาพูดถึงสิ่งที่เรียกว่า "gatekeeping" กันบ้าง ในปัจจุบัน UX มักมองว่าสิ่งนี้เป็นลักษณะเชิงลบ Gatekeeping: กิจกรรมในการควบคุมและจำกัดการเข้าถึงทั่วไปของบางสิ่งบางอย่าง แต่ในด้านการออกแบบ การเป็น “ผู้เฝ้าประตู” ถือเป็นส่วนสำคัญของงาน เราเป็นแนวป้องกันก่อนที่บางสิ่งจะเปิดใช้งาน บทบาทของเราคือการทำให้แน่ใจว่าทุกสิ่งที่เราช่วยสร้างขึ้นนั้นช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้ได้จริง “การคัดกรอง” นี้ไม่ใช่เรื่องยาก แต่เป็นเรื่องของการให้แน่ใจว่าความต้องการของผู้ใช้มีความสำคัญสูงสุด และนี่คือจุดที่การรู้จักโค้ดเพียงเล็กน้อยสามารถสร้างความแตกต่างได้ เมื่อคุณเข้าใจด้านการพัฒนา คุณจะอยู่ในตำแหน่งที่ดีกว่าในการสื่อสารว่าเหตุใดรายละเอียดการออกแบบบางประการจึงมีความสำคัญ สมมติว่าคุณกำลังทำฟีเจอร์ที่ต้องใช้แอนิเมชั่นเฉพาะเพื่อดึงความสนใจของผู้ใช้ แต่ผู้พัฒนาต้องการข้ามแอนิเมชั่นนั้นไปเพื่อประหยัดเวลา หากคุณรู้ว่าแอนิเมชั่นนั้นทำได้อย่างไรด้วยการปรับแต่ง CSS ง่ายๆ หรือใช้ไลบรารี JavaScript ที่มีอยู่ คุณก็สามารถโต้แย้งประเด็นของคุณได้อย่างมีประสิทธิภาพ และผู้พัฒนาก็มีแนวโน้มที่จะรับฟังมากขึ้น นี่เป็นสิ่งสำคัญ: การรู้วิธีเขียนโค้ดถือเป็นสิ่งสำคัญที่จะช่วยให้โต้แย้งมุมมองของคุณในลักษณะที่สร้างสรรค์และไม่ทำให้ฝ่ายใดฝ่ายหนึ่งหงุดหงิด การเขียนโค้ดช่วยให้เราเห็นถึงความมหัศจรรย์เบื้องหลัง 'Wow Factor' https://vimeo.com/494748581?embedable=true "Avocado guy" ที่ด้านล่างแสดงการโหลดรายการเพิ่มเติม ซึ่งถือเป็นเรื่องยุ่งยากสำหรับนักพัฒนา ฉันจึงใช้ Lottie เพื่อแปลงเป็น JSON ซึ่งทำให้การบูรณาการราบรื่นและใช้เวลาเพียง 15 นาทีแทนที่จะเป็นหลายวัน เมื่อเรามุ่งเน้นไปที่การทำให้สิ่งต่างๆ ใช้งานได้จริง เราก็ไม่สามารถลืม “ปัจจัยว้าว” ได้ การไหลของแอนิเมชั่นหรือความสมดุลของสี UI ที่สมบูรณ์แบบสามารถทำให้ประสบการณ์นั้นน่าจดจำได้ การเชื่อมโยงทางอารมณ์นี้มีความสำคัญอย่างยิ่งในการทำให้ผลิตภัณฑ์ไม่เพียงแต่ใช้งานได้แต่ยังน่าเพลิดเพลินอีกด้วย เมื่อพวกเขาพบว่าอินเทอร์เฟซนั้นดึงดูดสายตา ท้ายที่สุดแล้ว การออกแบบที่สวยงามมีแนวโน้มที่จะประสบความสำเร็จมากกว่าการออกแบบที่เน้นการใช้งานเพียงอย่างเดียว ผู้ใช้มีความอดทนต่อปัญหาการใช้งานเล็กๆ น้อยๆ มากขึ้น อย่างไรก็ตาม "ปัจจัยที่ทำให้ว้าว" ไม่ได้เกิดขึ้นโดยบังเอิญ แต่เราต้องทำงานอย่างใกล้ชิดกับนักพัฒนาเพื่อให้แน่ใจว่าวิสัยทัศน์ของเราสำหรับช่วงเวลาดังกล่าวจะถูกถ่ายทอดออกมาเป็นผลิตภัณฑ์ขั้นสุดท้าย เครื่องมือเช่น หรือแอนิเมชั่น ช่วยให้เราสามารถแสดงให้นักพัฒนาเห็นได้อย่างชัดเจนว่าเราต้องการอะไร ช่วยให้การเปลี่ยนผ่านและการโต้ตอบมีชีวิตชีวามากขึ้น Lottie CSS การเขียนโค้ดช่วยให้เราเข้าใจถึงสิ่งที่เป็นไปได้ การเรียนรู้การเขียนโค้ดช่วยให้เราเข้าใจว่าอะไรคือสิ่งที่สามารถสร้างได้จริง และอะไรคือสิ่งที่อาจเกินจริง แน่นอนว่าผลงานที่น่าทึ่งของ Dribbble นั้นเป็นสิ่งที่น่าชม แต่ถ้าไม่สามารถพัฒนาการออกแบบเหล่านั้นได้ สิ่งเหล่านี้ก็เป็นเพียงงานศิลปะดิจิทัล ไม่ใช่ผลิตภัณฑ์ที่ใช้งานได้จริง เมื่อเรารู้พื้นฐานการเขียนโค้ดบางส่วนแล้ว เราก็จะเริ่มมองเห็นสิ่งที่เป็นไปได้ ซึ่งหมายความว่าเราจะสามารถสร้างสรรค์สิ่งต่างๆ ได้โดยไม่ต้องนำแนวคิดที่ไม่สามารถปฏิบัติได้เข้ามาครอบงำนักพัฒนาของเรา ตัวอย่างเช่น การออกแบบไมโครอินเทอร์แอคชั่นสำหรับหน้าจอเข้าสู่ระบบ ลองนึกภาพว่าคุณต้องการแอนิเมชั่นที่นุ่มนวลและน่าพอใจ ซึ่งควรให้ข้อเสนอแนะแก่ผู้ใช้ขณะที่พิมพ์รหัสผ่าน ตัวอย่างเช่น ฟิลด์ควรเรืองแสงสีเขียวเมื่อตรงตามรูปแบบที่ถูกต้อง หากไม่เข้าใจ CSS หรือ JavaScript เลยสักนิด คุณอาจเสนออะไรบางอย่างที่ซับซ้อนเกินไป ซึ่งทีมพัฒนาต้องใช้เวลาหลายชั่วโมงในการสร้าง หากมีความรู้ในการเขียนโค้ดบ้าง คุณจะรู้ว่าเอฟเฟกต์ใดที่สมจริง ซึ่งจะช่วยให้คุณเสนอไอเดียที่ทั้งเจ๋งและทำได้จริง นักออกแบบควรจะ “เป็นเหมือนน้ำ” — ปรับตัวได้และคล่องตัว (ขอบคุณสำหรับคำพูดนี้ ) เราสามารถขยายขอบเขตความคิดสร้างสรรค์ได้ แต่เราจะตอบสนองต่อข้อจำกัดที่อยู่ตรงหน้าเรา บรูซ การออกแบบที่ดีที่สุดสร้างแรงบันดาลใจ โดยไม่ผลักดันเกินกว่าสิ่งที่สามารถสร้างได้ในทางปฏิบัติ ทั้งผู้ใช้และนักพัฒนา ร่วมมือกันเพื่อการออกแบบที่สร้างผลกระทบ การออกแบบไม่ได้เกี่ยวกับความสวยงาม แต่เป็นกระบวนการแก้ปัญหาที่มุ่งหวังที่จะปรับปรุงประสบการณ์ของผู้คนที่มีต่อผลิตภัณฑ์และบริการที่คุณเสนอ และท้ายที่สุดก็คือกับแบรนด์ของคุณ ปัจจุบัน เราไม่ได้เป็นแค่เพียงนักออกแบบเท่านั้น เราเป็นผู้แก้ปัญหา ผู้นำด้านประสบการณ์ของผู้ใช้ และที่สำคัญที่สุดคือผู้ทำงานร่วมกัน ด้วยการผสมผสานความคิดสร้างสรรค์ของเรากับข้อมูลเชิงลึกทางเทคนิค เรากำลังปูทางไปสู่ผลิตภัณฑ์แห่งอนาคต ซึ่งไม่เพียงแต่เป็นผลิตภัณฑ์ที่สวยเท่านั้น แต่ยังมีความหมายและมีประสิทธิภาพอย่างแท้จริงสำหรับผู้ใช้ด้วย งานของเราในฐานะนักออกแบบไม่ใช่แค่เพียงการสร้างต้นแบบที่สวยงาม แต่ยังรวมถึงการทำงานร่วมกับนักพัฒนาอย่างใกล้ชิดเพื่อทำให้วิสัยทัศน์นั้นเป็นจริง ซึ่งหมายถึงการมีส่วนร่วมตลอดกระบวนการพัฒนา การอยู่เคียงข้างเพื่อทำงานฝ่าฟันความท้าทายทางเทคนิค การปรับเปลี่ยนการออกแบบเมื่อจำเป็น และการเปิดช่องทางการสื่อสาร ความร่วมมืออย่างต่อเนื่องนี้เองที่ทำให้การออกแบบที่ดีกลายเป็นผลิตภัณฑ์ที่โดดเด่น เมื่อการออกแบบพัฒนาอย่างต่อเนื่อง การเขียนโค้ดก็จะยิ่งมีความสำคัญมากขึ้นเรื่อยๆ เช่นกัน เมื่อการออกแบบและเทคโนโลยีมาบรรจบกัน นวัตกรรมต่างๆ ก็มีศักยภาพอย่างเหลือเชื่อ แต่ต้องอาศัยการเปลี่ยนแปลงทัศนคติ การนำการเขียนโค้ดมาใช้เป็นทักษะหลักจะทำให้ผู้ออกแบบสามารถสร้างผลิตภัณฑ์ที่ไม่เพียงแต่สวยงาม แต่ยังใช้งานได้จริง เป็นมิตรกับนักพัฒนา และสร้างผลกระทบได้ดีอีกด้วย ฉันรู้ว่าคุณคิดยังไง คุณต้องการการ์ดผักสีสันสดใสเหล่านี้ ฉันเตรียมแบบเปิดไว้แล้ว ไฟล์ทรัพยากรสำหรับคุณ: ป.ล. ฟิกม่า https://www.figma.com/community/file/1090901197925018121/fruits-and-vegetables-cards?embedable=true