Các tài liệu khoá học cho việc tự học ui ux

Có một số con đường để học thiết kế UI/UX và thực sự không có một cách nào đúng hay sai. Tất cả đều phụ thuộc vào việc học các lý thuyết đằng sau thiết kế tốt và thực hành chúng cho đến khi thành thạo chúng.

Trong bài viết này, mình sẽ hướng dẫn bạn 6 bước bạn cần để trở thành một nhà thiết kế UI/UX chính hiệu bằng cách tự học.

  • Bước 1: Tìm hiểu các nguyên tắc cơ bản về UX Design
  • Bước 2: Luyện tập để mắt thẩm mỹ được tốt hơn
  • Bước 3: Đầu tư vào phần mềm thiết kế phù hợp
  • Bước 4: Bắt đầu xây dựng danh mục công việc
  • Bước 5: Đọc các bình luận và rút kinh nghiệm
  • Bước 6: Có được kinh nghiệm làm việc trong thực tế

Các tài liệu khoá học cho việc tự học ui ux

Bước 1: Tìm hiểu các nguyên tắc cơ bản về thiết kế UX Design

Trải nghiệm của người dùng trên một trang web được cho là phần quan trọng nhất của bất kỳ thiết kế thành công nào — điều đó có nghĩa là bạn phải hiểu các nguyên tắc chính của thiết kế UX.

Thiết kế UX tập trung vào việc tạo ra trải nghiệm thú vị thông qua việc đáp ứng nhu cầu và mong muốn của người dùng, cũng như thông qua tâm lý người dùng.

Hiểu được lý do tại sao người dùng thực hiện các hành động nhất định và điều gì khiến họ tiếp tục sử dụng một trang web (hoặc từ bỏ trang web đó) là chìa khóa để tạo ra một sản phẩm đáp ứng nhu cầu của người dùng cũng như mục tiêu kinh doanh.

Có rất nhiều hướng dẫn, khóa học và tài nguyên UX với giá cả phải chăng thậm chí là miễn phí trên mạng, tất cả đều có sẵn cho bạn sử dụng. Bạn có thể bắt đầu là với cuốn sách Don't Make Me Think của Steve Krug. Ông được nhiều người ví như là cha đỡ đầu của thiết kế UX.

“Xem hướng dẫn là một bổ sung thông minh cho quá trình học tập của bạn. Chỉ cần nhớ rằng nó không phải là tất cả về học lý thuyết màu sắc hoặc các mẫu giao diện người dùng — hướng dẫn về cách huấn luyện tâm trí của bạn để suy nghĩ như một nhà thiết kế UX và hiểu nhu cầu của người dùng cũng là chìa khóa. ” - Bojan Novakovic, A Self-taught UI/UX Designer

Các tài liệu khoá học cho việc tự học ui ux

Bước 2: Luyện tập để mắt thẩm mỹ được tốt hơn

Tìm hiểu các nguyên tắc cơ bản của thiết kế sẽ cho bạn nắm được kiến thức cơ bản trong thiết kế hoặc tâm lý người dùng. Để nâng cao kỹ năng của bạn lên một tầm cao mới, hãy thực hành research thiết kế của các trang web và ứng dụng mà bạn yêu thích, nghiền ngẫm chúng mỗi ngày sẽ tạo nên thói quen phân tích kỹ năng design cho bạn.

Ví dụ: lần tới khi bạn nhìn thấy một trang web mà bạn yêu thích, hãy dành vài phút để phân tích xem trang web đó hoạt động hiệu quả với bạn như thế nào. Nó sử dụng color palette gì? Thiết kế tương tác như thế nào? Kiểu chữ ra sao?

Xem xét mọi phần của thiết kế: khoảng cách giữa các component, grid mà trang web được thiết kế, hệ thống phân cấp trực quan của trang web và thậm chí cả các hình ảnh và icon cụ thể được sử dụng. Hãy tự hỏi bản thân điều gì hiệu quả và điều gì không? Đây là chìa khóa để luyện tập cho mắt thẩm mỹ được tốt hơn.

Các tài liệu khoá học cho việc tự học ui ux

Bước 3: Đầu tư vào các công cụ thiết kế phù hợp

Tiếp theo, bạn sẽ muốn đầu tư vào phần mềm UI/UX để bắt đầu đưa các thiết kế của bạn vào cuộc sống và bắt đầu áp dụng những gì bạn đã học cho đến nay.

Có rất nhiều công cụ tuyệt vời có sẵn trên thị trường, nhưng mình khuyên bạn nên thử một số công cụ hàng đầu trong ngành như Figma, Sketch và Adobe XD để cảm nhận cái nào bạn thích.

Dưới đây là tóm tắt nhanh về những gì mỗi phần mềm cung cấp:

  • Figma :

    Figma là một công cụ tạo mẫu và thiết kế hợp tác cho các dự án kỹ thuật số. Đây là phần mềm thiết kế UI/UX mới nhất trên thị trường và nhanh chóng trở thành công cụ được nhiều nhà thiết kế lựa chọn.

  • Sketch :

    Sketch là một ứng dụng thiết kế kỹ thuật số dành cho macOS. Các nhà thiết kế sử dụng Sketch thích nó vì khả năng plugin và giao diện trực quan của nó.

  • Adobe XD :

    Adobe XD được xây dựng đặc biệt với các nhà thiết kế giao diện người dùng. Phần tốt nhất là, Adobe XD hoàn toàn miễn phí và cho phép bạn thiết kế và tạo mẫu một cách dễ dàng.

Tuy nhiên, không có công cụ nào phù hợp cho các UI/UX Designer. Việc quyết định phần mềm nào mang lại cảm giác trực quan và thân thiện nhất với bạn là tùy thuộc vào bạn.

Các tài liệu khoá học cho việc tự học ui ux

Bước 4: Bắt đầu xây dựng danh mục công việc

Đọc sách và tài liệu hoặc xem hướng dẫn thiết kế sẽ chỉ giúp bạn hiểu được điều đó. Những gì bạn thực sự cần làm để trở thành UI/UX thực sự là thiết kế các sản phẩm kỹ thuật số và bắt đầu tích lũy một số sản phẩm cho riêng mình.

Tại thời điểm này, bạn có thể tự hỏi mình - làm thế nào để xây dựng một danh mục công việc mà không cần bất kỳ kinh nghiệm thực tế nào?

Nếu bạn đang bắt đầu từ đầu, chúng tôi thực sự khuyên bạn nên tải xuống một số bộ giao diện có sẵn trên mạng và sau đó redesign lại để giúp bắt đầu thiết kế của bạn. Bộ giao diện người dùng là một tập hợp các thành phần thiết kế được tạo sẵn chứa các yếu tố hình ảnh cần thiết cho một thiết kế giao diện người dùng cụ thể (Button, icon, typeface, menu, v.v.).

Sử dụng các bộ giao diện người dùng này để thiết kế trang web hoặc ứng dụng di động của riêng bạn cho người mới bắt đầu. Nhưng cũng nên xem xét việc thiết kế lại các trang web hiện có. Chọn một số trang web yêu thích của bạn và khám phá cách bạn có thể redesign chúng để giao diện và hoạt động tốt hơn nữa.

Sau đó, tìm hiểu cách tạo mockup design và cân nhắc đăng chúng lên mạng xã hội hoặc nền tảng chia sẻ thiết kế như Behance, Dribbble để nhận phản hồi nhằm cải thiện hơn nữa.

“Mặc dù có vẻ quá sức khi bắt đầu một dự án từ đầu với rất ít kinh nghiệm, nhưng nó sẽ thúc đẩy sự sáng tạo của bạn và thách thức bạn khám phá ra các giải pháp mới. Đừng dừng lại, hãy tiếp tục di chuyển ”. - Bojan Novakovic, A self-taught UI/UX Designer

Các tài liệu khoá học cho việc tự học ui ux

Bước 5: Đọc các bình luận và rút kinh nghiệm

Trái với suy nghĩ của nhiều người, bình luận tiêu cực thực sự có thể hữu ích hơn nhiều so với bình luận tích cực. Nó có thể giúp bạn phát triển với tư cách là một Designer, nâng cao kỹ năng và tạo ra các sản phẩm tốt hơn.

Học cách tìm kiếm và đón nhận những bình luận tiêu cực và sử dụng nó làm kinh nghiệm để cải thiện thiết kế của bạn. Đăng sản phẩm của bạn trên Behance hoặc Dribbble và thường xuyên theo dõi bình luận dưới bài viết để nhận feedback từ cộng đồng.

Cuối cùng, bình luậ tiêu cực có thể là một trong những điều tích cực nhất có thể xảy ra trong sự nghiệp thiết kế của bạn. Chỉ cần nhớ rằng, bạn không cần phải đại tu tất cả các kỹ năng của mình trong một sớm một chiều. Cố gắng trở nên tốt hơn một phần trăm mỗi ngày sẽ mang lại những bước tiến vững chắc dẫn đến thành công.

Hãy biến những bình luận tiêu cực thành giá trị vàng cho sự nghiệp thiết kế của bạn.

Các tài liệu khoá học cho việc tự học ui ux

Bước 6: Có được kinh nghiệm làm việc trong thực tế

Khi bạn có được sản phẩm Redesign mà bạn tự hào và bạn cảm thấy tự tin vào kỹ năng của mình đã tạo ra thì đã đến lúc bạn phải đặt mình ra ngoài và tìm kiếm một công việc để nâng cao thêm một số kinh nghiệm làm việc trong thực tế.

Yếu tố kỹ năng là tiền đề để bắt đầu sự nghiệp UI/UX Designer. Ngay cả khi bạn may mắn tìm được công việc hoặc xui xui không tìm được việc làm ngay lập tức, những buổi phỏng vấn là cơ hội tuyệt vời để thực hành các kỹ năng mềm của bạn như giao tiếp và giải thích các ideas đằng sau thiết kế của bạn — đó là hai kỹ năng rất quan trọng dễ ăn điểm các nhà tuyển dụng đang tìm kiếm ở các ứng viên thiết kế.

Các tài liệu khoá học cho việc tự học ui ux

Tiếp tục học hỏi và phát triển các kỹ năng UX / UI của bạn

Bất kể trình độ kỹ năng hiện tại của bạn là bao nhiêu, hãy biết rằng bạn thừa khả năng tự học thiết kế UI/UX nếu bạn sẵn sàng bỏ thời gian, công sức và sự cống hiến.

Hãy tiếp tục học hỏi và phát triển các kỹ năng của bạn và nhớ rằng không có gì xảy ra trong một sớm một chiều. Tất cả những thành công của bạn đều sẽ là một câu chuyện, một hành trình đáng mơ ước!

Chú ý: Bài viết này thuộc bản quyền của Dương Tấn Hữu, việc đăng lại bài viết trên ở website hoặc các phương tiện truyền thông khác mà không ghi rõ nguồn huuduong.design là vi phạm bản quyền.

Đơn giản, nhất quán, định hướng thị giác tốt, typography và màu sắc

Trong chương trước chúng ta đã có đầu ra là bản digital wireframe, được xây dựng trên phần mềm, usability test trên người dùng và thực hiện design review cho đến khi có 1 bản wireframe tối ưu. Bây giờ là lúc chúng ta thêm vào các thành phần đồ họa như màu sắc, hình ảnh, font chữ. Đó chính là nội dung của chương Design. Các bạn chú ý đây sẽ là một bài rất dài và quan trọng mà tôi không thể tách ra làm các bài ngắn hơn được. Các bạn hãy cố gắng để hoàn tất nội dung bài này.

Mục tiêu của bước số 5 Design là tạo ra được 1 giao diện chi tiết cuối cùng và pixel perfect cho sản phẩm. Chúng ta sẽ thêm vào màu sắc, tối ưu về typography (tức là về kiểu font, kích thước và khoảng cách dòng), hình ảnh hoặc video. Sau đó thì sắp xếp chúng dựa trên bản wireframe để cho ra một thiết kế cuối cùng của sản phẩm, trước khi chuyển giao cho team phát triển. Trong nhiều trường hợp,

Các tài liệu khoá học cho việc tự học ui ux

Hãy quay lại mô hình cầu thang 6 bước về một thiết kế UX tốt. Trong các bước trước, cho đến wireframe thì chúng ta đã tối ưu cho những yêu cầu của khách hàng ở những bậc thang đầu tiên, bao gồm: findable - bằng cách thiết kế về flow và về thông tin giúp khách hàng dễ dàng tìm được những gì họ đang tìm kiếm. Bậc assessible, usable thì bằng cách phân tích personas, bao gồm hoàn cảnh và điều kiện sử dụng của người dùng, chúng ta đã bố trí lại layout, flow và thông tin - điều đó giúp cho khách hàng có thể tiếp cận được và sử dụng được sản phẩm. Tuy nhiên ở bậc thang desirable, liên quan đến cảm xúc, sự lôi cuốn thì hầu như chúng ta chưa làm được gì nhiều. Và đó chính là nhiệm vụ của bước Design.

Điều gì tạo ra 1 UI tốt?

Visual Design trong UX không phải nghệ thuật mà là kỹ thuật. Để minh chứng, chúng ta nhìn trên hình. Bên trái là bức tranh "Women of Algiers" của Picaso. Tôi chưa từng nhìn bức tranh này trong thực tế nhưng tôi chắc rằng nó sẽ không tạo bất cứ cảm xúc gì cho tôi, và tôi chỉ khen nó đẹp bởi vì nó quá đắt giá. Bên phải là giao diện đồ hoạ của ứng dụng Facebook, một ứng dụng hoàn toàn miễn phí nhưng lại được sử dụng và yêu thích bởi hàng tỉ người trên thế giới. Điều quan trọng ở đây là người dùng không yêu thích Facebook bởi gì giao diện của nó có tính nghệ thuật, mà bởi vì nó giúp sử dụng phần mềm Facebook hiệu quả hơn, kết nối tốt hơn với bạn bè và gia đình. Một visual design tốt phải là một visual design hiệu quả và giúp người dùng hiểu được cách sử dụng sản phẩm và tương tác tốt hơn. Chúng ta không dùng 1 màu sắc bởi vì là nó đẹp, mà chúng ta dùng màu sắc bởi vì nó làm việc thông suốt giữa các thành phần giao diện. Chúng ta cũng không chọn 1 font chữ bởi vì nó đáng yêu mà bởi vì nó dễ đọc, hiển thị tốt và hỗ trợ Unicode tiếng Việt hoàn hảo..


Chúng ta sẽ có 4 nguyên tắc để tạo ra được 1 UI tốt và hiệu quả. 4 nguyên tắc này phải được tuân thủ bởi người thiết kế giao diện nhưng nó cũng cần phổ biển như kiến thức cơ bản cho các thành viên của team sản phẩm,. Điều đó sẽ giúp các cuộc thảo luận có giá trị hơn và nhận được các ý kiến có giá trị hơn cho designer. Thêm nữa, nó cũng được sử dụng cả cho phase wireframe nữa.

Các tài liệu khoá học cho việc tự học ui ux

Bây giờ thì chúng ta sẽ lần lượt đi đến từng nguyên tắc để tạo ra 1 UI tốt.

1. Đơn giản và nhất quán

Nguyên tắc đầu tiên: Đơn giản, rõ ràng và nhất quán. Hãy nhớ lại câu nói của Steve Jobs mà chúng ta đã được học ở bài đầu tiên: Đơn giản thì khó hơn phức tạp. Bạn phải làm việc chăm chỉ để khiến cho tư duy trở nên trong sáng và làm cho nó đơn giản. Những bạn UI designer chưa có kinh nghiệm thì thường làm cho mọi thứ phức tạp lên, mục tiêu là khiến cho sản phẩm trở nên phong phú và nguy hiểm, với mong muốn là đánh vào cảm xúc tò mò của người dùng, nhưng đó là một sai lầm. Ví dụ như màu sắc được sử dụng để giúp cho người dùng dễ dàng sử dụng hơn và định hướng hành vi (tức là chỉ rõ xem cái nào là quan trọng). Thêm quá nhiều màu sắc sẽ khiến người dùng mất tập trung - ý là nếu nói rằng cái gì cũng quan trọng thì sẽ chẳng có gì quan trọng cả.

Các tài liệu khoá học cho việc tự học ui ux

Điều thứ 2 trong nguyên tắc đầu tiên là nhất quán (hay trong tiếng anh là consistancy). Tính nhất quán có nghĩa là người dùng được sử dụng các thành phần giao diện theo cùng 1 cách trên bất cứ chỗ nào của ứng dụng. Một ví dụ là nếu như bạn đã thiết kế button dạng giao diện nào đó trên 1 trang, thì bạn sẽ cần giữ giao diện đó đồng nhất trong các trang khác. Bởi vì khi người dùng đã học 1 lần về việc một button trông như thế nào thì họ sẽ không muốn phải học lại điều đó ở chỗ khác nữa. Đây là một trong những sai lầm phổ biến nhất của rất nhiều các ứng dụng ở Việg Nam cũng như nước ngoài mà tôi đảm bảo là khi bạn có kinh nghiệm về thiết kế UX bạn sẽ phải thường xuyên đối mặt với vấn đề chướng tai gai mắt đó. Một điểm hữu ích của việc giữ nhất quán trong thiết kế là tiết kiệm được công sức của đội phát triển ứng dụng. Lập trình viên chỉ cần làm một lần và dùng lại cho các trang khác mà không phải code thêm.

2. Định hướng thị giác tốt

Nguyên tắc thứ 2 tạo ra 1 UI tốt là có được một định hướng thị giác tốt. Thuật ngữ trong tiếng Anh gọi là hierarchy. Là một trong những vấn đề tối quan trọng với graphic design. Định hướng thị giác sẽ giúp điều hướng thông tin đến với người dùng, cái gì là quan trọng, cái gì là thứ 2, thứ 3 và cái gì người dùng nên bấm vào. Và theo đó thì sẽ giúp dẫn dắt người dùng theo một luồng màn hình mục tiêu của chúng ta. Trên hình chúng ta có thể thấy website của Apple có một định hướng thị giác rất tốt với: chữ iMacPro sẽ được nhìn thấy đầu tiên, sau đó là slogan "Power to the pro". 2 nút định hướng action là Learn more và Buy được tô màu xanh với mũi tên. Chúng ta chỉ cần nhìn 1 giây là hiểu ngay đây là trang gì và chúng ta có thể làm gì tiếp theo.

Các tài liệu khoá học cho việc tự học ui ux

Có 3 nhân tố chính ảnh hướng đến 1 định hướng thị giác, bao gồm

  1. Kích thước: kích thước càng lớn thì định hướng thị giác cũng lớn hơn.
  2. Vị trí: Thông thường thì người dùng sẽ nhìn từ trên xuống dưới, từ trái qua phải. Tuy nhiên là có những pattern mà đã trở nên quen thuộc với người dùng, chúng ta cũng nên tìm hiểu. Ví dụ như mẫu F, mẫu E hoặc Z trên các website mà do những hoạt động R&D tìm ra, các bạn có thể tham khảo để đặt những thứ quan trọng vào đúng vị trí.
  3. Màu sắc là nhân tố thứ 3: Những màu sắc sặc sỡ và sinh động cũng ảnh hưởng đến định hướng thị giác. Ngoài ra độ tương phản màu cũng hết sức quan trọng. Những mảng màu có độ tương phản lớn cũng sẽ có hiệu quả hơn với người dùng.

3. Typography

Yếu tố thứ 3 tạo ra một UI tốt là typography, bao gồm các font chữ, màu sắc, kích thước, khoảng cách giữa các chữ (hay còn gọi là font-kern) và khoảng cách giữa các dòng (line-height). Một typography tốt sẽ làm cho văn bản trở nên dễ đọc hơn. Nhưng bạn hãy nhớ 1 điều, khi người dùng xem một website hoặc 1 ứng dụng, họ sẽ không đọc từng câu từng chữ mà sẽ đọc lướt (hay còn gọi là scan) lên trên các văn bản. Sử dụng kỹ thuật typography tốt (như là in nghiêng, màu sắc, gạch chân..v.v) sẽ giúp việc đọc lướt này trở nên hiệu quả hơn.

Các tài liệu khoá học cho việc tự học ui ux

Việc lựa chọn một typography tốt là một vấn đề khó khăn cần nhiều công sức và nỗ lực. Bằng chứng là trên internet hiện nay tình trạng các website vẫn lựa chọn những font mỏng và màu xám, gây khó khăn cho việc đọc là hết sức phổ biến. Và sau đây là 1 số các nhân tố để tạo ra một typography tốt cho sản phẩm của bạn

Văn bản phải dễ đọc. Khi bạn thiết kế, bạn có thể sử dụng 1 màn hình máy tính lớn và sáng, có thể là retina với độ phần giải từ 2K - 4K, nét căng và chuẩn màu. Và là 1 designer, bạn có xu hướng chọn những font mảnh, mịn và sử dụng màu xám để giúp thiết kế đồ hoạ trở nên hấp dẫn hơn. Nhưng trong thực tế màn hình của người dùng có thể rất nhỏ và xấu, khi đó họ sẽ gặp khó khăn để đọc nội dung và khiến họ rời bỏ sản phẩm của bạn. Vì thế hãy chú ý khi lựa chọn font để khiến văn bản dễ đọc hơn.

Nên sử dụng nhiều các khoảng trắng, đều này sẽ giúp ngừoi đọc dễ dàng scan nội dung hơn. Nhiều designer có tâm lý là cần phải tận dụng các khoảng cách để nhồi vào càng nhiều thông tin càng tốt - thực ra thì đó cũng là 1 trong những nguyên tắc thiết kế đồ hoạ - nhưng chúng ta phải cân đối để giúp người dùng có thể biết được cái nào là nội dung quan trọng.

Nếu chúng ta thiết kế 1 sản phẩm có nội dung tiếng Việt thì phải hết sức cẩn thận. Tiếng Anh rất đơn giản và rõ ràng so với Tiếng Việt, Tiếng Việt của chúng ta có nhiều dấu và không phải font chữ nào cũng hỗ trợ tiếng Việt. Vì thế hãy chú ý khi chọn font cho phù hợp, 1 cách tốt là bạn có thể truy cập Google font để tìm ra các font chữ hỗ trợ tiếng Việt.

4. Màu và độ tương phản


Vấn đề thứ 4 để tạo ra được 1 UI tốt là màu và độ tương phản. Màu sắc là một vấn đề có tính khoa học và đã được tìm hiểu từ rất lâu đời bởi những nhà mỹ học. Nhưng có 1 số các nguyên tắc vẫn luôn đúng, ví dụ như các màu sắc tươi sáng và sặc sỡ sẽ hút mắt người dùng hơn những màu xám và tối. Một số đo đạc cho rằng có 1 số màu sẽ có hiệu quả hơn các màu khác, ví dụ như màu da cam thì tươi trẻ và mời gọi người dùng hành đông hơn. Hoặc như màu tím thì nữ tính và đồng nghĩa với sự gắn kết, chung thuỷ hơn. Tuy nhiên, điều này thường thì ít có ý nghĩa với bộ môn thiết kế UX, vì bạn sẽ không thể vì thế mà tạo ra 1 nút màu da cam hoàn toàn lạc lõng giữa một tông màu xanh được.

Các tài liệu khoá học cho việc tự học ui ux

Nếu như bạn thiết kế sản phẩm cho 1 khách hàng, thông thường thì màu sắc ứng dụng của bạn sẽ phụ thuộc vào tông màu của thương hiệu, giống như logo của công ty. Khi đó thì bạn có thể chọn hoặc không các màu phụ dựa trên bộ màu chính của thương hiệu.

Nếu bạn phải tự chọn màu cho ứng dụng thì bạn có thể tìm các bảng màu dựng sẵn như Google Material Design. Nơi đó, bạn có thể chọn ra 1 màu chính (hay còn gọi là primary) và một màu tương phản (gọi là accent) và từ 2 màu đó tách ra được 6 mã màu. Đây sẽ là những màu cơ bản để bạn xây dựng ứng dụng, mà tránh được việc sử dụng màu thiếu đi định hướng và cơ sở khoa học. Đây cũng là cách mà Google chọn màu để xây dựng các sản phẩm của mình như Youtube, Google Map, Drive và Hangout..v.v

Các tài liệu khoá học cho việc tự học ui ux

Đôi khi bạn phải chọn bảng màu riêng không nằm trong các template thì bạn có thể sử dụng công cụ Bánh xe màu, để tìm hiểu về cách mà các màu kết hợp với nhau đối với thị giác của con người. Nguyên tắc là mọi màu sắc trong tự nhiên được tạo ra từ 3 màu cơ bản là xanh, vàng và đỏ. Các màu khác là sự kết hợp theo tỉ lệ của các màu cơ bản này. Các màu ở gần nhau trên bánh xe màu thì sẽ tạo ra cảm giác tự nhiên, thuận mắt khi được kết hợp với nhau trên 1 thiết kế. Còn các màu đối lập nhau trên bánh xe màu thì lại gây bức bối khó chịu, căng thẳng và thường được sử dụng hơn các các nghệ thuật ấn tượng. Hãng Adobe có đưa ra 1 công cụ Bánh xe màu tại địa chỉ https://color.adobe.com/ bạn có thể sử dụng để pha màu cho sản phẩm của mình.

Các tài liệu khoá học cho việc tự học ui ux

Bạn cũng cần phải chú ý đến ý nghĩa của màu sắc đối với từng văn hoá khác nhau. Một số màu sắc đối với nền văn hoá khác nhau có ý nghĩa khác nhau. Ví dụ như màu trắng đối với các nước phương tây có nghĩa là: sạch sẽ và an toàn. Vì thế họ hay sử dụng các bàn ghế, khung cửa màu trắng trong ngôi nhà của họ. Nhưng ở các phương châu Á thì màu trắng lại là màu của tang tóc, của u buồn. Hoặc như là màu đỏ đối với cả phương tây và châu Á đều thể hiện sự nguy hiểm hoặc là sự mãnh liệt, chắc chắn là có nguồn gốc từ màu đỏ của lửa. Nhưng màu đỏ đối với người Ấn Độ thì lại chỉ thể hiện cái đẹp, sự thịnh vượng. Tuy nhiên là do sự giao thoa văn hoá nên có nhiều trường hợp chúng ta gần như chấp nhận văn hoá màu của nhau, ví dụ của các cảnh báo là màu đỏ mà quên đi ý nghĩa của màu sắc đối với nền văn hoá địa phương.

Style Guide

Một trong những bí quyết để giúp thiết kế của bạn nhất quán và giảm bớt công sức cho mọi người (kể cả thiết kế và lập trình) là bạn hãy ra các bộ style guide. Style guide là 1 bộ tài liệu để giúp bạn định nghĩa các thành phần giao diện sẽ hiển thị và tương tác như thế nào trong thực tế? Ví dụ như bạn định nghĩa các button thì có bao nhiêu loại, các trạng thái mặc định, được click vào và disable thì sẽ hiển thị ra sao. Các popup và textbox thì sẽ được hiển thị như thế nào. Theo tôi thì nếu một công ty có nhiều sản phẩm thì thật tuyệt vời nếu như xây dựng sẵn một bộ style guide cho cả công ty và sử dụng nó trên tất cả các sản phẩm.

Các tài liệu khoá học cho việc tự học ui ux

Sau khi xây dựng style guide ở bước thiết kế giao diện, style guide cũng có thể áp dụng cho bước phát triển sản phẩm. Một ví dụ nổi tiếng là bộ thư viện HTML Bootstrap có thể coi là 1 style guide phổ biến và hiệu quả hàng đầu trong giới công nghệ ngày nay. Bootstrap được sử dụng trên hàng triệu các website bằng cách định nghĩa sẵn bộ stylesheet và javascript cho các thành phần giao diện. Chúng ta chỉ cần tải về, link vào là có thể sử dụng được ngay trên website của mình.

Design Principles

Một vấn đề rất quan trọng trong việc thiết kế giao diện người dùng là: trước khi đặt chuột để vẽ những mảng màu đầu tiên, bạn cần phải xác định được những gì mà bạn mong muốn đạt được với với giao diện của sản phẩm. Nói cách khác là những loại cảm giác và cảm xúc nào bạn muốn tạo ra cho người dùng khi sử dụng sản phẩm. Có thể là trẻ trung, lôi cuốn, có thể là minh bạch đáng tin cậy và cũng có thể là đăng cấp - xa xỉ nếu như bạn muốn bán đồng hồ online. Đó chính là câu chuyện của Design Principles (nguyên tắc thiết kế)

Có 2 kỹ thuật để giúp bạn đạt được điều đó, thứ nhất là sử dụng một bảng câu hỏi dạng quang phổ, thứ 2 là kỹ thuật mô tả về design bằng 5 tính từ.

Bảng câu hỏi dạng quang phổ

Các tài liệu khoá học cho việc tự học ui ux

Nói về kỹ thuật đầu tiên, chúng ta sẽ tạo ra một bảng câu hỏi dạng quang phổ. Mỗi câu hỏi sẽ bắt đầu bằng 1 tính từ và kết thúc bằng 1 tính từ hoàn toàn đối lập. Ví dụ như bắt đầu từ "đắt đỏ" đến "phải chăng", hoặc là bắt đầu từ "Doanh nghiệp" đến kết thúc bằng từ "Cá nhân".

Người được hỏi sẽ chọn trong thang điểm từ 1 đến 10 cho mỗi câu hỏi như vậy. Cách đơn giản nhất là bạn tạo bảng câu hỏi này bằng Goolge Form, và trả về dưới dạng 1 survey. Sau đó thì ta sẽ gửi bảng câu hỏi này đến khách hàng mục tiêu và nhận về càng nhiều trả lời càng tốt. Kết quả cuối cùng sẽ giúp chúng ta nhận biết được nên tập trung vào yếu tố nào trong design.

5 từ phản ánh về design

Kỹ thuật thứ 2 thì đơn giản hơn, chúng ta tổ chức một cuộc họp nhóm và liệt kê ra tất cả các tính từ cần phải mô tả về design sau đó thì loại bỏ dần cho đến khi tìm được 5 từ phù hợp nhất. Thông thường thì chúng ta có rất nhiều kỳ vọng vào thiết kế nhưng bằng cách chỉ chọn 1 số lượng hạn chế, bạn sẽ thực sự biết được đâu là những yếu tố cốt lõi và quan trọng nhất cần phải tập trung vào.

Các tài liệu khoá học cho việc tự học ui ux

Và đây là kết quả chúng ta thu được sau khi thực hiện 2 kỹ thuật trên để có được các design principles sản phẩm. 2 phương pháp này có thể sử dụng kết hợp cho hợp lý trong từng trường hợp. Đặc biệt là bạn cũng có thể áp dụng linh hoạt kỹ thuật cho các lĩnh vực khác ngoài design, như là một cách để hỗ trợ việc đưa ra các quyết định.