ทำไมต้องออกแบบ?
คุณใช้ม็อคอัพคุณภาพสูงโดยเฉพาะ (ไม่ใช่โครงร่าง) อย่างไรในกระบวนการออกแบบของคุณและทำไมคุณถึงแนะนำให้ใช้
ฉันเป็นนักพัฒนาในอดีตเจ้าของผลิตภัณฑ์ของฉันบางครั้งจะให้ข้อกำหนดในรูปแบบของการจำลอง แต่ถึงอย่างนั้นโดยทั่วไปก็ทำให้ฉันเข้าใจว่าสามารถสื่อสารได้โดยไม่ต้องทำงานพิเศษทั้งหมด (0 ความสามารถทางศิลปะพร้อมปากกาและ ร่างกระดาษคงจะเพียงพอแล้ว)
เมื่อสัปดาห์ที่แล้วฉันดูวิดีโอ YouTube เพื่อหาแรงบันดาลใจในการออกแบบสำหรับโปรเจ็กต์ด้านข้าง / งานอดิเรกที่ฉันกำลังทำอยู่และพบว่าตัวเองกำลังเลียนแบบสิ่งที่พวกเขากำลังทำอยู่ แต่ก็หยุดลงเมื่อฉันตระหนักว่าความพยายามนั้นไม่สามารถดำเนินต่อไปได้ ซอฟต์แวร์การออกแบบส่วนใหญ่ที่ฉันเคยเห็นดูเหมือน Photoshop มากกว่าเว็บเบราว์เซอร์ดังนั้นงานแคนวาส / จานสีปกติจึงไม่แปลเป็น (S) CSS ได้อย่างง่ายดาย - ฉันไม่เคย (* ไม่ใช่ตั้งแต่ต้นปี 2000) โครงการที่ใช้ภาพพื้นหลังจึงไม่แน่ใจว่าภาพร่างมีบทบาทอย่างไรในการออกแบบ / พัฒนาวงจรชีวิต?
ฉันไม่ได้เป็นนักออกแบบหรืองานที่คุณทำ - ฉันจำอินเทอร์เน็ตได้ในช่วงปลายยุค 90 และไม่ต้องการกลับไปอีกฉันแค่ดิ้นรนเพื่อทำความเข้าใจว่าทำไม บริษัท ต่างๆจึงใช้เวลา / เงินจำนวนมากเพื่อสร้างงานศิลปะดิจิทัลคุณภาพสูง - ถ้าอย่างนั้นต้องแปลเป็นรูปภาพ HTML & CSS?
คำตอบ
ฉันคิดว่าสถานการณ์ในอุดมคติคือการมีนักออกแบบที่เขียนโค้ด front-end แต่ในความเป็นจริงนักออกแบบส่วนใหญ่ไม่ทำเช่นนั้น อย่างไรก็ตามมีสถานที่ที่เป็นบรรทัดฐานมากขึ้นเรื่อย ๆ
จากมุมมองของนักออกแบบการออกแบบมีเป้าหมายหลัก 3 ประการ:
- วิจารณ์ภายในทีม
- ทดสอบกับผู้ใช้
- พูดคุยกับลูกค้า
ไม่สามารถใช้สเก็ตช์กระดาษสำหรับสิ่งที่กล่าวมาข้างต้นได้แม้แต่ wireframes ก็ยากที่จะเข้าใจสำหรับลูกค้าและผู้ใช้บางราย เนื่องจากทุกรายการมีจุดประสงค์การร่างภาพบนกระดาษ (เช่นการร่างบนไวท์บอร์ด) จึงดีที่สุดเพื่ออำนวยความสะดวกในการอภิปรายอย่างรวดเร็วเกี่ยวกับสิ่งเล็กน้อยหรือความคิดจึงไม่สามารถแสดงถึงสิ่งต่างๆเช่นการสร้างแบรนด์รูปลักษณ์และความรู้สึก
อีกสถานที่หนึ่งที่ส่องแสงคือการแสดงแนวคิดคร่าวๆเบื้องต้นเพื่อปรับแต่งอย่างรวดเร็ว มีสิ่งที่เรียกว่าการสร้างต้นแบบกระดาษหรือโมเดลกระดาษแข็งของผลิตภัณฑ์เป็นต้นโดยมักจะใช้เพื่อแสดงสถานการณ์และทำความเข้าใจว่ารู้สึกอย่างไรเมื่อใช้ผลิตภัณฑ์และหากการมองเห็นมีช่องโหว่ใหญ่ ๆ พลาดสิ่งสำคัญได้ง่ายเมื่อไม่แสดงออกมา
ตอนนี้ทั้งต้นแบบไฮไฟและ html / css ตรงตรงตามจุดข้างต้น ขึ้นอยู่กับผู้ออกแบบและกระบวนการภายในของ บริษัท ไม่มีกฎที่ระบุว่าต้องมีต้นแบบไฮไฟ
สิ่งที่คุณใช้ขึ้นอยู่กับสิ่งที่คุณต้องการและข้อ จำกัด ของโครงการ ต้องการสื่อสารสิ่งที่สามารถทำได้โดยการร่างบนกระดาษหรือไม่? ได้โปรดอย่าเสียเวลา ทำได้ทุกที่ทุกเวลาในโครงการ ต้องทดสอบกับผู้ใช้หรือไม่? ลูกค้าเท่านั้นที่เข้าใจสิ่งที่ไฮไฟ? นักออกแบบอาศัยอยู่ใน html / css หรือไม่? อย่าลังเลที่จะข้าม photoshop / figma / ร่าง ฯลฯ มีลูกค้าขอสำรวจ 2 เส้นทางที่แตกต่างกันมากหรือไม่? เสียค่าใช้จ่ายน้อยกว่าในการทำซ้ำบนเครื่องมือสร้างต้นแบบ จากนั้นข้าม html / css ไปสักหน่อย
ในหลาย ๆ วิธี wireframe> photoshop> code flow เป็นแบบเดิม เครื่องมือในตอนนี้กำลังผสมผสาน wireframes และ photoshop เข้ากับกฎเชิงตรรกะ เครื่องมือสร้างต้นแบบเหล่านี้บางตัวเริ่มซับซ้อนขึ้นมาก (โดยพื้นฐานแล้วจะกลายเป็นการนำเสนอโค้ดด้วยภาพ) ซึ่งทำให้คุณสงสัยว่ามันเร็วกว่าเพียงแค่ทำโดยตรงบนจาวาสคริปต์ (ซึ่งถ้าคุณเป็นฝ่ายเทคนิค) ฉันมั่นใจว่าวิวัฒนาการนี้จะยังคงก้าวไปข้างหน้ามากขึ้นเรื่อย ๆ โดยใช้รหัสเท่านั้น สนามกำลังพัฒนามีคนใหม่ ๆ เข้ามาที่ไม่ใช่สายเทคนิค และเครื่องมือที่คุณเห็นนั้นรองรับพวกเขาไม่ใช่สำหรับ front-devs
นอกจากนี้ยังมีแนวคิดเรื่องความซื่อสัตย์นี้ ยิ่งบางสิ่งดูเหมือนผลิตภัณฑ์ขั้นสุดท้ายมากเท่าไหร่ผู้คนก็ยิ่งเชื่อว่าพวกเขาไม่สามารถให้ข้อเสนอแนะและการเปลี่ยนแปลงได้ พวกเขาจะอดกลั้นแม้ว่าคุณจะบอกว่ายอมแล้วก็ตาม ดังนั้นโครงร่างโดยธรรมชาติจะเชิญชวนมากกว่าสิ่งที่ดูสวยงามและเสร็จสิ้น การแสดงลูกค้าที่ได้รับการออกแบบอย่างสวยงามอาจไม่ได้ให้ข้อเสนอแนะที่คุณต้องการ แต่อีกครั้งคุณสามารถเขียนโค้ดโครงร่างแทนได้ ไม่มีใครบอกว่าคุณทำไม่ได้
เนื่องจากนักออกแบบไม่ได้ทำเพียงเพื่อสื่อสารกับนักพัฒนา แต่เพื่อสื่อสารกับผู้ใช้และผู้ถือสเต็ก
คุณทดสอบโซลูชันการออกแบบที่คุณเขียนด้วยปากกาและกระดาษได้อย่างไร คุณจะทราบได้อย่างไรว่าโซลูชันใดที่ทำให้เกิด Conversion ที่ดีขึ้น คุณจะรู้ได้อย่างไรว่าคุณต้องปรับแก้โซลูชันของคุณเนื่องจากผู้ใช้พบว่ามันยากที่จะเข้าใจ ฯลฯ
นักออกแบบทำสิ่งนี้เพื่อให้พวกเขาสามารถหาอะไรบางอย่างร่วมกับผู้ถือสเต็กซึ่งโดยปกติจะเป็นคนที่มีลักษณะเป็นภาพและยังตรวจสอบความถูกต้องของงานโดยทดสอบกับผู้ใช้
ในตอนท้ายโซลูชันการออกแบบจะถูกส่งต่อไปยังนักพัฒนาและเครื่องมือต่างๆเช่น Sketch, adobe xd เป็นต้นเป็นวิธีที่ค่อนข้างใช้ความพยายามเพียงเล็กน้อยในการสื่อสารคุณลักษณะการจัดแต่งทรงผม ฯลฯ ให้กับนักพัฒนาจากงานที่คุณทำอยู่แล้ว
เราล้มเลิกการออกแบบที่แสดงผลจริงในงานของฉันเมื่อสองสามปีก่อน เราย้ายไปยังต้นแบบอย่างรวดเร็วโดยใช้ proxy / mock json เป็นแบ็กเอนด์ ผู้มีส่วนได้ส่วนเสียของเราจะได้รับความรู้สึกเหมือนแอปจริงและสามารถวิจารณ์ได้ตั้งแต่เนิ่นๆโดยไม่มีการพัฒนาโค้ดแบ็กเอนด์ เราทุกคนเป็นนักออกแบบ UI ที่ดีเช่นกันและเราใช้ bootstrap เป็นฐาน หลังจากต้นแบบของเราเสร็จสิ้น / ได้รับการอนุมัติเราจะเริ่มต้นแบ็กเอนด์เนื่องจากส่วนหน้าเสร็จสิ้นแล้วอย่างแท้จริง เราใช้กรอบจาวาสคริปต์แบบกำหนดเองที่เรียกว่า atomic stack ที่เขียนโดย Tyree Jackson ลองดูสิ!