Cara Menguasai Reka Bentuk Reka Letak

Panduan penuh untuk mempelajari asas reka bentuk visual.

Persoalan jutaan dolar: apakah rahsia reka bentuk yang baik?

Kita boleh berfalsafah tentang yang ini , tetapi secara amnya, 'rahsia' peribahasa kepada reka bentuk yang baik terletak pada cara anda menyusun elemen visual anda, berhubung dengan kanvas anda dan antara satu sama lain. Pada asasnya, kami baru sahaja menerangkan reka bentuk susun atur. Yang, apabila anda memikirkannya, terdapat di mana-mana sahaja anda melihat.

Ambil reka letak majalah, sebagai contoh. Reka bentuk mereka mengikut sistem grid klasik (kita akan mempelajari semua tentang grid dalam satu minit). Semuanya biasanya dijajarkan ke kiri, kanan dan di bawah. Lajur terutamanya mempunyai penjajaran wajar yang tersendiri yang menjadikan halaman itu bukan sahaja menarik secara visual, tetapi juga mudah dibaca dan berwibawa. Tajuk besar menarik perhatian penonton, manakala subtajuk datang sebagai kontras dalam saiz untuk mencipta hierarki maklumat visual.

Linda Gaom, Behance

Semua kualiti ini menjadikan halaman reka bentuk bersih, berstruktur dan mudah dibaca, dan ia selaras dengan petua yang akan kita bincangkan seterusnya. Tetapi pertama-tama, mari kita fahami lebih lanjut tentang reka bentuk reka letak itu sendiri.

Lihat juga: Buat Topeng Keratan dalam Adobe Illustrator: Panduan Langkah Demi Langkah

Apakah Reka Bentuk Reka Letak?

Reka Bentuk Reka Letak melibatkan susunan elemen grafik untuk menarik perhatian pembaca dan menyampaikan mesej tertentu dengan cara yang menarik secara visual .

Jadi kami tidak bercakaptempat berehat, manakala elemen lain memberikan arah.

Cara mudah untuk memahami perkara ini adalah dengan mengambil contoh tapak web kami, sebagai contoh. Grafik dipisahkan dengan jelas daripada teks, begitu juga seruan untuk bertindak, jadi perhatian penonton menavigasi dari satu kelompok maklumat ke yang seterusnya.

Prinsip #5. Gunakan Kontras

Pastikan anda mempunyai kontras yang mencukupi dalam reka bentuk anda.

Kontras membantu mengatur reka bentuk anda dan akan mewujudkan hierarki yang sangat diperlukan dan memberi penekanan pada perkara yang penting.

Lebih daripada itu, penggunaan kontras yang baik juga menambah minat visual sepanjang reka bentuk anda. Mari kita hadapi itu, susun atur yang semuanya mempunyai saiz, bentuk atau warna yang sama akan kelihatan membosankan. Kontraskan rempah ratus.

Fikiran pertama anda mungkin kontras warna, seperti panas berbanding sejuk, gelap lawan terang, biru berbanding oren. Tetapi walaupun warna adalah prinsip kontras yang sangat penting, terdapat juga kontras jenis, penjajaran dan saiz. Dan ingat, kontras juga relatif. Ia hanya mempunyai makna dalam penjajaran dengan elemen lain.

Berikut ialah beberapa contoh reka letak yang menggunakan peraturan ini dengan cara yang bijak dan cantik. Perhatikan kontras dalam tipografi, warna dan juga kontras dalam saiz antara elemen.

Sumber: Pelan Tindakan Penyesuaian IAG

Prinsip #6. Pengulangan, Corak, Irama

Apabila kita memikirkan pengulangan, kita berfikirdaripada elemen yang sama berulang kali.

Tetapi ia berbeza dalam reka bentuk. Ia pasti tidak membosankan seperti itu. Apabila digunakan dengan betul, pengulangan sebenarnya boleh memperkasakan reka bentuk anda.

Cuba kenal pasti dan gunakan semula motif di seluruh reka letak anda supaya pelbagai kawasan berasa bersambung dan sebahagian daripada komposisi yang sama. Ia akan membantu reka bentuk anda mempunyai tema. Dengan mengulangi elemen, anda bukan sahaja menyampaikan mengikut jangkaan khalayak anda, tetapi anda juga akan meningkatkan pengalaman pengguna. Menjadi konsisten membuatkan pengguna berasa lebih selesa.

Anda boleh melakukannya dengan mengulang bentuk atau simbol. Ataupun skema warna, muka taip dan gaya yang sama secara umum.

Kebiasaan yang baik untuk dilakukan ialah menggunakan muka taip dengan keluarga yang ramai. Hadkan bilangan corak yang berbeza, berat/gaya garisan dan warna, dan ulangi keseluruhannya. Juga, cuba pastikan gaya imej dan grafik sama. Contohnya, gunakan ilustrasi oleh artis yang sama.

Sumber: Thepentool.co

Itu sahaja. Ini ialah enam prinsip yang akan membantu anda mengatur reka bentuk anda dan mencapai reka letak yang lebih bersih, lebih profesional dan seimbang.

Tetapi perjalanan anda tidak berakhir di sini. Reka bentuk grafik bukanlah sains yang tepat dan ia tidak sepatutnya terhad kepada petua dan prinsip. Seperti yang berlaku dalam semua bidang penciptaan, tidak ada peraturan yang ketat. Memecahkan petua ini dengan cara yang halus akan menambah kedalaman dan kepelbagaianreka bentuk anda.

Walau bagaimanapun, ia adalah titik permulaan yang bagus dan kami menggalakkan anda mencubanya. Dan beritahu kami cara ia berfungsi!

Muat turun Vectornator untuk Bermula

Baikkan reka bentuk anda ke peringkat seterusnya.

Muat turun fail mengenai reka bentuk logo di sini. Tetapi reka bentuk bahan cetak, seperti akhbar, majalah, poster dan rakan digitalnya, serta reka bentuk web, apl atau UX/UI.

Perkataan 'susun atur' memberi kita banyak petunjuk. Ia bermaksud susunan elemen yang telah ditetapkan pada halaman.

Apabila reka letak berkesan, ia kelihatan baik dan ia membimbing penonton untuk memahami mesej yang cuba disampaikan oleh reka bentuk. Oleh itu, memahami reka letak adalah kunci dalam mencipta gubahan yang menarik, berkesan, mesra pengguna dan menggembirakan.

Jika reka letak tidak menyampaikan mesejnya dengan baik kepada penonton, atau dengan kata lain, ia tidak "membaca dengan baik ", reka bentuk akan menjadi tidak berkesan tidak kira betapa bergayanya ia kelihatan. Dalam bidang reka bentuk reka letak, kandungan menggantikan arah aliran dan gimik.

Tujuan Reka Bentuk Reka Letak

Untuk menyampaikan mesej dengan pantas

Ini penting. Reka bentuk reka letak mewujudkan hubungan antara aset grafik untuk mencapai aliran pergerakan mata yang lancar untuk keberkesanan dan impak maksimum.

Untuk mencipta keseimbangan

Menggunakan prinsip reka bentuk reka letak ialah cara yang paling mudah untuk mencipta rasa keseimbangan dan simetri dalam projek reka bentuk anda tanpa membosankan.

Untuk mencipta kesepaduan

Reka letak membantu anda menyusun banyak elemen reka bentuk anda dengan cara yang mudah dihadam, padat dan logik.

Untuk mencipta kecantikan

Keseimbangan dan struktur mencipta kecantikan secara semula jadi.Jika reka bentuk susun atur anda dilakukan dengan betul, ia akan menjadi menarik secara visual kepada penonton. Semakin sedikit usaha yang perlu dilakukan oleh penonton untuk memahami mesej, semakin menarik reka bentuk anda akan kelihatan.

Pereka oleh Frank Philippin untuk bukunya 'Saya Pernah Menjadi Pelajar Reka Bentuk: Kemudian - Sekarang.' Sumber: DesignBoom

Elemen Reka Bentuk Reka Letak

Teks

Ini termasuk bukan sahaja kandungan teks atau perenggan, tetapi juga tajuk, subtajuk, pengepala dan pengaki. Pilihan tipografi, warna dan saiz anda akan mencapai kesan yang berbeza tentang cara reka letak anda akan diterjemahkan kepada khalayak anda.

Imej

Jenis imej yang paling biasa ialah gambar, ilustrasi atau maklumat grafik.

Bentuk

Bentuk boleh menjadi geometri, yang sangat bersudut, atau ia boleh menjadi organik, meniru dunia semula jadi. Mereka juga boleh menjadi abstrak. Bentuk abstrak telah menjadi sangat bergaya pada tahun lalu, kerana kami telah melihat pereka web menggabungkannya ke dalam gubahan yang kompleks dan luas.

Bentuk boleh menggantikan imej. Atau ia boleh digunakan untuk menambah elemen grafik pada halaman, menyerlahkan teks atau menggambarkan ruang antara elemen visual lain.

Ruang putih

Sebarang reka bentuk reka letak akan mempunyai jumlah ruang putih tertentu yang akan membolehkan elemen anda bernafas dan menonjol dengan sendirinya.

Lihat juga: Adakah AI Benar-benar Pembunuh Seni dan Reka Bentuk?

Prinsip Emas Reka Bentuk Reka Letak

Anda akan perasan bahawa prinsipreka bentuk susun atur mengikut banyak prinsip asas reka bentuk. Seperti menggunakan warna dalam cara tertentu, tipografi, pengulangan, kontras, hierarki dan keseimbangan.

Prinsip #1. Gunakan Grids

Grids membantu pereka bentuk meletakkan pelbagai elemen reka bentuk seperti teks dan imej dalam cara yang kelihatan koheren dan mudah diikuti.

Grids memberikan rasa tertib, mereka mengekalkan elemen daripada mengatasi satu sama lain , dan yang paling penting, grid juga akan membetulkan penjajaran anda. Menjadikan kerja anda berasa lebih bersih dan lebih profesional.

Sumber: hgmlegal.com

Anatomi grid

Anda mungkin fikir ia hanya garis menegak dan mendatar, tetapi grid terdiri daripada beberapa bahagian. Ramai, sebenarnya. Berikut ialah istilah paling penting yang perlu anda ketahui dalam grid asas:

• Format ialah kawasan penuh reka bentuk akhir anda. Jadi, jika anda mereka bentuk sesuatu untuk dicetak, formatnya ialah halaman dan jika anda seorang pereka web, formatnya ialah halaman web atau tetingkap penyemak imbas.
• Margin ialah ruang kosong yang disengajakan antara format dan reka bentuk.
• Garis Aliran ialah garisan mendatar yang memisahkan reka letak anda kepada bahagian selari. Aliran membantu dengan kebolehbacaan reka bentuk anda dan membimbing pembaca untuk mengikuti kandungan dengan betul.
• Modul ialah bongkah yang dibentuk oleh garisan mendatar dan menegakgaris alir mana-mana grid. Jika anda memikirkannya, ia adalah blok bangunan mana-mana grid. Semua modul menegak anda mencipta lajur anda, manakala semua grid mendatar anda mencipta baris anda.
• Wilayah ialah kumpulan modul bersambung, sama ada menegak atau mendatar. Tiada peraturan tentang cara anda memutuskan untuk mengatur ini.

Sumber: Radversity

Jenis grid

Grid reka letak mula-mula digunakan untuk mengatur tulisan tangan di atas kertas.

Ia bermula seawal abad ke-13, apabila artis Perancis Villard De menggabungkan sistem grid dengan nisbah emas untuk menghasilkan reka letak halaman bercetak dengan jidar. Anda boleh melihat sistem grid ini sehingga hari ini, seperti yang dibuktikan oleh majoriti susun atur buku dan majalah bercetak. Penerbit, editor dan pereka bentuk lebih suka menggunakan grid standard bukan sahaja kerana ia kelihatan baik, tetapi kerana pembaca telah menjangkakan elemen reka bentuk tertentu berada di tempat tertentu.

Grid boleh direka bentuk dalam dua cara: simetri atau tidak simetri. Grid simetri mengikut garis tengah, di mana kawasan menegak dan mendatar adalah sama antara satu sama lain; dan lajur mempunyai lebar yang sama.

Dalam grid tidak simetri , seperti namanya, jidar dan lajur tidak semuanya sama.

Berdasarkan klasifikasi ini terdapat lima jenis grid reka letak utama yang digunakan di seluruh dunia yang boleh anda harapkan:

Manuskripgrid ialah jenis grid yang paling biasa untuk dokumen. Mereka memisahkan pengepala, pengaki dan margin, dan pada asasnya mencipta segi empat tepat dalam format (atau halaman) yang memberikan sempadan kepada teks anda. Mereka adalah pangkalan untuk majalah, akhbar dan buku. Jadi ini mungkin reka letak yang paling anda kenali.

Sumber: UXplanet

Sumber: Radversity

Grid lajur ialah satu lagi kegemaran dalam penerbitan majalah. Reka letak majalah biasa menggunakan grid lajur untuk memisahkan teks kepada bahagian yang mudah dibaca. Tetapi mereka sangat popular untuk laman web juga. Anda boleh menggunakan apa sahaja daripada dua hingga enam grid. Lebih banyak mungkin, tetapi tidak biasa. Perkara yang sangat penting tentang grid lajur ialah jarak antara lajur, atau longkang, adalah sama jarak antara satu sama lain.

Grid lajur simetri digunakan oleh surat khabar, contohnya, manakala grid lajur asimetri diutamakan dalam reka bentuk web .

Sumber: Planet UX

Sumber: Radversity

Grid modular adalah serupa dengan grid lajur, tetapi mereka juga mengambil kira garis alir mendatar. Grid jenis ini diperlukan apabila anda perlu menyusun pelbagai elemen dalam reka letak anda dan grid lajur tidak mencukupi.

Grid modular mempunyai modul saiz yang sama yang menjadikannya sangat mudah untuk menggambarkan zon spatial anda dengan cara yang berbeza.

Sumber: UXPlanet

Sumber: Radversity

Grid garis dasar adalah hebat untuk gubahan berasaskan teks. Garis dasar ialah baris tempat teks terletak apabila anda menaip, dan pendahuluan ialah jarak antara dua garis dasar. Tertanya-tanya betapa besarnya tajuk atau subtajuk anda?

Grid garis dasar ada di sini untuk membantu memberikan teks anda irama yang mengalir.

Sumber: Planet UX

Sumber: Fragaria

Grid hierarki kelihatan kurang seperti grid daripada semua grid rakan sejawat. Walau bagaimanapun, ia sangat berguna apabila mengatur elemen reka bentuk mengikut urutan kepentingannya. Grid hierarki boleh berdasarkan grid modular, atau anda juga boleh mencipta sendiri. Tapak web banyak menggunakan grid ini, terutamanya majalah digital dan akhbar cenderung lebih bergantung pada grid hierarki dan bukannya grid lajur dalam peralihannya kepada digital.

Sumber: UX Plane

Prinsip #2. Gunakan Ruang Negatif

Kita sering berfikir bahawa kekosongan, kesunyian atau kekurangan warna adalah perkara yang buruk. Tetapi kami tidak menganggapnya sebagai asas kukuh bagi kontras.

Juga dipanggil ruang putih, ruang negatif ialah kawasan dalam reka bentuk anda yang tidak mempunyai sebarang unsur sebenar. Ia adalah kawasan yang ditinggalkan kosong. Ia bukan sahaja mengelilingi aset anda, ia juga mewujudkan ikatan yang diperlukan antara mereka. Oleh sebab itu, ruang negatif ialah elemen reka bentuk yang sah dan mempunyai kesan besar terhadap keberkesanan reka letak andareka bentuk adalah.

Ruang negatif baik berbanding buruk

Ruang negatif akan membantu mengasingkan pelbagai kawasan dalam reka bentuk anda, sambil turut membenarkan reka letak anda bernafas. Ia membantu dengan hierarki visual dan keseimbangan visual; ia menetapkan tumpuan pengguna pada elemen teras; ia mengurangkan tahap gangguan; dan akhirnya, ia menambahkan gaya dan keanggunan pada reka bentuk anda.

Pereka yang tidak berpengalaman mungkin mempunyai kecenderungan untuk mengisi sebanyak mungkin kanvas mereka, dengan memperbesar teks atau meniup logo atau imej. Tetapi memberi ruang kepada elemen anda membolehkan penonton memilih isyarat maklumat tertentu dengan lebih pantas dan lebih selesa.

Jika semuanya menarik perhatian penonton anda, tiada apa yang didengari.

– Aaron Walter, 'Reka bentuk untuk emosi'

Cara mudah untuk menentukan ruang negatif anda adalah dengan menggunakan grid modular. Dengan meletakkannya di atas reka bentuk anda, anda boleh memvisualisasikan dengan mudah modul mana yang boleh kekal kosong dan yang perlu diisi.

Pereka oleh Brunswicker, Sumber: Codesignmag.com

Prinsip #3. Pilih Titik Tumpuan Tunggal

Adakah pelanggan pernah meminta anda untuk menjadikan logo lebih besar? Dan kemudian untuk menjadikan tajuk lebih besar?

Anda tidak boleh menekankan segala-galanya. Ia mengalahkan titik reka bentuk yang baik. Sama seperti masa, tumpuan adalah relatif. Untuk satu elemen menonjol, satu lagi perlu berfungsi sebagai latar belakang. Sesetengah elemen perlu menguasai yang lain agar reka bentuk anda dipaparkanhierarki visual.

Titik fokus dalam reka bentuk ialah satu elemen dengan berat visual yang paling besar. Elemen inilah yang menarik mata terlebih dahulu, lebih daripada segala-galanya dalam reka letak anda.

Titik fokus akan mengumumkan kepada khalayak anda di mana perjalanan tontonan mereka bermula pada reka bentuk anda. Jadi ini adalah permulaan cerita yang anda ceritakan.

Ini biasanya boleh dicapai dengan menggunakan imej yang besar atau sumber tipografi yang besar. Perhatikan betapa berkesannya titik fokus di bawah

Direka oleh Braulio Amado untuk Bloomberg Businessweek, Sumber: Memang bagus

Tetapi sementara titik fokus akan menarik perhatian khalayak anda, peraturan seterusnya akan membantu membimbingnya.

Prinsip #4. Fikirkan Kedekatan dan Aliran

Prinsip kedekatan adalah mudah. Pastikan elemen yang berkaitan antara satu sama lain diletakkan bersama.

Jarak yang dekat menunjukkan bahawa aset visual disambungkan dan menjadi satu unit visual yang membantu mengatur reka letak anda.

Jadi hanya aset reka bentuk kelompok yang mempunyai hubungan antara satu sama lain dan gunakan poket maklumat pada reka bentuk anda untuk membimbing khalayak anda ke bahagian kandungan berkaitan yang perlu mereka gunakan. Ini juga dipanggil prinsip aliran.

Sumber: Satori Graphics

Reka bentuk dengan aliran yang baik akan membawa mata penonton ke seluruh reka letak, dari elemen ke elemen, dengan mudah. Titik fokus anda akan menarik mata dan menjadi