Làm thế nào để các "Pros" thiết kế và mã các trang web?

Question

Làm thế nào để các nhà thiết kế web "pro" hiện đại nhất bắt đầu/thiết kế/mã hóa một trang web?

Tôi nhận ra rằng các kỹ thuật sẽ có phạm vi và khác nhau đáng kể, tôi chỉ đang tìm kiếm một số chiến thuật hoặc phương pháp tiếp cận vững chắc, dựa vào. Ví dụ, "Tôi biết hầu hết rút ra một thiết kế thô với khách hàng, sau đó đi vào photoshop và tạo ra nó, sau đó cắt nó lên, sau đó mã nó bằng tay ..." vv Rõ ràng là một câu trả lời không phải là một câu trả lời không phải là một câu trả lời. phải là cái chung này.

Tôi biết lập trình viên không phải lúc nào cũng là nhà thiết kế, nhưng tôi muốn nghe các cách tiếp cận điển hình từ cả hai phổ.

Tôi đang học thiết kế và mã hóa ngay bây giờ, và vấn đề chính của tôi là biết các phần, nhưng không phải là tổng của tất cả mọi thứ - không biết làm thế nào một "nghĩa vụ" để đi về việc tạo ra một chính thức, đa trang được phân trang.

Cảm ơn!

Answer 1

Tôi muốn thiết kế trang web/ứng dụng của mình từ dưới lên. Tức là, tôi bắt đầu bằng cách phân tích miền vấn đề và dịch nó thành một mô hình dữ liệu (ví dụ: một cơ sở dữ liệu SQL). Sau đó, tôi tạo lớp truy cập dữ liệu và logic nghiệp vụ trên đó, sau đó một số logic trình bày (thường là một số mã chung có thể gọi hàm logic nghiệp vụ và bơm dữ liệu đơn giản thông qua một số loại mẫu), và cuối cùng là các mẫu và bảng định kiểu xác định xem và cảm nhận.

Đối với thiết kế đồ họa thực tế; hoặc tôi tự làm điều đó, trong trường hợp này tôi có xu hướng viết HTML và CSS trực tiếp hoặc người khác làm điều đó cho tôi, phân phối HTML tĩnh mà tôi chuyển thành các mẫu.

Answer 2

Đây là một câu hỏi rất rộng, không có câu trả lời đơn giản và rõ ràng. Tuy nhiên, bạn đang đi đúng hướng. Tất cả bắt đầu và kết thúc với người dùng ... mục tiêu của họ là gì và họ dự kiến ​​đạt được mục tiêu của họ như thế nào? Họ có nên hoàn thành nhiệm vụ hoặc tìm thông tin không?

• Mỗi quá trình thiết kế bắt đầu bằng chiến lược . Hãy tự hỏi mình mục đích của trang web là gì và người dùng cần gì. Không có chiến lược rõ ràng, các dự án có nhiều khả năng thất bại hơn.
• Thứ hai, bạn xác định phạm vi của trang web. Những yêu cầu về nội dung và đặc điểm chức năng nào mà trang web có.
• Chuyển sang cấu trúc của trang web. Chúng tôi hiện đang quan tâm đến Kiến trúc thông tin (Ghi nhãn, Điều hướng, Tổ chức và Tìm kiếm) và Thiết kế tương tác. Trên thị trường có nhiều kỹ thuật và công cụ khác nhau để tìm hiểu cách người dùng liên kết nhãn với thông tin, như điều hướng và v.v. Các thử nghiệm ban đầu của người dùng có thể được thực hiện trong giai đoạn đầu này để xác minh rằng dự án đang đi đúng hướng.
• Khi tất cả những điều trên đã được thực hiện, thời gian của nó để bắt đầu vẽ trang web trên một mảnh giấy. Các yếu tố nhất định sẽ ở đâu và người dùng sẽ tương tác với trang web như thế nào. Bạn cũng có thể sử dụng công cụ vẽ như Balsamiq Mockup để tạo bộ xương.
• Cuối cùng, bạn triển khai bề mặt ; màu sắc, hình ảnh và mã hóa thực bắt đầu. Visualization diễn ra, và hy vọng nhiều thử nghiệm người dùng hơn.

Hãy nhớ rằng, thiết kế không phải là quá trình chuyển tiếp thẳng.Bạn phải lặp qua từng bước thiết kế, di chuyển lùi lại và chuyển tiếp giữa các lớp này, cho đến khi bạn có kết quả tốt.

Cuối cùng, thực hiện một số thử nghiệm của trang web nhắm mục tiêu đến đối tượng dự định. Kiểm tra người dùng tạo ra tất cả sự khác biệt.

Tham khảo và nhiều nội dung cần đọc: Jesse James Garrett: The Elements of User Experience.

Answer 3

Có một thế giới khác biệt giữa trang web và ứng dụng web. Rất nhiều khách hàng trang web không thực sự biết những gì họ muốn nói, họ chỉ muốn có một số hình thức hiện diện trên web. Tìm ra những nội dung để đưa vào đó thường là phần khó khăn.

Vì vậy, đối với trang web tôi bắt đầu với tính thẩm mỹ. Tôi thực hiện một mockup trong photoshop, và chỉ khi đó đã được phê duyệt tôi bắt đầu mã hóa nó trong html và đồng bằng css. Điều này làm cho mockup thứ hai, sau đó được đặt trước khách hàng một lần nữa. Sau đó, tôi bắt đầu viết bất kỳ logic đằng sau (nếu cần thiết, vì thường xuyên, tĩnh là đủ).

Đối với ứng dụng web, nó thường là một cách khác. Thông thường tôi không thực sự chịu trách nhiệm về ngoại hình ở đó, vì vậy chúng tôi bắt đầu với miền logic và thử nghiệm đơn vị. Sau khi chương trình phụ trợ được kiểm tra một cách chính xác, chúng tôi bắt đầu kích hoạt giao diện người dùng trên nó. Trên các ứng dụng này, tính thẩm mỹ thường lấy một chỗ ngồi trở lại chức năng, do đó, chế nhạo là ít quan trọng (trên các dự án của tôi ít nhất). Nó thường là tất cả các bảng và nút và comboboxes anyway, ngoại trừ quảng cáo tiêu đề.

Sau đó, một lần nữa, tôi không phải là nhà thiết kế chuyên nghiệp.