Cara Menguasai Desain Tata Letak

Panduan lengkap untuk mempelajari dasar-dasar desain visual.

Pertanyaan jutaan dolar: apa rahasia desain yang bagus?

Kita bisa menjadi filosofis tentang hal ini, tetapi secara umum, 'rahasia' pepatah untuk desain yang baik terletak pada cara Anda mengatur elemen visual Anda, dalam kaitannya dengan kanvas Anda, dan satu sama lain. Pada dasarnya, kami baru saja menjelaskan desain tata letak. Yang, jika dipikir-pikir, ada di mana pun Anda melihat.

Ambil contoh tata letak majalah. Desain mereka mengikuti sistem grid klasik (kita akan mempelajari semua tentang grid sebentar lagi). Semuanya biasanya disejajarkan ke kiri, kanan, dan di bagian bawah. Kolom-kolomnya terutama memiliki perataan rata kiri-kanan yang berbeda yang membuat halaman tidak hanya menarik secara visual, tetapi juga mudah dibaca, dan berwibawa. Judul-judul yang besar menarik perhatian pemirsa.perhatian, sementara subjudul hadir sebagai kontras dalam ukuran untuk menciptakan hirarki visual informasi.

Linda Gaom, Behance

Semua kualitas ini membuat desain halaman menjadi bersih, terstruktur, dan mudah dibaca, dan semua itu selaras dengan saran yang akan kita bahas berikutnya. Tetapi pertama-tama, mari kita pahami lebih lanjut mengenai desain tata-letak itu sendiri.

Apa Itu Desain Tata Letak?

Desain tata letak menyangkut pengaturan elemen grafis untuk menarik perhatian pembaca dan menyampaikan pesan tertentu dengan cara yang menarik secara visual.

Jadi, kami tidak berbicara tentang desain logo di sini, tetapi desain materi cetak, seperti koran, majalah, poster, dan materi digital, serta desain web, aplikasi, atau UX/UI.

Kata 'tata-letak' memberi kita banyak petunjuk, yang berarti pengaturan elemen yang sudah ditentukan sebelumnya pada suatu halaman.

Apabila tata letaknya efektif, maka akan terlihat bagus, dan memandu pemirsa untuk memahami pesan yang ingin disampaikan oleh desain. Oleh karena itu, memahami tata letak adalah kunci dalam menciptakan komposisi yang menarik, efektif, ramah pengguna, dan menyenangkan.

Jika sebuah tata letak tidak menyampaikan pesannya dengan baik kepada audiens, atau dengan kata lain, tata letak tersebut tidak "terbaca dengan baik", maka desain tersebut tidak akan efektif, tidak peduli seberapa trendi pun tampilannya. Dalam ranah desain tata letak, konten menggantikan tren dan tipuan.

Tujuan Desain Tata Letak

Untuk menyampaikan pesan dengan cepat

Desain tata letak menetapkan hubungan antara aset grafis untuk mencapai aliran pergerakan mata yang mulus untuk efektivitas dan dampak maksimum.

Untuk menciptakan keseimbangan

Menggunakan prinsip-prinsip desain tata letak adalah cara yang paling mudah untuk menciptakan rasa keseimbangan dan simetri dalam proyek desain Anda tanpa menjadi membosankan.

Untuk menciptakan kekompakan

Tata letak membantu Anda mengatur banyak elemen desain Anda dengan cara yang mudah dicerna, kohesif, dan logis.

Untuk menciptakan keindahan

Keseimbangan dan struktur secara alami menciptakan keindahan. Jika desain tata letak Anda dilakukan dengan benar, maka secara otomatis akan menarik secara visual bagi pemirsa. Semakin sedikit usaha yang perlu dilakukan oleh pemirsa untuk memahami pesan, maka desain Anda akan terlihat semakin menarik.

Desainer oleh Frank Philippin untuk bukunya 'I Used to Be a Design Student: Then - Now." Sumber: DesignBoom

Elemen-elemen Desain Tata Letak

Teks

Ini tidak hanya mencakup badan teks atau paragraf, tetapi juga judul, subjudul, header, dan footer. Pilihan tipografi, warna, dan ukuran Anda akan menghasilkan efek yang berbeda pada bagaimana tata letak Anda akan diterjemahkan kepada audiens Anda.

Gambar

Jenis gambar yang paling umum adalah foto, ilustrasi, atau infografis.

Bentuk

Bentuk bisa geometris, yang sangat bersudut, atau bisa juga organik, meniru dunia alami, dan bisa juga abstrak. Bentuk abstrak telah menjadi sangat trendi pada tahun lalu, seperti yang telah kita lihat dari para perancang web yang menggabungkannya ke dalam komposisi yang kompleks dan luas.

Bentuk dapat menggantikan gambar, atau dapat digunakan untuk menambahkan elemen grafis ke halaman, menyorot teks, atau menggambarkan ruang di antara elemen visual lainnya.

Ruang putih

Setiap desain tata letak akan memiliki sejumlah ruang kosong yang memungkinkan elemen Anda bernapas dan menonjol dengan sendirinya.

Prinsip-Prinsip Emas Desain Tata Letak

Anda akan melihat bahwa prinsip-prinsip desain tata letak mengikuti banyak prinsip-prinsip dasar desain, seperti menggunakan warna dengan cara tertentu, tipografi, pengulangan, kontras, hirarki, dan keseimbangan.

Prinsip #1. Gunakan Kisi-kisi

Kisi-kisi membantu desainer memposisikan berbagai elemen desain seperti teks dan gambar dengan cara yang terlihat koheren dan mudah diikuti.

Mereka memberikan rasa keteraturan, mereka menjaga agar elemen-elemen tidak saling mengalahkan, dan yang paling penting, grid juga akan mengoreksi keselarasan Anda. Membuat pekerjaan Anda terasa lebih bersih dan profesional.

Sumber: hgmlegal.com

Anatomi kisi-kisi

Anda mungkin mengira bahwa ini hanya garis vertikal dan horizontal, tetapi kisi-kisi terdiri atas beberapa bagian, bahkan banyak. Berikut ini adalah terminologi terpenting yang perlu Anda ketahui dalam kisi-kisi dasar:

• Format Jadi, jika Anda mendesain sesuatu untuk dicetak, formatnya adalah halaman, dan jika Anda seorang perancang web, formatnya adalah halaman web atau jendela browser.
• Margin adalah ruang kosong yang disengaja di antara format dan desain.
• Garis alir adalah garis horizontal yang memisahkan tata letak Anda menjadi beberapa bagian paralel. Garis alir membantu keterbacaan desain Anda dan memandu pembaca untuk mengikuti konten dengan benar.
• Modul adalah blok yang dibentuk oleh garis horizontal dan garis alir vertikal dari grid apa pun. Jika Anda memikirkannya, mereka adalah blok bangunan dari grid apa pun. Semua modul vertikal Anda membuat kolom, sementara semua grid horizontal Anda membuat baris.
• Wilayah adalah kelompok modul yang terhubung, baik vertikal maupun horizontal. Tidak ada aturan tentang bagaimana Anda memutuskan untuk mengaturnya.

Sumber: Radversity

Jenis-jenis kisi-kisi

Kisi-kisi tata-letak pertama kali digunakan untuk mengatur tulisan tangan di atas kertas.

Sistem ini sudah ada sejak abad ke-13, ketika seniman Prancis Villard De menggabungkan sistem grid dengan rasio emas untuk menghasilkan tata letak halaman cetak dengan margin. Anda dapat melihat sistem grid ini hingga hari ini, seperti yang dibuktikan oleh sebagian besar tata letak buku dan majalah yang dicetak. Penerbit, editor, dan desainer lebih suka menggunakan grid standar bukan hanya karena terlihat bagus, tetapi karena pembaca telah terbiasa denganmengharapkan elemen desain tertentu berada di tempat tertentu.

Kisi-kisi dapat didesain dengan dua cara: simetris atau asimetris. Kisi-kisi simetris mengikuti garis tengah, di mana daerah vertikal dan horizontal sama satu sama lain; dan kolom memiliki lebar yang sama.

Dalam sebuah kisi asimetris seperti namanya, margin dan kolomnya tidak semuanya identik.

Berdasarkan klasifikasi ini, ada lima jenis kisi-kisi tata letak utama yang digunakan di seluruh dunia yang dapat Anda andalkan:

Kisi-kisi naskah adalah jenis grid yang paling umum untuk dokumen. Grid ini memisahkan header, footer, dan margin, dan pada dasarnya membuat persegi panjang di dalam format (atau halaman) yang memberikan batas-batas teks Anda. Grid ini adalah dasar untuk majalah, koran, dan buku. Jadi, ini mungkin tata letak yang paling Anda kenal.

Sumber: UXplanet

Sumber: Radversity

Kisi-kisi kolom adalah favorit lain dalam penerbitan majalah. Tata letak majalah yang khas menggunakan kisi-kisi kolom untuk memisahkan teks menjadi bagian-bagian yang mudah dibaca. Tetapi mereka juga sangat populer untuk situs web. Anda dapat menggunakan apa saja dari dua hingga enam kisi. Lebih dari itu dimungkinkan, namun tidak umum. Hal yang sangat penting tentang kisi-kisi kolom adalah jarak antara kolom, atau talang, sama jaraknya dari satu sama lainlainnya.

Kisi-kisi kolom simetris digunakan oleh surat kabar, misalnya, sementara kisi-kisi kolom asimetris lebih disukai dalam desain web.

Sumber: UX Planet

Sumber: Radversity

Kisi-kisi modular mirip dengan grid kolom, tetapi juga memperhitungkan garis alir horizontal. Jenis grid ini diperlukan ketika Anda harus mengatur berbagai elemen dalam tata letak Anda dan grid kolom tidak cukup.

Kisi-kisi modular memiliki modul dengan ukuran yang sama sehingga sangat mudah untuk memvisualisasikan zona spasial Anda dengan cara yang berbeda.

Sumber: UX Planet

Sumber: Radversity

Kisi-kisi dasar sangat bagus untuk komposisi berbasis teks. Baseline adalah garis tempat teks berada saat Anda mengetik, dan leading adalah jarak antara dua baseline. Ingin tahu, seberapa besar judul atau subjudul Anda seharusnya?

Kisi-kisi dasar ada di sini untuk membantu memberikan ritme yang mengalir pada teks Anda.

Sumber: UX Planet

Sumber: Fragaria

Kisi-kisi hirarkis terlihat kurang seperti grid dibandingkan dengan semua rekan mereka. Meskipun demikian, mereka sangat berguna ketika mengatur elemen desain dalam urutan kepentingannya. Hierarchical grid dapat didasarkan pada grid modular, atau Anda bahkan dapat membuatnya sendiri. Situs web banyak menggunakan grid ini, terutama majalah dan surat kabar digital yang cenderung lebih mengandalkan grid hierarki daripada grid kolom dalam transisi mereka untuk menjadidigital.

Sumber: UX Plane

Prinsip #2. Gunakan Ruang Negatif

Kita sering berpikir bahwa kekosongan, keheningan, atau kurangnya warna adalah hal yang buruk, tetapi kita tidak mempertimbangkan bahwa semua itu adalah fondasi yang kokoh dari kontras.

Disebut juga ruang putih, ruang negatif adalah area dalam desain Anda yang tidak memiliki elemen apa pun yang sebenarnya. Ini adalah area yang dibiarkan kosong. Ini tidak hanya mengelilingi aset Anda, tetapi juga menciptakan ikatan yang diperlukan di antara aset-aset tersebut. Oleh karena itu, ruang negatif adalah elemen desain yang sah dan memiliki dampak besar pada seberapa efektif desain tata letak Anda.

Ruang negatif yang baik vs ruang negatif yang buruk

Ruang negatif akan membantu memisahkan berbagai area dalam desain Anda, sekaligus memungkinkan tata letak Anda untuk bernapas. Ruang negatif membantu hirarki visual dan keseimbangan visual; mengatur fokus pengguna pada elemen-elemen inti; mengurangi tingkat distraksi; dan akhirnya, menambah gaya dan keanggunan pada desain Anda.

Desainer yang belum berpengalaman mungkin memiliki kecenderungan untuk mengisi kanvas mereka sebanyak mungkin, dengan memperbesar teks atau meledakkan logo, atau gambar. Tetapi, dengan memberikan ruang pada elemen Anda, pemirsa dapat menangkap isyarat informasi tertentu dengan lebih cepat dan lebih nyaman.

Jika semuanya berteriak meminta perhatian pemirsa, tidak ada yang terdengar.

- Aaron Walter, 'Desain untuk emosi'

Cara mudah untuk menentukan ruang negatif Anda adalah dengan menggunakan kisi modular. Dengan menempatkannya di atas desain Anda, Anda dapat dengan mudah memvisualisasikan modul mana yang dapat tetap kosong, dan mana yang harus diisi.

Desainer oleh Brunswicker, Sumber: Codesignmag.com

Prinsip #3. Pilih Satu Titik Fokus

Pernahkah klien meminta Anda untuk membuat logo yang lebih besar? Dan kemudian membuat judul lebih besar lagi?

Anda tidak bisa menekankan segala sesuatu. Hal ini akan mengalahkan inti dari desain yang baik. Sama seperti waktu, fokus itu relatif. Agar satu elemen menonjol, elemen lainnya harus berfungsi sebagai latar belakang. Beberapa elemen harus mendominasi elemen lainnya agar desain Anda menampilkan hierarki visual.

Titik fokus dalam sebuah desain adalah satu elemen dengan bobot visual terbesar. Ini adalah elemen yang pertama kali menarik perhatian, lebih dari apa pun dalam tata letak Anda.

Titik fokus akan mengumumkan kepada audiens Anda di mana perjalanan menonton mereka dimulai pada desain Anda. Jadi, ini adalah awal dari cerita yang Anda ceritakan.

Hal ini biasanya dapat dicapai dengan menggunakan gambar yang besar atau sumber tipografi yang besar. Perhatikan, betapa efektifnya titik fokus di bawah ini

Didesain oleh Braulio Amado untuk Bloomberg Businessweek, Sumber: It's nice that

Namun, meskipun titik fokus akan menarik perhatian audiens Anda, aturan berikut ini akan membantu memandunya.

Prinsip #4. Pikirkan Kedekatan dan Aliran

Prinsip kedekatan itu sederhana, yaitu memastikan bahwa elemen-elemen yang berhubungan satu sama lain ditempatkan bersama.

Jarak yang dekat menunjukkan bahwa aset visual terhubung dan menjadi satu unit visual yang membantu mengatur tata letak Anda.

Jadi, hanya kelompokkan aset desain yang memiliki hubungan satu sama lain, dan gunakan kantong-kantong informasi pada desain Anda untuk memandu audiens Anda ke bagian konten yang relevan yang perlu mereka konsumsi. Ini juga disebut dengan prinsip aliran.

Sumber: Satori Graphics

Sebuah desain dengan alur yang baik akan menuntun mata pemirsa ke seluruh tata letak, dari elemen ke elemen, dengan mudah. Titik fokus Anda akan menarik perhatian dan menjadi tempat beristirahat, sementara elemen lainnya memberikan arahan.

Cara sederhana untuk memahami hal ini adalah dengan mengambil contoh situs web kami, misalnya. Grafik dipisahkan dengan jelas dari teks, begitu juga dengan ajakan untuk bertindak, sehingga perhatian pemirsa berpindah dari satu kelompok informasi ke kelompok berikutnya.

Prinsip #5. Gunakan Kontras

Pastikan Anda memiliki kontras yang cukup dalam desain Anda.

Kontras membantu mengatur desain Anda dan akan menetapkan hierarki yang sangat dibutuhkan dan memberi penekanan pada apa yang penting.

Lebih dari itu, penggunaan kontras yang baik juga menambah daya tarik visual di seluruh desain Anda. Mari kita hadapi itu, tata letak di mana segala sesuatu memiliki ukuran, bentuk, atau warna yang sama akan terlihat membosankan. Kontras membumbui segala sesuatunya.

Lihat juga: Cara Bekerja dengan Palet Warna di Vectornator

Pikiran pertama Anda mungkin adalah kontras warna, seperti hangat versus sejuk, gelap versus terang, biru versus oranye. Tetapi, meskipun warna adalah prinsip kontras yang sangat esensial, namun ada juga kontras jenis, keselarasan, dan ukuran. Dan ingat, kontras juga bersifat relatif, dan hanya memiliki makna jika disandingkan dengan elemen lainnya.

Berikut adalah beberapa contoh tata letak yang menggunakan aturan ini dengan cara yang cerdas dan indah. Perhatikan kontras dalam tipografi, warna, dan bahkan kontras dalam ukuran di antara berbagai elemen.

Sumber: Rencana Aksi Rekonsiliasi IAG

Prinsip #6. Pengulangan, Pola, Irama

Ketika kita memikirkan pengulangan, kita memikirkan elemen yang sama berulang kali.

Namun, berbeda dengan desain, tentu saja tidak membosankan seperti itu. Apabila digunakan dengan benar, pengulangan sebenarnya dapat memperkuat desain Anda.

Lihat juga: Cara Membuat Latar Belakang Transparan di Illustrator

Cobalah untuk mengidentifikasi dan menggunakan kembali sebuah motif di seluruh tata letak Anda sehingga berbagai area terasa terhubung dan merupakan bagian dari komposisi yang sama. Ini akan membantu desain Anda memiliki tema. Dengan mengulang elemen, Anda tidak hanya menyampaikan sesuai dengan harapan audiens Anda, tetapi Anda juga akan meningkatkan pengalaman pengguna. Konsisten membuat pengguna merasa lebih nyaman.

Anda bisa melakukan ini dengan mengulang bentuk atau simbol, atau bahkan skema warna, jenis huruf, dan gaya yang sama secara umum.

Kebiasaan yang baik untuk dilakukan adalah menggunakan jenis huruf dengan keluarga besar. Batasi jumlah pola, bobot/gaya garis, dan warna yang berbeda, dan ulangi secara keseluruhan. Selain itu, cobalah untuk menjaga agar gaya gambar dan grafik tetap sama. Misalnya, gunakan ilustrasi oleh seniman yang sama.

Sumber: Thepentool.co

Itulah enam prinsip yang akan membantu Anda mengatur desain Anda dan mencapai tata letak yang lebih bersih, lebih profesional, dan seimbang.

Namun perjalanan Anda tidak berakhir di sini. Desain grafis bukanlah ilmu pasti dan seharusnya tidak terbatas pada tips dan prinsip. Seperti halnya di semua bidang kreasi, tidak ada aturan baku yang pasti. Melanggar tips ini dengan cara yang halus akan menambah kedalaman dan variasi pada desain Anda.

Namun demikian, ini adalah titik awal yang bagus dan kami mendorong Anda untuk mencobanya. Dan beritahu kami bagaimana cara kerjanya!

Unduh Vectornator untuk Memulai

Bawa desain Anda ke tingkat berikutnya.

Unduh file