20 Website tuyệt đẹp cho xu hướng thiết kế 2016

Responsive dĩ nhiên là việc giúp cho khách ghé thăm có 1 trải nghiệm tốt nhất dựa trên thiết bị của họ. Cho dù họ dùng mobile, máy để bàn – dùng chuột hay cảm ứng thì các chức năng trực quan vẫn thống nhất.

Và cũng không thể bỏ qua khuyến nghị của Google rằng, với việc sử dụng một URL duy nhất sẽ giúp googlebots dễ dàng hơn trong việc tìm kiếm.

Thống nhất là chìa khoá để khiến thiết kế của bạn thành công – chứ không hẳn là thiết kế giống nhau hoàn toàn. Dưới đây là những ví dụ hấp dẫn để chứng minh điều đó.

01. Đừng để vuột mất lợi thế của Khoảng Trắng

Vestre là một trang web có sự thống nhất về bố cục trong mọi thiết bị. Những phần hình ảnh, nơi để chữ vô cùng phù hợp. Chúng luôn được đặt trên một màu trắng hay một không gian âm (negative space) – dù màn hình ở kích thước nào.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

02. Giữ vị trí đặt logo thống nhất

Epicurrence có rất nhiều nhưng yếu tố khác nhau trên đó và chúng thay đổi khi màn hình thay đổi. Nhưng dù thế nào thì logo tròn màu đên luôn luôn nằm cùng vị trí phía tay phải của trang.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

03. Cân nhắc giữa bố cục dọc (portrait) hay ngang (Orientation)

Một bố cục ngang luôn tốt nhất với máy tính để bàn, laptop, và những màn hình rộng; trong khi đó thì bố cục dọc hợp với máy tính bảng và điện thoại.

Như cách Kekselias thiết kế, thiết kế với bố cục đứng hay ngang dành cho mỗi thiết bị giúp những thông tin cần thiết được hiển thị trên thiết kế sạch và sáng.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

4. Scroll hay không

Ý tưởng của Boone Selections là khuyến khích người dùng lăn chuột để khám phá phần còn lại của trang, cuối cùng mới thấy thông tin họ là nhà nhập khẩu rượu. Kiểu này hiệu quả rất tốt trên desktop, nhưng để giảm thiểu việc scroll trên di động, trang web để hiện luôn một vài từ nói về những gì công ty đang làm.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

05. Lưu ý về kích cỡ ngón tay với hình và chữ.

Đối với thiết kế Responsive, nghĩ về người dùng sẽ tương tác với các liên kết trên màn hình – thông qua con chuột máy tính, còn đầu ngón tay đối với điện thoại và máy tính bảng. Cần chắc chắn rằng, các nút và liên kết đủ lớn và dễ bấm với ngón tay như trangRudy’s Paris.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

06. Sử dụng những điều chỉnh nho nhỏ với bố cục

Trang web Uve có chút điều chỉnh về bố trí menu giúp việc tuỳ biến của nó trên các thiết bị rất hiệu quả. Menu ban đầu nằm bên trái và sau đó dịch chuyển lên trên khi sử dụng màn hình máy tính bẳng và điện thoại.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

07. Lưy ý về số lượng chữ trên mỗi dòng

Điều chỉnh kích thước chữ tiêu đề và nội dung cho mỗi thiết bị nhằm đảm bảo sự dễ đọc cho người dùng. Hãy cố gắng có 60-75 chữ trên một dòng đối với màn hình máy tính và 30-40 chữ cho điện thoại như cách Forecaster.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

08. Loại bỏ những yếu tố hình ảnh gây nhiễu cho màn hình nhỏ

Giảm thiểu những đối tượng hình ảnh khiến trang nhẹ hơn. Những chi tiết trên MRAssociates sẽ giảm đi rất nhiều trên màn hình điện thoại – và tăng thêm khi dùng máy tính.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

09. Cắt các hình ảnh theo tỉ lệ.

Dans Mon Sac có hình ảnh giống nhau ở phần bên phải màn hình trên mọi thiết bị, tuy vậy chúng được cắt rất cẩn thận để phù hợp tương ứng với màn hình. Điều này nhằm đảm bảo tỉ lệ trực giác cân đối và thống nhất.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

10. Tập trung vào phần nội dung quan trọng nhất.

Như trang Stephen Caver, có một chiến lược về việc giữ những gì ở lại và những gì sẽ ẩn đi khi bạn thiết kế trên các màn hình. Tập trung và điều quan trọng nhất và để nó ở phần dễ nhìn.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

11. Tăng/giảm số lượng cột

The Design School by Canva tăng kích thước số lượng cột từ 4 với máy tính để bàn, 2 cột với máy tính bẳng và chỉ một cột với thiết bị di động. Bố cục này sáng sủa, chữ dễ đọc, các liên kết dễ nhấn.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

12. Giữ nguyên số lượng cột

Trái ngược với yếu tố trên, ETQ-Amsterdam lại giữ nguyên 2 cột trên mọi thiết bị để có sự thống nhất và cái nhìn tối giản cho thương hiệu.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

13. Quyết định chỗ nào nên có chuyển động, chỗ nào không

Five Foot Six có một chuyển động trên trang chủ đối với màn hình để bàn, nhưng nó là 1 hình tĩnh đối với máy tính bảng và điện thoại. Các chuyển động cần xảy ra một cách hoàn hảo trên mọi thiết bị, bởi việc thay đổi kích thước, tỉ lệ đứng, ngang, pixel… chuyển động vẫn là một thách thức với điện thoại.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

14. Cân nhắc hình nền

Sử dụng cùng một nền đôi khi không hiệu quả trên mọi thiết bị.Edwin-Europe sử dụng 2 hình ảnh khác nhau – một cái dùng cho Destop và cái còn lại dùng cho điện thoại và máy tính bảng. Cắt một hình ảnh duy nhất từ máy tính để bàn, chuyển qua điện thoại và máy tính bảng đôi khi làm giảm hiệu quả của nó… giải pháp lúc này là chọn hình ảnh khác.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

15. Cân nhắc giữa nhìn gần và nhìn xa

Trang 62Models sử dụng hình ảnh được cắt rất gần cho điện thoại và máy tính bẳng, nhưng với desktop thì nó lại dùng toàn bộ hình ảnh (full image) với nhiều khoảng trống xung quanh.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

16. Kích thước của phông

Andre do Amaral được thiết kế sạch và nổi bật bằng việc sử dụng chỉ một loại chữ đen trên nền trắng. Vì chữ là nội dung chính nên nó cần tinh chỉnh về kích thước đối với mỗi thiết bị sử dụng.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

17. Giảm số chữ

Weblounge tiến hành lược bỏ thông tin khi trang web được xuất hiện trên màn hình nhỏ đi. Nó được chuẩn bị những câu quan trọng nhất phù hợp với màn hình trình duyệt.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

18. Đổi loại Menu

Menu của trang Oliver Bonas được hiển thị ngang trên desktop và dọc trên điện thoại và máy tính bảng. Bên cạnh đó menu cũng không liên tục xuất hiện như trên desktop.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

19. Giữ thống nhất

Handgraft là một ví dụ tuyệt vời về trang web có sự thống nhất trên mọi thiết bị và tuỳ biến theo màn hình – số lượng cột giảm hoặc tăng; số lượng chữ trên dòng; và menu được co lại trên điện thoại.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

20. Làm Heading sáng sủa và dễ đọc

Mọi tiêu đề trang blog đều dễ đọc trên Urban Influences bằng việc tăng/giảm số lượng cột cho mỗi thiết bị và sử dụng một phông không chân.

20 Website tuyệt đẹp cho xu hướng thiết kế 2016 - Tạp Chí Designer Việt Nam

Bạn cũng có thể thích Thêm từ tác giả

Chúng tôi đang chuyển sang sử dụng phiên bản mớiXem Ngay Tại izdesigner.org