Khái niệm phát triển web Tất cả các nhà thiết kế web nên hiểu

Có rất nhiều điều để nói về sự phân chia được tìm thấy giữa các nhà thiết kế và nhà phát triển. Cấp có nhiều nhà thiết kế / nhà phát triển lai có thể hiểu cả hai mặt của đồng tiền, nhưng chúng cách nhau rất xa.

Dự án sáng tạo phát triển mạnh giao tiếp đúng. Tuy nhiên, điều này có thể khó khăn khi các nhà thiết kế và nhà phát triển không chắc chắn về cách nói chuyện với nhau. Tôi không nghĩ các nhà thiết kế cần biết cách viết JavaScript phù hợp, cũng như các nhà phát triển không nên thành thạo lựa chọn kiểu chữ. Nhưng có một số chủ đề cơ bản mà tôi nghĩ đi cả hai chiều.

Các chủ đề sau đây là của riêng tôi ý tưởng phát triển web quan trọng mà tất cả các nhà thiết kế nên hiểu. Là một nhà thiết kế / nhà phát triển, tôi biết làm thế nào khó hiểu khi nghiên cứu cả hai lĩnh vực. Nhưng nó luôn đáng để nỗ lực học hỏi bởi vì sự hiểu biết rõ ràng giúp cải thiện giao tiếp và làm cho một nhà thiết kế có giá trị hơn nhiều đối với một đội ngũ sáng tạo.

Hành vi mã Frontend

Các nhà thiết kế web thường được cho là có kỹ năng frontend cùng với tài năng thiết kế của họ. Đây là một chủ đề tranh luận sôi nổi, chủ yếu là vì có không có câu trả lời đúng.

Nhà thiết kế nên làm những gì họ thoải mái với. Nếu điều đó có nghĩa là chỉ làm công việc thiết kế trực quan, thì nó cũng vậy. Tuy nhiên, một sự hiểu biết ngắn gọn về các công nghệ frontend có thể làm cho cùng một nhà thiết kế trực quan hơn khi tạo tài sản cho nhà phát triển.

Tôi tin rằng mọi nhà thiết kế ít nhất nên hiểu ba ngôn ngữ cơ bản của phát triển frontend (HTML, CSS và JS) cùng với cách chúng được sử dụng. Ví dụ: hầu hết các menu thả xuống đều dựa vào JavaScript nhưng cũng có các lựa chọn thay thế chỉ CSS.

Khi một nhà thiết kế đang tạo một menu thả xuống, họ có thể nghĩ về sự phức tạp của việc thực hiện nó thông qua mã. Một nhà thiết kế hiểu được các yếu tố nào yêu cầu JavaScript có thể được chuẩn bị tốt hơn để hiểu những gì họ yêu cầu các nhà phát triển xây dựng.

Điều này là khả thi không cần học viết một dòng mã.

CSS được tạo ra để phong cách trang web. Nó chủ yếu là tĩnh ngoài hoạt hình CSS và CSS tạo ra phần lớn hình ảnh trên một trang. Tính năng động nhất được tạo bằng JavaScript.

Nếu bạn có thể hiểu sự phân chia này, nó sẽ thổi một nỗ lực có ý thức vào công việc thiết kế. Nó cũng sẽ buộc các nhà thiết kế chuyển động UX xem xét có bao nhiêu công việc đi vào hoạt hình một giao diện.

Kỹ thuật đáp ứng

Mỗi nhà thiết kế web ít nhất nên biết thuật ngữ thiết kế đáp ứng. Điều này cho phép các trang web để thích ứng với các kích cỡ màn hình khác nhau, cho mỗi một bố cục khác nhau thuộc về. Kích thước thiết bị khi bố trí mới được áp dụng là được xác định bởi các điểm dừng, đã thêm vào (một trong) tệp CSS.

Điểm dừng được chỉ định bởi một chiều rộng pixel nhất định (và / hoặc đôi khi chiều cao), tối thiểu hoặc tối đa, tại đó bố cục điều chỉnh để phù hợp với kích thước màn hình đó. Vì vậy, bố cục phản hồi sẽ trông khác trên màn hình 1080px so với trên điện thoại thông minh 320px.

Để xem cách các điểm dừng hoạt động trên các trang web thực, hãy xem trang web Media Queries.

Công việc của bạn là người thiết kế là xem xét mỗi điểm dừng có thể như thế nào ảnh hưởng đến mockup. Bạn có thể được giao nhiệm vụ thiết kế một vài comps, mỗi comps phù hợp với kích thước màn hình khác nhau.

Khi bạn đã hiểu rằng điểm dừng CSS xác định các điều kiện khi bố cục thay đổi, bạn sẽ có thời gian dễ dàng hơn khi phân phối các tài sản này cho nhóm nhà phát triển.

Nghĩ mô-đun với thiết kế

Nhà phát triển luôn muốn sử dụng lại mã càng nhiều càng tốt, vì cách tiếp cận này làm cho sự phát triển ít dài dòng và cắt giảm kích thước tập tin - thực tế nó là một kỹ thuật tối ưu hóa mã quan trọng.

Thiết kế mô-đun mô tả một phương pháp tạo trang web ra khỏi “mô-đun” đó có thể là tái sử dụng theo thời gian. Nghĩ các nút, đầu vào mẫu, kiểu tiêu đề hoặc chuỗi khối với kiểu dáng lạ mắt.

nếu bạn yếu tố thiết kế theo mô-đun, nó trở nên dễ dàng hơn cho các nhà phát triển để mã hóa bố cục với các lớp CSS có thể sử dụng lại. Luôn luôn là một ý tưởng tốt để suy nghĩ về nơi bạn có thể tái sử dụng hợp lý cùng màu sắc, họa tiết và các yếu tố trang, tuy nhiên bạn cần phải thông minh về nó không làm hại thẩm mỹ tổng thể.

Nó thậm chí còn tốt hơn nếu bạn chú thích những yếu tố nào bạn đã sao chép trên các mockup khác nhau, để các nhà phát triển có thể đánh dấu các phần này của trang web bằng mã lặp lại - làm cho sự phát triển nhanh hơn và đơn giản hơn.

Thiết kế mô-đun liên quan đến thiết kế nguyên tử, cả hai cách tiếp cận đều hướng đến các nhà phát triển. Tuy nhiên hình dung có thể giúp bạn hiểu cách mã hoạt động, vì vậy nếu bạn đang vật lộn để trực quan hóa thiết kế mô-đun kiểm tra bài này để xem một vài ví dụ.

Hiểu hình ảnh võng mạc & SVG

Thông thường, công việc của nhà thiết kế là chuẩn bị hình ảnh, chụp bất kỳ ảnh cần thiết nào và thiết kế các biểu tượng từ đầu. Điều này có nghĩa là các nhà thiết kế chỉ chịu trách nhiệm cho cung cấp các tài sản trực quan mà các nhà phát triển cuối cùng mã vào bố trí. Đây là lý do tại sao nó quan trọng để hiểu kích thước võng mạc và để vượt qua các tài sản được hỗ trợ võng mạc cho các nhà phát triển cùng với (các) mockup cuối cùng.

Tôi rất muốn giới thiệu bài đăng trên Tạp chí Smashing này nếu bạn muốn tìm hiểu thêm về quy trình thiết kế võng mạc. Retinize Đây là một bộ sưu tập các hành động Photoshop miễn phí có thể tự động tạo phiên bản võng mạc tài sản của bạn.

Hầu hết các nhà thiết kế đã biết để hỗ trợ @ Hình ảnh 2 lần, nhưng các thiết bị iPhone 6+ mới hơn có @ Độ phân giải 3x. Tuy nhiên, một số dự án không bận tâm với kích thước hình ảnh @ 3x, vì vậy hãy nói chuyện với lãnh đạo dự án của bạn trước khi hoàn tất bất kỳ tài sản nào.

Một điều cuối cùng cần xem xét là sự tiến bộ của SVG trên web Tất cả các trình duyệt hiện đại đều hỗ trợ SVG, một định dạng hình ảnh dựa trên vector. Điều này có nghĩa là các biểu tượng SVG sẽ tự động mở rộng quy mô mà không giảm chất lượng, vì vậy bạn không cần tài sản võng mạc cho đồ họa SVG.

Mặc dù vậy, không phải tất cả các nhóm sáng tạo đều sẵn sàng đồng hành với SVGs để thiết kế web. Chúng được hỗ trợ bởi các trình duyệt chắc chắn, nhưng trong một số trường hợp, chúng cũng có thể khó thực hiện. Đây là lý do tại sao truyền thông là quan trọng cho một mối quan hệ nhà thiết kế / nhà phát triển thành công.

Thảo luận về những ưu và nhược điểm của việc sử dụng đồ họa vector và quyết định bất cứ điều gì hoạt động tốt nhất cho từng dự án. Chỉ cần hiểu rõ về các tính năng này, bạn sẽ có thể giao tiếp với các nhà phát triển một cách rõ ràng và thậm chí giúp họ viết mã bố cục cho hỗ trợ võng mạc.

Hiểu khả năng tiếp cận

Tăng cường tiến bộ và thoái hóa biến chất là hai cách khác nhau để xử lý cùng một vấn đề: khả năng tiếp cận. Không phải tất cả người dùng sẽ ở trên thiết bị hoặc chạy trình duyệt hỗ trợ 100% tính năng động của trang web.

Những người dùng này vẫn sẽ nhận được một kinh nghiệm làm việc, và điều này cần phải được xử lý với mã hóa thích hợp. Một số trình đọc màn hình có thể bỏ qua tất cả mã JavaScript và CSS, nhưng trang web vẫn cần hoạt động.

Gần đây tôi đã làm một bài đăng tăng cường tiến bộ chi tiết, vì đó là phương pháp phát triển ưa thích của tôi. Tăng cường tiến bộ bắt đầu với những tính năng rất cơ bản, sau đó làm việc lên đến nhiều hơn “nâng cao” Tính năng, đặc điểm.

Thoái hóa biến chất là cách tiếp cận ngược lại Ở đâu tất cả các tính năng chính được thiết kế đầu tiên, sau đó, nhà phát triển quyết định cách xử lý các tính năng này nếu người dùng không hỗ trợ JavaScript hoặc CSS.

Không chắc rằng một nhà thiết kế sẽ được yêu cầu thực hiện các mô hình cho bất kỳ tình huống nào trong số này. Nhưng điều quan trọng là các nhà thiết kế phải hiểu các thuật ngữ này và ý nghĩa của chúng, bởi vì chúng làm ảnh hưởng đến quá trình phát triển. Điều này đặc biệt đúng đối với các dự án mà khả năng tiếp cận là mối quan tâm lớn.

Đang đóng

Có một số chủ đề tôi bỏ qua vì tôi coi chúng là tùy chọn. Kiểm soát phiên bản, xử lý lỗi và hoạt ảnh JavaScript là một vài chủ đề phức tạp hơn mà các nhà thiết kế có thể muốn tìm hiểu sâu.

Nhưng sự thật, các điểm được đề cập trong bài đăng này sẽ nhiều hơn giúp các nhà thiết kế hiểu được các yêu cầu của một nhóm phát triển. Chỉ cần lướt qua bề mặt phát triển web, bạn sẽ thấu hiểu Điều đó sẽ giúp bạn truyền đạt ý tưởng và thông cảm với các vấn đề xảy ra trong quá trình sản xuất.

Nếu bạn đang tìm kiếm nhiều nội dung liên quan hơn, hãy xem những bài viết này:

• Làm thế nào để giao tiếp hiệu quả với các nhà phát triển (smashingmagazine.com)
• Giúp các nhà thiết kế và phát triển học cách hiểu nhau (uie.com)
• Học cách viết mã mang đến cho bạn những lợi thế như một nhà thiết kế UX (jessicaivins.net)