Xu hướng thiết kế Web hàng đầu cho năm 2015 ( P.4)

Ở bài này chúng ta sẽ tiếp tục phần cuối cùng của Xu hướng thiết kế Web hàng đầu cho năm 2015

Layouts dựa trên lưới điện tử

Thật khó để nói chính xác khi các phong cách thiết kế lưới điện tử trở nên phổ biến, nhưng nó chắc chắn là một lựa chọn ưa thích của nhiều nhà thiết kế. Lưới luôn luôn đóng một vai trò trong việc thiết kế web, nhưng chúng đã không phải là lựa chọn hiển nhiên trong sản phẩm cuối cùng.

Thông thường thiết kế dựa trên lưới điện tử hoạt động tốt trên các trang web cần danh sách nội dung lớn. Các trang web như nguồn cấp dữ liệu truyền thông xã hội, tạp chí trực tuyến, hay phòng trưng bày hình ảnh có thể sử dụng ứng dụng này . Xu hướng này của thiết kế bố trí lưới trung tâm hiện thực khái niệm về hộp wireframe vào một thiết kế trang web đầy đủ.

xu huong thiet ke web

24ways là một tạp chí có thiết kế kỳ diệu. Thiết kế của họ đã thay đổi nhiều lần và lặp đi lặp lại gần đây nhất dựa trên thiết kế lưới cho các danh sách. Trang chủ và lưu trữ các trang chứa tất cả các nội dung danh sách trong một cấu trúc cố định và vững chắc của các hộp.

Đồng thời các trang web bán hàng cũng rất thích hợp cho thiết kế lưới điện tử này. Nhiều trang web bán hàng luôn muốn tìm cách hiển thị nội dung một các dễ tìm nhất các loại sản phẩm hàng hóa. Giúp cho khách hàng có cơ hội nhìn thấy nhiều loại hàng hơn là những loại học chủ định tìm kiếm. Điều này có thể giúp khách hàng tiềm năng có thêm những quyết định mua hàng khác khi thấy nhưng hình ảnh và nội dung tuyệt đẹp của sản phẩm khác.

Những điều tôi thích nhất về thiết kế lưới là sự linh hoạt. Bố trí đáp ứng là rất hợp thời trang và lưới điện tử dựa trên thiết kế làm cho nó dễ dàng hơn nhiều để tạo ra các trang web một cách tự nhiên đáp ứng. 24ways hoàn toàn đáp ứng và bạn có thể thấy thiết kế trên điện thoại di động của mình bằng cách thay đổi kích thước cửa sổ trình duyệt của bạn.

xu huong thiet ke web

Tôi cũng thực sự thích cách bố trí bảng Pinterest mà dựa trên lưới thật hiệu quả. Pinterest có một chút khác nhau, vì các hộp lưới không được xếp hoàn hảo, nhưng thay vì rơi vào một mô hình dường như vô tổ chức. Trong trường hợp này thiết kế không đối xứng hoạt động tuyệt vời và đã trở thành một phần nào đó của cho thiết kế trên điện thoại của Pinterest.

Có hàng tá các công cụ và nguồn tài nguyên miễn phí cho thiết kế lưới điện tử dành cho những người muốn thử. Ví dụ, các nhà phát triển frontend có thể thâm nhập vào các thư viện CSS lưới miễn phí để được tìm thấy trên tất cả các web. Những người quan tâm trong JavaScript có thể thử jQuery Masonry là một plugin bắt chước thiết kế lưới điện của Pinterest.

Tuỳ chỉnh CSS3 Animation

Kể từ khi phát triển các đặc điểm kỹ thuật CSS3 được phát hành các nhà thiết kể thoải mãi với CSS hình ảnh động. Các trình duyệt web hiện nay được nâng cao hơn để hỗ trợ quá trình chuyển đổi CSS3 và xác định khung hình lúc bắt đầu và lúc cuối của hiệu ứng, sự thay đổi về hình dạng, kích thước, màu sắc… giữa frame đầu và frame cuối (key frame).

Một trong những hiệu ứng hiện đại yêu thích của tôi là yếu tố hoạt hình trang cuộn. Khi một khách truy cập cuộn xuống các thành phần của trang sẽ mờ dần vào hoặc trượt vào. Ứng dụng Carde app sử dụng hiệu ứng này trên trang đích của họ.

xu huong thiet ke web

Nói theo truyền thống, hiệu ứng này đòi hỏi một số lượng rất nhỏ của JavaScript để xử lý các lớp CSS. Nhưng tất cả các hình ảnh động có thể được kiểm soát 100% thông qua CSS mà chỉ chạy khi các phần tử đi vào. Tôi thực sự đã viết một một hướng dẫn ngắn gon chi tiết làm thế nào bạn có thể tạo hiệu ứng này cho bất kỳ trang web.

xu huong thiet ke web

Một cách tiếp cận thú vị nhưng ít thông dụng của CSS hoạt hình là việc sử dụng đồ họa SVG. Scalable Vector Graphics thường được tạo ra trong một chương trình như Adobe Illustrator. SVGs có thể được thu nhỏ động và CSS3 là những lời khen hoàn hảo mà các trình duyệt web hiện đại có thể hỗ trợ cả hai

Hãy nhìn vào thanh điều hướng Bjango và xem xét một số liên kết. Bạn sẽ nhận thấy mỗi chúng có một mặc định và di chuột dựa vào hình ảnh SVG. Nhưng những hình ảnh động hover sử dụng một hiệu ứng bounce đàn hồi được áp dụng cho các SVGs qua CSS3.

Phải thừa nhận rằng điều này có thể là một khái niệm khó khăn cho các nhà phát triển mới nắm bắt. Nhưng nó cho thấy bao nhiêu ứng dụng CSS3 đã được nâng cao chỉ trong vài năm ngắn ngủi. Tôi vui mừng xem những gì tương lai có trong các trang web cho hình ảnh động hiện đại.

Kết luận

Nhiều xu hướng thiết kế web mới tiếp tục nổi lên qua mỗi năm. Tôi chắc chắn hy vọng các xu hướng trên có thể thắp sáng một tia lửa trong các nhà thiết kế cả mới và dày dạn trong lĩnh vực này. Thiết kế web doanh nghiệp hiện đang có nhu cầu hơn bao giờ hết, và một nhà thiết kế tốt nên có thể cung cấp dựa trên các xu hướng hiện tại và thực hành tốt nhất. Bằng cách nghiên cứu những gì đang là thời thượng bạn sẽ tìm hiểu làm thế nào để xây dựng các trang web dựa trên nhu cầu của khách hàng của bạn và nhu cầu của ngành công nghiệp thiết kế trong một tổng thể.

Tác giả bài viết: Diệu Linh

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây