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!

48 24 lượt tải Tải xuống
Chia sẻ Báo cáo tài liệu

Môn: Thiết kế giao diện

Trường: Trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh

Thông tin:

8 trang 7 tháng trước

Tác giả:

Profile Mai Nguyệt
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 thập ý tưởng -> sắp xếp & phát tri -> t o ra các b n vển ạ ả ẽ,
mô hình, thử nghiệm -> s n phả ẩm hoàn thi n ệ
I/ BỐ CỤC
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ẽ định hướ dễ ng s ự chú ý hơn.
Tại 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ứ ế ế ủ
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 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 (khoảng 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
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 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. Chọn font ch ữ
Tùy vào tính ch c a s n ph m mà ta s l a cất, 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 nhạt)
- nên sChỉ ử 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 ầ ế
- 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ể là ở 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
| | Tải xuống

Có thể bạn quan tâm:

Preview text:

GIÁO ÁN BỐ CỤC + 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Ố CỤC
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 tắc:
- 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. Chọn 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 hợp 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 nối các font chữ, chúng nên có một sự hài hòa, có
thể là ở những điểm chung về Bên dưới là m
ột số quy tắc và gợi ý khi kết hợp các font chữ