PRATIKUM BAB I

HERO SECTION

Nama : Alfha Risqi Wicaksono

Nim : 362358302145
Kelas 1A TRPL
A. Tujuan
Dalam pratikum Bab I Hero Section ditugaskan untuk bisa membuat area navigasi atau orang sering
menyebut above the fold. Mari kita lihat contoh contoh hero section.
Beberapa elemen yang biasanya terdapat pada Hero Section:
1. Title.
Biasanya terdiri dari beberapa kata, berukuran besar, dan kata kata yang digunakan simple, to the point
dan menarik perhatian
2. Deiskripsi.
Berada di bawah title, bertujuan untul lebih menjelaskan atau memberi gambaran mengenai produk atau
jasa yang ditawarkan.
3. CTA
Kepanjangan dari Call to Action, aslinya adalah sebuah tombol yang bisa diklik untuk mulai mencoba
produk atau jasa yang ditawarkan.
4. Graphics
Bisa berupa foto, ilustrasi, video. Bertujuan untuk memberikan gambaran visual mengenai produk atau
jasa yang ditawarkan.
B. Langkah-langkah Percobaan
Buka file figma yang dibuat pada praktikum sebelumnya.

1. Buat sebuah kotak sebagai area hero. Lalu pada area property sebelah kanan, ubah ukuran dan
warna nya sebagai berikut.
2. Membuat title, posisikan dan properti sesuai gambar dibawah.

3. Membuat deskripsi, sesuaikan posisi dan properti se[erti gambar dibawah.

4. Menempatkaln logo dengan rectangle, sesuaikan posisi dan properti seperti gambar di bawah.

Masukkan text ke dalam logo

Hasilnya seperti berikut
5. Membuat grafis foto, dengan rectangle dan properti seperti berikut agar membentuk oval.

Select oval lalu klik kanan dan pilih Group

Selection untuk melakukan grouping

Pastikan obyek oval tersebut sudah masuk ke

dalam grouping
Lakukan proses masking pada obyek oval
dengan cara klik kanan dan pilih Use as
Mask

Setelah dilakukan masking, tampilan akan

berubah seperti ditunjukkan gambar di
bawah.

Lalu kembali ke Figma. Klik area diluar

frame. Pada bagian sidebar sebelah kiri. Drag
Image ke dalam oval yang sudah kita ubah
menjadi masking.
Lalu hasilnya akan menjadi seperti ini.

Setelah itu buat oval dengan border. Kita

bisa menyamakan angka property di sebelah
kanan

Letakkan layer oval tersebut di bawah

masking dan Posisikan dibelakang
foto.duplikasi layer (dengan Ctril + d) dan
posisikan sebagai berikut.
 Atur Opacity hingga menjadi seperti ini

6. Membuat elemen UI untuk Ornamen Buat kotak seperti dibawah ini. Kalian bisa menyamakan
angka property di sebelah kanan agar hasil nya sama

Masukkan text, Lalu tempatkan di sebelah pojok kiri atas, sesuai dengan jarak dibawah ini
Masukkan teks lagi ke dalam kotak tadi sesuai dibawah ini, Lalu tempatkan sejajar dengan teks
sebelumnya dan beri jarak 22px.

Lalu buat kotak untuk dijadikan sebagai progress bar. Kalian bisa ikuti property di samping kanan.
Tempatkan kotak di bawah teks "Copywriting" dengan jarak 5px.
Buat beberapa progress bar dan tempatkan dengan jarak dibawah ini

Hasil akhir
C. Analisisa
Hero section adalah elemen penting dalam desain situs web, karena merupakan hal pertama yang dilihat
pengunjung dan berperan penting dalam menarik perhatian mereka serta menyampaikan tujuan dan identitas
situs web.
Hero section harus mengkomunikasikan dengan jelas tujuan situs web atau pesan yang di sampaikan.
Menggunakan teks yang ringkas dan menarik untuk menjelaskan apa yang ditawarkan situs web.
Mengguunakan gambar atau elemen multimedia (foto pada object oval dan sedikit hiasan
dibelakangnya) yang menarik secara visual yang berhubungan dengan konten atau tema situs web. Pastikan
elemen visual relevan dan membangkitkan respons emosional yang diinginkan dari pengguna.
Memberikan deskripsi dengan singkat dan jelas apa tujuan dari website. Pilih font yang mudah dibaca
dan selaras dengan pedoman tipografi. Menggunakan kombinasi gaya font (judul, subjudul, isi teks) untuk
membuat hierarki dan penekanan visual.
Menyerertakan tombol CTA yang jelas dan persuasif yang mendorong pengunjung untuk mengambil
tindakan, seperti mendaftar, menjelajah lebih lanjut, atau melakukan pembelian.
D. Kesimpulan
Secara keseluruhan, hero section pada sebuah website adalah elemen kunci dalam memberikan kesan
positif pertama kali dan melibatkan pengunjung. Ia harus memiliki daya tarik visual, mengkomunikasikan pesan
yang jelas, dan mendorong pengguna untuk mengambil tindakan. Melakukan peninjauan dan optimisasi secara
berkala sangat penting untuk menjaga efektivitasnya dan memastikan kesesuaian dengan harapan pengguna
yang terus berubah dan tujuan bisnis yang berkembang.