UX / UI For Beginners - Phần 2: Vỡ Lòng ABC Với Styles

Hello,

Lại là tôi Việt Anh đây, tháng trước tôi đã có bài chia sẻ đầu tiên trong series UX / UI cho người mới bắt đầu với chủ đề đầu tiên là làm quen với Interface, Button, Component và Instance. Bài viết thứ 2 trong chuỗi này tôi hướng đến một yếu tố căn bản nữa cần nắm khi thiết kế UI, đó là Styles và đồng thời có đề cập một tí về fonts, cách kết hợp các fonts. Hi vọng bài viết sẽ có ích cho bạn.

Styles là gì và tại sao tôi nên sử dụng chúng

Styles là các đối tượng dạng mẫu (template) mà bạn có thể tái sử dụng đi lại nhiều lần.

Có thể bạn đã từng gặp Styles khi bạn cố gắng giữ các lớp (layers) text có giao diện giống nhau xuyên suốt các file Photoshop.

Trong Figma nói riêng cũng như giới thiết kế giao diện nền tảng nói chung, thì việc sử dụng styles là gần như bắt buộc vì nó giúp bạn:

  1. Thay đổi tất cả các thành tố với chung một style xuyên suốt một nội dung thiết kế rộng lớn
  2. Giữ một sự đồng nhất cho thiết kế, giảm thiểu sự thiếu đồng bộ trong một dự án thiết kế
  3. Làm cho thiết kế của bạn thân thiện hơn cho việc phát triển vì có ít hơn các các biến thể ngẫu nhiên trong các thành tố của bạn

Hãy bắt đầu với các styles cơ bản và cách tốt nhất để vận dụng chúng trong các thiết kế của bạn

Text Styles

Văn bản (text) có lẽ là dạng Styles dễ nhất để bắt đầu và giúp bạn bắt đầu suy nghĩ từ góc độ của người phát triển sản phẩm, hơn là từ góc độ người làm thiết kế UI.

Đầu tiên, hãy mở một Figma document và tạo một vài đối tượng dạng text để sử dụng trong trường hợp này. Tôi thường thích bắt đầu với 3-4 styles cho tiêu đề (header styles) và styles cho đoạn văn (paragraph styles). Font của văn bản bạn dùng có thể khác với của tôi ở trong hình, nhưng không sao cả, không cần lo lắng.

---- Vài chú ý nhỏ và cơ bản về việc chọn font ----

Mục đích của việc tạo ra một Style dành riêng cho đoạn văn là để tôi có thể kiểm tra xem font chữ sẽ nhìn như thế nào trong một đoạn văn. Như bạn có thể đã biết, có rất nhiều loại fonts khác nhau và chúng cũng có font this, font that, không cái gì giống cái gì.

Một vài loại fonts được tạo ra để thu hút sự chú ý của người đọc hoặc để làm cho những câu tuyên ngôn có vẻ mạnh mẽ hơn, những loại font này phù hợp cho các tựa đề và tiêu đề hơn.

Một số font được thiết kế để nhìn đẹp hơn trong những đoạn văn hoặc những đoạn nội dung dài. Những loại font này thích hợp để sử dụng làm font cho phần thân bài của bạn.

Google Fonts cho phép bạn thử nghiệm với các nhóm fonts, tính chất (properties), và kiểm tra chúng với một nhóm những độ dài văn bản khác nhau. Thử với các loại fonts khác nhau trước khi bạn quyết định sử dụng một vài bộ trong đó cho toàn bộ dự án thiết kế của mình.

Có một thứ mà các thiết kế người Việt thường hay bỏ qua đó chính là việc hỗ trợ các ký tự đặc biệt (â, á, ă, v.v…). Cho các font dùng cho tiêu đề, có thể bạn còn được du di nếu vài từ trong số đó không hỗ trợ Tiếng Việt (và bị trả về font mặc định), nhưng với font thân bài thì tốt nhất là chọn loại font hỗ trợ tiếng Việt như là Noto Sans, Open Sans, Nunito hay Roboto.

Khi thiết kế giao diện nền tảng, nên bắt đầu đơn giản với 2 dòng fonts – một cho tiêu đề và một cho thân bài. 2 fonts này nên bổ trợ cho nhau tốt. Thử nghiệm các cặp khác nhau để thấy mức độ bổ trợ như thế nào.

Dưới đây là một số việc ghép cặp tiêu biểu để thử nghiệm. Hãy bỏ qua ý nghĩa mấy cái tên hơi sến súa, vì chúng được đặt bởi …tôi.

The Tall And Strong (cao và mạnh mẽ)
Header Font: Oswald
Body Font: Roboto

Giải thích: Oswald là một font có nét mỏng mà có thể được in đậm nếu cần làm cho nổi bật hơn, do đó phù hợp cho nhiều dạng tiêu đề khác nhau. Roboto thì hơi cao hơn một chút cho nên khi chúng đi cùng nhau thì bổ trợ cho nhau rất tốt.

The Soft and Stylish (nhẹ nhàng và thời thượng)
Header Font: Josefin Sans
Body Font: Noto Sans

Giải thích: Josefin Sans là một font rất tốt cho một tiêu đề hiện đại và thời thượng. Vì font này tròn trịa nên Noto Sans bổ trợ cho nó tốt hơn một chút so với các loại font cao hơn.

The Serif
Header Font: Raleway
Body Font: Quattrocento

Giải thích: nếu bạn dùng một font serif như là Quattrocento làm text thân bài, bạn đang cố gắng tạo ra một cảm xúc gì đó từ thiết kế (đẳng cấp, hoài cổ, truyền thống). Raleway có một chút sự phô trương và đẳng cấp đó, và do đó phù hợp đi chung.

Kết hợp các font thì phụ thuộc vào kinh nghiệm cũng như sở thích cá nhân. Không có một quy định chung nhất về thứ gì bạn nên tuân theo để quyết định. Khi cảm thấy băn khoăn, hãy tự hỏi:

  • Tiêu đề có nổi bật không? Nó có còn nổi bật không nếu nó dài hơn 1 dòng?
  • Font của thân bài có giúp tạo sự rõ ràng không? Nếu tôi có 2 trang giấy với đầy chữ của loại font này, thì nó có dễ đọc không?
  • Các fonts này nhìn có ĐẸP KHI ĐI CÙNG NHAU KHÔNG? (Câu hỏi này phụ thuộc vào kinh nghiệm và sở thích của bạn - đừng lạm dụng).

Quay trở lại bài hướng dẫn chính

Trong bài hướng dẫn này, tôi sẽ chọn font Montserrat như là font tiêu đề và Open Sans như là font thân bài. Để thay đổi font, bấm vào văn bản và thay đổi giá trị bên phía bên phải.

Đưa font vào tiêu đề và thân bài, chúng ta sẽ có thứ như sau:

Vì H1 là tiêu đề lớn nhất, tiếp theo sau đó là H2, H3. Tôi sẽ điều chỉnh font size như sau:

H1: 48
H2: 40
H3: 32

Giờ nhìn có vẻ được hơn rồi đấy.

Sau khi bạn đã hài lòng với dòng font và kích cỡ, chọn đoạn text tiêu đề H1, bấm vào nút có 4 dấu chấm kế bên bảng tiêu đề, bấm vào dấu cộng để tạo style.

Đặt tên một cách rõ ràng ở bước này sẽ quyết định thành bại về sau.

Làm điều tương tự với 3 nội dung text còn lại (h2, h3, body text)

Sau khi các styles này đã được tạo, bạn có thể áp dụng chúng cho bất cứ nội dung văn bản nào mới được tạo ra. Chỉ cần chọn văn bản và bấm vào mục lục style để chọn.

Kể từ giờ trở đi, bất cứ thay đổi nào với các Styles đã tạo sẽ tạo ra sự thay đổi trên tất cả các nội dung văn bản mà sử dụng style đó.

Ví dụ: tôi có một mớ các nội dung H2 texts, và tôi muốn thay đổi chúng từ in đậm thành in thường.

Rê chuột đến phần lựa chọn Style và chọn Edit Style.

Bấm vào đó và bạn sẽ thấy menu này hiện lên

Thay đổi font từ in đậm (bold) thành in thường (regular)

Tất cả các H2 sẽ thay đổi cùng một lúc.

Đó là lý do tại sao đối với các dự án thiết kế lớn, không có styles là không được.

Color Styles

Bên cạnh text style, màu sắc là một thứ khác mà bạn thực sự cần đảm bảo sự nhất quán và rõ ràng. Không còn cần đến Copy & Paste những giá trị hex/rbg, hoặc sử dụng bộ chọn màu (color picker tool)

Hãy tạo một Khung (Frame) mới, đặt tên nó là Màu sắc, và tạo một hình elip có kích thước khoảng 30x30.

Trên menu bên phải, nhấn vào tô màu xám để mở bộ chọn màu. Chọn một màu xanh mà bạn ưng mắt (Màu ví dụ trong hình: # 5AAED2)

Hình elip của chúng ta sẽ có ngay màu xanh mà bạn vừa chọn

Trên Fill menu ở phía bên phải, nhấn vào biểu tượng 4 dấu chấm để xem menu color styles

Nhấn vào biểu tượng dấu cộng bên cạnh khung Color Styles để tạo một color style mới. Đặt tên nó là “Blue - Main”.

Sau khi thao tác tạo color style, bạn sẽ thấy điều tương tự hình bên dưới.

---- Về Thiết Kế Với Màu Sắc ----

Xin nhắc lại lần nữa, hãy bắt đầu một cách đơn giản.

Khi bạn bắt đầu một dự án mới, hãy cố gắng hết sức để tránh sự phức tạp trong việc chọn chủ đề màu sắc (color theme).

Nếu thương hiệu của bạn đã sẵn có bảng quy chuẩn màu sắc (colour guideline) thì thật tuyệt - bạn chỉ việc áp dụng thôi.

Nhưng nếu bạn đang tự thiết kế cho thương hiệu của mình, hoặc cho 1 thương hiệu không có quy chuẩn dùng màu rõ ràng, lúc đó bạn nên chọn 1 màu chủ đạo, và tạo ra các màu sắc biến thể (color variations) từ màu chủ đạo ấy.

— End note ----

Trong trường hợp này, chúng ta bắt đầu với m xanh chủ đạo - một khởi điểm tuyệt vời.

Tiếp theo, bạn sẽ cần chọn thêm 2 màu sắc biến thể, một là biến thể sáng hơn và 1 biến thể tối hơn. Cả 3 biến thể màu sắc này sẽ hỗ trợ đắc lực trong việc tạo ra các trạng thái khác nhau cho các đối tượng (objects) của bạn trong những bước tiếp theo.

Tôi đã lựa chọn mã màu 3083A7 cho biến thể đậm hơn, và mã màu 7DCEF1 cho biến thể sáng màu hơn.

Bên cạnh đó, bạn cũng nên chọn ra 1 màu tối và 1 màu sáng đại diện cho màu đen và trắng cho phần văn bản. Tôi đã chọn màu tối - 1C1F20 và màu sáng - EDF4F6.

---- Tại sao chúng ta không sử dụng luôn màu đen (FFFFFF) và trắng (000000) ----

Một vài người trong số các bạn chắc hẳn đã nảy ra câu hỏi này khi nhận ra rằng màu tối và màu sáng không hề tương tự màu tối thuần (FFFFFF) and màu trắng thuần (000000) trong kỹ thuật số.

Lý do cho việc này nằm ở yếu tố Tương phản. Nếu không phải bạn đang thiết kế cho những thiết bị màn hình OLED (loại công nghệ màn hình có cấu tạo mới gồm các Diode phát sáng hữu cơ), sử dụng màu đen và trắng thuần sẽ gây ra sự chói mắt cho người dùng. Bởi thế, hầu hết trường hợp, bạn nên chọn một màu xám nhạt và một màu xám đậm thay vì những giá trị thuần để tránh sự chói chang trong tỉ lệ tương phản.

Nói như vậy không có nghĩa là phải né tránh 2 giá trị thuần này. Hãy chọn chúng khi bạn nghĩ rằng thiết kế yêu cầu điều đó.

Lưu ý kết bài

Bây giờ sau khi đã tạo ra color styles, chúng có thể được dùng xuyên suốt các dự án, cũng giống như là text styles.

Sau này khi cần đổ màu, thay vì chọn giá trị màu, hãy bấm vào nút 4 chấm, và chọn màu từ bảng màu của bạn.

Bằng cách chuẩn bị những styles cần thiết trước khi bắt đầu quá trình thiết kế, bạn có được lợi thế của việc không phải thiết kế lại từ đầu. Điều này giúp bạn bớt thứ phải nghĩ ngợi khi làm việc về cách bố trí và trình bày dữ liệu.

Những styles bắt đầu này không có phải bất di bất dịch, xuyên suốt quá trình thiết kế, bạn sẽ cần phải thay đổi chỗ này, chỗ nọ như là màu sắc hay font chữ. Trong trường hợp đó, chỉ cần thay đổi styles thì toàn bộ thay đổi sẽ được diễn ra trên toàn thiết kế của bạn mà bạn không cần phải đi vào từng nơi để điều chỉnh chúng bằng tay.

Thật là tiết kiệm thời gian.

Bước cuối cùng của quá trình này là tạo ra một trang mới để chứa toàn bộ các cách bố trí và giữ các styles trong một trang duy nhất mà bạn có thể xem dễ dàng.

14 Likes

Cảm ơn anh vì đã có bài này trong series. Em cũng có học vài series khác về nội dung UX/UI nhưng họ không nói rõ phần này là các quy tắc.
Em nhớ là trong 1 hình hay 1 web mình chỉnh UX/UI thì nên chỉ có 2-3 fonts đặc trưng và 2-3 màu để đỡ rối và còn có thể truyền tải thông điệp của thương hiệu thông qua bố cục và màu sắc.
Có một phần em bị yếu là các cách chọn và bố cục chọn màu gradient. Em cũng chưa tìm ra được blog hay website nào hướng dẫn về phần này. Hi vọng là anh có phần này trong series ^^

@rougecrown chỉ muốn hiểu hơn ở góc độ suy nghĩ chỗ các đoạn giải thích về font:
Oswald là thân có nét mỏng và Roboto hơi cao hơn các font khác thì bổ trợ là như thế nào? Có quy tắc kiểu mỏng thì đi với cao hay đậm thì đi với font thấp gì không? :smiley:

Cảm ơn Việt Anh rất nhiều! Hy vọng đón chờ những bài giải thích về tác động của font, màu sắc đối với hành vi của người dùng. Vì mình cũng newbie tự tìm hiểu với cài đặt theo kiểu copy các trang khác, thành ra đôi khi muốn biết kỹ hơn liệu với font này, màu này cho các phần tử này thì chúng tác động ra sao tới trải nghiệm, CR,…

Attempted to answer in Vietnamese and failed miserably. Here’s my thoughts on font pairing:

Generally speaking I categorise font compatibility in these following types:

  • 2 fonts are similar: the fonts visually similar. For example - you pick a tall header font and a tall body font, both are tall and slim, therefore when putting next to each other, they look visually similar and thus, pleasing.
  • 2 fonts are very different: the fonts are VERY different, they are paired together to make a point. For example, you pick an old serif font for the header, and a modern sans-serif font for the body. Generally speaking these 2 don’t go together, but let’s. say you are trying do make a point of the brand being both modern and classy, then you can make a case for it.
  • 1 visually interesting, 1 ordinary: one font is much more visually interesting than the other one (usually the header font), so the other fonts should be more inconspicuous as to not take away attention from the visually interesting font. For example: Lobster 2 for header, Roboto for body.

One rule that I generally keep in mind is the font size vs font weight ratio. Header texts are usually much bigger size than its body counterpart, as such, try to avoid drawing too much attention to the header text so it would lose the balance of the whole design.

For example, you use robots 11 for body, but your header font is ROBOTO ALL CAPS BOLD at size 48. The header would be overwhelming, and will take up most of the attention from the reader.

A good balance is when the headers are clear, but they don’t take away too much attention from the content - that’s when you know you struck gold.

2 Likes

P/S: in the case of Oswald and Roboto - they are categorised as being visually similar (tall, slim) so it goes along the first pairing rule.

It is ok, mate. Keep it in English :))

Ok, I understand the thought process here. So basically it depends a lot on personal taste as what is more pleasing for that person, or more specifically for the masses (because platform are designed for audience).

A good designer is someone who can feel and sense what would be the most pleasing for the majority of audience (vs his personal taste).

I would say it’s a bit of the other way around.

A good UI/UX designer should always prioritise the usage first (UX) and then how it looks (UI)

Manly because UX is logical and pretty objective, whereas UI is subjected to taste from both designer and the client perspective.

For new UI/UX designer, I would recommend these rules of thumbs:

  1. Keep the font count small (max 3 fonts).
  2. Prioritise readability above all else (nothing too fancy)
  3. Use bare-bone designs, without visual flairs (no gradient, no decorative, no rounded corner or drop shadow)

By limiting the visual distractions, you can focus better on the core layouts and see if your layout makes sense, and whether your choice of fonts help the user to skim through the content easily, while still read things well.

only after you are satisfied with this stage, then you move on to adding more visual flairs - colours, gradients, styles, etc. to the design

3 Likes

Gradient belongs under the “visual flair” umbrella, and as such, should be avoided by beginner designer, as they tend to abuse it.

Stick to picking good, solid colour for your design until you get a better control for colours, then add gradients on top :slight_smile:

Seems like we need a topic to set the mindset for these beginners :))

Also note that most people here are just marketers who are interested with UI / UX from the marketing perspectives. They are not really designers.

But they would be interested in learning more about process and how to do it to understand the scope of work of a fellow designer.

Yeap. But well, if you are a marketer then I would recommend picking up some other design applications like Photoshop or Illustrator (shout out to Affinity Photos and Affinity Designer) rather than mucking around with a dedicated UI app like Figma.

Most digital marketers worth their salt would at least know how to do basic stuffs with Photoshop / AI. These apps are also gradually losing their share when drag-and-drop design apps are becoming more popular.

But for me, I think it is interesting to learn about something new like Figma because by doing so I would get closer to product design mindset, see things from a different perspective. I am not a developer, but in order to do things better, I learnt about server, linux, python, html / css, etc. So nothing wrong with a marketer mucking around with app like Figma :))

Ko có phần 3 nữa ạ :((