Bố cục và Typography - Thiết kế giao diện | Trường Đại học CNTT Thành Phố Hồ Chí Minh

Bố cục và Typography - Thiết kế giao diện | Trường Đại học CNTT Thành Phố Hồ Chí Minh được sưu tầm và soạn thảo dưới dạng file PDF để gửi tới các bạn sinh viên cùng tham khảo, ôn tập đầy đủ kiến thức, chuẩn bị cho các buổi học thật tốt. Mời bạn đọc đón xem!

GIÁO ÁN B C C + TYPOGRAPHY
M u: đầ Thi là gì? Không ch là t o ra b n v k thuết kế ật, đối tượng,
hình ng d ng trong cu c s ng, mà còn là m t quá trình tìm hi u, nh
nghiên cứu, phân tích, đánh giá và đưa ra các giải pháp phù h p cho s n
phẩm đó.
Các bước: Thu thp ý tưởng -> sp xếp & phát tri -> t o ra các b n vn ,
mô hình, th nghim -> s n ph m hoàn thi n
I/ B CC
1. Khái niệm và ý nghĩa
S n ph m thi t k là ngôi nhà thì b c ế ế c là nh ng viên gạch để
xây nên ngôi nhà đó, sẽ to nên c u trúc cho s n ph ẩm cũng như
khi nhìn s n ph ẩm vào cũng sẽ định hướ d ng s chú ý hơn.
Ti sao l i quan tr n b s p x p các ọng? Đơn giả ởi vì đó là sự ế
thành ph n trong bài thi t k cho là bài thi t k c a mn màu ế ế. C ế ế
sc, font ch , hình nh, element x n sò t i m ức nào, nhưng nếu
b c c không ổn định thì s n ph ẩm cũng tan nát.
T l vàng (Golden Ratio)
2. 5 quy tắc cơ bản
Nguyên t n c b c c thi t kắc cơ bả a ế ế:
- Proximity (đưa những th liên quan v cùng ch v i nhau)
- White space (khong tr ng gi a t ng ph n)
- Alignment (C nh các object) ăn chỉ
- Contrast (Tương phản)
- Repetition ( ng object cùng c p thNh ì đưa v ng nhau) gi
II/ TYPOGRAPHY
1. Khái niệm và ý nghĩa
Typography là cách s p x p các ch cái trong m t s n ph m ế
Định nghĩa về Font, Size và Typeface
Font: Có các d ng font ch :
- Serif: font ch có chân -> mang l i c m giác trang tr ng, truy n
thng.
- San Serif: font ch không có chân -> mang l i c m giác tr
trung hơn, hiện đại hơn, dễ đọc hơn
- Display: nh ng font ch trang trí
2. Các quy t c:
- aka Line Spacing (kho ng cách dòng)Leading
- Tracking (kho ng cách toàn ph n các ch )
- ng cách gi a 2 ch cái)Kerning (kho
- Alignment (căn chỉnh văn bản)
- Hierarchy (th b ậc văn bản)
o Heading
o Sub-heading
o Body
3. Chn font ch
Tùy vào tính ch c a s n ph m mà ta s l a ct, ng nh … củ n
nh ng font ch h p lý,
Tuy nhiên có nh ng font ch chúng ta nên cân nh c khi s d ng
(vì chúng b s d ng quá nhi u ho c quá n i b t so v i các font
kh .
Ví d : Comic Sans, Impact, Algerians, Papyrus, …
4. K t h p các font ch ế
- u v font family Hi
- Có th s d ng font serif và san serif cùng lúc
- S d ụng 1 font nhưng khác typeface chứ không nên dùng 2
font tương tự nhau (HelvetIns vs. Impact)
- n gi a 2 font chĐộ tương phả (1 font đậm 1 font nht)
- nên sCh d ng 2 font ch trong 1 n ph m, ch nên s dng
3 font n u th t sế c n thi t ế
- ng font th n c m xúc khác nhau thì không nên dùng Nh hi
chung
- ng font có c -> có th k t hNh ảm xúc tương hỗ ế p
- Những font có cùng family, nhưng khác nhau về độ đậm
Khi k t n i các font ch , chúng nên có m t s hài hòa, có ế
th m chung v những điể
Bên d i l m t s quy t c và g ý khi k t h p các font ướ à i ế
ch
| 1/8

Preview text:

GIÁO ÁN B CC + TYPOGRAPHY
M đầu: Thiết kế là gì? Không chỉ là tạo ra bản vẽ kỹ thuật, đối tượng,
hình ảnh ứng dụng trong cuộc sống, mà còn là một quá trình tìm hiểu,
nghiên cứu, phân tích, đánh giá và đưa ra các giải pháp phù hợp cho sản phẩm đó.
Các bước: Thu thập ý tưởng -> sắp xếp & phát triển -
> tạo ra các bản vẽ,
mô hình, thử nghiệm -> sản phẩm hoàn thiện I/ B CC
1. Khái niệm và ý nghĩa
Sản phẩm thiết kế là ngôi nhà thì bố cục là những viên gạch để
xây nên ngôi nhà đó, sẽ tạo nên cấu trúc cho sản phẩm cũng như
khi nhìn sản phẩm vào cũng sẽ dễ định hướng sự chú ý hơn.
Tại sao lại quan trọng? Đơn giản bởi vì đó là sự sắp xếp các
thành phần trong bài thiết kế. Cứ cho là bài thiết kế của mn màu
sắc, font chữ, hình ảnh, element xịn sò tới mức nào, nhưng nếu
bố cục không ổn định thì sản phẩm cũng tan nát.
Tỉ lệ vàng (Golden Ratio)
2. 5 quy tắc cơ bản
Nguyên tắc cơ bản của b ố cục thiết kế:
- Proximity (đưa những thứ liên quan về cùng chỗ với nhau)
- White space (khoảng trắng giữa từng phần )
- Alignment (Căn chỉnh các object) - Contrast (Tương phản )
- Repetition (Những object cùng cấp thì đưa về giống nhau) II/ TYPOGRAPHY
1. Khái niệm và ý nghĩa
Typography là cách sắp xếp các chữ cái trong một sản phẩm
Định nghĩa về Font, Size và Typeface
Font: Có các dạng font chữ:
- Serif: font chữ có chân -> mang lại cảm giác trang trọng, truyền thống.
- San Serif: font chữ không có chân -> mang lại cảm giác trẻ
trung hơn, hiện đại hơn, dễ đọc hơn
- Display: những font chữ trang trí 2. Các quy tc:
- Leading – aka Line Spacing (khoảng cách dòng)
- Tracking (khoảng cách toàn phần các chữ)
- Kerning (khoảng cách giữa 2 chữ cái)
- Alignment (căn chỉnh văn bản)
- Hierarchy (thứ bậc văn bản) o Heading o Sub-heading o Body
3. Chn font ch
Tùy vào tính chất ,ngữ cản
h … của sản phẩm mà ta sẽ lựa cọn những font chữ hợp lý,
Tuy nhiên có những font chữ chúng ta nên cân nhắc khi sử dụng
(vì chúng bị sử dụng quá nhiều hoặc quá nổi bật so với các font kh.
Ví dụ: Comic Sans, Impact, Algerians, Papyrus, …
4. Kết hp các font ch - Hiểu về font family
- Có thể sử dụng font serif và san serif cùng lúc
- Sử dụng 1 font nhưng khác typeface chứ không nên dùng 2
font tương tự nhau (HelvetIns vs. Impact)
- Độ tương phản giữa 2 font chữ (1 font đậm 1 font nhạt)
- Chỉ nên sử dụng 2 font chữ trong 1 ấn phẩm, chỉ nên sử dụng
3 font nếu thật sự cần thiết
- Những font thể hiện cảm xúc khác nhau thì không nên dùng chung
- Những font có cảm xúc tương hỗ -> có thể kết hợp
- Những font có cùng family, nhưng khác nhau về độ đậm
Khi kết ni các font ch, chúng nên có mt s hài hòa, có
th những điểm chung v Bên dưới là m
t s quy tc và gi ý khi kết hp các font ch