แนวคิดการพัฒนาเว็บนักออกแบบเว็บไซต์ทุกคนควรเข้าใจ

มีหลายสิ่งที่ต้องพูดถึง การแบ่งพบระหว่างนักออกแบบและนักพัฒนา. ได้รับมีลูกผสมออกแบบ / พัฒนาที่สามารถ เข้าใจทั้งสองด้านของเหรียญ, แต่พวกมันอยู่ห่างกันไม่มากนัก.

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

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

พฤติกรรมรหัสส่วนหน้า

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

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

ฉันเชื่อว่าอย่างน้อยนักออกแบบทุกคนควรเข้าใจ สามภาษาพื้นฐานของการพัฒนาส่วนหน้า (HTML, CSS และ JS) พร้อมกับวิธีการใช้งาน ตัวอย่างเช่นเมนูแบบเลื่อนลงส่วนใหญ่ใช้ JavaScript แต่มี CSS-only เช่นกัน.

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

สิ่งนี้เป็นไปได้ โดยไม่ต้องเรียนรู้ที่จะเขียนโค้ดบรรทัดเดียว.

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

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

เทคนิคการตอบสนอง

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

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

หากต้องการดูว่าจุดพักทำงานบนเว็บไซต์จริงให้ตรวจสอบเว็บไซต์ Media Queries.

งานของคุณในฐานะนักออกแบบคือการพิจารณาว่าจุดพักแต่ละจุดอาจ มีอิทธิพลต่อการจำลอง. คุณอาจได้รับมอบหมายให้ออกแบบคอมพ์หลายตัว ปรับให้เหมาะกับขนาดหน้าจอที่แตกต่างกัน.

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

คิดว่า Modular ด้วยการออกแบบ

นักพัฒนาต้องการเสมอ ใช้รหัสซ้ำ มากที่สุดเท่าที่เป็นไปได้เช่นเดียวกับวิธีการนี้ทำให้การพัฒนา verbose น้อย และ ลดขนาดไฟล์ - ในความเป็นจริงมันเป็นเทคนิคการเพิ่มประสิทธิภาพรหัสที่สำคัญ.

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

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

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

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

ทำความเข้าใจกับ Retina Images & SVG

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

ฉันอยากจะแนะนำโพสต์นิตยสาร Smashing นี้ถ้าคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับขั้นตอนการออกแบบเรตินา Retinize มันเป็นชุดฟรีของการกระทำของ Photoshop ที่สามารถ สร้างรุ่นเรติน่าโดยอัตโนมัติ ของสินทรัพย์ของคุณ.

นักออกแบบส่วนใหญ่รู้แล้วว่าให้การสนับสนุน @ ภาพ 2x, แต่อุปกรณ์ iPhone 6+ รุ่นใหม่กว่ามี @ ความละเอียด 3x. อย่างไรก็ตามบางโปรเจ็กต์ไม่ต้องกังวลกับขนาดของรูป @ 3x ดังนั้นให้คุยกับหัวหน้าโปรเจคของคุณก่อนที่จะทำการสรุปสินทรัพย์ให้เสร็จ.

สิ่งสุดท้ายที่ต้องพิจารณาคือ ความก้าวหน้าของ SVG บนเว็บ เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ SVG ซึ่งเป็น รูปแบบภาพเวกเตอร์. นี่หมายถึงไอคอน SVG ปรับขนาดโดยอัตโนมัติโดยไม่สูญเสียคุณภาพ, ดังนั้นคุณไม่จำเป็นต้องมีเรตินาสำหรับกราฟิก SVG.

ทีมสร้างสรรค์บางคนก็เต็มใจที่จะใช้ SVG สำหรับการออกแบบเว็บ เบราว์เซอร์เหล่านี้รองรับแน่นอน แต่ในบางกรณีอาจทำให้ยุ่งยากในการปรับใช้ นี่คือเหตุผลที่การสื่อสารมีความสำคัญสำหรับความสัมพันธ์ของนักออกแบบ / นักพัฒนาที่ประสบความสำเร็จ.

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

ทำความเข้าใจเกี่ยวกับการเข้าถึง

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

ผู้ใช้เหล่านี้ยังควรได้รับ ประสบการณ์ที่ได้ผล, และสิ่งนี้ต้องจัดการด้วยการเข้ารหัสที่เหมาะสม โปรแกรมอ่านหน้าจอบางโปรแกรมอาจละเว้นโค้ด JavaScript และ CSS ทั้งหมด แต่เป็นเว็บไซต์ ยังคงต้องการฟังก์ชั่น.

ฉันเพิ่งโพสต์ครอบคลุม การเพิ่มความก้าวหน้า ในรายละเอียดเนื่องจากเป็นวิธีการพัฒนาที่ฉันชอบ การเพิ่มความก้าวหน้า เริ่มต้นด้วยคุณสมบัติพื้นฐานมาก, จากนั้นทำงานได้มากขึ้น “สูง” คุณสมบัติ.

การย่อยสลายที่สง่างาม คือ วิธีการที่ตรงกันข้าม ที่ไหน คุณสมบัติหลักทั้งหมดได้รับการออกแบบมาก่อน, นักพัฒนาจึงตัดสินใจว่าจะจัดการกับคุณสมบัติเหล่านี้อย่างไรหากผู้ใช้ไม่รองรับ JavaScript หรือ CSS.

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

ในการปิด

มีบางหัวข้อที่ฉันข้ามไปเพราะฉันคิดว่าเป็นตัวเลือก. การควบคุมเวอร์ชันการจัดการข้อผิดพลาดและภาพเคลื่อนไหว JavaScript เป็นอีกสองสามหัวข้อที่ซับซ้อนที่นักออกแบบอาจต้องการเจาะลึกลงไป.

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

หากคุณกำลังมองหาเนื้อหาที่เกี่ยวข้องเพิ่มเติมดูที่โพสต์เหล่านี้:

• วิธีการสื่อสารกับนักพัฒนาอย่างมีประสิทธิภาพ (smashingmagazine.com)
• ช่วยให้นักออกแบบและนักพัฒนาเรียนรู้ที่จะเข้าใจซึ่งกันและกัน (uie.com)
• การเรียนรู้ที่จะให้โค้ดช่วยให้คุณได้เปรียบในฐานะนักออกแบบ UX (jessicaivins.net)