web design

Bí quyết sử dụng hình ảnh cho web design và 5 dạng content ảnh phổ biến

content2 — Fri, 01 Mar 2024 04:11:05 +0000

Bí quyết sử dụng hình ảnh cho web design và 5 dạng content ảnh phổ biến content2 T6, 03/01/2024 - 11:11 UX/UI

Một vài dữ liệu thực tế sau sẽ giúp bạn thấy tầm quan trọng của hình ảnh:

Con người cảm nhận hình ảnh nhanh hơn 60.000 lần so với văn bản.
Con người chỉ cần khoảng 1/10 giây để có nhận thức chung về hình ảnh
Những thông tin quan trọng thường được não cố định dưới dạng hình ảnh trực quan ngay cả khi đọc dưới dạng văn bản
Hình ảnh dễ ghi nhớ bất chấp môi trường xung quanh, còn văn bản phụ thuộc nhiều vào tính đọc
Hình ảnh lưu trữ tốt hơn trong bộ nhớ dài hạn, nên người dùng xử lý và tương tác trên giao diện nhanh hơn
Giao diện hình ảnh mang tính toàn cầu và phù hợp với nhiều quốc gia
Hình ảnh giúp nâng cao thứ hạng website trên công cụ tìm kiếm và đem đến organic traffic
Hình ảnh phù hợp với những đối tượng gặp giới hạn với chữ, như trẻ mắc bệnh khó đọc

Do đó, có lẽ không cần phải bàn cãi về sự cần thiết của hình ảnh đối với web hoặc app. Nhưng bạn có biết ta có thể phân loại hình ảnh trên website thành tới 5 dạng content ảnh phổ biến? Hãy đọc tiếp.

Thiết kế Web Tối ưu website web design

Bạn có biết ta có thể phân loại hình ảnh trên website thành tới 5 dạng content ảnh phổ biến?

5 web content phổ biến dạng hình ảnh trong web design

Nội dung web về cơ bản là mọi thứ hiện trên trang và là một phần của trải nghiệm người dùng. Đó là những gì bạn đọc, nghe, thấy, và thao tác trên một website. Trong số đó, hình ảnh không chỉ là yếu tố mang tính thẩm mỹ.

Trong UX/UI, hình ảnh đóng vai trò quan trọng trong việc xây dựng khả năng sử dụng. Hầu hết người dùng web đều cảm nhận hình nhanh hơn chữ, và cũng quét trang để tìm hình trước tiên.

Hơn nữa, hình ảnh hay visual mang tính thông tin và hấp dẫn về mặt cảm xúc, giúp không chỉ truyền tải một thông điệp mà còn cả tính thẩm mỹ. Và có lẽ không thể quên là chúng có ảnh hưởng tích cực đến thứ hạng SEO của trang web.

Tùy thuộc vào mục tiêu thiết kế trang web, team design có thể sử dụng các loại hình ảnh khác nhau sau:

Ảnh chụp
Illustration
Linh vật
Logo
Hình 3D

Đọc thêm: Ứ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 sử dụng hình ảnh cho web design

Ảnh chụp

Ảnh chụp có lẽ là lựa chọn phổ biến nhất trong thiết kế website, và được dùng cho nhiều mục đích như:

Hình chủ đề
Hình minh hoạ
Hình sản phẩm
Hình bài viết
Hình hero

Ưu điểm lớn nhất của ảnh chụp là khả năng kết nối giữa người dùng website với thế giới thực - nơi có sự sống và sự vật. Hình chụp đã là một phần của cuộc sống con người hàng trăm năm, giúp tạo nên cảm xúc tức thì cho người xem.

Khi sử dụng điêu nghệ, hình chụp chính là nghệ thuật để bạn cân bằng giữa thực tế và thẩm mỹ. Designer sử dụng hình ảnh để tạo nên một phong cách phù hợp đối tượng, và định hướng cảm xúc để dẫn tới hành động.

Để sử dụng ảnh chụp trên website, bạn có nhiều nguồn khác nhau, như mua ảnh stock từ các trang như Shutterstock hay Istockphoto, hoặc tải ảnh miễn phí từ các trang như Unsplash, Pexels. Nếu bạn muốn làm chủ hình ảnh, hãy tự chụp ảnh để có độ phù hợp cao nhất.

Một trong những xu hướng của web design là sử dụng hình chụp làm hình nền cho chữ, khiến cho thông điệp và cảm xúc phối hợp tốt hơn. Tuy nhiên, bạn sẽ cần chú ý kỹ đến độ tương phản và tính đọc của các thành phần để có kết quả tốt nhất.

Tips sử dụng ảnh chụp cho web design

Sử dụng hình ảnh chất lượng cao, nhưng tối ưu để không ảnh hưởng tốc độ load trang
Hãy để ảnh được “thở” với các khoảng trống, đừng dùng quá nhiều chi tiết
Lưu ý responsive để ảnh hiển thị tốt trên nhiều màn hình
Hình ảnh là tiếng nói giao tiếp với người dùng, hãy dùng chúng để truyền tải thông điệp và hỗ trợ các phần khác của thiết kế trang

Đọc thêm: Lựa Chọn Hình Ảnh Cho Website Doanh Nghiệp

Illustration

Illustration là dạng hình ảnh đồ hoạ máy tính có thể mang nhiều phong cách khác nhau cho nhiều mục đích trên website. Mang sự độc đáo trong các chi tiết, illustration là nền tảng cho sự nguyên bản của trang web, cũng như là cơ hội để designer được thoả sức sáng tạo.

Kết hợp với animation, illustration tạo nên một website sống động và hấp dẫn. Bạn có thể sử dụng illustration trong:

Ảnh hero
Ảnh chủ đề
Các nhân vật giao tiếp với người dùng
Ảnh bài blog
Ảnh chương trình khuyến mãi
Tin nhắn thông báo
Sticker
Hình ảnh kể chuyện
Infographic
Banner quảng cáo
Danh mục nội dung

Ví dụ như với website cho Dewey School, chúng tôi sử dụng một bộ custom illustration dạng visual pattern để thể hiện sự sáng tạo của học sinh, sau đó kết hợp với hình ảnh thực tế để truyền tải về không khí học tập cởi mở của ngôi trường quốc tế năng động này.

Đọc thêm: Hình khối trong Thiết kế Web: Tâm lý học và Nhận thức thị giác

Mascot - linh vật

Linh vật là một hình ảnh các nhân hoá được tạo ra để đại diện cho thương hiệu, dịch vụ, hoặc một nhân vật công chúng. Với web design, mascot là một thành phần giao tiếp hiệu quả với người xem.

Bạn có thể thay đổi mascot để phù hợp với thông điệp, như biểu cảm, trang phục, hoạt động,vv, từ đó phản ánh tâm trạng người dùng và hướng dẫn họ qua các cử chỉ thân thiện. Hay có thể nói là có “tính người” hơn?

Trong dự án thiết kế website cho Tony Fruit, chúng tôi đã sử dụng mascot của thương hiệu để đem đến sự tươi mới và vui khoẻ, thể hiện chất lượng của các dòng sản phẩm hoa quả chất lượng cao mà công ty mang tới.

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

Logo

Logo là một thành phần thiết yếu của thương hiệu, nên cũng là hình ảnh rõ ràng cần có trên website để thể hiện công ty, dịch vụ, cộng đồng, con người, vv. Không có quá nhiều khác biệt trong việc sử dụng logo trên các website, nên bạn có thể cân nhắc các cách sau:

- Đặt logo ở header là một lựa chọn phổ biến vì đây là khu vực người dùng quét qua thường xuyên
- Đừng quá sáng tạo với hành vi khi click vào logo - hoặc là dẫn về hompage hoặc đầu trang nếu là một landing page.
- Hãy cân nhắc thêm animation cho logo khi hover, việc này sẽ khiến cho logo trở nên sống động hơn và thông báo về khả năng tương tác.

Đọc thêm: 4 nhân tố tạo nên thương hiệu doanh nghiệp vững mạnh: Logo, Typeface và font, Image, Style guideline

Hình ảnh 3D

Hình 3D trên website đã trở nên phổ biến trong các năm gần đây, và nhiều sản phẩm còn có độ chân thực cao, giúp cho website trở nên độc đáo hơn. Đặc biệt với ứng dụng của AI, ta có thể sẽ thấy hình ảnh 3D ngày càng được sử dụng nhiều để tiết kiệm chi phí so với ảnh chụp.

Dẫu vậy, bạn vẫn sẽ cần một con mắt thiết kế tinh tường để xác định các áp dụng hình 3D vào website. Và chúng vẫn sẽ đắt hơn so với việc mua ảnh stock có sẵn. Nhưng các model 3D sẽ là lựa chọn tuyệt vời để tạo nên một thiết kế độc nhất với khả năng tương tác cho người dùng.

Bạn đã hiểu hơn về sử dụng hình ảnh cho web design chưa? Nếu thấy bài viết hữu ích, hãy chia sẻ với bạn bè và theo dõi blog Beau thường xuyên nhé.

Đọc thêm: 10 lợi ích của website doanh nghiệp để tăng tính cạnh tranh

Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"? Mở rộng tư duy thiết kế với Futures Thinking Hiểu nhanh về Website Headless CMS trong 5 phút Website tập đoàn: Có nên xây dựng nhiều web cho mỗi doanh nghiệp thành viên? Lợi ích và cách áp dụng Concept Testing trong thiết kế Hệ thống thiết kế (Design System) — Nghệ thuật để mở rộng thiết kế

Off

Đừng ngại lựa chọn agency thiết kế website phù hợp cho thương hiệu

content — Fri, 10 Jun 2022 02:58:49 +0000

Đừng ngại lựa chọn agency thiết kế website phù hợp cho thương hiệu content T6, 06/10/2022 - 09:58 Agency ngoại truyện

Bạn đang tự hỏi cách để lựa chọn agency thiết kế website? Nhưng giữa quá nhiều agency khác nhau, việc lựa chọn một agency thích hợp là không dễ dàng. Trong khi website là bộ mặt của cả doanh nghiệp, là kênh chính thức để doanh nghiệp chia sẻ thông tin. Vậy nên, chọn sai agency có thể khiến doanh nghiệp mất thời gian, tiền bạc, đồng thời ảnh hưởng tới hình ảnh doanh nghiệp.

Bài viết này sẽ chia sẻ 4 bước giúp doanh nghiệp có thể giảm thiểu rủi ro và chọn cho mình một agency thiết kế website phù hợp:

Xác định mục tiêu công việc trước khi chọn agency thiết kế website

Đây là việc tiên quyết. Bạn nên dành thời để liệt kê các yêu cầu của trang web doanh nghiệp, bởi tuỳ theo tính chất và mô hình kinh doanh của mỗi doanh nghiệp mà website sẽ cần những chức năng khác nhau.

Việc này quan trọng bởi nó đóng vai trò như kim chỉ nam của dự án, cũng như tìm ra agency thiết kế website phù hợp. Thiết kế website không chỉ là vấn đề thẩm mỹ, mà nó có thể bao gồm cả những thứ như:

Tạo khách hàng tiềm năng
Công cụ, phần mềm cho trang web
Nền tảng email marketing
Nền tảng thanh toán
Biểu mẫu
Điều hướng người dùng
Tối ưu cho SEO
Trang chuyển đổi
Gian hàng mua bán

Lưu ý rằng website là một công cụ hỗ trợ kinh doanh, vậy nên nó không chỉ đơn giản là việc đẹp hay xấu. Hãy dành thời gian viết ra những mục tiêu cụ thể. Đồng thời, xác định ngân sách có thể bỏ ra cho dự án cũng là điều quan trọng.

Liên hệ agency

Khi đã có một danh sách những yêu cầu cần có cho website, bạn nên hỏi những người từng làm website hoặc tra cứu để có một danh sách những agency thiết kế website. Và vấn đề địa lý sẽ không gây ảnh hưởng tới việc lựa chọn này. Dù các agency đó thuộc địa phương của bạn hay ở một khu vực hoặc quốc gia khác, thì chúng ta vẫn có thể hợp tác thông qua nền tảng online.

Bạn có thể tạo các buổi trao đổi online với agency qua Skype hoặc Slack. Việc trao đổi nhằm giúp bạn hiểu được năng lực hiện có của agency, những ý tưởng mà họ có thể đưa ra cho bạn.

=> Làm thế nào để hợp tác hiệu quả với các Agency

Chọn lọc trong các agency thiết kế website

Có 3 khía cạnh chính khi sàng lọc các agency tiềm năng. Đó là kinh nghiệm, sản phẩm và phong cách làm việc của agency.

Kinh nghiệm

Bạn nên biết được agency ấy đã thành lập bao nhiêu năm. Yếu tố kinh nghiệm sẽ giúp hiểu đúng về năng lực của agency. Nếu agency đã có kinh nghiệm, đội ngũ trong đó sẽ là những chuyên gia. Những người không chỉ thiết kế mà còn có thể tư vấn cho bạn về việc nên thiết kế website đó như thế nào và nó có thể đem lại những lợi ích gì.

Xem thêm: Hợp tác Client và Agency: Những góc nhìn mới

Sản phẩm

Sản phẩm cũng là một thước đo giúp bạn đánh giá năng lực của agency. Thẩm mỹ là quan trọng nhưng nó không phải thứ duy nhất chúng ta quan tâm khi xem xét sản phẩm của agency. Số lượng khách hàng đã hợp tác với agency này cũng quan trọng bởi nó phản ánh khối lượng dự án họ đã làm. Có những agency thiết kế website lâu năm nhưng không có nhiều dự án, và ngược lại, có những agency trẻ năng động thực hiện rất nhiều dự án. Vậy nên, xem xét về số năm kinh nghiệm thôi là không đủ.

Và khi xem sản phẩm của các agency thiết kế website đã vào tầm ngắm, hãy xem xét một số điều sau:

Khả năng agency có thể tạo ra một trang web thân thiện với thiết bị di động
Bộ kỹ năng để thích ứng với xu hướng thiết kế web mới
Khả năng tạo cấu trúc và điều hướng trang web thân thiện.
Phong cách làm việc

Sản phẩm hay số năm kinh nghiệm thôi là chưa đủ, chúng ta cần biết về phong cách làm việc của agency mà chúng ta sẽ làm việc. Việc agency có tác phong làm việc chuyên nghiệp, quy trình làm việc rõ ràng sẽ là một điểm cộng lớn. Để biết những điều ấy bạn nên trao đổi trực tiếp với agency, nhờ họ cung cấp một lộ trinh hợp tác cụ thể.

Ngoài phong cách làm việc, bạn cũng có thể quan tâm tới văn hóa của agency đó. Một agency với văn hóa dễ chịu và phù hợp với doanh nghiệp của bạn sẽ giúp quá trình hợp tác trở nên trơn tru, giảm trường hợp xảy ra mẫu thuẫn. Và bạn có thể phần nào biết về văn hóa của họ thông qua những kênh mạng xã hội.

Chứng thực

Chúng ta bàn luận về tầm quan trọng của kinh nghiệm, sản phẩm và phong cách làm việc của agency thiết kế website. Tuy nhiên vẫn còn một bước nữa mà bạn cần làm, tìm kiếm và đọc những lời chứng thực, những đánh giá của khách hàng cũ về agency đó. Với những agency đã được người quen giới thiệu bạn hay hỏi những người đó về trải nghiệm hợp tác của họ. Bước này nhằm đảm bảo những chọn lọc của bạn chính xác và agency thiết kế website bạn đang nhắm tới xứng đáng để hợp tác cùng.

Agency Ha Noi Agency in Hà Nội Agency in Việt Nam Agency web design thiết kế giao diện Thiết kế Web Thiết kế Website lựa chọn agency

Bài viết này sẽ chia sẻ 4 bước giúp doanh nghiệp có thể giảm thiểu rủi ro và hỗ trợ lựa chọn agency thiết kế website phù hợp.

Bài viết liên quan

Bài viết này sẽ chia sẻ 4 bước giúp doanh nghiệp có thể giảm thiểu rủi ro và hỗ trợ lựa chọn agency thiết kế website phù hợp.

Xác định mục tiêu công việc trước khi chọn agency thiết kế website

Tạo khách hàng tiềm năng
Công cụ, phần mềm cho trang web
Nền tảng email marketing
Nền tảng thanh toán
Biểu mẫu
Điều hướng người dùng
Tối ưu cho SEO
Trang chuyển đổi
Gian hàng mua bán

Liên hệ agency

=> Làm thế nào để hợp tác hiệu quả với các Agency

Chọn lọc trong các agency thiết kế website

Có 3 khía cạnh chính khi sàng lọc các agency tiềm năng. Đó là kinh nghiệm, sản phẩm và phong cách làm việc của agency.

Kinh nghiệm

Xem thêm: Hợp tác Client và Agency: Những góc nhìn mới

Sản phẩm

Và khi xem sản phẩm của các agency thiết kế website đã vào tầm ngắm, hãy xem xét một số điều sau:

Khả năng agency có thể tạo ra một trang web thân thiện với thiết bị di động
Bộ kỹ năng để thích ứng với xu hướng thiết kế web mới
Khả năng tạo cấu trúc và điều hướng trang web thân thiện.
Phong cách làm việc

Chứng thực

5 câu hỏi cần đặt ra khi bắt tay vào kế hoạch xây dựng web Liệu thời đại website giá rẻ đã kết thúc? Tại sao cần website doanh nghiệp? Lợi ích website doanh nghiệp Những điều cần lưu ý khi xây dựng website bán hàng Cải thiện hành trình trải nghiệm khách hàng chất lượng qua những điểm chạm tinh tế

Off

Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

content — Mon, 30 May 2022 09:11:30 +0000

Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt content T2, 05/30/2022 - 16:11 Cảm hứng thiết kế sáng tạo

Font chữ và ngành công nghiệp làm font đã có lịch sử hàng nghìn năm. Kể từ thế kỷ 15, máy in được phát minh và đi theo đó, việc thiết kế và chuẩn hóa font cũng được chú trọng hơn. Tính tới nay, đã gần 6 thế kỷ trôi qua, font chữ hiện đã có mặt khắp nơi, gắn với nhiều hoạt động của con người.

Tuy có lịch sử dài như vậy nhưng khi xét cụ thể với font chữ Tiếng Việt, ngành công nghiệp này gần như không tồn tại. Nguyên do của việc này là bởi sự chậm tiến về kỹ thuật, đồng thời, do bản thân bộ chữ Tiếng Việt cũng là một ngôn ngữ rất mới. Nếu Tiếng Anh, Tiếng Đức hay Tiếng Pháp đã có hàng nghìn năm, thì bộ chữ Quốc Ngữ của chúng ta mới chỉ xuất hiện trên dưới 400 năm, được đi vào sử dụng chính thức khoảng 150 năm trở lại đây.

=> Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Sinh sau đẻ muộn, lại được xây dựng dựa trên bộ chữ Latinh, vậy nên font chữ Tiếng Việt cũng bị ảnh hưởng mạnh mẽ bởi những font chữ Latinh trước đó. Đặc biệt là khi di chuyển tới thời kỳ internet, khi font chữ được số hóa, dễ dàng được chia sẻ, nó tạo ra một thuật ngữ thường được nhắc tới trong giới thiết kế là “font Việt hóa”.

Tuy những bộ font Việt hóa này lấy từ những font Tiếng Anh, với bảng chữ cái tương tự, nhưng về bản chất Tiếng Anh và Tiếng Việt vẫn là hai ngôn ngữ khác nhau. Những font chữ này vốn không được thiết kế để phù hợp với bảng chữ cái Tiếng Việt, vậy nên, khi chúng ta mang chúng về và “Việt hóa” chúng ta sẽ gặp rất nhiều rào cản. Những rào cản ấy là gì?

Xem thêm: 10 nhận diện thương hiệu đẹp và hiệu quả từ brands

Sự khác biệt giữa Tiếng Anh và Tiếng Việt

Dù Tiếng Anh và Tiếng Việt cùng là ngôn ngữ thuộc hệ chữ Latin, nhưng với Tiếng Việt chúng ta một bảng chữ cái phức tạp hơn và nó đặc biệt phức tạp khi chúng được thêm dấu.

Nếu bảng chữ cái Tiếng Anh có 26 ký tự, thì bảng chữ cái Tiếng Việt có 29 ký tự. Trong đó, Tiếng Anh có những chữ cái mà Tiếng Việt không có, như: f, j, w, z. Nhưng ngược lại, Tiếng Việt có thêm dấu chữ, tạo ra các biến thể chữ mà Tiếng Anh không có là: ă, â, ê, đ, ô, ơ, ư.

Như vậy với Tiếng Anh, số lượng các cặp ký tự sẽ ít hơn Tiếng Anh. Ví dụ, trong Tiếng Anh sẽ chỉ có cặp n-a, mà sẽ không có các cặp n-ă, n-â, tương tự, Tiếng Anh là h-o thì Tiếng Việt sẽ là cả h-o và cả h-ô, h-ơ.

Và đặc biệt, ngoài dấu chữ, Tiếng Việt còn có dấu giọng (thanh dấu), gồm: huyền, sắc, ngã, nặng, hỏi, khiến cho một cặp n-a trong Tiếng Anh có thể trở thành 18 cặp trong Tiếng Việt là: n-a, n-à, n-á, n-ã, n-ạ, n-ả, n-ă, n-ằ, n-ắ, n-ẵ, n-ặ, n-ẳ, n-â, n-ầ, n-ấ, n-ẫ, n-ậ, n-ẩ.

Với sự phức tạp này, khi làm việc với font Tiếng Việt chúng ta sẽ đối mặt với những thách thức gì?

Thách thức với font Tiếng Việt

Hai tầng dấu

Tiếng Việt không phải là ngôn ngữ duy nhất có dấu, Tiếng Pháp hay Tiếng Tây Ban Nha cũng có dấu. Tuy nhiên, Tiếng Việt là ngôn ngữ duy nhất có 2 tầng dấu. Ví dụ, từ “đố” là một từ có 2 tầng dấu, gồm cả dấu chữ lẫn dấu giọng.

Việc có 2 tầng dấu này tạo ra nhiều thách thức cho việc thiết kế font. Thứ nhất, nó ảnh hưởng tới khoảng cách dòng. Với 2 tầng dấu, mật độ của khoảng dương (chữ) sẽ trở nên dầy hơn, khiến cho khoảng âm (khoảng trống) bị hẹp lại. Trong trường hợp này, nếu chúng ta giữ nguyên khoảng cách dòng như với Tiếng Anh, khả năng cao nó sẽ gây khó đọc.

Xem thêm: Series: Typography trong quy trình xây dựng trải nghiệm số #2 Kết hợp typeface

Điều ấy khiến chúng ta phải cân nhắc tới việc thu nhỏ hoặc thay đổi vị trí dấu. Nhưng nó cũng sẽ trở thành vấn đề thứ hai. Việc thu nhỏ dấu có thể bất hợp lý bới thiết kế font không phù hợp với dấu nhỏ. Tương tự, thay đổi vị trí dấu cũng có thể tạo ra vấn đề kerning.

Font Tiếng Việt đặt vị trí dấu như thế nào?

Trong trường hợp đứng một mình, những chữ cái không có dấu chữ hoặc có là dấu móc, dấu trăng (mũ ngược), việc đặt dấu giọng khá đơn giản. Chúng ta có thể căn giữa, hoặc căn theo trục chữ (đối với font chữ nghiêng).

Nhưng với những ký tự kèm dấu mũ, ví dụ như â, ô, ê, khi đi cùng dấu sắc hoặc huyền, việc đặt dấu sẽ cần xem xét kỹ hơn. Bởi dấu mũ chiếm một khoảng trống tương đối tính từ x-height lên tới đỉnh mũ, việc thêm thanh dấu ngay chính giữa khiến chữ được cân bằng hơn nhưng lại làm tăng diện tích dấu, có thể làm ảnh hưởng tới khoảng trống cần thiết của khoảng cách dòng.

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

Thông thường, dấu sắc và dấu huyền được đặt bên phải của dấu mũ, nó giải quyết vấn đề về khoảng trống nhưng không gây cảm giác khó đọc. Dù vậy, hai dấu này vẫn có thể đặt bên trái nếu nó phù hợp với thiết kế của chữ.

Ngoài ra, việc đặt dấu cũng sẽ gặp vấn đề khi chữ cái kết hợp thành cặp. Ví dụ như với cặp ố-t, nếu dấu sắc đặt quá sát về phía chữ t bên trái có thể tạo ra khoảng dấp dính, gẫy khó đọc.

Kerning trong font tiếng Việt

Cũng với ví dụ của cặp ố-t, để giải quyết vấn đề này chúng ta cần điều chỉnh khoảng trống giữ hai cặp, sao cho giải được vấn đề khó đọc nhưng vẫn giữ đảm bảo tính thẩm mỹ và nhịp điều (giữa chữ và khoảng trống) trong tổng thể font chữ.

Xem thêm: Nhận diện thương hiệu: Học được gì từ logo của Starbucks?

Tương tự, với những ký tự có dấu móc như ơ và ư, cũng khiến cho việc kerning trở nên khó khăn hơn. Nếu với o hay u, các cặp đi cùng chúng có thể được kerning theo strem của chữ. Vì không có dấu móc nên khoảng cách này cũng sẽ khá giống với khoảng cách khi chúng ta kerning cho các ký tự như a, b, e, p. Tuy nhiên, với ơ hay ư, khi có dấu móc bên phải, việc kerning không thể giống với o, u, thường khoảng cách sẽ phải rộng hơn. Đồng thời khi thiết kế chữ, designer cũng phải xem xét tới yếu tố này để quyết định hình dạng và kích thước của dấu móc.

Trọng lượng dấu

Không chỉ có dấu móc, hình dạng và kích thước của các dấu khác cũng ảnh hưởng tới các yếu tố khác của font chữ. Bởi vậy, thiết kế của dấu nên được xem xét ngay từ khi bắt đầu thiết kế font chữ.

Tuy nhiên việc thiết kế dấu Tiếng Việt gặp phải thách thức về việc xác định trọng lượng (diện tích) của dấu. Thường designer sẽ không muốn để trọng lượng dấu lớn bởi sẽ gây khó khăn trong việc điều chỉnh các khoảng cách chữ. Đặc biệt là khi viết hoa, ví dụ như chữ “HẰNG”, dấu của chữ sẽ còn cao hơn cả cap height.

Dù vậy, trọng lượng dấu quá nhỏ cũng có thể là vấn đề. Với thiết kế dấu nhỏ, mặt chữ sẽ trở nên khó nhận diện. Ví dụ, chữ “chú” hoàn toàn có thể bị đọc nhầm thành “chu”.

Hình dạng dấu trong font Tiếng Việt

Như đã nói, hình dạng dấu tương quan với các yếu tốc khác của toàn bộ font chữ. Hình dạng dấu cần được thiết kế sao cho đáp ứng đủ những tiêu chí về khả năng đọc, nhận diện mặt chữ nhưng cũng phải phù hợp và hài hòa với thiết kế font chữ tổng thể.

Đây là vấn đề phổ biến nhất của các bộ font chữ Việt hóa. Bởi khi thêm dấu cho một font chữ đã hoàn thiện, việc thiết kế chúng như thế nào để nó được đồng nhất với thiết kế của font là vô cùng khó.

Bởi vậy mà dấu của font chữ Việt hóa thường xấu, không có cùng ngôn ngữ thị giác với font chữ gốc. Còn ngược lại, nếu chúng ta thiết kế một bộ dấu phù hợp với thiết kế font chữ thì chúng ta vẫn phải điều chỉnh lại toàn bộ các yếu tố khoảng cách. Dù điểu chỉnh xong chưa chắc đã ra một bộ font đẹp.

Xem thêm: Bạn đã biết về Quy tắc thiết kế UI cho website?

Typography Thiết kế UI UI UX/UI Typo Font chữ Font Tiếng Việt Humanist Typeface Typeface web design Thiết kế Website

Bài viết liên quan

=> Series: Typography trong quy trình xây dựng trải nghiệm số #1: Lựa chọn font chữ

Xem thêm: 10 nhận diện thương hiệu đẹp và hiệu quả từ brands

Sự khác biệt giữa Tiếng Anh và Tiếng Việt

Với sự phức tạp này, khi làm việc với font Tiếng Việt chúng ta sẽ đối mặt với những thách thức gì?

Thách thức với font Tiếng Việt

Trọng lượng dấu

Hình dạng dấu trong font Tiếng Việt

Xem thêm: Bạn đã biết về Quy tắc thiết kế UI cho website?

Nghề thiết kế trải nghiệm người dùng (UI/UX Designer) có phải "nghề siêu dễ"? Mở rộng tư duy thiết kế với Futures Thinking Muôn nẻo đường ngoắt ngoéo với font Tiếng Việt

Off

Ứ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ì?