Cách đúng đắn để làm việc với một nhà thiết kế đồ họa là gì? [đóng cửa]

Gần đây, chúng tôi đã làm việc với một nhà thiết kế đồ họa (do khách hàng sắp xếp) để cung cấp giao diện cho ứng dụng Django + Bootstrap mà chúng tôi đã xây dựng. Nhà thiết kế đã cung cấp một loạt các hình ảnh tĩnh của bố cục mới, cùng với một tài liệu mô tả một số thuộc tính kỹ thuật (kích thước phông chữ, màu sắc, một vài kích thước, v.v.).

Hóa ra là vô cùng tốn thời gian để thực hiện điều này. Mặc dù toàn bộ trang web về cơ bản là một trang đầu, một trang chỉ mục và nửa tá trang chi tiết, tôi đã dành ít nhất 5 ngày để thực hiện các thay đổi CSS và HTML. Vì vậy, tôi sẽ đi ra ngoài và gọi đây là The Wrong Way .

Cách tiếp cận cơ bản của tôi là:

1. So sánh hình ảnh tĩnh và kết xuất hiện tại, và nhận thấy sự khác biệt.
2. Đoán xem cần thay đổi gì trong CSS / HTML
3. Thay đổi điều đó
4. Chuyển đến bước 1.

Một số vấn đề cụ thể khiến tôi không hiểu rằng thiết kế bao gồm thay đổi từ 8 cột thành 12, một số hình ảnh được cung cấp sai định dạng (.png có thể hiển thị khác nhau trên các kết hợp trình duyệt / nền tảng khác nhau), gặp khó khăn khi cố gắng hoàn tác kiểu dáng của Bootstrap, đấu vật CSS thông thường để đạt được kết xuất hoàn hảo pixel, v.v. Và đôi khi tôi phải tổ chức lại các mẫu HTML để có một hành vi nhất định.

Cách nào là đúng?

Trong công ty của tôi, có một vài người chuyên về công việc này.

Họ là những nhà thiết kế. Và họ biết HTML. Chúng có thể là cầu nối giữa các nhà thiết kế và các kỹ sư mặt trước; mà họ thường là. Theo cách này, chúng ta chỉ cần tích hợp HTML của họ.

Đây là một công việc khó khăn. Có một lý do các trang web như "PSD to HTML trong 24h" hoạt động tốt. Giải pháp trong công ty chúng tôi là có những người chuyên làm việc này. Đối với chúng tôi, làm việc với HTML là một cách dễ dàng.

Không có viên đạn bạc.

Tôi không chắc chắn có "cách đúng", nhưng cách hợp tác hiệu quả với nhà thiết kế là trước tiên xây dựng một hệ thống không sử dụng các mẫu và cho phép trao đổi dễ dàng tất cả các mẫu. Sau đó, khi bạn có một giao diện chức năng nhưng chưa được chỉnh sửa (hoặc được tạo kiểu tối thiểu), bạn giao kết quả cho nhà thiết kế để tạo kiểu.

Một ví dụ điển hình của kiểu mẫu thiết kế này sẽ là jQueryUI ( http://jqueryui.com/ )

Đầu tiên, tôi phải thừa nhận rằng tôi chưa bao giờ làm việc với web front end.

Nhưng tôi nghĩ rằng nó có thể là một thực hành tốt cho bạn và nhà thiết kế để viết văn xuôi về cách thiết kế cuối cùng sẽ trông như thế nào. Bằng cách đó bạn có thể chắc chắn hơn về tính nhất quán, bởi vì nó sẽ có mùi nếu bạn mô tả các bảng khác nhau cho mỗi trang. Văn xuôi có thể làm cho việc thực hiện của bạn dễ dàng hơn, bởi vì bạn thực sự đang viết mã, gần với việc thực hiện của bạn hơn là hình ảnh.

Cũng cố gắng làm cho nhà thiết kế tập trung vào các thành phần, không phải toàn bộ trang. Nếu bạn có được các thành phần của một trang đúng, thì việc soạn chúng cho toàn bộ trang là một bước dễ dàng hơn nhiều.

Tôi đã làm lệch HTML / CSS với một số nhà thiết kế và như đã nêu, không có "viên đạn bạc". Các nhà thiết kế tôi đã làm việc với không biết nhiều (không có gì) về html / css. Một số người trong số họ đã có một số kinh nghiệm trong thiết kế web và tôi phải nói rằng khi họ có kiến ​​thức đó, nó luôn kết thúc với việc phát triển dễ dàng hơn và "trang web tốt hơn" đặc biệt khi có phản hồi về UX.

Tôi đoán điều mà một số công ty đang tìm kiếm một trang web không biết / bỏ qua là: bất kỳ ai cũng có thể nói anh ta là một nhà thiết kế đồ họa / nhà phát triển web / nhà thiết kế web / nhà thiết kế UI với kiến ​​thức cơ bản (hoặc thậm chí không có, tôi đã thấy điều đó). Trong khi đó "những người thực sự" có thể đi xa hơn và tạo ra các trang web hiệu quả, có thể bảo trì. Tôi cố gắng "giáo dục" khách hàng và giải thích rằng Thiết kế web liên quan đến các kỹ năng mà "chỉ in" các nhà thiết kế đồ họa không có. Khi công việc này, tôi thường gửi khách hàng cho các nhà thiết kế mà tôi đã làm việc cùng và có một quy trình làm việc chung.

Điều này cho biết, nó thường xảy ra vì nhiều lý do khiến bạn kết thúc việc xây dựng trang web với những người có kỹ năng đồ họa và không có kỹ năng thiết kế web. Trong tình huống này, cách tốt nhất tôi đã tìm thấy để tiết kiệm thời gian mã hóa và không kết thúc với bố cục không thể chấp nhận được là tham gia vào quá trình thiết kế và giao tiếp với nhà thiết kế và giải thích những gì bạn có thể / không thể làm và điều gì sẽ đơn giản / tốt hơn từ quan điểm của bạn.

Mặc dù điều này có thể khó tổ chức trong một số trường hợp, nhưng đó là vốn để giải thích cho khách hàng và nhà thiết kế rằng "nếu bạn nghĩ rằng thiết kế web tạo ra sự lớn mạnh của một dự án web, bạn sẽ tiết kiệm được thời gian, tiền bạc và các mục tiêu" và bạn sẽ hạnh phúc khi tham gia vào quá trình thiết kế để tiết kiệm thời gian và tiền bạc.

Đây là dòng chảy tôi cố gắng theo dõi trong hầu hết các dự án:

1. Nhà thiết kế xây dựng các tiêu chuẩn đồ họa nếu chúng không tồn tại (Tôi thường không tham gia ở đây. Tôi chỉ cố gắng gợi ý nhà thiết kế hướng tới các phông chữ tuân thủ web, ví dụ: phông chữ google)
2. Mokup được thực hiện bởi các nhà thiết kế. Tôi tham gia ở đây và làm việc với nhà thiết kế để xây dựng bố cục tuân thủ web (đặc biệt dành cho những người đáp ứng) trước khi khách hàng nhìn thấy nó .
3. khách hàng xác nhận mokup
4. Tôi mã mokup

Thời gian tôi dành để giao tiếp và làm việc với nhà thiết kế được lưu trong quá trình mã hóa và điều này kết thúc với mã đơn giản hơn, dễ bảo trì hơn và gọn gàng hơn.

Điều này không cứu bạn khỏi một nhà thiết kế vui vẻ gọi cho bạn vào tối thứ sáu với một mokup rất đẹp mà khách hàng đã thấy và bây giờ muốn với câu này: "Này pall, bạn có thể viết mã này cho tôi không, hạn chót là ... ngày hôm qua! " Sau đó, toàn bộ lý thuyết sụp đổ và nếu bạn đang tìm kiếm công việc tại thời điểm đó, bạn sẽ tốt cho một mục tiêu cuối tuần.

Phần kết luận :

Tôi không nghĩ rằng điều này rất khác so với bất kỳ mã nào không liên quan đến dự án, cách tốt nhất để làm việc với người khác là giao tiếp với họ.

Là một nhà thiết kế đồ họa đã trở thành nhà phát triển web stack đầy đủ, đối với tôi, điều này cho đến nay vẫn là phần dễ dàng. Tôi thấy rằng rất nhiều lần có một khoảng cách giao tiếp giữa nhóm thiết kế UX và các nhà phát triển triển khai sản phẩm. Chắc chắn, tài liệu có ích, nhưng quá trình có thể bắt đầu cảm thấy tự nhiên hơn rất nhiều khi một số cuộc đối thoại trực tiếp về chiến lược xảy ra. Ngoài ra, tôi biết rằng thời gian là khan hiếm cho mọi người, nhưng hãy cố gắng tham gia vào giai đoạn thiết kế và bố trí. Điều này có thể giúp rất nhiều khi cần giao tiếp giữa nhà thiết kế và nhà phát triển. Dự án lấy nhiều nỗ lực của một nhóm thống nhất và ít hơn một kịch bản "Chà, tôi đã hoàn thành phần của mình, vượt qua mọi chuyện". Tôi đã thấy nó rất có lợi khi có công việc thiết kế và phát triển diễn ra song song, khuyến khích nhóm thiết kế cung cấp cho bạn các khung lưới sớm trong quy trình. Bằng cách đó, bạn có thể thực hiện một kiểu chuyền chỉ liên quan đến bố cục và định vị. Sau đó, khi các phó tế trở nên giàu có và hoàn thiện hơn. Lấy một CSS khác để xuất hiện và các thuộc tính phong cách khác. Ít nhất điều này giúp bạn không phải tập trung vào mọi thứ cùng một lúc.

Tôi đang đối mặt với một vấn đề tương tự. Tôi có ý tưởng rằng các công cụ như Greasemonkey hoặc Tampermonkey có thể được sử dụng cho mục đích đó. Mới tuần trước, tôi đã hỏi ý kiến ​​về ý tưởng này: Làm thế nào để thuê ngoài UI của một ứng dụng Web động? , nhưng không nhận được phản hồi thỏa đáng.

Với những công cụ này, bạn có thể đưa CSS, HTML và Javascript vào một trang. Theo ý tưởng của tôi, bạn cung cấp URL của trang web đang hoạt động cho nhà thiết kế và mong đợi các tập lệnh Greasemonkey được trả lại. Về mặt lý thuyết, bạn sẽ có thể tích hợp những thứ đó rất nhanh vào trang web hiện có. Theo cách này, công việc của người thiết kế là viết HTML và CSS và làm cho trang web thực sự hoạt động. Điều này đòi hỏi nhiều kỹ năng lập trình hơn về phía nhà thiết kế mặc dù.

Tôi biết rằng ý tưởng này đòi hỏi nhiều công phu. Nhưng tôi chưa thử điều đó và không biết có ai khác đang làm điều này không. Có thể có một số vấn đề với việc thực hiện.