5 nguyên tắc vàng thiết kế Fullscreen Background cho web

Thứ hai - 28/12/2015 00:01

Bạn có muốn thu hút sự chú ý của người dùng website ngay từ cái nhìn đầu tiên? Chắc chắn câu trả lời là Có.

5 nguyên tắc vàng thiết kế Fullscreen Background cho web

Nếu vậy, hãy tập trung vào một phương pháp vô cùng hiệu quả, đó là sử dụng những hình nền toàn trang (fullscreen background) cho thiết kế web của mình. Nền toàn trang có hiệu quả hình ảnh vô cùng mạnh mẽ, mang lại ấn tượng đậm nét cho người dùng web ngay khi trang đang được load. Rất nhiều website đã lựa chọn phương án này để mang lại diện mạo hấp dẫn cho mình. 

Tuy vậy, để mang lại hiệu ứng tốt nhất với fullscreen background, bạn sẽ cần phải làm nhiều việc hơn là chỉ việc tải lên thiết kế của mình một bức ảnh đẹp. Trên thực tế, nếu bạn không chú ý đến một vài hướng dẫn quan trọng, fullscreen background của bạn có thể gây ra những vấn đề nghiêm trọng cho website.

5 Golden Tips For Creating Fullscreen Website Backgrounds

 Dưới đây là một số bí quyết để có được bức ảnh nền toàn trang hoàn hảo cho thiet ke: 

Chỉ sử dụng những bức ảnh chất lượng cao khổ lớn

Bất kể bạn dùng hình ảnh gì cho phần nền của thiết kế web, hãy đảm bảo rằng file mà bạn sử dụng có chất lượng tốt nhất. Với background của website, yêu cầu đặt ra là sử dụng file có kích thước đủ lớn để hiển thị mượt mà trên màn hình trong khi không làm hạn chế thời gian load trang do dung lượng file quá nặng. Như một nguyên tắc chung, độ phân giải 72 dpi (dots per inch) là đủ, xong bạn có thể để nó lên tới 96 dpi cũng được. Lời khuyên đưa ra với kích thước ảnh nền cho các trang là 1250×800 hoặc bất kỳ kích thước nào cao hơn nhưng phải cùng tỷ lệ.  

5 Golden Tips For Creating Fullscreen Website Backgrounds

Am hiểu về tương phản màu sắc

Nếu bức ảnh nền của bạn đã đủ tỏa sáng, bạn cũng đừng quên rằng nhiệm vụ của ảnh nền vẫn là làm nền và còn nhiều thành phần khác xuất hiện trên đó để người xem phải chú ý đến. Có một cách để đảm bảo phần còn lại của nội dung được hiển thị rõ ràng và dễ độc là sử dụng các màu sắc tương phản cho phần chữ và các nút bấm để chúng không bị nhấn chìm bởi background. 

5 Golden Tips For Creating Fullscreen Website Backgrounds

Sự cân bằng

Nếu fullscreen background chứa nhiều chi tiết nhỏ (như ảnh của một đám người, một bức ảnh phong cảnh thành phố, một nhóm các sản phẩm...) bạn sẽ muốn các nội dung bên trong bức ảnh và phần nội dung bên ngoài ảnh (navigation menu, chữ, ứng dụng, social media link và mọi thứ bạn có trên website) được cân bằng với nhau. Hãy bắt đầu bằng việc upload bức ảnh nền lên trước và sau đó mới đưa các thành phần khác của website lên lần lượt để kịp thời cân bằng một cách hài hòa tỷ lệ của chúng. 

5 Golden Tips For Creating Fullscreen Website Backgrounds

Làm việc với các hình khối

Một cách tuyệt vời để cân bằng nội dung với một nền toàn màn hình là sử dụng hình khối và banner để tạo thêm một lớp giữa nền và các nội dung trang web. Nếu bạn muốn thêm một đoạn chữ để làm giảm nhiễu của bức ảnh nền, hãy đưa chữ đó vào các hình khối và phủ màu lên đó. Cách làm này tạo sự tương phản tốt và cũng khiến cho thiet ke website của bạn trở nên gọn gàng, có trật tự và sắc nét.

5 Golden Tips For Creating Fullscreen Website Backgrounds

Kiểm tra khả năng hiển thị đa dạng

Không phải mọi khách truy cập website của bạn đều sử dụng chung một loại thiết bị hoặc chung một trình duyệt web. Là một chuyên gia thiết kế cũng như chủ của website, bạn chắc chắn sẽ muốn background toàn trang của mình sẽ hiển thị tốt nhất trên mọi điều kiện. Với các trình duyệt web, hãy kiểm tra khả năng hiển thị của background trên những trình duyệt phổ biến nhất như Chrome, Firefox vàIE. Thêm vào đó, bạn cũng cần kiểm tra khả năng hoạt động của nền website trên các thiết bị di động và máy tính bảng và đừng quên là cả màn hình máy tính để bàn thông thường. Việc kiểm tra này nhằm mục đích đánh giá khả năng hoạt động của background toàn trang trong mọi kích cỡ màn hình có thể. 

5 Golden Tips For Creating Fullscreen Website Backgrounds

Và một điều nữa, bạn có biết rằng thực ra chúng ta có thể dùng từng background khác nhau cho mỗi trang khác nhau? 

Tác giả bài viết: Phùng Thanh Hằng
Nguồn tin: Ngôi Sao Số Web & Brand Solutions