นักออกแบบเว็บไซต์ที่ใช้ Photoshop ควรส่งเอกสารอะไรให้กับนักพัฒนา


10

ฉันใช้งานเว็บและเดสก์ท็อปเป็นหลักและนี่เป็นครั้งแรกที่ฉันเริ่มทำงานกับนักออกแบบกราฟิกบนเว็บไซต์ที่มีไว้สำหรับสาธารณะ ในกรณีนี้ผู้ออกแบบกราฟิกไม่ได้ใช้ HTML + CSS แต่ใช้ Photoshop

โดยทั่วไปแล้วจะมีวัสดุประเภทใดที่ให้ผลลัพธ์ในการออกแบบเพื่อนำไปใช้จริง

ตัวอย่างเช่นฉันควรได้รับอะไรมากกว่าไฟล์ PSD? วิธีการเกี่ยวกับสถานะที่แตกต่างกัน (เช่นโฮเวอร์ลิงก์, สถานะที่ใช้งาน ฯลฯ ) หรือการออกแบบที่ตอบสนองได้อย่างไร ฉันคาดหวังรายละเอียดทางเทคนิคด้วยหรือไม่

ความช่วยเหลือใด ๆ ที่ชื่นชม


2
คุณไม่ได้ถามช้าไปเหรอ? นี่คือคำถามที่ควรได้รับคำตอบก่อนเริ่มงาน
สกอตต์

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

คำตอบ:


10

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

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

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


4

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

หากผู้ออกแบบของคุณอยู่ในอันดับต้น ๆ 20% ให้ขอ userflows และ wireframes ของ UX หรือว่าพวกเขามีความสามารถเป็นพิเศษต้นแบบที่ผลิตใน After Effects หรือ Flash โดยหลักการแล้วพวกเขาจะไม่ระบุรายละเอียดใด ๆ


3
"ต้นแบบที่สร้างใน After Effects หรือ Flash" = หรือโดยเฉพาะอย่างยิ่งต้นแบบที่สร้างขึ้นใน HTML, CSS และ JS
DA01

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

@KMSTR สำหรับเร็กคอร์ดฉัน upvoting คุณ;)
ญี่ปุ่น

2

ทุกอย่างขึ้นอยู่กับสิ่งที่คุณเห็นด้วยกับนักออกแบบกราฟิก

นักออกแบบกราฟิกบางคนไม่รู้อะไรเลยนอกจาก PhotoShop และจะหายไปหากคุณขอสิ่งอื่นนอกเหนือจากไฟล์ PSD ขนาดใหญ่

นักออกแบบกราฟิกบางคนมีความเชี่ยวชาญใน HTML, CSS และ JS และสามารถสร้างทุกสิ่งให้คุณได้

แล้วก็มีทุกสิ่งระหว่างนั้น

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


2

คุณควรระบุสิ่งที่คาดหวังไว้ล่วงหน้า

ฉันสามารถส่งไฟล์ psd หน้า html / css หรือแม้แต่หน้า jquery / php / mysql แบบไดนามิกได้อย่างสมบูรณ์ สิ่งที่ส่งมอบจะขึ้นอยู่กับสิ่งที่ร้องขอ

หากผู้พัฒนาต้องการ psd เพียงอย่างเดียวนั่นคือทั้งหมดที่ฉันส่งและเป็นหน้าที่ของพวกเขาในการสร้างหน้า ฉันจะไม่ไปที่ปัญหาของการสร้างหน้าหากพวกเขาไม่ต้องการ

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

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

ไม่มีคำตอบที่ชัดเจนสำหรับคำถามของคุณ มันเป็นเรื่องของสิ่งที่ตกลงกันก่อนเริ่มงาน


1

คุณต้องการนักออกแบบที่มีความเชี่ยวชาญใน HTML, CSS และ Javascript สถานที่ที่ฉันทำงานเราไม่เคยเห็นไฟล์ Photoshop ไฟล์เดียว ผู้ออกแบบให้ URL กับหน้าเราคัดลอก UI ทั้งหมดของเขาแล้วเติมช่องว่างเพื่อทำให้หน้าเว็บเป็นแบบไดนามิก

มีสาเหตุบางประการที่ทำให้สิ่งนี้ดีกว่า:

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

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

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


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

ถ้าเป็นข้อตกลงแบบครั้งเดียวให้แน่ใจว่าคุณได้รับแหล่ง PSD
ฮันนา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.