มีข้อได้เปรียบในการทำภาพเต็มรูปแบบเมื่อเทียบกับการดำน้ำเพื่อเขียน HTML / CSS หรือไม่?

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

บ่อยครั้งที่ผู้ออกแบบเว็บนั้นเป็น "ภาพเท่านั้น" และจะรับผิดชอบในการสร้างภาพจำลองที่มีรายละเอียดมากในซอฟต์แวร์แก้ไขภาพเช่น Photoshop หรือดอกไม้ไฟ mockup (s) จะแสดงทุกด้านที่เป็นไปได้ของหน้าเว็บจากสีและตัวเลือกประเภทเพื่อพื้นหลัง, ไอคอน, ภาพถ่ายและภาพอื่น ๆ ที่จะใช้ แต่ "ดีไซเนอร์" ไม่เคยเกี่ยวข้องกับการก่อสร้างจริงและการใช้งานจริง พวกเขามุ่งเน้นไปที่การปรากฏตัว

เมื่อการออกแบบได้รับการอนุมัติ (โดยการตรวจสอบไฟล์ภาพเหล่านี้) ขั้นตอนที่สองได้ดำเนินการแล้ว - การเปลี่ยนไฟล์ภาพเป็น HTML / CSS แบบสด

• ในสภาพแวดล้อมแบบที่นั่งเดียวหรืออิสระนักออกแบบเว็บไซต์อาจใช้ตัวแบ่งข้อมูลและส่งออกเป็น HTML ผ่านตัวเลือกแอปพลิเคชันภายใน เมื่อวันที่หายากโอกาสออกแบบอาจสร้างเฟรมหน้า HTML / CSS พื้นฐาน

• ในบางสภาพแวดล้อมขององค์กร mockups เหล่านี้จะยังคงอยู่ในรูปแบบของไฟล์รูปภาพแบบเลเยอร์ (.psd, .png [สำหรับดอกไม้ไฟ]) สำหรับนักออกแบบเว็บไซต์และนักออกแบบจะไม่ต้องกังวลเกี่ยวกับการใช้มาร์กอัปหรือรหัสใด ๆ "ผู้ออกแบบ" ไม่ต้องกังวลเกี่ยวกับวิธีการสร้าง HTML หรือ CSS เพื่อนำไปใช้สร้างภาพจำลองที่สร้างขึ้น ไฟล์ภาพถูก / ส่งมอบให้กับ "นักพัฒนา" ซึ่งจะรับผิดชอบในการสร้าง HTML / CSS ซึ่งตรงกับไฟล์รูปภาพ

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

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

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

มีประโยชน์จริงๆ หรือไม่ในการสร้างการจำลองแบบเต็มหน้าในแอปพลิเคชันการแก้ไขภาพก่อนที่จะดำลงใน HTML / CSS สำหรับการออกแบบการออกแบบ?

ประโยชน์ของการสร้างแบบจำลองเต็มหน้าคือการแบ่งงาน

ใน บริษัท ขนาดใหญ่ซึ่งมีทั้งนักออกแบบและ (ส่วนหน้า) พัฒนางานของนักออกแบบคือการออกแบบและงานของนักพัฒนาคือการเขียนโค้ด

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

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

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

อย่างไรก็ตามการออกแบบซ้ำ ๆ ที่ไม่มีรหัสซ้ำ ๆนั้นเป็นวิธีที่ถูกต้องและมีประโยชน์อย่างไม่น่าเชื่อโดยเฉพาะอย่างยิ่งสำหรับเลย์เอาต์และกระบวนการทำงาน ภาษามาร์กอัปและเทคโนโลยีใหม่ไม่ได้คิดค้นการทำงานอย่างรวดเร็วด้วยความคิดคร่าวๆ :)

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

1. ส่วนที่สร้างสรรค์ของกระบวนการออกแบบได้รับความเดือดร้อนหากใช้เวลาพยายามคิดว่าจะทำสิ่งต่าง ๆ ใน HTML และ CSS ได้อย่างไร

สิ่งนี้เป็นจริงหากไม่มีการพิจารณาว่าโค้ดมีความคิดสร้างสรรค์เท่ากัน Photoshop และ HTML / CSS / JS เป็นทั้งสื่อกลางสำหรับศิลปินที่จะทำงานเช่นเดียวกับสีก็มีความคิดสร้างสรรค์เช่นเดียวกับถ่านดังนั้น Photoshop จึงสามารถเป็นสื่อสร้างสรรค์ได้เช่นเดียวกับ HTML / CSS / JS

และประโยชน์ที่ยิ่งใหญ่ของการทำงานโดยตรงใน HTML / CSS / JS คือหลายมิติของมัน Photoshop ในตอนท้ายของวันเป็นผืนผ้าใบแบน HTML / CSS / JS เป็นผืนผ้าใบแบบไดนามิกที่มีการไหลการโต้ตอบภาพเคลื่อนไหวและอื่น ๆ

บรรทัดล่างฉันจะยืนยันรหัสเป็นสื่อที่สร้างสรรค์มากขึ้นในกรณีนี้

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

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

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

3. หากคุณเริ่มเขียนโค้ดก่อนที่คุณจะมีมุมมองที่ชัดเจนเกี่ยวกับสิ่งที่การออกแบบควรมีลักษณะคุณจะต้องทำการเลือกที่ไม่รู้ข้อมูลเกี่ยวกับวิธีสร้างรหัส ความเสี่ยงคือมันจะทำให้โค้ดแย่ลงและ จำกัด โอกาสในการออกแบบ

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

4. โค้ด HTML และ CSS สามารถเปลี่ยนแปลงได้ค่อนข้างมากด้วยการเปลี่ยนแปลงเล็กน้อยในการออกแบบซึ่งจะทำให้กระบวนการออกแบบคงที่มากขึ้น คุณมีความเสี่ยงที่จะ จำกัด การเปลี่ยนแปลงที่ทำได้ง่ายในรหัส

อาร์กิวเมนต์ตัวนับว่าเป็นผู้ออกแบบ จำกัด ตัวเองไว้เฉพาะการเปลี่ยนแปลงที่ทำได้ง่ายใน Photoshop มันไม่ได้เป็นข้อโต้แย้งที่ดีมากทั้งสองวิธี

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

ตราบใดที่ PSD แสดงถึงสิ่งที่สามารถทำซ้ำได้อย่างใกล้ชิดใน CSS / HTML (มีข้อ จำกัด ข้ามเบราว์เซอร์และข้ามสื่อ) ฉันจะทำมันใน Photoshop (หรือ InDesign - ฉันรู้ว่ามีนักออกแบบบางคนที่คอมไพล์ด้วย) มันเร็วและง่ายกว่ามากในการจัดการภาพ การเยาะเย้ยใน CSS สำหรับฉันจะเป็นการเข้ารหัสก่อนที่ฉันจะเข้ารหัสหากเหมาะสม

มีเหตุผลหลายประการที่ทำให้องค์ประกอบการออกแบบแยกจากองค์ประกอบการสร้างโค้ดตัวอย่างเช่น:

• ส่วนที่สร้างสรรค์ของกระบวนการออกแบบได้รับความเดือดร้อนหากใช้เวลาพยายามคิดว่าจะทำสิ่งต่าง ๆ ใน HTML และ CSS ได้อย่างไร

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

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

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