website design

Ứng dụng màu sắc trong thiết kế website để xây dựng trải nghiệm tối ưu

content — Wed, 18 May 2022 02:51:35 +0000

Ứng dụng màu sắc trong thiết kế website để xây dựng trải nghiệm tối ưu content T4, 05/18/2022 - 09:51 Cảm hứng thiết kế sáng tạo

Dưới đây là chỉ là một phần trong cuốn cẩm nang cơ bản về màu sắc, từ đó phát triển trực giác thiết kế website, hỗ trợ xây dựng trải nghiệm số chất lượng.

Cách mắt chúng ta nhìn

Màu sắc và ánh sáng

Chúng ta được bao bọc trong một thế giới tràn ngập màu sắc. Màu sắc có nhiều công dụng trong đời sống hàng ngày, từ việc giúp chúng ta ghi nhớ vật thể, cho tới thúc đẩy doanh số bán hàng hay bộc lộ những xúc cảm khác nhau. Nhưng bạn có biết màu sắc từ đâu mà có? Vì sao biển có màu xanh, mây có màu trắng và cát có màu vàng? Để hiểu được màu sắc, chúng ta cần hiểu về ánh sáng.

Xem thêm: Ý nghĩa màu sắc và cách ứng dụng màu trong thiết kế

Bản chất ánh sáng là một dạng sóng, tương tự như sóng vô tuyến. Những bước sóng quan sát được sẽ khiến chúng ta nhìn thấy những màu sắc khác nhau. Theo thực tế, vùng quang phổ khả kiến trải dài từ quang phổ tia cực tím tới quang phổ tia sáng đỏ, và các nhà khoa học ước tính con người có thể nhìn thấy khoảng 10 triệu màu sắc khác nhau. Tổng hợp những màu sắc khả kiến này lại ta được ánh sáng trắng.

Mắt ta nhìn thấy sự vật nhờ có ánh sáng chiếu rọi vào chúng rồi phản xạ tới mắt ta. Cách mắt nhận biết màu sắc cũng tương tự như vậy. Khi ta nhìn vào chiếc lá cây và thấy nó có màu xanh, nó đã hấp thụ các bước sóng thành phần khác trong ánh sáng chiếu tới nó và chỉ còn lại bước sóng xanh lục phản xạ tới mắt.

Thang màu xám grayscale

Khi quan sát màu sắc, đặc biệt là trong thiết kế, chúng ta sẽ cảm thấy khó lựa chọn các màu để đặt cạnh nhau sao cho có sự tương phản tốt. Một trong những nguyên nhân là vì nhận thức của chúng ta bị xao nhãng bởi các sắc độ, thật khó để nói màu xanh này và màu đỏ kia, cái nào “sáng” hơn, cái nào “tối” hơn. Khái niệm tương phản màu có thể hiểu là mức độ sai khác về độ chói (luminance) của các màu sắc khác nhau. Để làm được điều này, ta cần tới một thang đáng giá mức độ sáng tối của màu sắc, đó là thang màu xám - grayscale.

Thang xám là khái niệm phổ biến trong nhiếp ảnh dưới tên gọi The Zone System, bản chất là một dãy 10 ô màu với những cấp độ xám khác nhau chạy từ trắng tới đen, được phát triển và sử dụng lần đầu bởi nhiếp ảnh gia Ansel Adams và Fred Archer từ những năm 1930.

Thang xám là một kĩ thuật để “hiểu” điều kiện ánh sáng của môi trường, từ đó tìm ra thông số phù hợp cho máy ảnh để có được bức ảnh tốt nhất, sao cho chi tiết tách bạch, các mảng miếng và màu sắc rõ ràng, không tạo cảm giác bệt vào nhau, tức là có được tương phản tốt. Một hình ảnh có tương phản tốt khi chuyển về dạng đen trắng, loại bỏ hoàn toàn các yếu tố hue và saturation để chỉ còn lại luminance, các vùng trên ảnh đều có thể được phân loại vào các “zone”. Khi đó thực chất bức ảnh không chỉ có 2 màu đen trắng mà còn có một dãy tuyến tính những cấp độ xám, tùy thuộc vào mức độ sáng tối của vật thể. Ở điều kiện này, mắt ta hoàn toàn có thể đánh giá tương phản rất dễ dàng.

Nhìn mọi thứ qua lăng kính trắng đen

Khi đưa hình ảnh về hệ quy chiếu thang xám, ta dễ dàng nhận ra sẽ có những màu tuy khác nhau về sắc xanh đỏ nhưng lại thuộc cùng một zone xám. Hai màu này khi đặt cạnh nhau sẽ không tạo ra mức độ tương phản cao. Mở rộng thang xám trong thiết kế, ta có được một dải gradient chạy từ trắng tới đen với vô vàn cấp độ xám khác nhau. Với một người làm thiết kế, học thuộc lòng cách sắp xếp màu vào các zone xám là không cần thiết, điều quan trọng hơn là học được cách nhìn qua hệ quy chiếu thang xám: Não bộ bạn phải có khả năng chuyển mọi hình ảnh nhìn thấy về dạng đen trắng, loại bỏ mọi sắc màu, từ đó xác định được mức độ tương phản đã phù hợp hay chưa để tiếp tục điều chỉnh.

Ngoài ra khi nói về màu đen, ta không thể không nhắc tới màu đen. Trong thực tế những vật thể màu đen không phản xạ tia sáng đen tới mắt ta, thay vào đó, chúng hấp thụ toàn bộ ánh sáng chiếu tới.

Điều này có mối liên hệ mật thiết tới việc phát triển sản phẩm công nghệ. Trong thời đại kỹ thuật số, chúng ta ai cũng sở hữu cho riêng mình một cho tới nhiều thiết bị điện tử với màn hình phát ra vô vàn ánh sáng màu sắc khác nhau. Trong điều kiện ban ngày, nhờ ánh sáng tự nhiên có cường độ cao, ánh sáng từ màn hình không phải là một nguồn sáng quá mạnh, môi trường và vật thể xung quanh ta phần lớn nằm trong những zone sáng màu, dễ quan sát.

Tuy nhiên khi trời tối, môi trường xung quanh ta có mức độ sáng thuộc những zone xám đậm, khiến cho ánh sáng từ màn hình trở thành một nguồn sáng nổi trội, có thể gây nhức mắt với hàng triệu điểm ảnh tự phát sáng. Nếu như trước đây, màu đen trên màn hình LCD thực chất vẫn có ánh sáng rất nhẹ thì ngày nay với màn hình LED, màu đen trở nên “sâu” hơn vì các bóng bán dẫn được tắt đi gần như hoàn toàn tùy vào công nghệ sản xuất màn hình LED.

Ngoài ra, để giảm thiểu cường độ cũng như số lượng tia sáng chiếu tới mắt, dark mode ra đời, thay vì những ứng dụng và OS nền sáng gây khó chịu vào ban đêm, ta hoàn toàn có thể chuyển chúng qua nền tối, kết hợp với các đối tượng thiết kế được điều tiết màu sắc để tạo ra mức tương phản nhẹ nhàng, trải nghiệm đã thoải mái hơn rất nhiều.

Trước đây, do giới hạn về công nghệ, giao diện website chỉ có thể hiển thị theo các style màu sắc cố định được developer gán trước. Ở thời điểm hiện tại, công nghệ CSS mới đã cho phép gán thêm giá trị thời gian, giúp cho màu sắc trên 1 website có thể tự động thay đổi linh hoạt theo khung giờ. Rõ ràng một website hay app có khả năng tự thay đổi dark mode - light mode theo khung giờ sẽ khiến cho người dùng cảm thấy thích thú hơn, gia tăng trải nghiệm và khiến mức độ trung thành của khách hàng được đẩy lên cao hơn.

Xem thêm: Hiểu từ A-Z về Thiết kế Website Responsive

Sử dụng màu sắc trong thiết kế website

Màu sắc và môi trường

Có một trải nghiệm kiểu như thế này: Khi lướt trên sàn thương mại điện tử, bạn bắt gặp một chiếc túi da với màu đỏ burgundy rất sang trọng, ảnh sản phẩm là ảnh nền trắng khiến cho hình ảnh chiếc túi hiện lên trong đầu bạn rất rõ ràng, chi tiết tách bạch, bạn cảm thấy ưng ý và mua nó. Tuy nhiên khi nhận về, bạn thất vọng vì đó là màu nâu đỏ rất tối, nhìn trong điều kiện ánh sáng yếu gần như màu nâu sậm. Bạn phàn nàn với người bán và được họ giải thích rằng đây là ảnh chụp sản phẩm trong studio nên ánh sáng khác với thực tế bên ngoài.

Về cơ bản, mắt ta thu nhận các tia sáng với bước sóng khác nhau để phân biệt màu sắc. Khi mắt nhìn trong thực tế, ánh sáng đi từ vật thể không còn “nguyên bản” mà bị pha trộn cả các ánh sáng hắt từ những vật thể xung quanh. Dưới ánh đèn vàng, chiếc áo màu trắng có thể nhầm lẫn thành màu vàng.

Bên cạnh đó, bề mặt sự vật không trơn nhẵn 100% khiến ánh sáng chiếu tới nó bị tán xạ, khi phản xạ tới mắt người đã không giữ được như ban đầu, dẫn tới sự sai lệch màu sắc khi quan sát trong các điều kiện ánh sáng khác nhau, trong phòng lab với điều kiện tiêu chuẩn sẽ khác với trong thực tế.

Vì thế khi muốn thể hiện cảm giác công nghệ, phòng lab lí tưởng, chúng ta sẽ sử dụng những màu tươi sáng rõ ràng, thể hiện tính nguyên bản chưa bị pha trộn; còn khi muốn mang lại cảm giác thực tế, nghệ thuật hoặc đưa thêm tính con người vào trong design, nhà thiết kế thường sử dụng màu có phần “xỉn” hơn bằng các pha trộn thêm các mức độ xám.

Màu sắc và thương hiệu trong thiết kế website

Website hay app là cầu nối giữa doanh nghiệp và khách hàng, nó cần phát ra những tín hiệu giúp khách hàng có được những nhận thức về brand nó sở hữu. Vì thế, yếu tố branding sẽ chi phối rất nhiều vào bảng màu được sử dụng trong thiết kế.

Khi triển khai màu sắc trên sản phẩm số, việc kiểm soát tỉ lệ màu thương hiệu là yếu tố tiên quyết. Với một bộ brand guideline tốt, tỉ lệ này sẽ được quy định cụ thể để áp dụng lên mọi điểm chạm, mọi sản phẩm thuộc brand từ các sản phẩm vật lí như poster, brochure, vv… cho tới sản phẩm số như website, ứng dụng…

Sử dụng màu sắc khi thiết kế website

Sử dụng mảng sáng/tối làm chủ đạo

Tùy theo định hướng khi xây dựng thương hiệu hay sản phẩm, tỉ lệ màu và cách phối hợp màu trong palette sẽ có sự thay đổi. Khi thiết kế website, các yếu tố thiết kế có thể gài màu brand vào là:

Line
Mảng màu trong background, card
Button, icon
Hình ảnh
Type

Trong thiết kế website, có một tỉ lệ mang tính tương đối được xem như tỉ lệ vàng về lựa chọn màu sắc là 6:3:1.

Khi sử dụng tỉ lệ vàng màu sắc 6:3:1, màu chủ đạo chiếm 60% tổng thể, màu thứ cấp chiếm 30% và 10% cuối cùng sẽ là màu accent.

Màu chủ đạo chiếm 60% nên là màu trung tính, mang lại sự thoải mái cho mắt người dùng. Màu thứ cấp với 30% tổng thể sẽ có sự đối lập với màu chủ đạo để tạo sự tương phản, tách bạch chi tiết. 10% còn lại là những chi tiết nhỏ, được gài màu key, và màu key cần phải được điều tiết để ăn nhập với những màu sắc còn lại trong tổng thể.

Khi chọn màu trắng làm chủ đạo, phần lớn các mảng màu được sử dụng là màu trắng và những sắc xám có độ sáng cao (light gray). Type và các vị trí dùng màu thứ cấp sẽ được gán các màu tối để tạo ra tương phản, có thể là màu đen, xám đậm thuần hoặc xám đậm có ánh màu brand. 10% màu accent là màu brand được gài ở những vị trí như line, button, icon, thẻ…

Ngược lại, ở những website tông màu chủ đạo tối, mảng miếng lớn sẽ gán giá trị tối màu, màu sơ cấp sẽ thiên về tông sáng. Dù màu chủ đạo thuộc tông sáng hay tối, designer cũng cần biết điều tiết để tạo ra các sắc độ khác nhau nhằm mục đích tạo ra tương phản màu phù hợp.

Sử dụng màu brand làm chủ đạo

Bên cạnh việc dùng màu chủ đạo đen-trắng, nhiều website lựa chọn sử dụng màu chủ đạo là màu brand để nhấn mạnh yếu tố thương hiệu, gia tăng nhận thức của khách hàng. Chiến thuật màu sắc này luôn được những thương hiệu mới, chỗ đứng trên thị trường áp dụng với mong muốn khắc sâu vào tiềm thức khách hàng sự hiện diện của mình trên thị trường. Bên cạnh mảng khối lớn, màu brand còn được sử dụng triệt để tại nhiều vị trí khả dụng như button, icon.

Phối màu thân thiện hay cực đoan

Màu sắc có tác dụng lớn trong việc khơi gợi cảm xúc cho khách hàng. Khi sử dụng các palette màu tương phản cao, người xem sẽ cảm nhận được sự rõ ràng, mãnh liệt hay thậm chí là căng thẳng tùy vào bộ màu được kết hợp sử dụng. Các phối hợp này thường được lựa chọn bởi những doanh nghiệp đi theo thị trường niche hoặc các thương hiệu có cá tính mạnh.

Ngược lại, nhiều doanh nghiệp lựa chọn những palette màu tương hỗ, giúp cho khách hàng cảm nhận sự nhẹ nhàng, uyển chuyển. Với style này, các shade màu được điều tiết linh hoạt bằng việc thêm bớt màu đen/trắng đã nói ở phần trước để tạo thành dải chuyển sắc và ứng dụng vào các vị trí khác nhau. Với mức tương phản không quá gắt, designer sẽ dễ dàng làm nổi bật những thông tin quan trọng, tạo ra các điểm neo mạnh trên hành trình trải nghiệm của người dùng.

Lưu ý về màu sắc của hình ảnh trong thiết kế website

Với những site có đặc thù nhiều hình ảnh, đặc biệt là những website e-commerce, nhiều designer bỏ qua việc kiểm soát hình ảnh khiến cho tổng thể màu sắc trên site trở nên lộn xộn và không có quy củ. Thông thường, brand guideline sẽ có định hướng về mặt hình ảnh, tuy nhiên trong một số trường hợp, hình ảnh sẽ được tái định hướng tùy theo chiến thuật phát triển sản phẩm. Khi đó khâu tiền kỳ sẽ phải lựa chọn và dựa theo art direction để xử lý hình ảnh trước khi đưa lên website.

Quy trình làm màu

Tại Beau Agency, chúng tôi tin rằng hành trình trải nghiệm được tạo thành hoàn toàn từ những gì sẽ xuất hiện trên màn hình và cách chúng có mang lại giá trị cho người xem cũng như con đường thu thập những giá trị đó thế nào. Nếu người dùng đi vào site mà không thể nhìn thấy những button quan trọng bởi màu sắc của chúng quá mờ nhạt hoặc không thể đọc được những thông tin họ cần bởi màu chữ quá chói so với màu nền, rõ ràng trải nghiệm này không hề thoải mái.

Bên cạnh đó, chúng ta cần nhớ rằng có một bộ phận không nhỏ người dùng mắc chứng mù màu, và không chỉ có họ, ngay cả tệp người dùng khả năng phân biệt màu sắc tốt cũng sẽ gặp khó khăn trước những website được thiết kế thiếu tương phản.

Nhằm đem lại trải nghiệm tốt nhất cho khách hàng, khi xử lý hi-fi wireframe, tất cả các thành tố thiết kế đều được cân nhắc mức tương phản phù hợp đến mức có thể xem hi-fi wireframe như một thiết kế theo style minimal đen trắng gần đạt tới độ hoàn thiện.

Sau khi đạt được mức tương phản tốt nhất trong wireframe, các designer của Beau sẽ tiến hành gài thêm màu sắc tại những vị trí cần thiết dựa theo art direction và brand guideline. Màu brand/màu accent sẽ được cộng thêm trắng/đen để tạo ra các shade màu phù hợp với tổng thể thiết kế. Sau khi add màu cho tất cả các thành tố thiết kế, chúng tôi sẽ quan sát lại, tiếp tục đánh giá và đưa ra những điều chỉnh hợp lý để mang lại trải nghiệm tốt nhất cho khách hàng.

Một số quy luật khi sử dụng màu sắc trong thiết kế website

Màu thiếu tương phản

Đây là một lỗi khá phổ biến mà nhiều designer đang mắc phải, đó là sử dụng những kết hợp màu không có tương phản đủ tốt để người dùng phân biệt nhanh và chính xác các đối tượng thiết kế. Nguyên nhân về mặt lý thuyết là do các màu được sử dụng nằm gần nhau trên thang zone xám, cùng sáng hoặc cùng tối, khiến chúng có sự blend vào nhau.

Lốp sáng

Ngược lại với thiếu tương phản, “lốp sáng” là lỗi thiết kế sử dụng tương quá gắt, đặc biệt là chủ thể quá chói so với nền, khiến mắt có cảm giác bị kích thích mạnh bởi những xung ánh sáng cường độ cao. Lỗi này hay gặp ở những bản thiết kế dark mode do các designer chưa có kinh nghiệm, sử dụng màu trắng #FFFFFF cho bodytext trên nền đen #000000 khiến cảm giác đọc có vẻ “gai mắt”.

Dùng màu không hợp lý

Xây dựng palette màu sắc trên web chính là đang trả lời câu hỏi: Sử dụng những màu sắc nào. Thông thường chúng ta sẽ xuất phát từ brand guideline để lấy ra màu thương hiệu rồi kết hợp thêm các màu sắc khác. Việc lựa chọn màu phải đúng với mục đích thiết kế, xuất phát từ những câu hỏi như Mục đích thiết kế là gì, Thiết kế cho ai sử dụng: Lựa chọn màu sắc cho website tập đoàn công nghệ sẽ khác với nhà hàng hải sản, màu sắc cho website bán đồ nam sẽ khác với website bán đồ nữ.

Ý nghĩa của màu sắc là một khái niệm gắn với mô thức tư duy của người dùng. Một màu sắc đôi khi lại mang nhiều ý nghĩa khác nhau do được định hình bởi nhiều nhóm người khác nhau. Nếu bạn có một nhà hàng tôm hùm, bạn sẽ làm gì? Phần lớn chúng ta sẽ nghĩ ngay tới việc dùng màu đỏ cho website nhà hàng. Nhưng nếu tại các vị trí button trên site cũng dùng màu đỏ thì nhiều người dùng sẽ nghĩ rằng đó là button mang tính cảnh báo.

Xem thêm: Tâm lý học Màu sắc và ứng dụng trong thiết kế

Thực tế thì không nhất thiết chúng ta buộc phải hoàn toàn đi theo tư duy số đông khi lựa chọn màu sắc. Chúng ta hoàn toàn có thể xây dựng brand/website theo định hướng màu sắc riêng rồi liên tục educate người dùng để tạo dựng liên kết tư duy về màu sắc với brand. Tuy nhiên cách làm này đòi hỏi nhiều thời gian và nguồn lực, vì vậy nhiều doanh nghiệp lựa chọn cách đi tắt với những chiến lược màu sắc dựa theo tư duy có sẵn của số đông.

Mix màu không hợp nhau

Sử dụng một palette màu “tiệp” với nhau sẽ mang lại cảm giác hài hòa, dễ chịu. Tuy nhiên rất nhiều thiết kế lựa chọn màu sắc không phù hợp do designer không nắm vững các nguyên lý phối màu.

Sai phân cấp

Màu sắc cũng mang tính phân cấp dựa theo tương phản. Nguyên do của điều này là vì màu sắc là sóng ánh sáng, thể hiện cường độ ánh sáng mạnh yếu khác nhau. Dễ thấy vật thể có màu sắc đậm, rõ ràng mang lại cảm giác “nổi” lên khỏi màn hình hơn so với vật thể màu nhạt.

Xem thêm: Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn

Trong các thiết kế nhiều chi tiết nhỏ như thẻ sản phẩm, phân cấp là vô cùng quan trọng. Nó sẽ giúp người dùng quét data nhanh hơn vì những thông tin quan trọng, có tác dụng phân biệt các khối nội dung sẽ đặt ở lớp trên cùng, tạo thành những điểm dẫn thị giác trên tổng thể thiết kế.

Lời kết

Màu sắc là một chủ đề thú vị và phức tạp mà trong khuôn khổ một bài viết đội ngũ Beau Agency chưa thể truyền tải hết những nội dung liên quan. Chúng tôi gửi mong bài viết này sẽ trở thành cẩm nang cơ bản về màu sắc, từ đó phát triển trực giác thiết kế giúp các bạn phần nào trong quá trình xây dựng những sản phẩm số có trải nghiệm tốt cho người dùng. Hẹn gặp lại các bạn trong các bài viết tiếp theo.

Thiết kế Web Thiết kế Website Tối ưu website web design website design Thiết kế UI UI UX/UI

Dưới đây là chỉ là một phần trong cuốn cẩm nang cơ bản về màu sắc, từ đó phát triển trực giác thiết kế website, hỗ trợ xây dựng những trải nghiệm số chất lượng cho người dùng.

Cách mắt chúng ta nhìn

Màu sắc và ánh sáng

Xem thêm: Ý nghĩa màu sắc và cách ứng dụng màu trong thiết kế

Thang màu xám grayscale

Nhìn mọi thứ qua lăng kính trắng đen

Ngoài ra khi nói về màu xám, ta không thể không nhắc tới màu đen. Trong thực tế những vật thể màu đen không phản xạ tia sáng đen tới mắt ta, thay vào đó, chúng hấp thụ toàn bộ ánh sáng chiếu tới.

Xem thêm: Tận Dụng Các Mô Hình Nhận Thức Vào Sản Phẩm Thiết Kế p1

Xem thêm: Hiểu từ A-Z về Thiết kế Website Responsive

Sử dụng màu sắc trong thiết kế website

Màu sắc và môi trường

Xem thêm: Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn

Màu sắc và thương hiệu trong thiết kế website

Sử dụng màu sắc khi thiết kế website

Sử dụng mảng sáng/tối làm chủ đạo

Line
Mảng màu trong background, card
Button, icon
Hình ảnh
Type

Trong thiết kế website, có một tỉ lệ mang tính tương đối được xem như tỉ lệ vàng về lựa chọn màu sắc là 6:3:1.

Khi sử dụng tỉ lệ vàng màu sắc 6:3:1, màu chủ đạo chiếm 60% tổng thể, màu thứ cấp chiếm 30% và 10% cuối cùng sẽ là màu accent.

=> Bạn đã biết về Quy tắc thiết kế UI cho website?

Sử dụng màu brand làm chủ đạo

Phối màu thân thiện hay cực đoan

Lưu ý về màu sắc của hình ảnh trong thiết kế website

Quy trình làm màu

Một số quy luật khi sử dụng màu sắc trong thiết kế website

Màu thiếu tương phản

Lốp sáng

Dùng màu không hợp lý

Xem thêm: Tâm lý học Màu sắc và ứng dụng trong thiết kế

Mix màu không hợp nhau

Sai phân cấp

Xem thêm: Kiểm soát thiết kế của bạn với góc nhìn trục Z trong thiết kế phẳng

Lời kết

Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Thiết kế đồ hoạ: Cần Bao Nhiêu Cái Wow Cho Một Thiết Kế? Cách thương hiệu ứng dụng màu sắc trong thiết kế nhận diện Ý nghĩa màu sắc và cách ứng dụng màu trong thiết kế Hiểu từ A-Z về Thiết kế Website Responsive

Off

Hiểu từ A-Z về Thiết kế Website Responsive

content — Thu, 12 May 2022 03:39:58 +0000

Hiểu từ A-Z về Thiết kế Website Responsive content T5, 05/12/2022 - 10:39 UX/UI

Để tìm hiểu về Thiết kế Website Responsive, chúng ta sẽ quay ngược dòng thời gian lại một chút, để có cái nhìn toàn cảnh về sự phát triển song hành của internet và Responsive Website .

Thiết kế Responsive là gì

Trong quá trình phát triển sản phẩm số, thuật ngữ Responsive design đang ngày càng phổ biến và gần như đã trở thành điều kiện tiên quyết để đánh giá trải nghiệm của một website. Để tìm hiểu về Thiết kế Website Responsive, chúng ta sẽ quay ngược dòng thời gian lại một chút, để có cái nhìn toàn cảnh về sự phát triển song hành của Internet và Responsive Website .

Thiết kế website trước khi có khái niệm responsive

Năm 1991, website đầu tiên được phát hành trực tuyến. Trong nhiều năm sau đó, đã có thêm hàng trăm ngàn website ra đời. Đặc điểm chung của những website này là chỉ được thiết kế theo kích thước bề ngang 800px hoặc 1024px bởi đó là kích thước màn hình máy tính phổ biến thời bấy giờ và mọi website được làm ra chỉ để phục vụ nhu cầu trải nghiệm website trên màn hình máy tính. Và kích thước design cứ thế giữ nguyên dù người dùng đang sử dụng bất kì thiết bị nào.

Bạn rõ ràng không thể xem một design cho màn hình 1024px trên một chiếc Nokia E63 huyền thoại với độ phẩn giải chỉ 320x240. Trải nghiệm khó chịu này tiếp tục phát sinh khi người dùng bắt đầu sử dụng các thiết bị có kết nối GPRS với đủ mọi cỡ màn hình khác nhau để truy cập website. Và thế là thiết kế chuyên biệt cho màn hình 800 hay 1024 đã không còn phù hợp với bức tranh toàn cảnh nữa. Không chỉ người dùng, mà ngay cả các designer cũng muốn thiết kế có thể hiển thị một cách thoải mái nhất trên nhiều thiết bị - nhiều kích thước và độ phân giải màn hình.

Kỷ nguyên của các thiết bị di động

Trong thế kỉ 20, điện thoại và các thiết bị di động bắt đầu phát triển mạnh mẽ. Trong giai đoạn khởi nguyên, chúng chỉ hiển thị tốt phần lớn dữ liệu dưới dạng văn bản. Cho tới giữa thế kỉ 21, đặc biệt là vào năm 2007 khi chiếc iPhone đầu tiên xuất hiện, người dùng mới có thể được trải nghiệm những giao diện website thực sự được thiết kế cho di động nhờ vào CSS2 và Javascript.

Tuy nhiên, vấn đề nảy sinh là những giao diện web mobile ở thời kì này chưa mang lại cho người dùng khả năng điều hướng tiện dụng. Thao tác zoom và cuộn trang tiêu tốn rất nhiều thời gian chờ đợi bởi trang web vẫn load ở tốc độ khá chậm trên kết nối 2G hoặc 3G. Tệ hơn nữa là ngón tay không thể mang lại sự chính xác như con trỏ chuột nên chuyện bấm nhầm là điều phổ biến không thể tránh khỏi. Ở thời điểm này, duyệt web trên di động chưa thực sự là trải nghiệm tốt, tuy nhiên nó vẫn tỏ ra hữu dụng khi người dùng không thể kè kè chiếc laptop ở khắp nơi.

Nhu cầu gia tăng trải nghiệm web trên các thiết bị di động đã thúc đẩy sự phát triển một cách tiếp cận mới về mặt công nghệ trong khâu thiết kế website, một công nghệ đòi hỏi sự đáp ứng linh hoạt và tự động điều chỉnh layout, kích thước con chữ, hình ảnh phù hợp với mọi màn hình hiển thị.

Responsive và Thiết kế Website Responsive ra đời

Cha đẻ của thuật ngữ “Responsive Web Design” là Ethan Marcotte. Trong một bài viết của mình, ông đã nhắc tới sự gia tăng chóng mặt của nhóm người dùng web trên di động và đưa ra hướng phát triển duy nhất là đáp ứng sự thay đổi về kích cỡ màn hình là sử dụng Responsive.

Trong thời kì đầu, nhắc tới thiết kế mobile web là nhắc tới WAP design (WAP: Wireless Application Protocol - chuẩn quốc tế cho các ứng dụng sử dụng kết nối không dây). WAP design là phiên bản mobile của một trang web, được làm lại hoàn toàn cho phù hợp với giao diện di động, và có hẳn một tên miền riêng.

=> Xu Hướng Thiết Kế Website 2018 - 2020

Tuy nhiên một nghiên cứu về tính khả dụng của WAP được triển khai tại London vào năm 2000 bởi các chuyên gia thuộc Nielsen Norma - tập đoàn hàng đầu thế giới về UX - đã chỉ ra rằng WAP làm tiêu tốn khá nhiều thời gian cho những thao tác đơn giản như đọc tiêu đề hay xem dự báo thời tiết. Bên cạnh đó, trải nghiệm mobille web trong thời kì này còn chịu nhiều tác động như màn hình nhỏ, tốc độ mạng kém. Để làm hài lòng người dùng hơn, cách duy nhất là tối ưu lại phiên bản WAP cho từng loại thiết bị, và điều này là bất khả thi.

Link bài nghiên cứu: https://media.nngroup.com/media/reports/free/WAP_Usability.pdf

Những hạn chế của WAP đã thúc đẩy sự ra đời của Responsive web design (RWD): chỉ 1 bộ code và 1 tên miền duy nhất cho mọi loại thiết bị, từ điện thoại di động, máy tính bảng cho tới laptop.

Tối ưu thiết kế Website Responsive và trải nghiệm người dùng

Ngay tại thời điểm ra đời, responsive đã thể hiện sự vượt trội so với thời kì WAP design. Nhờ việc chỉ dùng duy nhất 1 bộ code và tên miền, chi phí thiết kế và set up được giảm thiểu đáng kể. Nhà phát hành nội dung website sẽ không phải quản lí cùng lúc nhiều design và tên miền như WAP, từ đó có thể điều tiết ngân sách và nguồn lực cho những thứ quan trọng hơn. Về phía người dùng, Responsive mang lại những trải nghiệm chất lượng cao và liền mạch, xóa mờ nhịp hẫng cảm xúc khi duyệt web trên nhiều thiết bị. Về mặt cơ chế, RWD sẽ tự thiết bị của người dùng và phản hồi lại tự động bằng layout đã được điều chỉnh cho phù hợp với thiết bị đó dựa trên kích thước và độ phân giải màn hình, hệ điều hành và hướng đối tượng.

Theo kết quả thống kê của https://gs.statcounter.com/, gần 55% traffic truy cập internet toàn cầu đến từ điện thoại di động trong khi chưa tới 43% đến từ desktop. Điều này dẫn tới một hệ quả tất yếu: Những business không tối ưu responsive sẽ không thể nào đạt lượng traffic kì vọng, ngoài ra còn có nguy cơ mất khách hàng vì trải nghiệm trên mobile không đủ sức giữ chân.

=> 11 Nguyên tắc thiết kế web sẽ tăng tỷ lệ chuyển đổi của bạn

Với thiết kế cho desktop, ta hoàn toàn có thể sử dụng kiểu full-width chiếm dụng toàn màn hình hoặc full-container. Khi responsive xuống các thiết bị theo khổ dọc đứng, container thu hẹp lại rất nhiều. Vậy thì làm sao để sắp xếp các khối nội dung trên desktop design vào các màn hình kích thước nhỏ? Thật may nhờ có sự trợ giúp về mặt công nghệ của framework Bootstrap CSS3 và các công nghệ khác, khâu lập trình responsive đã đơn giản đi nhiều. Ở thời điểm hiện tại, không chỉ có hệ thống lưới mà cả hình ảnh và văn bản cũng có thể được điều chỉnh tự động theo cỡ màn hình hiển thị. Trong khâu lập trình, nhà phát triển sẽ tiến hành thiết lập các giá trị breakpoint - bước nhảy, bản chất là các mốc kích thước màn hình mà tại đó design sẽ có sự giãn nở, điều chỉnh phù hợp.

Trong những năm gần đây, song song cùng với “Responsive Web design” còn có “mobile first”. Đúng như tên gọi của nó, “mobile first” là một triết lí thiết kế nhằm tạo ra trải nghiệm người dùng tốt hơn khi khởi đầu bằng việc tối ưu hiển thị cho các thiết bị di động trước. Cách tiếp cận này sẽ tập trung vào các yếu tố cốt lõi của trải nghiệm trên màn hình nhỏ trước, giúp thông tin được trình bày tốt nhất trên diện tích nhỏ hẹp, rồi sau đó mới phát triển trên các màn hình lớn hơn.

Lưới và layout khi thiết kế Website Responsive

Lưới là thành phần cơ bản trong layout của website. Phổ biến nhất hiện nay là lưới 12 cột trên desktop. Sở dĩ lựa chọn con số 12 bởi vì nó dễ chia nhỏ, tạo ra sự thuận tiện khi responsive xuống các kích thước màn hình nhỏ hơn khi biến đổi về các layout 8 cột, 6 cột, 4 cột hay thậm chí 1 cột. Ví dụ khi cần responsive design có 4 thẻ trong lưới 12, mỗi thẻ sẽ chiếm 3 cột tạo thành grid 4x1. Lúc này tại lưới 6 trên mobile, các thẻ sẽ dàn thành 2 hàng trở thành grid 2x2 hoặc thậm chí dàn xuống 4 hàng thành grid 1x4.

Xem thêm: Hệ thống lưới trong thiết kế website - Từ nguyên lý đến thực tiễn

Để design có thể responsive tốt, designer cần nắm được sự linh hoạt của bootstrap để giảm thiểu khó khăn cho developer cũng như tránh gây lỗi khi responsive. Ngoài ra khi làm design responsive, designer cũng phải làm sao giữ lại được sự phân cấp về mặt nội dung. Những section cỡ lớn chiếm 1.2 - toàn màn hình desktop đều cần phải điều tiết lại khi responsive xuống mobile bằng cách tăng khối lượng chiều cao section cũng như kích thước chữ trong nó, nhằm giữ được sức nặng về mặt thị giác tương tự như trên desktop.

Ngoài ra designer cũng cần rèn luyện tư duy biến đổi linh hoạt layout khi làm responsive bằng cách sử dụng những section đặc biệt. Do đặc thù về kích thước màn, người dùng sẽ cần tương tác liên tục vuốt trên mobile khi đọc, và số lượng thao tác này nhiều hơn so với chỉ vài cú cuộn trên desktop. Hiểu được điều này, chúng ta có thể biến các section liệt kê nội dung đơn thuần trên desktop trở nên thú vị hơn trên mobile bằng cách thêm vào đó nhiều tương tác hơn cho người dùng. Điều này không chỉ làm gọn layout hơn, tránh cảm giác dàn trải mà còn mang lại sự thú vị nhờ thu hút được tương tác liên tục và gia tăng cảm xúc thông qua các phản hồi animation.

=> Thiết Kế Web Chuyên Nghiệp – Nền Tảng Thành Công Của Các Doanh Nghiệp

Điều hướng responsive

Nếu coi layout là khung xương của thiết kế thì điều hướng giống như những dây thần kinh kết nối mọi element lại với nhau tạo thành luồng trải nghiệm. Cũng như điều hướng trên desktop, phiên bản mobile giúp người dùng đạt được mục đích sử dụng theo cách nhanh nhất, dễ dàng nhất với một trải nghiệm liền mạch, mượt mà nhất có thể. Điều hướng tốt sẽ làm tăng tính khả dụng của thiết kế, dẫn dắt cảm xúc cũng như hành trình để người dùng cảm thấy thích thú và muốn trải nghiệm toàn bộ các tính năng được đưa ra. Ngược lại, hệ thống điều hướng hoạt động không hiệu quả sẽ khiến người dùng gặp khó khăn khi tìm kiếm cái họ cần, thậm chí tạo ra những luồng trải nghiệm đứt gãy rời rạc mà đội ngũ xây dựng sản phẩm chưa hề nghĩ tới.

Một trong những yếu tố thiết kế phổ biến các designer sẽ gặp phải khi làm responsive là phần menu. Với không gian bị giới hạn chỉ còn lại một khoảng nhỏ trên mobile, việc hiển thị toàn bộ menu là không hợp lý. Vì thế, thanh menu sẽ thu gọn lại chỉ còn 1 icon báo hiệu vị trí menu, người dùng sẽ dễ dàng truy cập tới nội dung bên trong chỉ bằng 1 cú chạm.

*Xem thêm: link bài icon menu của BDX https://www.facebook.com/dx.beau/posts/2816499965163507

Ngoài ra, thẻ cũng là thành tố được sử dụng nhiều khi làm responsive. Không chỉ làm gọn thiết kế, thẻ cũng khiến nội dung được phân chia cụ thể, tách bạch hơn thông qua việc “đóng khung” nội dung vào những ô chứa rõ ràng, dễ nhận diện. Một ưu điểm khác khi sử dụng thẻ là nó mang lại dấu hiệu trực quan về cách sắp xếp để người dùng biết cần phải cuộn ngang hay cuộn dọc để xem tiếp các thẻ còn lại. Với đặc thù của các thiết bị di động, responsive các thẻ nội dung sẽ đẩy mạnh tương tác giữa người dùng với website.

Ngoài ra còn một element nữa bạn có thể sẽ gặp khi xem các design responsive đó là tabs. Sử dụng tab là cách hiệu quả để phân chia những nội dung cùng cấp, mỗi tab sẽ đảm nhiệm việc chứa một nhóm nội dung. Về cơ bản thì tab trên desktop hay trên mobile vẫn giữ nguyên bố cục, người dùng sẽ lựa chọn nội dung cần xem bằng cách bấm vào label từng tab.

Typeface khi Thiết kế Website Responsive

Với sự phát triển của phần cứng, độ phân giải màn hình ngày càng cao. Ở thời điểm hiện tại, các thiết bị smartphone sở hữu màn hình 2K hay thậm chí 4K đã không còn xa lạ với người dùng. Tuy nhiên, hãy thử tưởng tượng khi đem một running text ở cỡ chữ 16pt được xem là bình thường trên màn hình 1920x1080 máy tính sang màn hình mobile cùng độ phân giải, do màn hình mobile nhỏ hơn rất nhiều, ta sẽ có cảm giác đoạn running text trở nên rất lớn.

Vì vậy, để kiểm soát responsive, ta không chỉ cần quan tâm tới độ phân giải màn hình mà đó còn là kích thước màn hình nữa. Trong CSS, đơn vị đo được chia thành 2 loại: đơn vị tuyệt đối và đơn vị tương đối.

Đơn vị tuyệt đối sẽ rất quen thuộc với các designer, đó là px và pt. Px là viết tắt của pixel, nghĩa là điểm ảnh. Còn pt là point, 1 inch = 72 point. Các đơn vị này luôn luôn cố định và không bị tác động bởi bất kì yếu tố nào khác, hoàn toàn có thể đo đếm được.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #3: Ứng dụng trong thiết kế website/App

Đơn vị tương đối là khái niệm quen thuộc với các developer nhiều hơn, đó là %, em và rem. Ngay từ cái tên đã cho thấy các đơn vị tương đối này sẽ dùng cho những thông số không cố định, chịu tác động bởi thành phần bên ngoài như kích thước và độ phân giải màn hình, ngoài ra còn có cả tác động của cách trình duyệt render ra hình ảnh dựa vào code. Hiểu đơn giản, khi sử dụng các đơn vị tương đối, kích thước các element sẽ là các hàm số của các đơn vị tương đối. Dựa vào việc thiết lập kích thước tương ứng theo px của các đơn vị tương đối, mọi yếu tố đồ họa sẽ được render ra các kích thước tương ứng.

Khi nào nên Thiết kế Website Responsive

Thời điểm nào nên quan tâm tới việc làm responsive? Câu trả lời là khi nào cũng được, vì nó phụ thuộc vào từng đơn vị. Tại Beau Agency, chúng tôi luôn thực hiện responsive sau khi đã hoàn thiện thiết kế desktop. Các designer của Beau luôn tuân thủ art direction đã đề xuất với khách hàng, tuy nhiên chúng tôi sẵn sàng “đo ni đóng giày” lại từng section, từng element trên phiên bản mobile để người dùng có được cảm giác thoải mái nhất. Bằng việc sử dụng công cụ Figma mirror, quá trình triển khai thiết kế và đối chiếu preview luôn diễn ra song song và liên tục, đảm bảo design luôn được cân nhắc, chỉnh sửa tỉ mỉ và hoàn thiện hết mức.

Xem thêm: Một Website bất động sản đẹp và hiệu quả cần phải có gì?

nghiên cứu thiết kế Thiết kế Website Thiết kế Web Thiết kế UI website Website doanh nghiệp UI UX/UI Website Responsive Thiết kế website responsive webstie responsive design web design website design

Khi nào doanh nghiệp quan tâm tới việc thiết kế Website Responsive để cải thiện bộ mặt 4.0 của mình? Hãy cùng tìm hiểu với Beau Agency qua bài viết sau.

Thiết kế Responsive là gì?

Thiết kế website trước khi có khái niệm responsive

Kỷ nguyên của các thiết bị di động

Responsive và Thiết kế Website Responsive ra đời

=> Xu Hướng Thiết Kế Website 2018 - 2020

Link bài nghiên cứu: https://media.nngroup.com/media/reports/free/WAP_Usability.pdf

Tối ưu thiết kế Website Responsive và trải nghiệm người dùng

Khi nào nên Thiết kế Website Responsive

Xem thêm: Một Website bất động sản đẹp và hiệu quả cần phải có gì?

Tích hợp, tối đa hoá, vận hành, và nhất quán môi trường số trong doanh nghiệp Tại sao bạn cần cấu trúc quản lý dữ liệu (Data Governance) để xây dựng một doanh nghiệp số thành công Xanh, Đỏ và Câu chuyện Ứng dụng màu sắc trong Thiết kế UI Những điều cần lưu ý khi xây dựng website bán hàng Vai trò quan trọng của nghiên cứu người dùng đối với thiết kế

Off

website design

Ứng dụng màu sắc trong thiết kế website để xây dựng trải nghiệm tối ưu

Cách mắt chúng ta nhìn

Màu sắc và ánh sáng

Thang màu xám grayscale

Nhìn mọi thứ qua lăng kính trắng đen

Sử dụng màu sắc trong thiết kế website

Màu sắc và môi trường

Màu sắc và thương hiệu trong thiết kế website

Sử dụng màu sắc khi thiết kế website

Sử dụng mảng sáng/tối làm chủ đạo

Sử dụng màu brand làm chủ đạo

Phối màu thân thiện hay cực đoan

Lưu ý về màu sắc của hình ảnh trong thiết kế website

Quy trình làm màu

Một số quy luật khi sử dụng màu sắc trong thiết kế website

Màu thiếu tương phản

Lốp sáng

Dùng màu không hợp lý

Mix màu không hợp nhau

Sai phân cấp

Lời kết

Dưới đây là chỉ là một phần trong cuốn cẩm nang cơ bản về màu sắc, từ đó phát triển trực giác thiết kế website, hỗ trợ xây dựng những trải nghiệm số chất lượng cho người dùng.

Bài viết liên quan

Cách mắt chúng ta nhìn

Màu sắc và ánh sáng

Thang màu xám grayscale

Nhìn mọi thứ qua lăng kính trắng đen

Sử dụng màu sắc trong thiết kế website

Màu sắc và môi trường

Màu sắc và thương hiệu trong thiết kế website

Sử dụng màu sắc khi thiết kế website

Sử dụng mảng sáng/tối làm chủ đạo

Sử dụng màu brand làm chủ đạo

Phối màu thân thiện hay cực đoan

Lưu ý về màu sắc của hình ảnh trong thiết kế website

Quy trình làm màu

Một số quy luật khi sử dụng màu sắc trong thiết kế website

Màu thiếu tương phản

Lốp sáng

Dùng màu không hợp lý

Mix màu không hợp nhau

Sai phân cấp

Lời kết

Hiểu từ A-Z về Thiết kế Website Responsive

Thiết kế Responsive là gì

Thiết kế website trước khi có khái niệm responsive

Kỷ nguyên của các thiết bị di động

Responsive và Thiết kế Website Responsive ra đời

Tối ưu thiết kế Website Responsive và trải nghiệm người dùng

Lưới và layout khi thiết kế Website Responsive

Điều hướng responsive

Typeface khi Thiết kế Website Responsive

Khi nào nên Thiết kế Website Responsive

Khi nào doanh nghiệp quan tâm tới việc thiết kế Website Responsive để cải thiện bộ mặt 4.0 của mình? Hãy cùng tìm hiểu với Beau Agency qua bài viết sau.

Bài viết liên quan

Thiết kế Responsive là gì?

Thiết kế website trước khi có khái niệm responsive

Kỷ nguyên của các thiết bị di động

Responsive và Thiết kế Website Responsive ra đời

Tối ưu thiết kế Website Responsive và trải nghiệm người dùng

Lưới và layout khi thiết kế Website Responsive

Điều hướng responsive

Typeface khi Thiết kế Website Responsive

Khi nào nên Thiết kế Website Responsive