เคล็ดลับในการปรับปรุง Handoff ออกแบบเว็บไซต์ของคุณ

ในขั้นตอนการสร้างเว็บไซต์มีบางขั้นตอนที่เกิดขึ้น หากเราจะทำให้มันง่ายขึ้นและดูที่เว็บไซต์มาตรฐานขั้นตอนต่างๆจะเป็นดังนี้:

1. ความต้องการ - ใครบางคนต้องการเว็บไซต์ด้วยเหตุผลใดเหตุผลหนึ่ง
2. การระดมความคิด - การตัดสินใจเกี่ยวกับโครงสร้างทั่วไปเป้าหมายและอื่น ๆ
3. ข้อเสนอ - ลูกค้าค้นหาฟรีแลนซ์หรือเอเจนซี่เพื่อสร้างไซต์
4. เนื้อหา - บทความรูปภาพ ฯลฯ ทุกสิ่งที่สามารถพบได้ในหน้า Landing Page แผนผังเว็บไซต์ ฯลฯ
5. การออกแบบ - บุคคล / ทีมทำงานเกี่ยวกับการออกแบบและการจัดวางตามเนื้อหา
6. การพัฒนา - บุคคล / ทีมพัฒนาส่วนการทำงานของไซต์ตามการออกแบบ

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

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

สิ่งที่นักออกแบบควรพิจารณา

“ นักออกแบบควรรู้วิธีเขียนโค้ดหรือไม่” เป็นคำถามที่พบบ่อยและเป็นคำถามที่สมเหตุสมผล หากนักออกแบบเข้าใจโค้ดที่อยู่เบื้องหลังและคิดว่าพวกเขาสามารถสร้างสิ่งนั้นได้ (ในระดับหนึ่ง) เขา / เธอสามารถช่วยทีมทั้งหมดในการผลักดันให้โครงการเสร็จสิ้นได้เร็วขึ้น

นี่คือสาเหตุบางประการที่ทำให้เกิดกรณีนี้:

1 - ในที่สุดทุกอย่างก็จบลงในเบราว์เซอร์

การออกแบบใด ๆ ที่คุณสร้างใน Figma, Adobe และอื่น ๆ จะปรากฏในเบราว์เซอร์ เบราว์เซอร์ทั้งหมดใช้ภาษาการเขียนโปรแกรมประเภทหนึ่งที่เรียกว่า HTML / CSS เพื่อแสดงผลเพจ หากใช้ Javascript คุณสามารถทำให้การออกแบบของคุณกลายเป็นแบบโต้ตอบได้

หมายเหตุสำคัญที่ควรคำนึงถึงคือการออกแบบใด ๆ ควรทำได้ใน HTML / CSS นักพัฒนาฟรอนต์เอนด์ที่มีความสามารถหลายคนสามารถใช้งานได้เกือบทุกอย่างตราบเท่าที่เทคโนโลยีอนุญาต แต่จำไว้ว่า - ไม่ได้เกี่ยวกับ“ คุณทำได้ไหม” เสมอไป แต่เกี่ยวกับ“ คุณทำได้ดีและดูแลรักษาได้”

2 - ความสม่ำเสมอ

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

เคล็ดลับบางประการของนักออกแบบเว็บไซต์:

• ออกแบบโดยคำนึงถึงส่วนประกอบ เครื่องมือส่วนใหญ่มีฟังก์ชันนี้แล้ว (Figma, Adobe XD, Sketch) บังคับตัวเองให้ใช้บ่อยขึ้นจนกว่าจะไม่น่ารำคาญอีกต่อไป
• จัดองค์ประกอบให้ดี ส่วนที่คล้ายกันควรมีระยะห่างระหว่างกันเท่ากัน 80px เป็นการแยกที่ดีในการรักษาตัวอย่างเช่น อย่าสุ่มพื้นที่ส่วนโดยใช้ 80 ที่นี่ 86 ที่นั่น 92 ในสามและ 78 ในอีกส่วนหนึ่ง จัดเก็บให้เป็นระเบียบเรียบร้อย
• ใช้ตะแกรง! เครื่องมือทั้งหมดมีระบบกริด เหมาะสำหรับตารางคอลัมน์ a12
• แสดงการออกแบบของคุณบนหน้าจอกว้าง (1920px หรือมากกว่า) สิ่งนี้ช่วยให้นักพัฒนาเข้าใจว่าแต่ละส่วนและภูมิหลังทำงานอย่างไร

3 - น้ำหนักของไซต์

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

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

จะช่วยเหลือนักพัฒนาได้อย่างไร?

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

คุณควรพิจารณาสิ่งที่ทำได้ง่ายบนเว็บ

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

พิจารณาเนื้อหาที่แตกต่างกัน!

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

ให้การออกแบบของคุณในเครื่องมือเช่น Zeplin

เครื่องมือออกแบบส่วนใหญ่เช่น Figma หรือ Adobe XD มีวิธี "แชร์" การออกแบบกับนักพัฒนา จากนั้นทีมส่วนหน้าสามารถตรวจสอบสีการตั้งค่าตัวอักษรระยะห่างและคุณสมบัติภาพอื่น ๆ ของเลเยอร์ซึ่งจะช่วยให้พวกเขายึดติดกับการออกแบบได้มาก

ระบุเนื้อหาอื่น ๆ เช่นแบบอักษรหรือวิดีโอ

หากคุณใช้แบบอักษรเฉพาะบนไซต์โปรดระบุแบบอักษรดังกล่าวแก่นักพัฒนา หากได้รับอนุญาตและสามารถเข้าถึงได้ผ่าน URL ที่เฉพาะเจาะจงอย่าลืมแชร์ด้วย สิ่งสำคัญสำหรับนักพัฒนาในการทำงานกับแบบอักษรที่ถูกต้องตั้งแต่วันแรก หากมีวิดีโออย่าลืมแชร์ด้วย! วิดีโอจะอยู่บน YouTube, Vimeo หรือโฮสต์เอง?

อย่าไปหา“ พิกเซลที่สมบูรณ์แบบ”

แนวคิดในการรักษารูปลักษณ์สุดท้ายของเว็บไซต์ให้สมบูรณ์แบบเช่นเดียวกับการออกแบบเป็นวิธีง่ายๆที่จะทำให้ทีมนักพัฒนาของคุณเกลียดคุณและสามารถทำลายโอกาสที่จะถ่ายทอดสดตรงเวลาได้ ในเกือบทุกกรณีการออกแบบจะไม่สมบูรณ์แบบ เป็นไปไม่ได้ที่จะมั่นใจได้ 100% ว่าก่อนทุกปุ่มคุณจะมีระยะห่าง 18px กันแน่? และไม่ใช่ 19px? หรือว่าทุกหัวข้อคือ 38px และไม่ใช่ 37px? หรือบางทีเส้นขอบทุกเส้นจะเป็น #ddd และไม่มีเส้นที่เป็นสีดำ แต่มีความทึบ 15%?

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

ในท้ายที่สุดเว็บไซต์ที่เข้ารหัสควรเป็นไปตามรูปลักษณ์ทั่วไปของการออกแบบ

แสดงความคิดเห็นในการออกแบบ

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

คิดเหมือนผู้ใช้

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

มุมมองที่ตอบสนอง

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

สรุป

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

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