Latihan: Desain - Hirarki dan kisi teks

Ikhtisar

Latihan sederhana ini adalah cara yang sangat baik untuk meningkatkan keterampilan tata letak dan tipografi Anda. Latihan ini menggunakan sistem grid 12 kolom yang banyak digunakan di web dan telah ada sejak lama.

Batasan:

Langkah 1

• Buka file Figma baru dan beri nama Hirarki dan kisi teks.
• Atur jenis untuk latihan ini ke grid dasar 16px.
• Pilih bingkai desktop.
• Terapkan kisi 12 kolom.

• Sekarang, terapkan kisi baris 16px di bawah "Baris".

Langkah 2: Parameter

Jadi, Anda sekarang memiliki grid dasar. Mari kita atur beberapa parameter. Akan selalu ada batasan dan parameter di mana solusi desain Anda harus beroperasi. secara subyektif dan obyektif.

Pilih dua jenis huruf dan satu gambar. Parameter ditetapkan sebagai dua jenis huruf dan satu gambar. Jenis huruf yang digunakan di sini adalah teks Karla dan Markazi, tetapi Anda bebas memasangkan jenis huruf mana pun yang Anda inginkan. Sekarang kanvas dan batasannya sudah diatur.

Catatan: Praktik terbaik adalah mengatur jumlah jenis huruf menjadi dua atau tiga untuk menghindari kebingungan pengguna dan gangguan dari informasi dan pesan yang ingin Anda sampaikan di situs web Anda.

Langkah 3

• Tambahkan gambar dan warna latar belakang.

Sekarang ada latar belakang untuk Teks.

Langkah 4: Hierarki

Hirarki teks terdiri dari tiga bagian dengan perbedaan yang jelas di antara mereka dan ini digunakan untuk membuat hirarki visual dalam teks. Judul, sub-judul, dan badan teks.

Judul

Judul adalah bagian pertama yang harus dilihat oleh pemirsa, sehingga informasi yang paling penting harus ditempatkan di sini dan digunakan untuk menarik perhatian pemirsa. Ini harus menjadi elemen yang paling merangsang secara visual dari desain Anda, menggunakan jenis huruf yang besar dan tebal untuk menarik pemirsa untuk berhenti dan membaca informasi dalam desain Anda.

Dalam kasus ini, nama restoran, "Little Lemon." Gaya teksnya adalah MarkaziText(tebal). Ukurannya 80px dan warnanya # F4CE14.

• Tambahkan judul restoran ke desain Anda.

Sub-judul

Sub-judul membagi tata letak desain menjadi beberapa bagian, memperluas informasi tajuk dan memberikan informasi lebih lanjut kepada pembaca tentang teks isi. Sub-judul harus menonjol dari teks tubuh namun tetap berbeda secara visual dari tajuk utama, dalam hal ini adalah lokasi restoran yang disebut "Chicago." Gaya teks yang digunakan adalah Markazitext(medium). Ukurannya 64px dan warnanya adalah # EDEFEE.

• Tambahkan sub-judul restoran ke dalam desain Anda.

Tubuh

Terakhir, Anda menambahkan badan, yang akan menyertakan konten, menjadikannya teks-berat. Seperti yang telah dinyatakan sebelumnya, fungsi utama dari judul dan sub-judul adalah untuk menarik perhatian pemirsa. Sebaliknya, fungsi utama dari body text adalah untuk mengkomunikasikan informasi yang Anda inginkan, oleh karena itu, sangat penting bagi Anda untuk menggunakan font dengan tingkat keterbacaan yang baik untuk teks dan ukuran body copy lebih kecil dibandingkan dengan heading dan sub-heading.

Gaya teks yang digunakan adalah Karla (reguler) ukuran 32px dan warnanya # FFFFFF.

• Tambahkan badan teks ke desain Anda.

Catatan: Perhatikan bagaimana kisi-kisi dasar menciptakan spasi yang konsisten dengan jenisnya.