Daripada pengarang: hari ini kita akan bercakap tentang komposisi dalam reka bentuk web, yang jurugambar, artis dan pereka web suka bercakap. Bagi pendatang baru dalam bidang ini, nampaknya ini adalah sejenis pengetahuan rahsia yang hanya boleh diakses oleh beberapa orang terpilih. Tetapi hari ini anda bernasib baik: Saya akan membantu anda memahami isu ini, sehingga anda boleh mempengaruhi bukan sahaja mood pelawat tapak, tetapi juga keputusan pembelian mereka. Di sini kita pergi?

Sudah tentu, anda sering perlu melawat tapak yang, pada pandangan pertama, kelihatan seperti tiada apa-apa - gambarnya cantik, dan teksnya koheren, namun, mereka tidak mempunyai logik, kelengkapan atau sesuatu. Dan semua kerana pemilik tapak sedemikian, kemungkinan besar, tidak peduli dengan mematuhi undang-undang komposisi - seni mengatur elemen tapak, menggabungkan dan mengaturnya di tempat mereka.

Oh otak ini...

Otak kita mempunyai keupayaan untuk melihat maklumat dengan serta-merta dan mencipta sambungan visual. Saya akan menerangkan dengan contoh. Di bawah anda melihat dua bulatan.

Anda segera mencari cara untuk membezakan mereka, bukan? Tetapi inilah tugas yang lebih sukar untuk anda.

Walaupun terdapat pelbagai objek, anda pasti boleh menerangkan mana-mana daripada mereka.
Apakah kaitan reka bentuk web, keseimbangan dan asas gubahan dengannya? - anda bertanya. Masalahnya ialah otak kita mempunyai keupayaan unik untuk mengklasifikasikan maklumat dengan serta-merta. Ia boleh mengumpulkan objek yang serupa secara visual ke dalam kumpulan. Menggunakan alat visual yang mudah, anda boleh menyampaikan sejumlah besar maklumat kepada pengguna dan mengawal perhatian mereka.

Komposisi ialah gabungan elemen tapak web tertentu

Keharmonian dalam hubungan antara bahagian-bahagian keseluruhan, keindahan dan logik pembinaan adalah wujud bukan sahaja dalam ciptaan manusia. Tanda-tanda komposisi boleh didapati dalam struktur alam semesta, organisma haiwan dan tumbuhan, dan bentuk semula jadi. Oleh itu, istilah "komposisi" sama-sama boleh digunakan pada struktur tapak web, perihalan bunga dan ciri-ciri ucapan pidato.
Paling mudah untuk bercakap tentang komposisi dalam reka bentuk web apabila ia tidak ada. Setiap daripada kita secara intuitif merasakan kehadiran/ketiadaannya: sama ada unsur-unsur berada dalam interaksi yang harmoni, sama ada ia tertakluk kepada idea utama tapak, lukisan, gambar.

Untuk menjadikan reka bentuk tapak web anda kelihatan semula jadi dan harmoni, tanpa berpecah kepada komponen yang berasingan, ikut prinsip reka bentuk asas, yang saya terangkan dalam artikel ini.

Memilih warna yang betul

Pilihan warna menentukan cara orang melihat tapak anda, dan pada masa yang sama, produk anda. Warna yang diredam kelihatan santai dan tenang kepada kami, manakala warna terang dan kontras kelihatan ceria dan bertenaga.

Fikirkan tentang emosi yang ingin anda bangkitkan dalam pelawat ke tapak anda, dan kemudian pilih skema warna yang sesuai. Contoh yang baik ialah reka bentuk segar laman web Orangina, yang menekankan imej jenama:

Gunakan aksen warna untuk menarik perhatian. Sebagai contoh, anda boleh mereka bentuk butang yang paling penting - "Beli" dan "Hubungi kami" - dalam warna yang berbeza. Saya akan memperkenalkan anda kepada beberapa prinsip yang paling penting untuk memilih dan menggabungkan warna.

1. Warna tambahan. Semua bertentangan pada roda warna mencipta kontras yang kuat, jadi ia boleh digunakan, tetapi hanya dengan berhati-hati.

2. Warna analog. "Jiran" sedemikian pada roda warna tidak mempunyai kontras yang kuat.

3. Triad. Gabungan hampir menang-menang ialah segi tiga sama kaki.

Trend dan pendekatan moden dalam pembangunan web

Ketahui algoritma untuk pertumbuhan pesat dari awal dalam pembinaan tapak web

4. Tetrad. Dua pasang warna pelengkap harus digunakan dengan berhati-hati agar tidak menimbulkan huru-hara dalam keadaan hangat dan sejuk.

Peraturan ketiga - apa yang perlu diletakkan di mana?

Peraturan pertiga merujuk kepada asas komposisi dalam reka bentuk web. Ia timbul akibat tafsiran peraturan nisbah emas (mungkin anda masih ingat, Leonardo da Vinci juga menggunakannya dalam lukisannya).

Pada mulanya saya ingin menunjukkan kepada anda lukisan "The Vitruvian Man" sebagai contoh, tetapi disebabkan pakaiannya yang terlalu mendedahkan, atau lebih tepatnya kekurangannya, saya memutuskan bahawa saya tidak akan melakukannya. Tiba-tiba, di sini kanak-kanak sedang membaca artikel. Jadi, kagumi Madonna:

Lukiskan secara mental dua garisan menegak dan dua garis mendatar pada halaman, membahagikan kawasan itu kepada sembilan bahagian yang sama. Adalah dipercayai bahawa kebanyakan orang menumpukan pandangan mereka dengan tepat pada titik persilangan garisan ini. Ingat peraturan pertiga setiap kali anda memikirkan tempat untuk diletakkan, contohnya, butang seruan tindak.

Sebenarnya agak lucu bahawa peraturan matematik sedemikian digunakan pada sesuatu yang subjektif seperti reka bentuk web. Ini adalah sejenis kompromi estetik yang mewujudkan rasa keseimbangan pada skrin, tanpa membebankannya, tetapi tanpa menjadikannya terlalu statik.

Membersihkan ruang

Sememangnya semasa kecil, ibu bapa anda meminta anda untuk membersihkan bilik anda, kerana (saya petik) "tidak ada ruang kosong." Eh, kata-kata emas... Ruang kosong, atau, seperti kata pereka, "udara" adalah asas komposisi reka bentuk web. Kadang-kadang ia lebih penting daripada kandungan. Oleh itu, jika terdapat sedikit ruang kosong, lakukan pembersihan musim bunga dan tahan godaan untuk menambah sebanyak mungkin teks, ikon, gambar, dll.

Tapak ini tidak boleh dibebankan, jika tidak, mata orang akan kabur dan mereka tidak akan dapat "menangkap" idea yang anda cuba sampaikan kepada mereka. Hadkan teks dengan ketat kepada intipati, beberapa gambar dan menu berstruktur dengan jelas.

Kawal pandangan pengguna

Terdapat banyak penyelidikan tentang cara orang melihat tapak web untuk membantu anda memahami cara mengarahkan mata pelawat kepada elemen yang paling penting. Kajian ini mendedahkan bahawa orang mengimbas skrin dalam corak yang menyerupai sama ada huruf Z atau huruf F, iaitu dari atas ke bawah dan dari kiri ke kanan.

Dengan pengetahuan ini, anda boleh memanfaatkan hierarki visual dengan berkesan dengan mereka bentuk halaman dengan cara yang akan membawa anda keuntungan dan impak maksimum.

Letakkan gambar, kombinasi warna, fon, garisan mendatar, pepenjuru dan menegak mengikut piawaian visual, dan pengguna anda akan gembira mengikuti laluan yang telah anda lalui, melihat perkara yang paling perlu dahulu, dan kemudian yang tidak penting.

Adakah anda ingin menghalang pelawat daripada melalui butang tertentu? Serlahkannya dengan warna yang kontras dan letakkannya di mana mata segera pergi. Adakah anda ingin menunjukkan betapa hebatnya produk anda? Pilihnya daripada latar belakang umum dan letakkannya mengikut peraturan F-Z atau peraturan pertiga yang dibincangkan di atas.

Oleh itu, teori komposisi dalam reka bentuk laman web bukanlah pengetahuan rahsia yang boleh diakses oleh segelintir sahaja, dan semua orang boleh mencipta laman web yang cantik dan berfungsi sendiri, tanpa beralih kepada pakar yang mahal. Terdapat banyak kursus video di Internet tentang mencipta laman web dari awal. Pergi untuk itu, dan anda akan berjaya!

Di sinilah saya akan menamatkan pelajaran yang menarik ini, saya harap. Langgan kemas kini blog kami, dan jumpa anda dalam artikel seterusnya!

Trend dan pendekatan moden dalam pembangunan web

Ketahui algoritma untuk pertumbuhan pesat dari awal dalam pembinaan tapak web

Hai semua! Sekarang kita akan melihat topik yang sama penting dalam reka bentuk web, yang sukar untuk ramai, dan sememangnya bukan untuk semua orang. Tema ini dipanggil komposisi dalam reka bentuk laman web anda. Malah, ia jauh lebih rumit daripada yang kelihatan pada pandangan pertama. Anda boleh menguasai ini jika anda banyak berlatih dan menonton atau menganalisis hasil kerja pereka web terbaik. Walau bagaimanapun, sebelum anda pergi berlatih, anda perlu mendapatkan bukti, pengetahuan yang betul. Inilah yang akan kita lakukan sekarang.

Sebelum kita mula mengkaji prinsip asas gubahan, kita juga mesti tahu bahawa setiap elemen tapak tidak sepatutnya berdiri sendiri. Ia mesti berinteraksi dengan unsur-unsur di sekelilingnya dan sesuai secara harmoni ke dalam gambaran keseluruhan. Ini mungkin peraturan asas yang perlu anda ingat dan sentiasa dipandu. Nah, sekarang mari kita beralih kepada prinsip pertama komposisi harmoni dalam reka bentuk.

Seimbang

Komposisi reka bentuk anda boleh seimbang. Imbangan adalah seperti keseimbangan antara unsur-unsur tapak dalam komposisi. Komposisi ini tidak memberikan perasaan bahawa sebahagian daripadanya menguasai semua yang lain. mungkin dengan meletakkan, mewarna dan menetapkan saiz yang betul bagi pelbagai objek.

Imbangan boleh simetri, iaitu objek ( dua bulatan kelabu) dalam kes ini terletak pada jarak yang sama berbanding dengan beberapa objek ketiga ( bulatan hitam). Hanya meletakkan, imbangan simetri adalah sinonim untuk " sama". Dalam kes kami, dua bulatan kelabu terletak pada jarak yang sama berbanding dengan bulatan hitam besar (gambar di bawah).

Imbangan juga boleh menjadi tidak simetri. Asimetri- ini adalah bertentangan sepenuhnya dengan simetri. Ini bermakna bahawa objek tidak terletak pada jarak yang sama berhubung dengan beberapa objek ketiga. Imbangan juga boleh menjadi jejari. Dalam kes ini, objek terletak dalam bulatan dan menyimpang dari satu titik.

Berbeza

Kontras merujuk kepada elemen reka bentuk web tertentu yang menekankan satu sama lain apabila diletakkan bersebelahan antara satu sama lain. Sebagai contoh, ia boleh menjadi putih dan hitam, besar dan kecil, tebal dan nipis. Dalam gambar, kita nampak hitam di hujung kiri dan putih di hujung kanan.

Jika mereka berdiri bersebelahan, kontras akan ketara. Akibatnya, akan ada perhatian terbesar. Juga, jika anda mengambil sesuatu yang besar dan tebal ( bentuk segi empat sama di sudut kiri bawah), dan ambil yang kecil dan nipis ( bentuk jalur di hujung kanan), dan letakkannya bersebelahan - terdapat juga kontras.

Kepentingan dan subordinasi

Ini bermakna dalam mana-mana reka bentuk laman web terdapat kawasan tertentu di mana perhatian pengunjung tertumpu. Ini adalah tempat yang pandangan seseorang segera jatuh sebaik sahaja dia memasuki tapak. Semua objek di tapak mesti mempunyai hierarki kepentingan dan subordinasi.

Dalam erti kata lain, objek yang lebih penting cenderung bersaiz lebih besar dan warna dan kontras yang lebih cerah. Secara umum, mereka menarik perhatian yang paling.

Ini dilakukan dengan sangat mudah dengan menukar saiz, bentuk, warna, tekstur, penonjolan bayang-bayang dan elemen lain yang boleh menyerlahkan objek dan menarik perhatian.

Arah perhatian

Pada asasnya, dalam reka bentuk web anda perlu membuat laluan, seolah-olah, di mana seseorang harus berjalan ke tempat yang anda perlu pergi. Sebagai contoh, anda memerlukan seseorang untuk memesan seterika di tapak web:

• Pertama anda perlu mendapatkan perhatiannya. Anda membuat tajuk yang besar dan terang.
• Seterusnya, dalam subtajuk, bawa orang itu ke topik.
• Dalam teks, menggunakan foto dan perihalan faedah, membawanya untuk membuat pembelian.
• Pada akhirnya, anda sudah menunjukkan harga kepada orang itu dan menjemputnya untuk mengklik pada “ Pesan produk«.

Keseluruhan proses harus berjalan seperti yang diterangkan di atas. Ia tidak sepatutnya berlaku bahawa seseorang datang ke tapak web anda dan mula-mula dibentangkan dengan " Pesanan"atau harga itu sendiri, dan kemudian tajuk utama. Seseorang mungkin melihat harga yang tinggi dan, tanpa mengetahui semua faedah yang anda tawarkan kepada mereka, mungkin akan pergi.

Ini tidak boleh dibenarkan.

Anda mesti mengawal perhatian pelawat. Semua ini dilakukan seperti dalam contoh sebelumnya ( mengikut saiz, bentuk, tekstur dan sebagainya).

Perkadaran

Perkadaran ialah nisbah saiz angka yang berkaitan antara satu sama lain. Iaitu, dua angka boleh sama sekali dalam rupa ( contohnya seperti dalam gambar, bahagian bawah hitam dan atas putih), tetapi hanya satu akan lebih besar dan satu lagi lebih kecil.

Semua sisi, sudut, diameter dan ciri-ciri lain hanya bertambah atau berkurang dengan nombor tertentu.

Skala

Skala ialah saiz sebenar sesuatu objek apabila dilihat berhubung dengan sesuatu ( contohnya, berhubung dengan objek lain, orang, tanah, dan sebagainya).

Dengan cara ini, dalam mana-mana editor grafik ( sebagai contoh, dalam), apabila anda perlu menambah atau mengurangkan saiz menggunakan kaca pembesar, anda akan ditunjukkan skala imej dalam %. Saya harap ia telah menjadi lebih jelas kepada anda apakah skala.

Pengulangan dan irama

Selalunya kita perlu menarik perhatian pengguna, tetapi satu objek tidak akan mencukupi untuk ini. Adalah perlu untuk mengulangi objek ini atau, lebih mudah, menduplikasinya. Ini juga boleh digunakan untuk mengekalkan perhatian pengunjung.

Kawan-kawan, salam sejahtera! Irina sedang berhubung. Setiap daripada kita mempunyai beberapa halaman di rangkaian sosial, dan ada yang mempunyai laman web mereka sendiri. Ramai di antara kita telah belajar membuat reka letak untuk kad perniagaan ringkas, risalah, risalah, logo, sepanduk, dan ada yang telah menguasai program untuk membuat pembentangan. Untuk menjadikan semua ini menyenangkan mata, boleh dibaca dan ditonton, hari ini kita akan memikirkan peraturan reka bentuk yang mudah: asas komposisi.

Komposisi ialah...

Bagi mereka yang pertama kali mendengar frasa ini, saya akan menerangkan: gubahan ialah subjek (atau sains) susunan yang betul bagi elemen berbeza dalam satu ruang (pada satu halaman buku kecil, pada satu sisi kad perniagaan, pada satu slaid pembentangan, pada satu sepanduk, pada satu halaman laman web, dsb.). Dan, walau apa pun ruang ini (menegak atau mendatar, kecil atau besar), peraturan gubahan akan sama. Jadi…

Peraturan asas komposisi

1. Peraturan keseimbangan unsur

Elemen dalam satu ruang mesti disusun sedemikian rupa sehingga secara visual semuanya kelihatan seimbang, seimbang, harmoni. Terdapat keseimbangan simetri dan tidak simetri. Dalam keseimbangan simetri:

Dalam keseimbangan asimetri:

1. Peraturan Kontras Elemen

Elemen dalam ruang yang sama boleh bertentangan sepenuhnya dalam warna, saiz, bentuk, tekstur. Mereka mesti diletakkan mengikut peraturan kontras.

1. Peraturan kepentingan unsur

Elemen dalam ruang yang sama mesti diletakkan mengikut peraturan kepentingan: elemen yang lebih penting mesti diserlahkan mengikut warna, saiz, bentuk, tekstur. Elemen kecil yang lebih ketara diletakkan di latar depan di atas semua yang lain.

1. Peraturan Perpaduan

Elemen dalam satu ruang boleh disusun sedemikian rupa sehingga ia membentuk sesuatu yang holistik dan bersatu.

1. Peraturan pergerakan

Elemen dalam ruang yang sama boleh disusun sedemikian rupa sehingga mereka mewujudkan deria pergerakan. Ini boleh dicapai dengan susunan elemen dan dengan pelbagai ciri tambahan: garis, anak panah, penomboran.

1. Peraturan ruang

Elemen dalam ruang yang sama boleh disusun sedemikian rupa sehingga mereka mewujudkan perasaan ruang. Kadangkala adalah berguna untuk mendekatkan elemen kepada penonton (contohnya, mengambil tangkapan makro), tetapi kadangkala elemen yang sama boleh didekatkan kepada penonton sepenuhnya dengan cara yang bertentangan - dengan mengalihkannya, mewujudkan ruang di sekelilingnya.

1. Peraturan keterbukaan

Elemen dalam ruang yang sama harus disusun sedemikian rupa sehingga menimbulkan perasaan keterbukaan. Bandingkan:

Kesimpulan

Kawan-kawan! Menggunakan helah rahsia mudah ini, reka bentuk anda akan bertambah baik dengan ketara! Ia akan menjadi hidup, menjadi menarik secara visual, seolah-olah magnet yang tidak kelihatan akan bekerja di dalamnya. Sudah tentu, ini bukan semua ciri rahsia. Jika topik ini ternyata berguna dan relevan untuk anda, jika anda ingin meneruskannya, tulis mengenainya dalam ulasan.

Jadi jelas bahawa komposisi sangat penting. Tetapi apakah itu komposisi? Secara kasarnya, ini ialah ruang di mana elemen individu mesti diubah menjadi satu keseluruhan, dan di mana imej, teks, grafik dan warna dibentuk menjadi satu reka bentuk yang semuanya sesuai bersama.

Komposisi yang berjaya bermakna anda telah menyusun elemen dan mengedarkannya dengan betul, dan ini bukan sahaja kelihatan cantik dalam penampilan, tetapi juga berkesan dari sudut pandangan fungsi. Oleh itu, mari kita pelajari petua, helah dan teknik penting yang akan menjadikan anda seorang guru gubahan dalam masa yang singkat.

1. Fokus pada perkara utama

Seperti yang kita pernah diberitahu di sekolah, pengedaran loghat adalah sangat penting. Elemen utama bagi mana-mana komposisi yang baik adalah fokus, kerana ia membantu penonton menumpukan perhatian pada butiran yang paling penting dalam reka bentuk terlebih dahulu.

Beberapa teknik menarik perhatian termasuk skala, kontras dan papan tanda, yang akan kita bincangkan dengan lebih terperinci kemudian. Sekarang mari analisa contoh yang diberikan.

2. Arahkan mata pembaca dengan papan tanda

Sama seperti anda akan menunjuk seseorang kepada sesuatu yang anda ingin mereka lihat, halakan mata penonton dengan peletakan garis tertentu dan bentuk yang berbeza. Dengan cara ini anda boleh mencapai persepsi yang betul terhadap reka bentuk anda.

Kemungkinan besar, anda sudah biasa dengan salah satu jenis tanda yang paling biasa - yang skematik. Diagram menggunakan garisan untuk mengarahkan mata dari satu titik ke titik lain dalam susunan yang agak jelas. Lihat kad tarikh ini daripada Paper and Parcel. Pereka bentuk memutuskan untuk menggunakan tanda rajah untuk menyampaikan maklumat dengan cara yang interaktif dan luar biasa.

Di samping itu, mereka boleh menunjukkan beberapa elemen penghubung teks atau cebisan kecil maklumat. Seperti yang telah dinyatakan, anda harus fokus pada subjek utama terlebih dahulu; tetapi di manakah anda akan menjaga? Dengan meletakkan papan tanda dengan betul, anda bukan sahaja dapat mengawal perhatian kepada elemen utama, tetapi juga membimbing mata penonton anda sepanjang reka bentuk.

Mari kita lihat poster ini daripada Design By Day, sebagai contoh, yang menggunakan garis arah yang jelas untuk mula-mula mengarahkan anda ke elemen utama (tajuk) dan kemudian ke segmen teks yang berbeza.

Sudah tentu, tidak masuk akal untuk menggunakan penunjuk yang jelas dalam setiap reka bentuk, tetapi itu tidak bermakna tiada pilihan lain. Cari beberapa bentuk dan garisan dalam imej dan elemen grafik yang digunakan dan gunakannya untuk memberi arah kepada pandangan penonton.

Ini dapat dilihat dalam poster 1 Trick Pony, di mana tangan kanan lelaki itu digunakan untuk "mengarahkan" pandangannya dari imej ke logo, dan kemudian ke bahagian bawah imej. Dengan cara ini, bentuk imej boleh berfungsi sebagai papan tanda.

3. Skala dan hierarki

Skala dan hierarki visual ialah salah satu asas kreatif yang boleh merosakkan reka bentuk anda atau menjadikannya kelihatan seperti gula-gula mata. Oleh itu, adalah sangat penting untuk dapat menggunakannya dengan betul untuk mencipta komposisi yang berjaya.

Secara ringkasnya, hierarki ialah penstrukturan elemen mengikut urutan kepentingan. Jadi, anda boleh menjadikan objek yang lebih penting dalam reka bentuk anda lebih besar dan lebih terang, dan elemen sekunder lebih kecil dan lebih pucat.

Ia amat penting untuk mempertimbangkan hierarki semasa menulis teks. Untuk mendapatkan maklumat lanjut tentang topik hierarki dalam tipografi, anda boleh merujuk artikel "Mengapa Setiap Reka Bentuk Memerlukan Tiga Tahap Hierarki Tipografi."

Skala sering digunakan untuk menggabungkan unsur hierarki. Skala besar menarik perhatian kepada objek tertentu, menekankan kepentingannya untuk komunikasi yang betul.

Sebagai contoh, reka bentuk poster oleh Jessica Svendsen ini menggunakan imej yang diperbesarkan sebagai elemen terbesar untuk menarik perhatian maksimum kepada subjek. Tajuk ialah elemen teks terbesar, menjadi maklumat terpenting dalam konteks tertentu, manakala teks yang lain ditulis pada skala yang lebih kecil. Dengan cara ini, skala mengenal pasti objek reka bentuk utama dan mengekalkan hierarki tipografi.

Skala juga merupakan alat yang sangat berguna apabila ia datang untuk mencipta perkadaran dan rasa saiz. Anda boleh membuat beberapa perkara kelihatan sangat terperinci, rumit dan kecil, atau anda boleh menjadikannya kelihatan besar dan juga besar.

Dengan mencipta kontras antara elemen kecil dan besar dalam komposisi, anda boleh mencapai pelbagai jenis kesan.

4. Mengekalkan keseimbangan antara elemen

Keseimbangan adalah perkara yang cukup penting dalam banyak cara. Dan, sudah tentu, reka bentuk anda tidak terkecuali.

Tetapi bagaimana anda boleh mengekalkan keseimbangan ini dalam reka bentuk anda sendiri? Mari kita bincangkan dengan cepat dua jenis keseimbangan utama dan cara mencapainya.

Pertama, terdapat keseimbangan simetri. Intipatinya jelas - keseimbangan reka bentuk dicapai melalui simetri. Dengan mencerminkan elemen tertentu pada kedua-dua belah (kanan-kiri, atas-bawah), anda mencapai keseimbangan mutlak.

Berikut ialah contoh imbangan simetri. Dalam jemputan perkahwinannya, Jennifer Wick menggunakan gubahan simetri di mana teks dan grafik dicerminkan. Simetri menjadikan jemputan kelihatan elegan, kemas dan seimbang.

Jennifer Wick

Jenis kedua, yang mungkin lebih biasa, ialah keseimbangan asimetri. Namanya juga bercakap untuk dirinya sendiri - keseimbangan dicapai melalui susunan unsur yang tidak simetri.

Berikut ialah contoh kejayaan penggunaan imbangan asimetri. Dalam posternya, Munchy Potato sengaja mengedarkan bulatan dengan saiz yang berbeza merentasi kawasan ruang yang berbeza, sekali gus mencapai asimetri.

Dalam contoh di atas, tiga bulatan tengah ialah elemen terbesar reka bentuk, tetapi ia tetap seimbang melalui muka taip, grafik dan penggunaan bulatan bertekstur kecil di sudut bawah poster.

Untuk membangunkan kemahiran dalam mencipta keseimbangan asimetri, anda perlu memikirkan setiap elemen sebagai unit yang mempunyai "berat" sendiri. Objek yang lebih kecil, sewajarnya, harus "berat" kurang, dan elemen yang kaya dengan tekstur harus "berat" lebih daripada yang homogen. Walau apa pun matlamat reka bentuk anda, anda mesti sentiasa mencapai keseimbangan antara objek yang anda gunakan.

5. Gunakan elemen yang saling melengkapi

Anda mesti pernah mendengar tentang warna pelengkap, tetapi pernahkah anda mendengar tentang elemen reka bentuk pelengkap? Salah satu elemen utama komposisi yang berjaya dan berkesan ialah pemilihan yang teliti dan bertujuan bagi setiap objek reka bentuk, di mana segala-galanya harus bertukar menjadi satu keseluruhan.

Kesilapan biasa semasa membuat gubahan ialah menggunakan imej yang tidak saling melengkapi. Oleh itu, apabila anda membuat keputusan untuk menggunakan berbilang imej, sentiasa semak sama ada ia mempunyai kesan yang betul pada penonton dan sama ada terdapat hubungan yang diperlukan antara imej tersebut. Berikut ialah beberapa cara untuk mencapai kesan ini.

Gunakan foto dari penggambaran foto yang sama. Ini adalah cara yang sangat mudah untuk memastikan bahawa imej adalah padu, memandangkan imej itu berada dalam gaya yang sama dan dari arah yang sama. Sebagai contoh, pereka Jekyll & Hyde dan Elena Bonanomi menggunakan teknik ini dalam salah satu penyebaran majalah Must.

Imej mestilah dalam skema warna yang sama. Pada masa kini, terdapat pelbagai jenis penapis dan alat penyuntingan foto yang berbeza yang akan membantu anda menjadikan imej yang dipilih tergolong dalam skema warna yang sama, dan oleh itu saling berkaitan. A is a Name membuat posternya menjadi hitam putih sepenuhnya untuk mencipta sambungan warna antara objek.

A ialah Nama

Pilih foto yang serupa. Cuba gabungkan imej dengan parameter dan gaya yang serupa. Sebagai contoh, jika salah satu gambar diambil dalam gaya minimalis, anda perlu menggunakan gambar yang serupa. Di bawah ialah penyelesaian reka bentuk Feint, di mana dalam semua imej yang dipilih anda boleh melihat "penyelewengan" tertentu - pelbagai tekstur, motif kayu dan warna sejuk.

Mencipta reka letak yang baik juga melibatkan gabungan teks dan grafik yang betul, di mana unsur-unsur ini saling melengkapi. Setiap fon dalam persekitaran yang berbeza mempunyai konotasi dan perkaitan tertentu - contohnya, fon tajam dan kursif dengan banyak pusaran boleh dikaitkan dengan keanggunan dan kecanggihan. Oleh itu, cuba pilih fon bergantung pada matlamat dan niat anda sendiri.

6. Tambah (atau kurangkan) kontras

Kontras ialah alat yang sangat berguna, untuk menyerlahkan elemen reka bentuk anda dan untuk menyembunyikannya. Dengan meningkatkan kontras, atau menggunakan palet kontras tinggi, anda boleh menarik perhatian kepada subjek tertentu. Pada masa yang sama, dengan mengurangkan kontras, anda boleh mencapai kesan telus untuk beberapa elemen, menjadikannya kurang ketara.

Walaupun reka bentuk sebelumnya menggunakan warna resonans untuk menarik perhatian, dalam contoh berikut ia berfungsi untuk menyembunyikan elemen tertentu.

Beberapa gaya fon, grafik dan kelinearan diulang di sini untuk membantu menggabungkan elemen bersama-sama dan mencapai kesan yang diingini. Jika pengarang reka bentuk tiba-tiba memutuskan untuk menggunakan beberapa elemen lukisan merah jambu dengan garis tebal di suatu tempat di tengah-tengah, tidak akan ada persoalan tentang sebarang koheren. Tetapi dia memutuskan untuk menggunakan saiz teks yang kecil, meminimumkan skema warna, dan mengekalkan elemen grafik dengan elegan, supaya reka bentuknya menjadi baik.

Apabila membangunkan reka bentuk, tulis semua maklumat tentang fon, garisan, warna, dsb. yang digunakan dan cuba gunakan semula untuk menyatukan reka letak anda menjadi satu keseluruhan yang padu.

8. Jangan lupa tentang ruang putih

Untuk menyinggung ruang putih, sudah cukup untuk memanggilnya "ruang kosong." Kekosongan mengandaikan bahawa ia perlu diisi dengan sesuatu, dan oleh itu ia tidak "menjalankan tugasnya" dengan betul. Tetapi ia bukan perkara yang sama.

Apabila ruang putih digunakan secara sengaja, ia membantu meningkatkan definisi dan kejelasan reka bentuk anda: apabila bahagian komposisi yang lebih sibuk dan rumit diimbangi oleh ruang putih, reka bentuk anda mula bernafas.

Sebagai contoh, lihat reka bentuk yang dilakukan oleh Cocorrina. Ruang putih membantu mencapai keseimbangan antara imej, tekstur dan teks, yang memberikan reka bentuk rupa yang canggih dan bersih.

Jadi apakah cara terbaik untuk menggunakan ruang putih?

Kurangkan skala elemen grafik. Ini membolehkan anda mencipta lebih banyak ruang putih di sekeliling hiasan tengah anda tanpa melampaui batas dengan reka bentuk asal anda. Untuk kejelasan, lihat reka bentuk kad resipi dari Serafini Creative ini, di mana elemen utama sengaja dikecilkan untuk mencipta bingkai ruang putih yang cantik.

Jangan cuba mengisi semua ruang kosong. Seperti yang dikatakan, ruang putih bukanlah ruang kosong, ia mempunyai tujuan, jadi jangan cuba mengisi setiap bahagiannya.

Contohnya ialah reka bentuk tapak web daripada Tema Web Kreatif, yang menggunakan satu imej, tajuk tebal, dua baris teks kecil dan pautan ke maklumat lanjut untuk mempersembahkan produk. Dengan pelan yang begitu mudah dan banyak ruang putih, setiap elemen mempunyai wilayah sendiri dan dibenarkan untuk bernafas, membolehkan reka bentuk kelihatan kemas dan mempunyai kesan yang diingini kepada penonton.

Apabila mencipta reka bentuk, sentiasa tanya diri anda sama ada semua elemen adalah 100% perlu. Adakah semua teks itu perlu, adakah tajuk biru terang perlu, adakah semua 3 imej perlu? Dengan mengalih keluar bit tambahan daripada reka letak anda, anda boleh mencipta reka bentuk yang lebih tepat yang mendapat manfaat daripada ruang putih.

9. Susun elemen reka bentuk

Apabila mencipta gubahan yang merangkumi banyak objek, anda tidak seharusnya meletakkannya secara huru-hara di halaman, kerana menyusun elemen ialah cara yang cepat dan mudah untuk mengubah reka bentuk anda menjadi gula mata.

Tidak boleh menyusun objek? Canva akan membantu anda menyingkirkan masalah ini hanya dalam satu saat menggunakan alat automatik dan sangat mudah khas. Hanya seret elemen merentasi halaman dan Canva akan menyelaraskannya dengan objek reka bentuk lain dan meletakkannya secara automatik di tempat yang betul. Sihir!

Lihat reka bentuk yang dibarisi sempurna ini daripada majalah yang dicipta oleh Huck. Terima kasih kepada pembinaan elemen yang jelas, reka bentuk kelihatan berbeza dan tepat, ia sangat mudah dibaca dan menyenangkan dari segi estetika.

Penjajaran elemen yang konsisten dan jelas juga akan membantu anda membuat susunan tertentu antara banyak objek. Jadi, jika anda menggunakan banyak imej, teks dan/atau elemen grafik, penjajaran hendaklah menjadi kawan baik anda.

Keupayaan untuk menggunakan penjajaran amat penting apabila bekerja dengan teks. Terdapat banyak cara untuk melakukan ini, tetapi salah satu yang terbaik ialah penjajaran kiri, kerana bagi kebanyakan penonton pilihan ini adalah yang paling mudah untuk membaca dan memahami.

10. Bahagikan reka bentuk kepada tiga

Peraturan Ketiga ialah kaedah mudah yang boleh digunakan oleh pereka bentuk untuk membahagikan reka letak kepada 9 bahagian yang sama. Di mana garis menegak dan mendatar bersilang adalah titik fokus.

Pereka William Beachy memutuskan untuk bermain dengan peraturan ini dalam karyanya (contoh di bawah). Reka bentuknya kelihatan mengagumkan dan menarik perhatian kerana pada setiap persimpangan terdapat titik fokus tertentu. Beachy juga menyatakan bahawa "Apabila anda meletakkan objek bukan di tengah reka bentuk, tetapi di pinggirnya, gambar menjadi bersemangat dan menarik."

Menggunakan peraturan pertiga akan membantu meningkatkan komposisi reka bentuk anda, kerana ia adalah salah satu cara terpantas dan paling mudah untuk meletakkan dan menstruktur elemen.

Jika anda ingin menggunakan peraturan pertiga dalam reka bentuk anda, anda dinasihatkan untuk memulakan dengan grid. Grid akan membolehkan anda menyusun elemen dengan lebih konsisten dan melihat di mana titik fokus harus ditempatkan pada reka letak. Anda boleh menonton tutorial yang mengajar anda cara menggunakan alat penanda Canva untuk membantu menstruktur dan mengatur reka bentuk anda.

Jika, selepas bekerja pada reka bentuk selama berjam-jam, anda akhirnya mendapati ia berkesan, cuba pecahkannya secara mental kepada beberapa bahagian dan lihat struktur asasnya. Adakah terdapat pembahagian kepada pertiga? Atau adakah ia dibina di atas markup yang berbeza? Sama ada cara, anda boleh melihat pelbagai contoh markup dan mendapatkan inspirasi daripadanya.

Alamat kepada pembaca

Apabila membuat komposisi, anda harus memberi perhatian kepada banyak perkara. Jika anda seorang pereka bentuk baharu, anda berkemungkinan besar perlu meletakkan banyak usaha dan masa untuk cuba menyusun dan mengubah saiz objek, kemudian melabelkannya semula, dsb., tetapi tidak mengapa.

Adakah anda mempunyai sebarang helah untuk bekerja dengan komposisi? Atau mungkin anda tahu beberapa contoh reka bentuk dengan komposisi yang sangat berkesan? Sama ada cara, jangan ragu untuk berkongsi pendapat dan idea anda tentang perkara ini dalam ulasan!

Setiap elemen individu bagi mana-mana komposisi, termasuk halaman web, mempunyai tahap daya tarikan visual tertentu. Semakin tinggi tahap ini, semakin banyak perhatian yang ditarik oleh elemen. Pengaruh kuasa ini juga boleh merebak ke elemen jiran, menentukan pergerakan pandangan pengguna merentasi halaman.

Fenomena ini biasanya dirujuk sebagai "berat visual", dan arah yang ditetapkan oleh daya ini ialah "arah visual". Memahami konsep ini sangat penting jika anda mahu reka bentuk halaman pendaratan anda menyertakan hierarki, aliran, irama, keseimbangan dan akhirnya penukaran.

Berat visual

Sebelum ini, kami menulis tentang ciri asas elemen halaman web, seperti saiz, warna dan bentuk, dan cara ia boleh digunakan untuk menunjukkan persamaan (similarity) atau perbezaan (contrast) elemen.

Sebagai contoh, anda boleh mencipta kontras dengan menjadikan satu elemen besar dan satu lagi sangat kecil. Teknik ini dengan sempurna akan menunjukkan ketidaksamaan unsur dan kepentingannya kepada pelawat.

Dengan menukar gabungan parameter ini, anda menukar berat visual. Merah cenderung untuk menarik lebih banyak perhatian daripada biru, dan elemen besar lebih ketara daripada yang kecil. Oleh itu, objek merah besar mempunyai berat visual yang lebih ketara daripada objek biru kecil.

Gabungan kesemua ciri asas ini menentukan berat visual sesuatu objek. Dan ia datang kepada gabungan - beberapa kombinasi akan menarik perhatian lebih daripada yang lain. Untuk mencipta elemen dengan berat visual yang berbeza, kombinasi ciri asas yang berbeza akan diperlukan.

Bagaimana untuk mengukur berat visual?

Tiada cara yang tepat untuk mengukur berat visual unsur grafik. Walau bagaimanapun, akal fikiran dan pengalaman memberitahu kita bahawa bahagian-bahagian komposisi yang menarik mata jelas mempunyai berat visual yang lebih besar daripada yang kita lihat pada kedua, atau bahkan ketiga. Jangan takut untuk mempercayai mata dan perasaan anda.

Walau bagaimanapun, ini bukan satu-satunya cara. Jika anda menyerlahkan beberapa ciri dan mengingati peraturan dan pernyataan standard mengenainya, maka kerja pada reka bentuk akan menjadi lebih mudah dan lebih cepat. Di bawah ialah beberapa parameter objek 2D yang telah dikaji, dengan penerangan tentang cara menukarnya membawa kepada peningkatan atau penurunan berat visual.

Pertama sekali, ia patut mempertimbangkan ciri asas yang disebutkan sebelumnya: saiz, warna, teduh, tekstur, orientasi dalam ruang, dll.

Saiz
Elemen besar mempunyai lebih berat visual daripada yang kecil.

Warna
Nada hangat biasanya kelihatan "lebih berat" daripada nada sejuk, yang secara visual memudar ke latar belakang. Pada masa yang sama, merah dianggap sebagai warna "paling berat", dan kuning dianggap sebagai warna "paling ringan".

Hue
Unsur-unsur gelap mempunyai lebih banyak berat visual daripada yang ringan.

kedudukan
Elemen yang terletak di bahagian atas komposisi kelihatan "lebih berat" daripada yang terletak di bahagian bawah. Objek di latar depan mempunyai lebih banyak "berat" daripada elemen di latar belakang.

Tekstur
Objek dengan tekstur kelihatan "lebih berat" daripada yang licin. Tekstur mencipta ilusi tiga dimensi objek, seolah-olah memberikannya jisim dan berat fizikal.

Borang
Objek bentuk biasa kelihatan "lebih berat" daripada unsur bentuk tidak teratur, kerana objek yang kedua secara tidak sedar dianggap betul, tetapi tidak mempunyai sebahagian daripada jisimnya.

Orientasi
Objek menegak kelihatan "lebih berat" daripada yang terletak secara mendatar. Elemen yang terletak secara menyerong mempunyai "berat" terbesar.

Walau bagaimanapun, tidak perlu mengehadkan diri anda kepada sifat asas yang dibentangkan di atas. Terdapat beberapa ciri tambahan yang membolehkan anda mengawal berat visual.

Ketumpatan
Susunan banyak elemen dalam ruang tertentu memberikan ruang itu lebih "berat". Pengguna akan melihat beberapa elemen kecil "ringan" sebagai satu elemen "berat".

Kawasan putih
Ruang kosong tidak membawa berat visual, jadi mana-mana objek yang diletakkan dalam ruang itu akan kelihatan "lebih berat" pada latar belakangnya.

Kandungan semantik
Sesetengah perkara lebih menarik daripada yang lain. Objek yang kompleks dan berbentuk rumit cenderung untuk menarik lebih perhatian. Kepentingan peribadi pengguna juga memainkan peranan yang besar: jika anda seorang peminat kereta, maka anda lebih berkemungkinan terutamanya berminat dengan foto kereta, dan kemudian imej kapal terbang.

Kedalaman
Kesan kedalaman medan yang kuat apabila memfokus pada subjek, mungkin disebabkan oleh kontras yang dicipta antara subjek dan latar belakang, memberikan elemen lebih berat visual.

Ketepuan
Warna tepu kelihatan "lebih berat".

Mewakili berat badan
Kita semua tahu bahawa rumah lebih berat daripada kasut: imej bekas akan mempunyai lebih banyak "berat" kerana ia sepadan dengan idea kita tentang sifat objek sebenar.

Dalam catatan sebelumnya tentang kontras dan persamaan, kami bercakap tentang cara kontras menarik perhatian. Dalam erti kata lain, jika sesuatu elemen adalah sangat berbeza daripada objek di sekelilingnya, maka ia akan kelihatan "lebih berat" pada latar belakangnya. Sebagai contoh, pada halaman web, bulatan cenderung dianggap sebagai "lebih berat" daripada segi empat tepat kerana elemen halaman web kebanyakannya berbentuk segi empat tepat.

Berat visual dan integriti persepsi

Senarai ini bertujuan untuk menunjukkan sejauh mana idea psikologi Gestalt tentang integriti persepsi manusia dikaitkan dengan prinsip reka bentuk web.

Figure-ground
Berat visual boleh digunakan untuk memisahkan rajah daripada latar belakangnya, memberikan lebih berat kepada rajah daripada latar belakang.

Persamaan dan perbezaan
Menguruskan berat visual membolehkan anda mencapai kedua-duanya: perbezaan dalam berat visual objek mencipta kontras, dan objek dengan berat yang serupa akan kelihatan serupa secara visual.

Fokus
Objek yang berada dalam fokus mempunyai lebih "berat" daripada komposisi yang lain.

Pengalaman lepas
Pengalaman pemerhati juga akan mempengaruhi kekuatan minatnya terhadap objek tertentu.

Arah visual

Walaupun berat visual menarik mata ke arah kawasan tertentu, arah visual memberitahu mata pemerhati ke mana hendak pergi seterusnya.

Ia berfungsi dengan fungsi yang sama seperti berat visual, mengarahkan perhatian anda kepada unsur-unsur tertentu komposisi. Walau bagaimanapun, sementara "berat" memberitahu pengguna: "Lihat saya!", arahan visual mengarahkan: "Pandang ke sana!"

Sama seperti dalam kes "berat", anda boleh menukar arah visual dengan menukar parameter elemen, ciri-cirinya, malangnya, adalah susunan magnitud yang lebih kecil di sini.

Bentuk Unsur
Bentuk unsur boleh menentukan paksi yang akan menentukan arah unsur. Paksi utama sesuatu objek biasanya selari dengan arah visualnya.

Kedudukan unsur
Berat visual mencipta ilusi tarikan atau penolakan objek berdekatan. Garis tarikan antara dua objek boleh menetapkan arah visual.

Kandungan semantik unsur
Imej anak panah, jari telunjuk, pandangan yang diarahkan pada satu titik - semua elemen ini pada mulanya mengarahkan pandangan pemerhati ke arah tertentu.

Pergerakan
Dalam kes halaman dinamik, elemen benar-benar boleh bergerak merentasi skrin, mengawal pandangan pengguna.

Setiap komposisi mempunyai asas strukturnya sendiri, di mana, di sepanjang pelbagai paksinya, daya bergerak yang mengawal perhatian pemerhati.

Mari kita lihat ciri ini dengan lebih terperinci.

Dalam bukunya Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim menyatakan idea bahawa setiap komposisi mempunyai asas strukturnya sendiri, supaya walaupun kanvas itu kosong, pandangan kita di bawah pengaruh kompleks kuasa, seperti ditunjukkan dalam imej di bawah, akan tertarik pada bahagian tertentu daripadanya.

"Rangkaian Struktur" oleh Rudolf Arnheim

Pusat dan empat penjuru kanvas segi empat adalah sejenis magnet yang menarik perhatian mata. Yang paling berkuasa adalah di pusat optik, yang tidak betul-betul sesuai dengan pusat geometri kanvas, tetapi terletak lebih tinggi sedikit.

Kapak pergi dari sudut ke sudut, dan mata yang terletak pada paksi ini dan terletak di tengah-tengah antara pusat dan sudut juga menarik perhatian. Garisan ini boleh digabungkan secara mendatar dan menegak, dengan itu membentuk paksi tambahan tarikan visual. Ini adalah topik yang agak kompleks yang mungkin perlu dikembalikan, tetapi buat masa ini, demi kesederhanaan, mari kita bersetuju bahawa dengan kanvas kosong, mata pemerhati akan sentiasa tertarik pada titik tertentu dalam pelan struktur Arnheim dan mata pemerhati. akan bergerak dari satu titik ke satu titik, mengikuti sepanjang paksi.

Anda boleh menggunakan rangkaian struktur sekarang dan cuba meletakkan elemen pada halaman pendaratan anda di kawasan yang secara semula jadi akan menarik perhatian pengguna.

Arah visual dan integriti persepsi

Arah visual boleh dianggap sebagai garis nyata atau khayalan yang menunjukkan arah dari satu elemen ke elemen yang lain atau menghubungkan elemen bersama. Garis-garis ini tidak perlu kelihatan.

Kesalinghubungan yang seragam
Garis-garis yang menghubungkan elemen mempunyai arah. Pandangan mewujudkan garis khayalan antara mata pemerhati dan objek pemerhatian.

Kesinambungan
Prinsip ini berkaitan dengan unsur-unsur yang terletak di sepanjang garis atau lengkung di mana unsur-unsur ini kelihatan bergerak.

Tujuan tunggal
Unsur-unsur yang bergerak ke arah yang sama dianggap mempunyai satu tujuan.

Paralelisme
Untuk membolehkan unsur-unsur difahami sebagai selari, ia mesti dikurniakan dengan paksi dalaman (yang memberi arah).

Orientasi komposisi am

Idea lain tentang arah visual ialah dalam setiap komposisi satu arah atau yang lain (mendatar, menegak atau pepenjuru) mendominasi.

• Arah mendatar yang dominan memberikan komposisi perasaan tenang dan kestabilan.
• Arah menegak yang dominan memberikan rasa formaliti, perhatian yang mendalam, dan keseimbangan.
• Arah pepenjuru yang dominan mewujudkan rasa pergerakan dan tindakan.

Arah utama komposisi ditentukan oleh arah kebanyakan atau beberapa elemen utamanya. Dengan menukar arah komposisi, anda boleh memberikannya mood tertentu.

Komposisi juga mungkin tidak mempunyai arah yang dominan, contohnya, jika bilangan elemen yang terletak secara mendatar dan menegak adalah sama. Dalam kes ini, arah visual ditentukan oleh subjektiviti pemerhati individu.

Contoh

Sebagai contoh, mari kita ambil beberapa halaman web kehidupan sebenar dan analisis taburan "berat" padanya.

Keputusan yang dibentangkan di bawah mungkin tidak bertepatan dengan penilaian subjektif anda, dan ini adalah perkara biasa. Adalah mustahil untuk mengukur secara objektif berat visual unsur tertentu komposisi, kerana orang yang berbeza tertarik kepada perkara yang berbeza dan bahagian subjektiviti akan sentiasa memainkan peranan penting.

Ujian juling yang dipanggil akan digunakan sebagai alat penilaian utama - untuk ini anda perlu julingkan mata anda supaya beberapa elemen komposisi hilang dari zon perhatian. Mereka yang tinggal boleh dipanggil yang paling "berat".

Teks dalam fokus

Catatan. Jika anda membuka tapak di bawah pada skrin dengan resolusi kurang daripada 1280 piksel lebar, dua lajur yang ditunjukkan dalam tangkapan skrin bertukar menjadi satu.

Halaman artikel di laman web biro.tsailly.net

Halaman blog biro ini, khusus untuk topik mencipta antara muka, terdiri hampir keseluruhannya daripada teks. Tajuk utama mempunyai "berat" terbesar - teks besar yang cukup dikelilingi oleh ruang kosong. Mungkin ini adalah maklumat yang paling penting yang harus dilihat oleh pengguna apabila dia sampai ke halaman, jadi langkah komposisi seperti itu wajar di sini.

Elemen dengan berat visual paling sedikit ialah teks dalam lajur kanan. Dan ini adalah wajar: teks utama artikel, mengikut definisi, harus menarik perhatian lebih daripada apa-apa di bar sisi.

Perhatikan teks merah kecil di bahagian atas lajur kanan - ini adalah pautan ke halaman utama. Walaupun saiz teks yang kecil, warna merah memberikannya sedikit berat dan membantu ia menonjol daripada teks bar sisi yang lain. Perlu diingatkan juga bahawa tangkapan skrin dikecilkan daripada halaman sebenar, jadi teks merah sebenarnya tidak sekecil yang kita lihat pada masa ini.

Jika anda menggunakan ujian juling, keseluruhan lajur kanan hilang, meninggalkan anda dengan hanya tajuk dan teks artikel.

Arah utama gubahan di sini adalah menegak - dua lajur panjang berjalan di sepanjang halaman. Persimpangan antara latar belakang kedua-dua lajur ini menghasilkan garis menegak, yang hanya meningkatkan kesannya.

Halaman rumah yang terang

Apabila memuatkan halaman utama Cipta Media Digital, elemen berwarna-warni mengambil tempatnya secara dinamik, sekali gus menarik perhatian maksimum. Walaupun anda melangkau animasi, unsur-unsur mungkin masih menjadi yang paling berat untuk anda dalam komposisi kerana warna merah jambu, kuning dan biru yang kaya. Di samping itu, unsur-unsur juga dikumpulkan bersama-sama, dengan itu membentuk kawasan yang kaya di tengah-tengah ruang kosong.

Catatan. Pada masa bahan ini diterbitkan, Cipta Media Digital telah berhenti beroperasi.

Buat Laman Utama Syarikat Media Digital

Seterusnya, anda mungkin akan melihat grafik di bahagian bawah halaman. Ini adalah bentuk gelap, besar dan kompleks yang menarik perhatian kepada tiga bahagian yang tajuknya kurang berat daripada imej.

Tajuk utama dibuat dalam fon yang besar dan gelap dan menonjol dengan sempurna pada latar belakang teks yang lain. Elemen halaman lain yang mempunyai "berat" ialah nama syarikat dalam pengepala dan logonya dalam pengaki.

Jika anda menjeling, gear berwarna dan teks serta grafik di bahagian bawah halaman kekal, walaupun kebanyakan elemen tidak lagi kelihatan.

Orientasi garis pemisah, navigasi dan menu pengepala serta teks yang diserlahkan menjadikan mendatar sebagai arah utama dalam kes ini.

Seseorang boleh menganggap tiga gear di tengah halaman sebagai satu objek segi tiga konvensional, memberikan komposisi arah pepenjuru. Walau bagaimanapun, ini akan menjadi satu-satunya pepenjuru pada halaman, yang tidak melebihi banyak panduan mendatar.

Pada halaman pendaratan untuk perkahwinan pereka web Javier dan Marta, tiga elemen bersaing untuk "berat": imej, garis pemisah hijau dan elemen menu - semuanya memerlukan perhatian utama.

laman web Javier dan Marta

Seni grafik
Imej besar berwarna gelap yang dikelilingi oleh ruang kosong. Setiap imej bermakna dan menimbulkan minat.

Pembahagi hijau
Mereka mempunyai warna yang jelas, agak besar dan, seperti imej grafik, dikelilingi oleh ruang kosong.

Item menu
Gelap, besar dan juga dikelilingi ruang kosong.

Logo pada pandangan pertama kelihatan "lebih berat" daripada teks utama, tetapi sebenarnya ia "lebih ringan" daripada elemen menu, walaupun masih agak ketara. Di sini anda tidak sepatutnya melupakan subjektiviti persepsi - anda mungkin berfikir secara berbeza.

Jika anda melakukan ujian juling dan juling sekali lagi, item menu dan logo bergabung menjadi satu objek. Grafik dan garis pemisah kekal kelihatan, dan teks muncul dalam blok besar. Iaitu, semua elemen kekal kelihatan, walaupun anda tidak dapat melihat teks.

Bagi orientasi, apabila hanya bahagian atas kelihatan pada skrin - El evento - garis pemisah memberikan halaman penampilan mendatar. Walau bagaimanapun, terdapat 4 bahagian secara keseluruhan, dan jika anda melihat keseluruhan halaman, maka, sudah berbaris dalam lajur, garisan mendatar ini memberikan komposisi arah menegak.

Dengan cara ini, kita boleh menganggap bahawa lebih baik untuk menukar dua imej yang kita lihat di tepi teks dalam tangkapan skrin. Imej pertama menunjukkan kamera melihat ke kanan - pandangan pengguna mungkin akan pergi ke arah itu. Payung gadis dalam gambar kedua juga menghala ke kanan, tetapi gadis itu sendiri pergi ke kiri, dan di situlah pandangan kami berkemungkinan besar mengikuti. Kedua-dua imej mengalihkan pandangan daripada teks apabila mereka boleh mengarahkannya ke sana.

Seni di Stanford

Pada tapak web Seni Stanford, yang didedikasikan untuk aktiviti seni Universiti Stanford, imej di bahagian atas halaman membawa paling berat. Di samping menjadi elemen terbesar, kandungannya sangat menarik. Di samping itu, disebabkan lokasinya, apabila membuka halaman dalam penyemak imbas, ia mengambil hampir keseluruhan skrin.

Catatan. Imej di bahagian atas tapak sebenarnya adalah elemen dinamik, di mana beberapa imej menggantikan satu sama lain secara berkala. Jadi, jika anda melihat tapak itu sendiri, anda mungkin akan melihat gambar yang berbeza, yang mungkin membawa kepada penilaian yang berbeza terhadap reka bentuk dan berat visual.

Elemen terpenting seterusnya ialah imej segi tiga dengan latar belakang objek segi empat tepat. Kemudian ikuti pengepala dan pengaki - blok besar warna merah gelap.

Jika anda menjalankan ujian juling, semua elemen kekal kelihatan lebih lama daripada yang anda jangkakan. Ini disebabkan oleh kehadiran kontras besar antara ton terang dan gelap dalam setiap elemen.

Pada akhirnya, apa yang kekal kelihatan ialah imej bahagian atas yang sedikit kabur dan segi tiga yang sudah kabur sepenuhnya di bawahnya.

Reka bentuk halaman ini juga menarik kerana orientasi visualnya: garis pepenjuru di sini, termasuk dalam imej teratas, mendominasi dan menetapkan arah keseluruhan komposisi, dan memandangkan situasi ini bukan tipikal untuk kebanyakan halaman web, ia bertentangan dengan jangkaan pengguna, kerana mengapa garisan mendatar menarik lebih banyak perhatian.

Adalah menarik bahawa kedua-dua wanita dalam segi tiga kanan dan kamera di tengah melihat ke kanan, manakala adalah lebih baik untuk menyelak foto pertama secara mendatar supaya pandangan gadis itu diarahkan ke tengah halaman, dan atas sebab yang sama adalah lebih baik untuk mengalihkan imej kamera ke blok kiri.

Perlu diingatkan juga bahawa imej dalam segi tiga berubah apabila anda menuding pada pautan yang berbeza dalam blok. Namun, atas sebab tertentu, kebanyakan mereka menghadap ke luar, bukannya mengarahkan pandangan pengguna kembali ke teks.

Kesimpulan

Berat visual ialah kekuatan sesuatu elemen menarik mata pemerhati. Arah visual ialah arah daya yang bertindak ke atas unsur, atau daya pengaruh yang dikenakan oleh unsur itu sendiri. Mereka menunjukkan kepada mata pengguna ke mana hendak bergerak seterusnya.

Banyak ciri dalaman objek boleh diubah, menjadikan elemen "lebih berat" atau "lebih ringan". Sesetengah ciri juga membolehkan anda menukar arah visual elemen dan keseluruhan komposisi.

Kini anda tahu betapa mudahnya untuk mengawal perhatian pengguna dan mengalihkan pandangannya di sepanjang halaman pendaratan anda ke arah yang bermanfaat kepada anda.