Ngày nay, không chỉ trên thế giới mà cả thị trường trong nước các thiết bị di động trở thành một thành phần không thể thiếu đối với đại đa số người dùng, khi mà các smartphone ngày càng trở nên phổ biến. Nếu trang web của bạn không hỗ trợ thiết bị di động, một thiệt thòi lớn bạn sẽ mất khá nhiều khách hàng tiềm năng. Trang web giờ không còn đơn thuần là chỉ để duyệt, bạn cần thiết kế web di động ngay hôm nay để đi trước đối thủ của chính bạn trong tương lai

Cùng CÔNG NGHỆ VIỆT nhìn lại thế giới Internet trong năm 2016

 

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.

- 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.

- 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.

- 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.

- 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ư trang Rudy’s Paris.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- 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.

- Tạp Chí Designer Việt Nam

No Comment

Comments are closed.