Kết hợp chữ để làm gì, tại sao phải dùng nhiều font làm gì ? Kết hợp chữ dựa trên những nhân tố nào ? cũng xem 2 video đầu để hiểu sơ bộ nhé.

Video này giới thiệu 8 yếu tố kĩ thuật chính cần nhận biết trong việc mix typography với nhau.

Độ rộng kí tự ảnh hưởng thế nào đến cảm giác đọc khi kết hợp font

Font gắn liền với lịch sử nước Anh. Tuy nhiên giới hạn của nó thì chắc chắn là không riêng trong nước Anh. Rất nhiều hãng lớn sử dụng font này. Bạn xem thêm trong video nhé.

Đây là 2 font nổi tiếng được biết đến như đặc trưng của công nghệ và tương lại, dù nó đã có tuổi đời hơn nửa thể kỉ.

Đây là 2 font chữ được nhiều thương hiệu của Mỹ dùng, 2 font được đánh giá gần như là hack của thiết kế vì nó đa dụng và bắt mắt. Check it out. Phần sau có đính kèm font này bản tiếng việt nhé.

Để có thể sử dụng bảng font chữ này hiệu quả, video này sẽ giới thiệu qua cách sắp xếp, các hàng các cột, kí hiệu để bạn tiện tra cứu

Dữ liệu mình chia làm 4 loại, một là có chân, hai là không chân, ba là blackletter, mono, script, bốn là kiểu riêng cho font dùng tại Việt Nam, những font chuyên về in ấn.

Humanis là dòng font cổ nhất của loại font serif, nó mang hơi hướng của chữ viết tay nên đặc trưng là tạo cảm giác thân thiện.

Bài tập thực hành phần này phần lớn là mình đi thiết kế lại một đoạn chữ có chủ đề. Video giới thiệu qua các bài và phương pháp làm.

Phân cấp thị giác là yếu tố đầu tiên ta cẩn phải hiểu, chứ chưa nên thiết kế vội. Phân cấp thị giác có phần gốc là ta phải hiểu cái gì là cái quan trọng nhất theo thứ tự thì độ nổi bật của nó cũng phải tương ứng theo thứ tư.

Sau khi có được định hướng thị giác, ta cần chọn font, nội dung nói về gì, người đọc là ai, hình ảnh thế nào, … tất cả thứ đó là dữ liệu đầu vào để ta có thể giải thích cho lựa chọn font của mình.
Lưu ý phần này bạn dùng những font đã cho trong bảng font mình gửi nhé.

Phần này chỉ có thực hành thôi, vì nguyên lý thì đơn giản có gì để trình bày đâu :). Tóm gọn nguyên lý trong một câu là " tất cả mọi thứ phải được căn chỉnh theo một đường lưới nào đó "

Tiếp tục nguyên lý Align : " tất cả mọi thứ phải được căn chỉnh theo một đường lưới nào đó " với bài taapjf tiếp.

"Tất cả mọi thứ phải được căn chỉnh theo một đường lưới nào đó ", áp dụng với phiên bản mobile.

Khoảng trắng bao nhiêu thì là đủ, đó là câu hỏi mình cũng tự hỏi khi bắt đầu quan tâm đến khoảng trắng cho thiết kế. Cùng tìm hiểu về qui tắc 1/3, mình rút ra qui tắc này dựa trên phân tích và đo đạc các sản phẩm thực tế

Negative space là khó hơn hẳn nguyên lý align, chỉ có người đã luyện tập nhiều mới có cảm giác về khoảng trắng đẹp. Điều này giống bạn chơi nhạc một thời gian, thì bạn mới có cảm giác tự nhiên và “phiêu” được. Vậy nên, let’s practice.

Craiglist là website nổi tiếng đó bạn nhé. Ở Mỹ nó nổi tiếng ngang Amazon, nhưng là về mảng rao vặt. By the way, thiết kế nó không tối ưu cho người dùng, giống wiki pedia. Vậy nên ta có một bài tập thực tế rồi

Đầu tiên mình cần làm rõ Repetition trong thực tế sử dụng thế nào, các sản phẩm thiết kế khác dùng repetition ở đâu, ảnh hưởng của nó lên trải nghiệm người dùng là gì.

Bài này mình làm một giao diện theo hai cách, có dùng repetition và không dùng repetition. Để cùng xem nó khác nhau về cảm giác thế nào nhé.

Bài này nâng cao, làm một bài này thôi, từ phân tích logic đến hướng áp dụng,

Giới thiệu lý thuyết ngắn gọn, nguyên lý này dễ, chả có gì. Áp dụng nó mới khó.

Bài tập đầu tiên, thiết kế lại sản phẩm đã cho.

Hoàn thiện thiết kế phiên bản desktop.

Video này mình giới thiệu 5 nguyên tắc giống như một ghi chú, giống như một cách để mình sử dụng nó làm bài tập. Sau khi đã hiểu bản chất của thiết kế tối giản rồi thì nguyên tắc lúc đó có thể tuỳ trường hợp.

Phần này mình làm bài tập, chủ đề là một sản phẩm có sẵn, thiết kế rất bình thường. Mình cần biến nó thành tối giản và giải thích được thiết kế của mình.

Đầu tiên vẫn là phân cấp thị giác theo độ quan trọng của nội dung.

Phần này giới thiệu yêu cầu & gửi bạn file mình đã làm sẵn rồi. Bạn thực hành luôn trên đó.

Sau khi bạn tự làm, bạn sẽ so sánh với phần chữa của mình xem mình có giống nhau không nhé. Phần này mình phân tích theo quan điểm cá nhân.

Tính năng đọc, mình làm mấy lần ở bài trước rồi. Phần này mình tua nhanh nhé.

Phần này không thực hành mình ngồi nói chuyện với nhau thôi, bạn xem có câu hỏi nào gửi qua zalo cho mình. Số bên dưới chân trang nhé.

Đối với dòng sản phẩm sang trọng, cao cấp, định hướng thiết kế của mình sẽ dùng font gì, dùng màu gì, dùng ảnh thế nào ?

Hệ màu HSB là hệ màu mới, chỉ trang bị trên các công cụ mới của Adobe như Adobe XD, hoặc ở Figma còn trên Photoshop, Ae, Ai, Pr.. thì không có hệ màu này.
Mình cần hiểu về hệ màu này trước để logic hoá cách chọn màu về sau nhé.

Biến thể màu tạo ra thế nào, cơ bản về biến thể màu sẽ nói trong video này, giái thích dưới góc nhìn của hệ màu HSB .

Để làm thực tế, bạn cần thêm một lý thuyết màu nữa, đó là độ sáng cảm nhận. Điều này lý giải tại sao màu xanh và vàng, khi đã để độ sáng max thì màu xanh vẫn tối hơn rất nhiều so với màu vàng.

Video này giới thiệu nội dung bài tập và các phân cấp dữ liệu của bài tập.

Video này nói về bước đầu tiên trong kĩ thuật thiết kế đơn sắc, đó chỉ đơn giản là chọn thanh độ xám theo độ quan trọng thôi. Cùng thực hành nhé.

Elevation là độ nâng. Một kĩ thuật trong material design, để gom các nội dung vào với nhau. Giúp điều hướng thị giác người dung hiệu quả hơn. Khi chỉ có đen trắng, công cụ sử dụng sẽ phải giới hạn hơn và hiệu quả hơn bình thường.

Phần này trình bày về cách chọn 1 mầu cho thiết kế của mình.

Phần này nói về chuẩn WCAG cho phép ta đo đạc chính xác được việc màu chữ đọc chữ có tốt không dựa trên tỉ lệ tương phản AA và AAA. Phần này mình có thể check online hoặc dùng plugin stark ( cả Figma & XD )

Khi không có màu logo