Tata letak atau layout desain

1. Layout (Tata Letak)
Agip I. M.

2. Pengertian Layout
• Secara sederhana, definisi layout adalah desain tata letak. Sedangkan arti
dari layout sendiri adalah suatu susunan, rancangan, atau tata letak ruang
dari sebuah elemen yang sengaja didesain untuk bisa ditempatkan dalam
suatu bidang yang sebelumnya telah direncanakan sistemnya terlebih
dahulu.
• Layout merupakan tata letak yang menjadi acuan pada saat menyusun
halaman sebuah desain. Tata letak menjadi tujuan penting dalam memulai
desain yang terstruktur, karena tata letak yang baik akan mempermudah
penyampaian informasi dari isi desain.

3. Contoh Layout

4. Contoh Layout

5. Contoh Layout

6. Fungsi Layout
• Manfaat utama layout adalah mendukung penataan elemen
gambar dan teks dalam desain sehingga membuat membuat
tampilan menjadi komunikatif dan pesan bisa disampaikan
secara efektif.
• Dengan kata lain, manfaat desain layout adalah membantu
pengguna maupun audiens dalam menangkap informasi yang
disajikan. Jika diklasifikasi, tujuan dari desain layout adalah
sebagai berikut:
 Membuat elemen gambar dan teks lebih komunikatif
 Membantu orang yang melihat dalam menangkap informasi
desain
 Penataan ruang dan isi desain menjadi terkonsep secara
harmonis

7. Elemen Layout
• Dalam desain grafis dapat berisi sejumlah elemen yang berbeda-beda.
Beberapa elemen desain layout adalah sebagai berikut:
 Teks (text): Elemen teks termasuk judul, heading, dan paragraf. Dalam desain
text-heavy, elemen-elemen ini harus ditata dengan cara intuitif yang mudah
dibaca.
 Gambar (image): Foto dan visual lainnya, seperti ilustrasi, membantu
memecah teks dan mengkomunikasikan pesan tertentu. Elemen ini sangat
efektif dalam melibatkan pemirsa melalui emosi.
 Garis (line): Garis digunakan untuk membagi bagian. Mereka juga dapat
menambahkan penekanan pada teks.
 Bentuk (shape): Bila digunakan dengan baik, bentuk menambahkan sentuhan
bakat dan kepribadian pada tata letak. Persegi panjang dan lingkaran adalah
yang paling umum, tetapi ada banyak cara untuk berkreasi dengan bentuk.
 Ruang putih (white space): Seperti yang telah kita bahas, menambahkan
ruang di antara bagian-bagian tata letak mencegah pengguna kewalahan atau
lelah saat melihat desain yang sibuk.

8. Prinsip Layout

9. Prinsip Layout
• Dalam membuat konsep layout, perlu
memperhatikan komponen-komponen penting
terlebih dahulu, hal ini mengacu pada prinsip
dasar layout. Prinsip dasar layout terbagi
menjadi beberapa macam:
 Hierarchy (hierarki)
 Alignment (perataan)
 Space (ruang)
 Balance (keseimbangan)
 Emphasis (penekanan)

10. Hierarchy
• Dalam desain, hierarki mengacu pada urutan
kepentingan elemen dalam layout.
 Cara pertama untuk membuat hierarki adalah melalui
ukuran. Secara umum, elemen terbesar dalam sebuah
desain adalah yang paling penting, diikuti oleh yang
terbesar kedua, dan seterusnya. Alasan mengapa
elemen yang lebih besar lebih penting adalah karena
merekalah yang pertama menarik perhatian.
 Cara kedua untuk membuat hierarki tanpa
memanipulasi ukuran dalam desain layout adalah
melalui kontras. Elemen dengan kontras yang lebih
tinggi menonjol di antara elemen kontras yang lebih
rendah.

11. Hierarchy

12. Alignment
• Ada dua jenis perataan dalam desain adalah perataan
tepi dan perataan tengah. Perataan tepi adalah saat
elemen disejajarkan ke tepi atas, bawah, kiri, atau kanan
tata letak.
• Perataan kiri biasanya digunakan untuk teks karena
kita membaca teks dari kiri ke kanan (dalam bahasa
Inggris). Perataan tengah efektif untuk bagian teks yang
lebih kecil, seperti judul atau uraian, serta gambar, ikon,
dan visual lainnya. Perataan yang efektif berkontribusi
pada keterbacaan dan aliran tata letak.

13. Alignment

14. Space
• Pentingnya space dalam layout adalah untuk membantu memisahkan dan
mengatur elemen yang berbeda. Saat membuat layout, elemen yang berbeda harus
memiliki ruang lega yang cukup untuk menghindari terlalu banyak elemen pesaing
yang membuat yang melihat kewalahan.

15. Balance
• Keseimbangan menjadi porsi ukuran setiap bagian layout dalam
ruang desain. Ukuran yang seimbang akan mempermudah audiens
dalam membaca dan merasakan sesuatu yang ditangkap. Ada dua
jenis balance, yaitu symmetric balance (kuat, stabil) dan asymmetric
balance (variatif, bergerak).
 Symmertric balance, terjadi ketika objek memiliki dua sisi desain yang
sama. Jadi saat objek dipotong menjadi dua, kiri dan kanan akan seperti
bayangan cermin. Agar simetris terlihat sempurna, sebuah desain harus
memiliki visual yang berbobot sama di kedua sisinya.
 Asymmetric balance, terjadi ketika gambar visual yang ada berbeda di
dalam kedua sisi desain, namun meskipun begitu gambar tetap tampak
seimbang. Agar dianggap asimetris, sebuah desain harus memiliki bobot
visual yang tidak sama di kedua sisi, tetapi visual yang tidak sama itu
harus saling menyeimbangkan/menciptakan keseimbangan.

16. Balance

17. Emphasis
• Sebuah desain harus tampak persuasif, dengan cara menambahkan
titik berat pada ruang tertentu. Tujuan dari titik berat ini adalah
memicu daya tarik kepada audiens saat melihat atau membaca
karya desain.

18. Jenis Layout

19. Mondrian Layout
• Tipe tata letak Mondrian terinspirasi dari masterpiece
karya pelukis Belanda, Piet Mondrian. Desainnya
asimetris, mengandalkan basis warna biru, kuning,
dan merah, dengan garis hitam sebagai pemisah
setiap ruang.
• Layout Mondrian kerap dipakai sebagai tata letak
spanduk kegiatan, poster film, juga majalah fashion.
Penempatan unsur gambarnya adalah di dalam
bidang berbentuk segi empat, baik itu persegi
panjang, portrait, lanskap, maupun poligon beraturan

21. Big Type Layout
• Tata letak big type punya ciri khas menggunakan font
berukuran besar sebagai unsur utamanya. Bila ada
gambar yang menyertai, maka fungsinya hanya
sebagai elemen pendukung.
• Penggunaan layout ini fokus pada judul, huruf
pertama dalam kalimat, ataupun pada pesan utama
sebuah iklan. Tujuan utamanya tentu demi menarik
perhatian audiens. Big type layout sering dipakai
dalam media promosi seperti brosur iklan dengan
desain minimalis nan artistik.

23. Circus Layout
• Penyajian iklan dengan layout Circus tidak
terikat pada ketentuan apapun. Komposisi
setiap elemennya tidak beraturan, biasa dipakai
untuk meluapkan ekspresi ramai, kekacauan,
atau kesibukan. Poster konser, pameran, dan
majalah sekolah banyak memakai jenis tata
letak ini.
• Tata letak ini sangat cocok ketika seorang
desainer ingin mengekspresikan perasaan
keramaian, kelompok, ketidakteraturan,
kesibukan, kekacauan dll.

25. Sillhoutte Layout
• Tata letak silhouette atau siluet mengacu pada
karya fotografi atau metode ilustratif yang
menyorot bentuk bayangan sebuah subjek.
Tampilan visualnya dapat berupa teks, ilustrasi
warna, atau pembiasan warna halus.
• Kebanyakan desain dengan layout ini
menggunakan nuansa klasik dan retro. Namun,
dengan tambahan elemen warna yang tepat,
layout ini bisa menciptakan desain artistik dan
unik.

27. Picture Window Layout
• Fitur utama layout ini adalah tampilan gambar
berukuran besar, biasanya secara close up.
Picture Window Layout sering dipakai dalam
desain brosur, dapat menggunakan gambar/foto
produk itu sendiri ataupun menggunakan model.
• Porsi teks atau tulisan dalam tata letak ini tidak
terlalu banyak, umumnya gambar/foto
diletakkan di bagian atas, lalu judul dan
deskripsinya di bagian bawah.

29. Frame Layout
• Tata letak ini mudah dikenali karena gambar
atau teksnya diletakkan di dalam sebuah
bingkai alias frame, baik berupa shading
ataupun border.
• Kerap dipakai dalam desain poster, iklan, surat
undangan, sertifikat, hingga antarmuka website,
frame layout memberi kesan rapi, bernuansa
teratur, seimbang karena batas di sekitarnya,
yang kemudian itu semua akan memberikan
perasaan puas dan tenang.

31. Multi Panel Layout
• Salah satu jenis layout dalam desain grafis ini
menghasilkan tampilan visual yang rapi. Tata letak yang
dipakai adalah membagi beberapa tema atau bagian ke
dalam bentuk yang serupa, seperti kubus, balok, persegi,
persegi panjang, dan lain-lain. Ukurannya tidak harus
selalu sama, bisa besar-kecil atau portrait-lanskap.
• Tata letak multi panel biasa diaplikasikan pada desain
majalah bertema olahraga, pendidikan, atau media
promosi dengan target audiens anak-anak muda.

33. Copy Heavy Layout
• Fokus tata letak copy heavy adalah pengaturan huruf,
desainnya didominasi penyajian copy atau teks. Layout
ini digunakan oleh hampir semua media, terutama media
cetak karena paling sesuai untuk menyampaikan lebih
banyak informasi daripada layout yang didominasi
gambar. Contoh media yang menerapkan layout jenis ini,
yakni:
 Koran
 Majalah
 Jurnal Online
 Brosur
 Infografis
 Dan lain-lain

35. Tugas
• Buat desain sertifikat menggunakan frame layout ! [Deadline 12/09/22]
 Konteks sertifikat lomba, partisipasi, kelulusan, pkl dan ujikom
 Ukuran A4
• Buat desain halaman majalah menggunakan multi panel layout/copy heavy
layout ! [Deadline 15/09/22]
 Konteks fashion, olahraga & otomotif
 2 artboard (kiri & kanan)
 Ukuran A4
• Buat infografis ! [Deadline 26/09/22]
 Konteks mental health
 Tema: stress/burnout, kesepian, patah hati/sakit hati, dll
 Elemen yg harus ada (pengertian, dampak, cara mengatasi)
 Ukuran A4

36. Referensi
• https://www.ekrut.com/media/layout-adalah
• https://dianisa.com/pengertian-layout-desain/
• https://qomaruna.com/pengertian-layout/
• https://solusiprinting.com/ada-12-jenis-layout-dalam-desain-grafis-simak-
disini/
• https://www.graphic-design-institute.com/types-of-graphic-web-page-
layout/#:~:text=When%20talking%20about%20a%20page,%2C%20dynamic%
2C%20adaptive%20or%20responsive.
• https://www.designyup.com/importance-of-layout-in-graphic-design/