Có một lợi thế nào khi thực hiện một bản mô phỏng hình ảnh đầy đủ so với việc lao thẳng vào viết HTML / CSS không?

Trong quá khứ, nhiều công ty và nhà thiết kế web có một quy trình làm việc gồm hai hoặc ba phần, tối thiểu - thiết kế, đánh dấu, phụ trợ. Đây là những khái quát và các dòng có thể mờ đi một chút ... nhưng tôi chắc chắn bạn sẽ hiểu ý chính của mình.

Thường thì người thiết kế web là "chỉ trực quan" và sẽ chỉ chịu trách nhiệm xây dựng một mockup rất chi tiết trong phần mềm chỉnh sửa hình ảnh, chẳng hạn như Photoshop hoặc Fireworks. (Các) mockup sẽ hiển thị mọi khía cạnh có thể có của một trang web từ màu sắc và lựa chọn loại, đến hình nền, biểu tượng, hình ảnh và các hình ảnh khác sẽ được sử dụng. Nhưng "nhà thiết kế" không bao giờ quan tâm đến việc thực hiện và thi công thực tế. Họ chỉ tập trung vào vẻ bề ngoài.

Khi thiết kế đã được phê duyệt (bằng cách xem xét các tệp hình ảnh này), giai đoạn hai đã được thực hiện - chuyển (các) tệp hình ảnh sang HTML / CSS trực tiếp.

• Trong môi trường một chỗ ngồi hoặc tự do, nhà thiết kế web có thể đã sử dụng các lát và xuất sang HTML thông qua một số tùy chọn ứng dụng nội bộ. Trong các trường hợp hiếm hoi , nhà thiết kế có thể xây dựng các khung trang HTML / CSS cơ bản.

• Trong một số môi trường doanh nghiệp, các mockup này sẽ vẫn ở dạng tệp hình ảnh được xếp lớp (.sheet, .png [cho Pháo hoa]) cho nhà thiết kế web và nhà thiết kế sẽ không bao giờ lo lắng về việc thực hiện bất kỳ đánh dấu hoặc mã nào. "Nhà thiết kế" không bao giờ phải quan tâm đến cách xây dựng HTML hoặc CSS để thực hiện mô hình hình ảnh này mà họ đã tạo. Các tệp hình ảnh đã / được trao cho một "nhà phát triển", người sau đó chịu trách nhiệm xây dựng HTML / CSS khớp với tệp hình ảnh.

Tôi tưởng tượng một số vẫn còn rất nhiều công việc theo cách này. Tuy nhiên, với những tiến bộ trong ngôn ngữ đánh dấu, cụ thể là CSS3 và các cải tiến hỗ trợ trình duyệt - trong nhiều trường hợp, việc dành thời gian cẩn thận để xây dựng một đại diện raster của một trang web đầy đủ có thể phần lớn vô dụng trong nhiều trường hợp.

Với đánh dấu hiện tại, rất dễ thực hiện nhiều nhu cầu thiết kế web trực tiếp thông qua HTML / CSS và việc sử dụng ứng dụng hình ảnh bị hạn chế trong việc tạo tài sản hình ảnh nhỏ hoặc ảnh có thể cần thiết. (Các thư viện và / hoặc các mẫu như Bootstrap đã tiếp tục thúc đẩy khái niệm này.)

Trong công việc riêng của tôi, tôi đã đặc biệt di chuyển đi từ mockups trang đầy đủ trừ khi chúng được đặc biệt yêu cầu. Tôi làm điều này để cải thiện tốc độ thiết kế và đảm bảo rằng những gì được phê duyệt gần với những gì cuối cùng sẽ được hiển thị trong trình duyệt. Trên thực tế, tôi đã không tạo ra một mockup toàn trang trong một số năm. Nhưng tôi biết vẫn còn quy trình làm việc bằng phương pháp này.

Có bất kỳ lợi ích thực sự nào khi xây dựng các mô hình trang đầy đủ trong ứng dụng chỉnh sửa hình ảnh trước khi đi sâu vào HTML / CSS để thiết kế xây dựng không?

Lợi ích của việc xây dựng các mockup toàn trang là phân công lao động.

Trong các công ty lớn hơn có cả nhà thiết kế và nhà phát triển (mặt trước), công việc của nhà thiết kế là thiết kế và công việc của nhà phát triển là viết mã .

Có bộ phận này cho phép nhà thiết kế dành toàn bộ thời gian của họ để làm việc về giao diện, cảm nhận và giao diện cho trang web và không phải biết bất cứ điều gì về cách nó được tạo ra. Họ có thể tạo ra thiết kế chất lượng cao hơn và suy nghĩ thông qua các quyết định lâu hơn vì họ không làm việc để lấy mã để làm những gì họ muốn cùng một lúc.

Nó cũng cho phép nhà phát triển viết thêm mã bằng cách không phải suy nghĩ về bất kỳ mã nào sẽ trông bao gồm các chi tiết nhỏ và trạng thái khác nhau. Họ thực hiện thiết kế tốt nhất có thể trong thời gian nhất định và có thể chuyển sang dự án khác.

Nếu nhà thiết kế cũng là nhà phát triển, tôi nghĩ hầu hết mọi người ít nhiều bắt đầu sát cánh với bạn ở chỗ họ tạo ra một sản phẩm thô hơn và lặp lại nhanh chóng để kiểm tra mọi thứ. Điều này cho phép các ý tưởng được kiểm tra nhanh chóng, trái ngược với việc tạo ra một tài liệu photoshop hoàn hảo pixel.

Tuy nhiên, thiết kế thô, lặp không có mã cũng là một cách tiếp cận hợp lệ và cực kỳ hữu ích, đặc biệt là cho bố cục và quy trình làm việc. Ngôn ngữ đánh dấu và công nghệ mới đã không phát minh ra cách làm việc nhanh chóng với những ý tưởng thô sơ :)

Tôi sẽ chọn Guffa với câu trả lời này. Để rõ ràng, tôi không cố gắng để Guffa ra ngoài, nhưng thay vào đó, các điểm gạch đầu dòng là những điểm rất phổ biến tôi nghe thấy. Tôi cũng muốn cung cấp một số điểm phản biện. Tôi không nói Guffa sai và tôi đúng. Tôi chỉ đang cung cấp một đối trọng.

1. Phần sáng tạo của quy trình thiết kế bị ảnh hưởng nếu dành thời gian cố gắng tìm ra cách thực hiện những điều khác nhau trong HTML và CSS.

Điều này đúng nếu người ta không coi mã là sáng tạo. Photoshop và HTML / CSS / JS đều là phương tiện để một nghệ sĩ làm việc. Cũng giống như một bức vẽ sáng tạo như than, vì vậy Photoshop có thể sáng tạo như một phương tiện như HTML / CSS / JS.

Và lợi ích lớn của việc làm việc trực tiếp trong HTML / CSS / JS là tính đa chiều của nó. Photoshop, vào cuối ngày, là một bức tranh phẳng. HTML / CSS / JS là một khung vẽ động với tính trôi chảy, tương tác, hoạt hình, v.v.

Tóm lại, tôi cho rằng mã là phương tiện sáng tạo hơn trong trường hợp này.

2. Khi các nhà thiết kế và lập trình viên là những người khác nhau, ngay cả khi các nhà thiết kế khá giỏi về HTML và CSS, họ hiếm khi thực sự giỏi về mã hóa. Kết quả sẽ là (ở các mức độ khác nhau) mã không hiệu quả bị cồng kềnh và khó duy trì.

Đáng buồn thay, điều ngược lại là điều tôi thường gặp phải: Hầu hết các nhà phát triển làm việc trong các vai trò chuyên dụng làm việc trong tổ chức lớn hơn (trong đó vai trò chuyên dụng là chuẩn mực hơn) và do thiếu kiến ​​thức liên ngành ( và thường là thiếu hoàn toàn mã lớp trình bày) làm cho một số mã khó hiểu nhất trở nên khó duy trì mã mặt trước mà tôi từng thấy.

Quan điểm, tôi sẽ không xem xét khả năng thiết kế hình ảnh của một người bất kỳ dấu hiệu nào về khả năng mã hóa của họ. Tôi sẽ tiến thêm một bước và lập luận rằng một nhà tổng quát tài năng biết thiết kế và mã hóa - ngay cả khi họ không phải là nhà thiết kế giỏi nhất hoặc lập trình viên giỏi nhất, thường có thể tạo ra một sản phẩm tổng thể tốt hơn so với nhóm tách biệt đơn giản là do thực tế rằng họ có thể nhìn thấy bức tranh lớn hơn khi họ tạo ra. Ít hơn rất nhiều bị mất trong dịch thuật.

3. Nếu bạn bắt đầu viết mã trước khi bạn có một cái nhìn rõ ràng về thiết kế sẽ trông như thế nào, bạn sẽ đưa ra các lựa chọn không xác định về cách xây dựng mã. Rủi ro là nó sẽ làm cho mã tồi tệ hơn, và hạn chế các khả năng cho thiết kế.

Nhưng thiết kế theo mã không có nghĩa đó là mã sản xuất của bạn. Tôi đã làm việc trên các dự án trong đó hầu hết các mã chúng tôi tạo ra hoàn toàn dành cho thiết kế và sau đó thực hiện một số nguyên mẫu. Sau khi hoàn thành, chúng tôi sẽ viết lại. Điều này có thêm lợi ích là chúng tôi có thể tìm thấy rất nhiều 'gotchas' trong vòng mã hóa đầu tiên.

4. Mã HTML và CSS có thể thay đổi khá nhiều với những thay đổi nhỏ trong thiết kế, điều này sẽ làm cho quá trình thiết kế trở nên tĩnh hơn. Bạn có nguy cơ giới hạn bản thân mình chỉ những thay đổi dễ thực hiện trong mã.

Đối số cho điều đó là nhà thiết kế đang tự giới hạn mình chỉ với những thay đổi dễ thực hiện trong Photoshop. Đó cũng không phải là một cuộc tranh luận tốt.

Lý do duy nhất để không thực hiện một mockup Photoshop trước tiên là nếu nhà thiết kế không hiểu các giới hạn của mã. Bạn không bao giờ muốn đưa cho khách hàng một bản tổng hợp những thứ mà họ không thể có trong trận chung kết.

Miễn là PSD đại diện cho thứ gì đó có thể được sao chép khá chặt chẽ trong CSS / HTML (đưa ra các giới hạn đa trình duyệt và đa phương tiện), tôi sẽ làm điều đó trong Photoshop (hoặc InDesign - tôi biết một vài nhà thiết kế sáng tác trong đó). Nó nhanh hơn và dễ dàng hơn nhiều để thao tác với hình ảnh. Giả lập CSS với tôi sẽ là mã hóa trước khi tôi viết mã, nếu điều đó có ý nghĩa.

Có một số lý do để giữ cho phần tử thiết kế tách biệt với phần tử tạo mã, ví dụ:

• Phần sáng tạo của quy trình thiết kế bị ảnh hưởng nếu dành thời gian cố gắng tìm ra cách thực hiện những điều khác nhau trong HTML và CSS.

• Khi các nhà thiết kế và lập trình viên là những người khác nhau, ngay cả khi các nhà thiết kế khá giỏi về HTML và CSS, họ hiếm khi thực sự giỏi về mã hóa. Kết quả sẽ là (ở các mức độ khác nhau) mã không hiệu quả bị cồng kềnh và khó duy trì.

• Nếu bạn bắt đầu viết mã trước khi bạn có một cái nhìn rõ ràng về thiết kế sẽ trông như thế nào, bạn sẽ đưa ra các lựa chọn không xác định về cách xây dựng mã. Rủi ro là nó sẽ làm cho mã tồi tệ hơn, và hạn chế các khả năng cho thiết kế.

• Mã HTML và CSS có thể thay đổi khá nhiều với những thay đổi nhỏ trong thiết kế, điều này sẽ làm cho quá trình thiết kế trở nên tĩnh hơn. Bạn có nguy cơ giới hạn bản thân mình chỉ những thay đổi dễ thực hiện trong mã.