Lời khuyên cho việc tạo ra một đồ họa chất lỏng và đáp ứng


7

Vì vậy, tôi đang tạo một trang web hoàn toàn đáp ứng, với mục đích sử dụng càng ít truy vấn phương tiện và số ma thuật càng tốt. Tôi đã tìm thấy sau một số lần thử, rằng sử dụng nội dung để tạo bố cục cho đến nay là cách hành động tốt nhất.

Khách hàng của tôi đã yêu cầu trình chiếu hình ảnh / băng chuyền để hiển thị nổi bật trên trang chủ và có thể tất cả các trang chính. Tôi đã tạo ra một bố cục hoạt động và họ hài lòng với nó. Bạn có thể xem nó ở đây .

Bây giờ tôi có một thử thách mới, làm cách nào để tạo một trình chiếu bắt mắt, đáp ứng với mức trung bình và trông ổn? Hãy để tôi mở rộng ..

Tôi có một vài ràng buộc, đó là một gánh nặng nhiều hơn là một sự giải thoát trong trường hợp này.

  • Hình ảnh phải có chiều cao 400px.
  • Chiều rộng có thể là bất cứ thứ gì từ 300px - 2000px.
  • Tôi có thể tạo một vài lớp, tùy thuộc vào chi tiết của chúng, có thể được di chuyển bởi chính trang web để đáp ứng với kích thước màn hình.
  • Các hình ảnh và thiết kế có thể sẽ giữ nguyên trong một thời gian dài, trong khi văn bản sẽ thay đổi khá thường xuyên.

Vì vậy, những gì tôi hiện đang nghĩ và cố gắng là:

Sử dụng hình nền với liên kết trực tiếp đến chủ đề và một hoặc hai hình ảnh loại clip nghệ thuật thú vị và có liên quan có thể được thả nổi xung quanh tùy thuộc vào kích thước màn hình.

Sau đó cho phép văn bản tự định vị, với sự trợ giúp của lề / phần đệm và truy vấn phương tiện.

Tại thời điểm chỉnh sửa này, tôi đã thực hiện tùy chọn dễ dàng, an toàn và nhàm chán bằng cách sử dụng các bức ảnh rộng, rõ ràng.

Tôi đang tìm kiếm lời khuyên về cách tiếp cận cần thực hiện khi được giao nhiệm vụ tạo đồ họa đáp ứng với phương tiện mà chúng được hiển thị.

Các câu hỏi gốc (không phải vậy) liên quan đến điều này:

Một màu, gradient đơn giản hoặc nền rất mịn sẽ tốt hơn một mẫu lặp lại hoặc một mẫu có chi tiết?

Làm cách nào tôi có thể tạo một mẫu lặp lại phù hợp với và phù hợp với chủ đề và thiết kế?

Nếu tôi sử dụng một hình ảnh nền trước nổi, bạn có nghĩ rằng nó phải trông thật, như trong clip không?

Các chủ đề tốt hơn để xem xét:

  • Từ quan điểm thiết kế (tôi biết khía cạnh kỹ thuật), tôi có thể sử dụng những điều kiện nào để quyết định làm thế nào để tăng tỷ lệ văn bản lên / xuống mà vẫn trông ổn? I E. văn bản không nên lớn hơn một kích thước nhất định tùy thuộc vào chiều rộng của thùng chứa của nó?
  • Những loại hình ảnh là tốt nhất cho một nền với chiều rộng rất khác nhau? Tôi đoán là hình ảnh có một điểm quan tâm duy nhất với một số chi tiết không quan trọng trong suốt phần còn lại của hình ảnh
  • Những điều quan trọng nhất để xem xét liên quan đến bản chất không trộn / nổi của hình ảnh và văn bản nền trước là gì? (khoảng trắng, gói và bất cứ thứ gì khác?)

Bất kỳ bài viết blog, bài viết hoặc báo cáo liên quan đến điều này đều được chào đón và đánh giá rất cao.


Câu hỏi này là quá rộng cho bất kỳ trang web trao đổi ngăn xếp. Bạn đang nói với chúng tôi rằng bạn hiểu cách xây dựng một trang web đáp ứng, ít nhất là bạn hiểu mã hóa nó, nhưng về cơ bản, bạn đang hỏi chúng tôi "Tôi bắt đầu từ đâu?". Trong đó, tôi cũng thấy "Làm cách nào tôi có thể tạo một mẫu lặp lại phù hợp và phù hợp với chủ đề và thiết kế?", Điều này không giống với câu hỏi "Làm thế nào để tôi làm web, hoặc thiết kế đồ họa, thiết kế?". Tốt nhất câu hỏi này sẽ trở thành một danh sách các mẹo linh tinh cho thiết kế đáp ứng. Tôi nghĩ rằng tốt hơn hết là bạn nên đọc nhiều hơn vào thiết kế đáp ứng, sau đó chia nhỏ câu hỏi của bạn.
Eric

Hiểu. Các dự án đáp ứng có các yếu tố then chốt trong hợp đồng của tôi trong năm qua; nhưng tôi nghĩ rằng bạn có quá nhiều câu hỏi được đóng gói thành một.
Eric

Câu trả lời:


4

Mới sáng nay, Tạp chí Smashing đã đăng một bài viết về việc tập trung vào một phần của hình ảnh khi chia tỷ lệ cho thiết bị di động: Chọn Giải pháp hình ảnh đáp ứng (cuộn xuống phần "Vấn đề định hướng nghệ thuật"). Với hình ảnh con đường trên trang web của bạn, bạn muốn chắc chắn hiển thị con đường, trái ngược với những cái cây, khi thu nhỏ lại vì con đường củng cố ý tưởng "Chúng ta đang trên đường."

Một màu, gradient đơn giản hoặc nền rất mịn sẽ tốt hơn một mẫu lặp lại hoặc một mẫu có chi tiết?

Nó phụ thuộc vào các yếu tố khác trên trang. Nếu bạn đang sử dụng hình ảnh nền trước, việc dán vào một nền màu duy nhất không cạnh tranh với ảnh sẽ cho phép mắt tự nhiên tập trung vào hình ảnh nền trước.

Làm cách nào tôi có thể tạo một mẫu lặp lại phù hợp với và phù hợp với chủ đề và thiết kế?

Một mô hình lặp lại của một hộp sẽ củng cố khái niệm di chuyển và lưu trữ.

Nếu tôi sử dụng một hình ảnh nền trước nổi, bạn có nghĩ rằng nó phải trông thật, như trong clip không?

Clip nghệ thuật có thể là khó khăn. Có một số hình ảnh vector được thiết kế tốt và minh họa rastor sẽ đủ điều kiện là clip art nhưng vẫn được thực hiện trang nhã. Nếu bạn đã sử dụng một định dạng SVG, nó sẽ mở rộng tốt trên các thiết bị hiển thị võng mạc. Chỉ cần chắc chắn rằng hình ảnh bạn chọn là tốt và phù hợp với tâm trạng bạn đang tạo ra. Tôi có thể tưởng tượng một bản vẽ đẹp của các hộp trông sẽ đẹp, nhưng tôi cũng có thể tưởng tượng clip nghệ thuật kém chất lượng sẽ trông xấu. Nếu bạn không chắc chắn, ảnh thường là một lựa chọn an toàn.

Từ quan điểm thiết kế (tôi biết khía cạnh kỹ thuật), tôi có thể sử dụng những điều kiện nào để quyết định làm thế nào để tăng tỷ lệ văn bản lên / xuống mà vẫn trông ổn? I E. văn bản không nên lớn hơn một kích thước nhất định tùy thuộc vào chiều rộng của thùng chứa của nó?

Đối với ba khối văn bản nằm ngang của bạn, tôi sẽ chỉnh kích thước và đệm chúng sao cho bạn có 4-5 từ trên mỗi dòng. Khi bạn xuống kích thước di động hoặc các cửa sổ thực sự hẹp, tôi sẽ thay đổi màn hình thành chặn để mỗi khối văn bản chiếm một hàng riêng.

Kiểm tra các bài viết này:

Những loại hình ảnh là tốt nhất cho một nền với chiều rộng rất khác nhau? Tôi đoán là hình ảnh có một điểm quan tâm duy nhất với một số chi tiết không quan trọng trong suốt phần còn lại của hình ảnh

Tôi đồng ý. Các bức ảnh tập trung vào một khu vực với phần còn lại của hậu cảnh ít nổi bật hoặc mờ hơn (các nhiếp ảnh gia gọi đó là "hiệu ứng nhòe") sẽ hoạt động tốt ở đây. Cũng tham khảo hình ảnh cây trong bài viết tạp chí Smashing tôi liên kết ở trên.

Những điều quan trọng nhất để xem xét liên quan đến bản chất không trộn / nổi của hình ảnh và văn bản nền trước là gì? (khoảng trắng, gói và bất cứ thứ gì khác?)

Các hình ảnh ở đó để củng cố văn bản. Văn bản là yếu tố quan trọng nhất, vì vậy bạn muốn chắc chắn rằng hình ảnh được đặt trong khả năng hỗ trợ. Văn bản phải nổi bật nhưng không chặn phần quan trọng của hình ảnh.

Sự gần gũi là chìa khóa. Văn bản phải gần với hình ảnh và cách xa các hình ảnh khác. Nếu bạn có hình ảnh 1 với một số văn bản bên dưới nó, bạn muốn có ít không gian hơn giữa hình ảnh và văn bản hỗ trợ so với bạn có giữa văn bản đó và hình ảnh tiếp theo. Ví dụ: giả sử bạn có hình ảnh 1 với văn bản bên dưới nó, sau đó hình ảnh 2 bên dưới và nhiều văn bản bên dưới hình ảnh 2. Bạn muốn có nhiều khoảng trắng giữa chú thích cho hình ảnh một và đỉnh hình ảnh 2 hơn bạn ' d có giữa hình ảnh 1 và chú thích của nó.

Một cuốn sách tuyệt vời về chủ đề này là Sách thiết kế của những người không phải là nhà thiết kế

Ngoài ra, hãy xem Hướng dẫn của Nhà phát triển Apple về Nguyên tắc tương tác: Nguyên tắc giao diện con người . Rất nhiều thứ tốt ở đây.


Câu trả lời tuyệt vời!
Yisela

4

Các tùy chọn có vẻ đơn giản.

  • Sử dụng nhiều kích thước hình ảnh, mỗi kích thước được gọi thông qua truy vấn phương tiện, để khớp với 4 kích thước màn hình cơ bản.
  • Sử dụng thuộc background-size:tính để tự động thay đổi bất kỳ hình nền
  • sử dụng thuộc overflow: hidden;tính để chỉ ẩn các hình ảnh lớn hơn trong div khi chiều rộng trang giảm. Điều này sẽ yêu cầu bạn ghi nhớ những gì IS hiển thị ở các độ rộng trang khác nhau.

Những câu hỏi bạn hỏi có phần mơ hồ .... nhưng ....

Một màu, gradient đơn giản hoặc nền rất mịn sẽ tốt hơn một mẫu lặp lại hoặc một mẫu có chi tiết?

Phụ thuộc nhiều vào mô hình. Nếu đó là một mẫu tinh tế không cạnh tranh trực quan với văn bản ở trên nó, thì một mẫu có thể hoạt động. Tôi muốn nghiêng về một màu rắn hoặc độ dốc tinh tế mặc dù. Màu sắc đơn giản sẽ làm cho văn bản dễ đọc hơn.

Làm cách nào tôi có thể tạo một mẫu lặp lại phù hợp với và phù hợp với chủ đề và thiết kế?

Đó là cuộc gọi của bạn. Bạn đang yêu cầu người khác thiết kế một cái gì đó cho bạn?

Nếu tôi sử dụng một hình ảnh nền trước nổi, bạn có nghĩ rằng nó phải trông thật, như trong clip không?

Một lần nữa, đó là giữa bạn và khách hàng. "Tâm trạng" hoặc "thông điệp" được truyền tải bởi trang web sẽ xác định phong cách của hình ảnh sẽ được sử dụng.

Từ quan điểm thiết kế (tôi biết khía cạnh kỹ thuật), tôi có thể sử dụng những điều kiện nào để quyết định làm thế nào để tăng tỷ lệ văn bản lên / xuống mà vẫn trông ổn? I E. văn bản không nên lớn hơn một kích thước nhất định tùy thuộc vào chiều rộng của thùng chứa của nó?

Tính nhất quán là tốt nhất cho thiết kế. Tính nhất quán cho vay một ấn tượng của sự ổn định. Nếu khối văn bản đầu tiên là một dòng văn bản, tôi sẽ thử và bám vào một dòng văn bản duy nhất cho tất cả các khối văn bản tiếp theo. Chiều rộng có thể thay đổi một chút, nhưng việc di chuyển tạo thành một dòng văn bản duy nhất thành nhiều dòng văn bản sẽ cần các yếu tố di chuyển. Khi các yếu tố di chuyển, bạn mất cảm giác nhất quán.


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.