วิธีที่ถูกต้องในการทำงานกับนักออกแบบกราฟิกคืออะไร [ปิด]

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

มันกลับกลายเป็นเสียเวลาอย่างไม่น่าเชื่อที่จะใช้สิ่งนี้ แม้ว่าไซต์ทั้งหมดจะเป็นหน้าแรกหน้าดัชนีและหน้ารายละเอียดครึ่งโหล แต่ฉันใช้เวลาอย่างน้อย 5 วันในการปรับใช้ CSS และ HTML การเปลี่ยนแปลง ดังนั้นฉันจะออกไปบนกิ่งไม้และเรียกสิ่งนี้ผิดวิธี

วิธีการพื้นฐานของฉันคือ:

1. เปรียบเทียบภาพนิ่งและการเรนเดอร์ปัจจุบันและสังเกตเห็นความแตกต่าง
2. คาดเดาสิ่งที่การเปลี่ยนแปลงจะต้องมีใน CSS / HTML
3. ทำการเปลี่ยนแปลงนั้น
4. ไปที่ขั้นตอนที่ 1

ปัญหาเฉพาะบางอย่างคือฉันไม่เข้าใจว่าการออกแบบรวมการเปลี่ยนแปลงจาก 8 คอลัมน์เป็น 12 รูปภาพบางรูปที่ให้ในรูปแบบที่ไม่ถูกต้อง (.png's สามารถแสดงผลแตกต่างกันในเบราว์เซอร์ / แพลตฟอร์มที่แตกต่างกัน) CSS มวยปล้ำตามปกติเพื่อให้ได้การเรนเดอร์พิกเซลที่สมบูรณ์แบบเป็นต้นและบางครั้งฉันก็ต้องจัดเทมเพลต HTML ใหม่เพื่อให้ได้พฤติกรรมที่แน่นอน

วิธีที่ถูกต้องคืออะไร?

ใน บริษัท ของฉันมีคนไม่กี่คนที่มีความเชี่ยวชาญในงานนี้

พวกเขาเป็นนักออกแบบ และพวกเขารู้ HTML พวกเขาสามารถเป็นสะพานเชื่อมระหว่างนักออกแบบและวิศวกรส่วนหน้า ซึ่งพวกเขามักจะเป็น ด้วยวิธีนี้เราต้องรวม HTML ของพวกเขา

นี่เป็นงานที่ยาก มีเว็บไซต์เหตุผลเช่น "PSD เป็น HTML ใน 24 ชั่วโมง" ทำงานได้ดี ทางออกใน บริษัท ของเราคือให้มีบุคลากรที่เชี่ยวชาญในการทำสิ่งนี้ สำหรับเราแล้วการทำงานกับ HTML นั้นเป็นเรื่องง่าย

ไม่มีกระสุนเงิน

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

ตัวอย่างที่ดีของรูปแบบการออกแบบประเภทนี้คือ jQueryUI ( http://jqueryui.com/ )

ก่อนอื่นฉันต้องยอมรับว่าฉันไม่เคยทำงานกับหน้าเว็บจนจบ

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

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

ฉันพัฒนา HTML / CSS ใหม่โดยมีนักออกแบบหลายคนและตามที่ระบุไว้แล้วไม่มี "กระสุนเงิน" นักออกแบบที่ฉันทำงานด้วยไม่รู้จักอะไรมากเกี่ยวกับ html / css บางคนมีประสบการณ์ในการออกแบบเว็บและฉันต้องบอกว่าเมื่อพวกเขามีความรู้มันจะจบลงด้วยการพัฒนาได้ง่ายขึ้นและ "เว็บไซต์ที่ดีกว่า" โดยเฉพาะเมื่อมีการตอบสนองที่เกี่ยวข้องกับ UX

ฉันเดาว่าบาง บริษัท ที่กำลังมองหาเว็บไซต์ที่ไม่รู้ / ไม่สนใจคือใคร ๆ ก็บอกได้ว่าเขาเป็นนักออกแบบกราฟิก / webdevelopper / webdesigner / นักออกแบบ UI ที่มีความรู้พื้นฐาน (หรือไม่มีเลยใช่ฉันได้เห็นแล้ว) ในขณะที่ "ของจริง" สามารถก้าวไปอีกขั้นและผลิตเว็บไซต์ที่มีประสิทธิภาพและบำรุงรักษาได้ ฉันพยายาม "ให้ความรู้" กับลูกค้าและอธิบายว่าการออกแบบเว็บเกี่ยวข้องกับทักษะที่นักออกแบบกราฟิก "พิมพ์เท่านั้น" ไม่มี เมื่องานนี้ฉันมักจะส่งลูกค้าไปยังนักออกแบบที่ฉันได้ทำงานด้วยและมีเวิร์กโฟลว์ร่วมด้วย

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

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

นี่คือความกังวลที่ฉันพยายามติดตามในโครงการส่วนใหญ่:

1. นักออกแบบสร้างมาตรฐานกราฟิกหากพวกเขาไม่มีอยู่ (ปกติฉันไม่ได้มีส่วนร่วมที่นี่ฉันแค่พยายามแนะนำนักออกแบบที่มีต่อแบบอักษรที่เข้ากันได้กับเว็บเช่นแบบอักษร Google)
2. Mokup ทำโดยนักออกแบบ ฉันจะได้รับเกี่ยวข้องกับที่นี่และทำงานร่วมกับนักออกแบบที่จะรูปแบบที่สอดคล้องกับการสร้างเว็บ (โดยเฉพาะอย่างยิ่งสำหรับคนที่ตอบสนอง) ก่อนที่ลูกค้าเห็นมัน
3. ลูกค้าตรวจสอบ mokup
4. ฉันรหัส mokup

เวลาที่ฉันใช้ในการติดต่อสื่อสารและทำงานกับนักออกแบบนั้นจะได้รับการบันทึกในระหว่างขั้นตอนการเข้ารหัสและท้ายที่สุดก็คือรหัสที่เรียบง่ายกว่าบำรุงรักษาและเรียบร้อยยิ่งขึ้น

สิ่งนี้ไม่ได้ช่วยให้คุณรอดพ้นจากนักออกแบบที่มีความสุขที่โทรหาคุณในเย็นวันศุกร์ด้วย mokup ที่สวยมากที่ลูกค้าได้เห็นและตอนนี้ต้องการประโยคนี้: "เฮ้พอลคุณช่วยเขียนโค้ดนี้ให้ฉันได้ไหม " ทฤษฏีทั้งหมดก็แยกจากกันและหากคุณกำลังมองหางานในขณะนั้นคุณก็ดีสำหรับ headeach ตลอดทั้งสัปดาห์

สรุป:

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

ในฐานะที่เป็นนักออกแบบกราฟิกหันมาพัฒนาเว็บสแต็คเต็มรูปแบบสำหรับฉันนี่เป็นส่วนที่ง่าย ฉันพบว่าหลายครั้งที่มีช่องว่างการสื่อสารระหว่างทีมออกแบบ UX และนักพัฒนาที่ใช้ผลิตภัณฑ์ แน่นอนว่าเอกสารช่วยได้ แต่กระบวนการสามารถเริ่มรู้สึกเป็นธรรมชาติมากขึ้นเมื่อการสนทนาแบบตัวต่อตัวเกี่ยวกับกลยุทธ์เกิดขึ้น นอกจากนี้ฉันรู้ว่าเวลานั้นหายากสำหรับทุกคน แต่พยายามมีส่วนร่วมในช่วงการออกแบบและเลย์เอาต์ สิ่งนี้สามารถช่วยได้อย่างมากเมื่อต้องการการสื่อสารระหว่างผู้ออกแบบและนักพัฒนา โครงการใช้ความพยายามแบบรวมศูนย์มากขึ้นและน้อยลงในสถานการณ์ "ฉันทำส่วนของฉันข้ามกำแพงไปแล้ว" ฉันพบว่ามันมีประโยชน์มากที่จะมีงานออกแบบและพัฒนาที่เกิดขึ้นพร้อมกัน สนับสนุนให้ทีมออกแบบจัดหา wireframes ให้คุณในช่วงต้นของกระบวนการ ด้วยวิธีนี้คุณสามารถทำหนึ่งรูปแบบผ่านที่เกี่ยวข้องกับการจัดวางและการวางตำแหน่งเพียงอย่างเดียว จากนั้นเมื่อ deaigns กลายเป็นคนรวยและสมบูรณ์มากขึ้น ใช้เวลาผ่าน CSS อีกครั้งสำหรับลักษณะที่ปรากฏและคุณลักษณะสไตล์อื่น ๆ อย่างน้อยสิ่งนี้จะช่วยให้คุณไม่ต้องให้ความสำคัญกับทุกสิ่งในครั้งเดียว

ฉันกำลังเผชิญกับปัญหาที่คล้ายกัน ฉันมีความคิดว่าเครื่องมือเช่น Greasemonkey หรือ Tampermonkey สามารถใช้เพื่อจุดประสงค์นั้นได้ เมื่อสัปดาห์ที่แล้วฉันขอความคิดเห็นเกี่ยวกับแนวคิดนี้: วิธีการที่จะ outsource UI ของแอปพลิเคชันเว็บแบบไดนามิกได้อย่างไร แต่ไม่ได้รับคำตอบที่น่าพอใจ

ด้วยเครื่องมือเหล่านี้คุณสามารถฉีด CSS, HTML และ Javascript ไปยังหน้า ในความคิดของฉันคุณให้ URL ของไซต์ทำงานแก่ผู้ออกแบบและคาดว่าสคริปต์ Greasemonkey จะตอบแทน ในทางทฤษฎีคุณควรจะสามารถรวมสิ่งเหล่านั้นเข้ากับไซต์ที่มีอยู่ได้อย่างรวดเร็ว วิธีนี้จะเป็นหน้าที่ของนักออกแบบในการเขียน HTML และ CSS และทำให้ไซต์ใช้งานได้จริง สิ่งนี้ต้องใช้ทักษะการเขียนโปรแกรมเพิ่มเติมในด้านนักออกแบบ

ฉันรู้ว่าความคิดนี้ต้องใช้รายละเอียดมาก แต่ฉันยังไม่ได้ลองและไม่รู้ว่าจะมีใครทำเช่นนี้หรือไม่ อาจมีปัญหากับการใช้งาน