dasar desain antamuka pengguna · pdf fileseni dan teknik memilih dan menata huruf dengan...
TRANSCRIPT
Dasar Desain
Antamuka
Pengguna
Pertemuan 04
Tipografi
Seni dan teknik memilih dan menata huruf
dengan pengaturan penyebarannya pada ruang
yang tersedia, untuk menciptakan kesan tertentu
dan meningkatkan kenyamanan membaca
semaksimal mungkin.
“The Web is 95% Typography”- Oliver Reichenstein
Typeface
Desain/bentuk karakter & huruf
vs Font
Sekumpulan typeface
Serif vs Sans-serif
Anatomi huruf
Ascender
Descender
Counter
Serif
Baseline
cap-height
x-height
Spacing
Leading adalah
jarak antar baselineleading
Tracking
adalah
AJ R KA
antar karakter
Kerning adalah
pengaturan
AJ R KA
antar dua karakter
tertentu
Word-spacing adalah
jarak
antar
kata
Readability &
Legibility
Legibility
Tingkat kemudahan sebuah karakter/huruf
diidentifikasi dan dibedakan.
Readability
Tingkat kemudahan keterbacaan sekumpulan
huruf: kata, kalimat, paragraf.
Mood
Hierarchy
Measurement
6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72
Relative
percent (%)
em
Static
pixel (px)
point/px
widht/height
font
RWD Font
Set ukuran default font
body { font-size: 100%; }
RWD Font
nilai yg ingin dikonversi (px)
nilai acuan konversi (px)
= nilai konversi (em)
36 px
16 px
= 2.25 em
h1 { font-size: 36px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
p { font-size: 14px; }
h1 { font-size: 2.25em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3125em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
p { font-size: 0.875em; }
Web
Fontvs
System
Font
Pairing Fonts
Harmony
Droid Serif and Droid Sans
Anodyne and Poulaire
Contrast
Georgia and Arial
Georgia and Arial
Bad Example
Almendra and Stoke
Further Reading
A-Z OF WEB TYPOGRAPHY
https://webdesign.tutsplus.com/series/a-
z-of-web-typography--webdesign-11706
HURUFONTIPOGRAFI
Surianto Rustan
Gramedia Pustaka Utama
154 halaman full-color
Tugas
2
• Buatlah konsep desain tampilan web pribadi,
meliputi:
• Profil diri + foto
• Citra yg ingin ditampilkan (boleh berupa keywords)
• Konsep (berupa deskripsi) desain tampilan web yg
merupakan implementasi dari teori desain (prinsip
desain, images, warna, tipografi)
Tugas
2
• Pengumpulan tugas melalui email:
Subject: DesUI_Kelas_Tugas2_Nama
• File tugas dikumpulkan dalam format .pdf
• Batas akhir pengumpulan:
Minggu depan yah ^^