Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

Pengantar Lengkap ke Visual Design

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Panduan detil ini akan mencakup dasar-dasar dari prinsip visual design, didemonstrasikan dengan banyak illustrasi untuk memperdalam pemahamanmu. Baik kamu seorang profesional berpengalaman maupun baru di dunia desain web. Mempelajari dasar yang solid akan sangat membantu untuk meningkatkan kualitas karyamu.

Artikel yang detil ini akan bertugas sebagai sebuah "visual design principles one-stop-shop", dengan semua yang kamu butuhkan untuk memulai.

Topik

Kita akan membahas banyak di panduan ini termasuk prinsip-prinsip berikut:

  • Unity
  • Alignment
  • Continuation
  • Emphasis
  • Figure Ground Relationship
  • Hierarchy
  • Consistency
  • Similarity
  • White space
  • Balance
  • Proximity
  • Closure

Apa yang dimaksud dengan desain Visual?

Desain visual dapat membantu Anda menyampaikan pesan yang disesuaikan untuk audiens. Desain adalah komunikasi; melalui desain visual Anda berkomunikasi dengan sebuah tampilan. "Kata-kata" Anda atau repertoar termasuk bentuk, teks, simbol, Gambar, white space, tekstur, warna dan gerakan bahkan (animasi atau gerakan yang tersirat). Tujuan Anda adalah untuk menjadi panduan yang membawa pengguna melalui Desain, memimpin mereka di mana Anda ingin mereka untuk ketujuan (juga di tempat terbaik bagi mereka!). UI yang baik (User Interface) akan serius keprihatinan ini dan menawarkan solusi yang tepat.

Di bawah ini Anda akan menemukan tujuh prinsip desain dan berguna gestalt prinsip-prinsip yang Anda harus ketahui. Mereka harus diambil sebagai pedoman, bukan sebagai yang diatur dalam kekakuan, dan membantu Anda membuat keputusan yang mengarah ke lebih besar kekompakan dan kualitas.

Relationships

Satu tema umum akan memimpin kita melalui prinsip-prinsip yang kita bicarakan tentang hari ini: relationships. Desain visual yang baik berasal dari berhasil menciptakan hubungan yang khas dalam pekerjaan Anda. Ingat, bagaimanapun, bahwa konten berikut relatif mudah untuk di pelajari dan memahami, tetapi membutuhkan praktek yang berulang-ulang untuk menaruh potongan dan mencapai hasil yang menciptakan hubungan ini berhasil.

Gestalt

Banyak dari prinsip-prinsip yang kami telah membuat daftar (seperti "kedekatan", dan "hubungan gambar tanah") dapat dikategorikan sebagai "Gestalt prinsip". Peraturan ini berfokus pada bagaimana kita, sebagai penonton, merasakan jumlah bagian yang lebih kecil secara keseluruhan. Bagaimana kita mencari pola dan, seperti yang telah kami sebutkan sudah, hubungan. Demikian pula konsep desain visual lainnya, mereka dapat diterapkan untuk cetak, web, video dan fotografi.

Yang mengatakan, mari kita mulai dengan prinsip Gestalt pertama kami!

Unity

Desain bekerja yang terbaik sebagai keseluruhan yang kohesif, bertujuan untuk mencapai kesatuan ketika semua elemen disatukan. Cobalah untuk membangun struktur bersatu. Kedekatan, keselarasan, kelanjutan, dan pengulangan dapat membantu untuk mencapai dirasakan kesatuan antara unsur-unsur. Hal ini juga membantu Anda potongan teka-teki yang terpisah tanpa menggunakan tambahan perbatasan atau elemen desain. Sebagai pemirsa, kita merasakan keseluruhan struktur pertama ketika kita melihat hal-hal baru.

Dropbox unity
Dropbox unity

Dropbox melakukan banyak hal-hal yang benar, membuat baik penggunaan setiap prinsip desain di buku. Halaman "about" adalah contoh yang baik dari kesatuan. Perhatikan bagaimana dengan mudah visual kesatuan dicapai dengan hanya beberapa elemen pada halaman. Mereka bahkan bisa kehilangan perbatasan dan akan masih bekerja.

Kesatuan perlu dibangun terus — hal itu tidak terjadi dalam sekejap. Menganggapnya sebagai kombinasi makro - dan mikro-kesatuan; elemen-elemen yang lebih kecil juga perlu menyampaikan kohesi ketika Anda membangun kesan bersatu secara keseluruhan.

GitHub unity
GitHub unity

GitHub juga melakukan pekerjaan yang besar dalam membangun kesatuan. Semua pertimbangan kecil di halaman konten yang kaya seperti ini menambahkan hingga keseluruhan konsisten mana semua potongan cocok bersama-sama dan dimana tidak ada tongkat keluar negatif.

Persatuan dan kohesi membuat pemirsa lebih nyaman. Membangun kepercayaan dan pemahaman bagaimana pengguna harus mengikuti konten adalah produk sampingan gratis. Jika tidak berdiri di jalan yang bisa menghalangi pengguna perhatian lebih gesekan pengalaman pengguna akan.

More unity on Github
Beberapa unity pada Github

Ilustrasi di atas adalah contoh lain baik menggunakan prinsip-prinsip kesatuan. Blok yang menampilkan daftar integrasi memerlukan apa-apa lagi untuk membentuk kesatuan.

Alignment

Kesejajaran mengurangi kekacauan visual. Memikirkan sebuah desk berantakan versus satu terorganisir. Bahkan jika Anda suka Anda mencari kreatif desk berantakan, penonton atau pelanggan yang tidak terbiasa dengan desk Anda akan menghargai yang penampilan baik diurutkan atas yang kacau. Lebih mudah untuk menavigasi dan menemukan potongan-potongan yang relevan informasi jika Anda dapat membangun semacam flow melalui penyelarasan. Sebagai efek samping, hirarki (sesuatu yang kita akan lihat segera) lebih mudah didirikan tanpa unsur floating di seluruh tempat.

Alignment by Dropbox
Kesejajaran oleh Dropbox

Screenshot ini dari pusat bantuan Dropbox menunjukkan penggunaan grid jelas untuk benar menyelaraskan unsur-unsur yang menyenangkan.

themanyfacesofcom a fun side project from Paravel
themanyfacesof.com, proyek sampingan dari Paravel

themanyfacesof.com termasuk situs yang besar kecil Burt Reynolds bertema yang memiliki banyak contoh baik kesejajaran dalam tindakan. Keselarasan ini sangat halus dan sebagian besar dicapai melalui suara tipografi dan jelas grid — dan melanggar kesejajaran terampil setiap sekali dalam beberapa saat.

The Dropbox feature list
Daftar fitur Dropbox

Daftar fitur Dropbox adalah contoh lain patut di pelajari. Desain sederhana, sederhana dan efektif bekerja untuk penataan konten menggunakan alignment untuk efek maksimum.

Continuation

Visual kesejajaran bekerja bergandengan tangan dengan prinsip Gestalt continuation. Kita akan melihat lebih ke bagaimana Anda dapat menggunakan ini dalam pekerjaan Anda ketika kita membahas grids dalam seri ini. Objek yang mengikuti arah yang sama, misalnya dengan menjadi sejajar satu sama lain, membuat kesan yang lebih terkait satu sama lain dari unsur-unsur yang hilang pedoman. Mengikuti garis-garis ini terorganisir konten menciptakan ketertiban dan aliran dalam tata letak.

LOL Colors
LOL Colors

LOL Colors adalah contoh yang bagus dari alignment dan continuation. Tanpa menggunakan batas-batas yang memisahkan, Anda dapat dengan jelas melihat grid bekerja, dan bentuk warna tetes menyiratkan arah terus ke bawah halaman.

Pada tingkat makro, Anda harus bekerja pada menyelaraskan hal-hal yang berhubungan dengan satu sama lain dan posisi mereka sepanjang tepi yang umum. Dengan cara itu, elemen mengalir lebih mudah dalam keseluruhan komposisi dan membiarkan pengguna menavigasi dengan mudah. Hubungan ini visual dapat membantu membentuk kesatuan antara unsur-unsur yang kecil dan besar. Hal ini seperti terlihat margin yang memegang potongan besar dalam desain bersama-sama dan memberikan mata sedikit alasan untuk berhenti untuk visual cegukan.

Objek dapat sejajar sepanjang tepi, tapi sama sepanjang poros tengah yang sering kurang jelas. Menyelaraskan konten melalui tepi adalah roti dan mentega ketika Anda merancang untuk web. Pusat penyelarasan dapat digunakan untuk menekankan unsur-unsur tertentu atau panggilan untuk bertindak.

Emphasis

Penekanan adalah semua tentang titik fokus. Lebih sedikit Anda miliki, semakin kuat penekanan mereka. Kuncinya di sini adalah tidak membuat segalanya tampak penting — jika semuanya ditekankan, tidak ada sticks out dan semua Anda berakhir dengan kebisingan. Saya yakin Anda telah melihat situs yang mengabaikan prinsip itu dan memplester berbagai tombol berwarna yang funky di semua tempat. Meninggalkan rasa tidak enak, bukan? Itulah yang kurang ditekankan. Lebih penting lagi, penyalahgunaan penekanan membingungkan hirarki.

Alat pilihan Anda adalah tersangka biasa, tetapi ukuran dan warna mungkin yang paling efektif dalam menciptakan penekanan.

Dropbox CTA
Dropbox CTA

Dropbox membuat pekerjaan hebat dalam menyoroti tindakan yang seharusnya dilakukan pengguna dengan menggunakan penekanan. Secara visual, tidak ada yang menghalangi cara pengguna untuk fokus dalam mendaftar. Terkuat penekanan adalah pada tombol biru yang jelas berdiri keluar dari sisanya di viewport. Desain ini memiliki keseimbangan yang baik visual — dan akan lebih baik jika mereka pergi dengan hanya satu tombol biru.

Satu atau dua unsur-unsur yang ditekankan dalam suatu viewport tertentu harus cukup untuk membimbing perhatian pengguna ke elemen yang paling penting pada halaman. Memutuskan pada unsur-unsur yang mungkin lebih sulit daripada kedengarannya. Tanyakan diri Anda, apa sangat penting perlu ambil pengguna fokus pertama. Memilih dengan bijaksana!

Keyboard Orée kayu

Penekanan pada produk yang sangat baik dalam desain ini. Deskripsi maupun latar belakang blok penekanan keyboard Orée kayu dengan cara apapun. Cantik! Simetri ini juga bekerja dengan baik di sini.

The VIVE
VIVE

Tidak banyak berbicara tentang bagaimana HTC disajikan VIVE. Penekanan yang terbaik. Desain yang baik seperti ini benar-benar menjanjikan.

Craft oleh Invision

Craft oleh Invision memiliki halaman arahan mencolok mana field input untuk alamat email elegan ditekankan. Sulit untuk tersesat di Halaman ini. Nama produk menonjol secara efektif juga. Perbedaan antara background dan foreground terutama terampil dan lucu.

Figure Ground Relationship

Prinsip ini sangat kuat dan begitu fundamental bahwa Anda harus menguasai sedini mungkin. Bekerja pada desain Anda, Anda harus sering bertanya pada diri sendiri pertanyaan sederhana: yang elemen di background, dan yang ada di foreground?

Cayenne
Cayenne

Dalam contoh ini, Anda dapat melihat bahwa konten dan tombol untuk mengambil tindakan jelas tetap keluar dari background. Perbedaan yang jelas sangat penting untuk bermain dengan fokus pengguna. Berikut garis agak kabur dan lucu, tapi masih meminjamkan perbedaan sangat jelas figure-ground distinction.

Ketika nenek moyang kita awal sibuk berburu dan mengumpulkan, sering itu sangat penting untuk membedakan apa yang mungkin menjadi ancaman atau keuntungan tepat di depan mereka. Membedakan hal-hal dengan cepat dari apa pun hanyalah "kebisingan" latar belakang tampaknya masih menjadi bagian dari perkawatan kami untuk "bertahan hidup". Pikirkan harimau di balik semak-semak di hutan dibandingkan dengan hujan di cakrawala. Neurologis, strategi visual hidup ini telah meninggalkan jejak yang mendalam seperti bahwa tidak mungkin kita akan mengubah ini mekanisme sederhana persepsi. Ini mungkin terdengar lucu dan kebanyakan usang bagi orang-orang digital, tetapi mengetahui hal ini membuatnya lebih mudah untuk memutuskan bagaimana menonjolkan informasi penting bagi pengguna dan bagaimana "menyembunyikan" kurang detail yang relevan di latar belakang.

Zappka
Zappka

Di sini kita memiliki gambar latar belakang yang sangat menonjol yang menyerap banyak perhatian-itu berguna dalam bahwa ia menyampaikan emosi dalam bentuk hubungan pribadi. Namun demikian, tombol untuk mengambil tindakan cerdik ditempatkan dan warnanya membawa ke latar depan.

Masalah lainnya mungkin mata dan otak kita yang tidak super cepat pemrosesan banyak informasi pada saat yang sama, yang mengarah ke memprioritaskan apa yang kita perlu fokus pada pertama. Pemahaman ini akan membantu Anda menempatkan potongan-potongan teka-teki desain lebih efektif.

www.startupfuckingadvice.com

Contoh ini bekerja dengan baik, perspektif persediaan perbedaan latar belakang dan latar depan. Secara pribadi saya akan senang untuk melihat tombol merah yang ditempatkan di ujung table-dimana mata secara alami ditarik ke hasil baris.

Samsung Gear 360

Contoh ini dari Samsung baru Gear 360 sebagai baik karena mendapat; latar belakang dan latar depan bekerja sama sangat baik. Ada perbedaan yang jelas dan latar belakang menonjolkan kamera di latar depan elegan. Cukup cerdas dan lucu.

Berikut adalah beberapa contoh baik penekanan dan hubungan figure-ground:

Go Cubes
Go Cubes
Go Cubes
Gear 360

Hierarchy

Hirarki adalah tentang menetapkan kepentingan visual; semacam sepupu untuk penekanan berkaitan dengan mengurangi kekacauan visual. Ini adalah panduan makro untuk apa yang harus difokuskan pada pertama dan bagaimana mengikuti breadcrumbs visual dan subliminal — seperti menceritakan kisah visual yang dapat dipegang pengguna saat menavigasi konten situs Anda. Pendekatan elemen desain sebagai "lapisan pentingnya" yang perlu diatur secara efektif. Dengan hanya beberapa potong sangat ditekankan, Anda mengambil penampil lembut dengan tangan dan memindahkan mereka melalui situs sebagaimana dimaksud.

The Reddit index page
Halaman indeks Reddit

Screenshot ini dari halaman indeks Reddit bukanlah mungkin contoh terbaik dari desain dibuat dengan baik — terutama dalam arti pembentukan hirarki yang jelas dan kuat. Reddit adalah salah satu kasus-kasus dimana keberhasilan situs dan desain tidak terkait erat, saya rasa. Ini memiliki cincin yang otentik, dengan menjadi berantakan, maksud saya, tetapi tidak perlu banyak untuk membangun hirarki visual yang lebih jelas.

Seperti yang kita bahas sebelumnya, Anda tidak ingin segalanya untuk muncul sama pentingnya. Adalah bahwa untuk menjadi kasus, pemirsa Anda akan memiliki waktu lebih keras mencerna konten Anda. Sebaliknya, membuat berbagai tingkat kepentingan yang menekankan struktur keseluruhan komposisi Anda. Salah satu strategi yang bekerja sebagai sebuah aturan umum: semakin besar ukuran, semakin besar pentingnya. Setelah hirarki dasar dicapai melalui ukuran dan jarak, Anda dapat membawa warna campuran, membantu untuk menekankan unsur-unsur tertentu yang bahkan lebih. Dengan bekerja di sebaliknya, dimulai dengan warna, Anda akan membuat pekerjaan Anda tidak perlu sulit- atau setidaknya kurang efektif.

The Explore page at GitHub
Halaman Eksplorasi di GitHub

Saya suka bagaimana halaman Eksplorasi di GitHub berkaitan dengan tipografi untuk menciptakan hirarki halus dan jelas. Hal ini sangat mudah untuk mata untuk memindai dan mengikuti konten ke bawah. Warna juga dimanfaatkan dengan baik untuk membuat jangkar visual, dan hal yang sama berlaku untuk hasil pencarian mereka:

Color form white space size and alignment work together and create a solid hierarchy
Warna, bentuk, ruang putih, ukuran dan keselarasan bekerja sama dan membuat hierarki padat.

Hierark yang jelas dengan cepat membedakan yang baik dari solusi desain biasa-biasa saja

Hirarki visual di Dropbox

Tangkapan layar di atas adalah contoh bagus lainnya tentang bagaimana perancang tarampil di Dropbox melakukan pekerjaan mereka. Ada banyak konten yang bisa digunakan, tetapi masih berhasil membimbing mata melalui teks.

Consistency

Jika anda mengikuti prinsip-prinsip yang dibahas sejauh ini tetapi kurang konsistensi Anda akan memperlemah kemajuan yang dibuat saat menerapkan prinsip desain lainnya. Konsistensi membantu menciptakan model mental dari desain, situs atau tampilan yang Anda inginkan. Item serupa seharusnya muncul secara visual serupa. Juga, setelah Anda memasukkan desain Anda, membuat desain Anda lebih sedikit (Jangan Ulangi Diri Anda) lebih mudah dengan itu dalam pikiran.

Another eye pleasing design from the Dropbox team
Desain menyenangkan mata lain dari tim Dropbox

Contoh di atas menunjukan konsistensi pada berbagai level. Gaya dan ukuran ilustrasi konsisten Tombol terlihat sama. Berat visual dari ketiga kolom merata dan sejajar. Setiap kolom memiliki struktur dalam yang sama. Secara keseluruhan, ini sederhana, dipertimbangkan dan efektif.

Konsistensi menetapkan harapan bahwa apa pun yang ditemui berikutnya akan tampak serupa, sehingga mengurangi proses kognitif.

UX Timeline
UX Timeline

Menghindari penggunaan satu ton tipografi dan ukuran huruf yang berbeda adalah salah satu jalur paling penting untuk konsistensi. Dalam satu lingkungan pengguna tumbuh terbiasa membaca di gaya tertentu atau jenis huruf dan Anda tidak boleh mengganggu itu.

Whiplash
Whiplash
SoundCloud Charts
SoundCloud Charts

Apakah Anda baru saja melihat situs yang menggunakan banyak tombol berbeda, bukan beberapa yang akan menciptakan konsistensi yang jauh lebih baik? Saya yakin Anda memiliki dan saya akan bertaruh Anda tidak menyukainya. Tombol di bawah ini adalah milik dari inventarisasi antarmuka satu situs. Seperti yang dapat diamati di bawah, sungguh menakjubkan seberapa jauh Anda dapat pergi ke arah yang salah.

A screenshot from Brad Frosts excellent book about Atomic Design
Tangkapan layar dari buku Brad Frost yang luar biasa tentang Desain Atom

Kegunaan dari sistem yang dapat meningkatkan secara besar-besaran ketika unsur-unsur serupa seperti ini berbagi estetika sama. Mengapa membuat pengguna belajar bahasa visual yang beragam untuk menavigasi halaman Anda? Itu tidak masuk akal!

Similarity

Anda dapat menebaknya, "konsistensi" berakar pada prinsip Gestalt ini, yang menyatakan bahwa hal-hal yang tampak serupa menciptakan suatu bentuk kesatuan yang dapat Anda gunakan dalam desain Anda. Unsur-unsur yang memiliki karakteristik yang serupa muncul untuk menjadi lebih saling berhubungan-lebih dari hal-hal yang berbeda.

Unsur-unsur yang serupa menunjukkan hubungan, menciptakan kontras yang kuat antara mereka dan unsur-unsur lain di sekitar mereka.

The user list on Dribbble
Daftar pengguna pada Dribbble,

Ini adalah daftar pengguna pada Dribbble, menampilkan desainer dan pekerjaan mereka. Ini adalah contoh yang baik bagaimana kesamaan dapat mendukung daftar elemen desain yang berbeda untuk membuat hubungan dan oleh karena itu muncul lebih bersatu. Gerakan disarankan melintasi halaman oleh kedekatan horisontal thumbnail dan persamaan setiap baris yang berulang-ulang.

Reddit
Reddit

Reddit tidak mencapai konsistensi besar dengan menerapkan kesamaan yang baik. Ini daftar posting memiliki judul pendek dan panjang, beberapa judul yang menjorok sementara yang lain tidak. Kelihatannya membingungkan, tetapi tidak akan mengambil banyak pekerjaan untuk membuat lebih kohesi melalui kesamaan.

Anda dapat mencapai kesamaan antara unsur-unsur dengan menggunakan umum:

  • color
  • form
  • size
  • shape
  • texture
  • orientation
  • dimension
  • consistency of size

Semua ini dapat menyarankan hubungan. Warna dan bentuk adalah contoh yang sangat kuat untuk menekankan hubungan ini. Meskipun kesamaan adalah senjata yang kuat untuk menghasilkan, itu meskipun demikian adalah alat untuk penguatan hierarki, tak satu pun yang mudah menciptakan sendiri.

Trending Open Source repos on GitHub
Tren repos Open Source pada GitHub

Daftar ini dari tren Open Source repos GitHub benar-benar kuat. Sangat sederhana, mudah dibaca dan dicerna, serta kohesif oleh kesamaan berulang-ulang. Ini berhasil dalam membuat blok konten terpisah yang saya perdebatkan bahkan tidak perlu borders:

Peta mental yang halus yang kita, sebagai pengguna, dapat ciptakan tidak boleh diremehkan. Ini membantu untuk membangun sebuah pola untuk mengatur konten. Kekacauan di ujung lain spektrum itu dan tidak apa kita, sebagai desainer, bertujuan untuk. Bayangkan sebuah halaman teks yang mana Surat-surat tidak ditampilkan secara konsisten pada dasar baris demi baris, tapi mengapung secara acak di sekitar halaman. Tidak terlalu mengundang untuk dibaca, ya?

The Explore section on GitHub
Bagian Explore GitHub

Ini adalah halaman arahan Eksplorasi bagian pada GitHub. Di sini, penggunaan ukuran dan penampilan yang lebih konsisten akan menjadi lebih efektif. Ukuran meningkat pada beberapa elemen tidak, pada kenyataannya, keputusan "editorial" untuk secara sadar menyoroti kategori tertentu; itu adalah acak. Kurang baik alasan untuk bermain dengan ukuran, kesatuan akan telah dibuat lebih kuat dengan bersandar pada konsistensi. Juga, Anda memiliki dua jenis kartu, satu dengan hanya judul untuk kategori dan satu dengan tambahan teks deskriptif. Selain itu, efek hover berbeda untuk semua tiga variasi. Ini semua menciptakan visual menarik, tetapi halaman tidak sekuat menampilkan daftar bagian yang sama di bawah ini:

Konten yang sama seperti di atas tapi hasilnya jauh lebih kuat.

Dalam hal fungsionalitas, unsur-unsur yang tampak serupa harus menyelesaikan tugas-tugas yang sama bagi pengguna. Ketika pengguna tidak perlu perlu kembali belajar berbagai perilaku untuk elemen antarmuka tampak serupa, frustrasi terjadi kemudian. Kesamaan yang membantu untuk mengelola harapan — itu sendiri adalah alat yang sangat ampuh dalam gudang senjata Anda.

White Space

Apa sebenarnya yang dianggap "white space"? White space adalah ruang yang ditandai, negatif atau kosong antara unsur-unsur dalam komposisi. Itu efektif frame konten. White space makro adalah bagian utama dalam desain — yang menciptakan efek yang lebih jelas. White space mikro, di sisi lain, adalah untuk rincian menit, seperti semua spacings untuk tipografi elemen.

Di sini sangat baik penggunaan white space menciptakan penekanan yang kuat dan elegan pada produk baru. Ada beberapa prinsip-prinsip yang menempatkan bekerja berhasil, tetapi white space adalah memainkan peran terkuat untuk membuat desain ini bekerja dengan baik.

Foundersuite
Foundersuite

Lihatlah contoh di atas. Ketika kami menyelidiki ukuran yang digunakan untuk membangun white space pada Foundersuite, kita melihat pengukuran digunakan bermain dari satu sama lain. Pengukuran common ini membuat "aktif" white space, sengaja mengarahkan perhatian. Ayo kita lihat di bawah ini:

"Aktif" white space adalah deskripsi kabur, tapi kita menggunakannya ketika white space menampilkan hubungan ke unsur-unsur sekitarnya. Whitespace aktif membantu menekankan komposisi atau susunan konten Anda dan oleh karena itu dampak hirarki positif. Whitespace "Pasif" tidak begitu memecah-belah, tetapi sama penting karena dapat membuat sedikit ruang untuk bernapas. Namun, terlalu banyak white space yang tidak aktif, kurang hubungan ke sekitar elemen, akan membuat pekerjaan Anda terlihat tidak pengertian atau bahkan berantakan.

ionicio
Ionic.io

Aplikasi yang sangat baik dari white space pada ionic.io. Di sini ada hubungan dalam white space ukuran serta makro dan mikro yang bermain sama dengan baik.

Setiap hari, ketika Anda membaca teks, Anda menyaksikan aplikasi berguna white space tanpa berpikir banyak tentang hal ini. Ruang antara kata-kata, kalimat dan paragraf adalah semua white space dan membantu kita untuk secara visual mencerna makna dari surat-surat yang sedang ditulis. Itu membimbing mata melalui konten dan memberi kita petunjuk untuk secara efektif bergerak melalui teks. Kedua makro dan mikro white space mata memberikan kesempatan untuk beristirahat dan mendukung keseluruhan keseimbangan.

Perlu diingat bahwa kami bertujuan untuk mencapai diferensiasi meskipun ruang. Hal ini memungkinkan kita memotong kembali pada unsur-unsur lain untuk membuat perbedaan. Jika Anda ingin "bersih" tampilan web favorit Anda desain kemudian penerapan sadar white space adalah kemungkinan komponen utama dari itu. Tidak ada yang berbicara keanggunan dan kecanggihan yang lebih baik daripada pengguna yang tepat dari white space.

Balance

Keseimbangan adalah semua tentang menjaga berat visual, optik keseimbangan, di cek. Kita secara naluriah ingin melihat hal-hal yang yang seimbang di sekitar bagian vertikal poros itu memiliki teropong visi. Keseimbangan di sumbu vertikal adalah pola yang aman untuk mengikuti — sangat formal dan memerintahkan. Jika Anda dapat mematahkan yang menyeimbangkan ahlinya meskipun, membuat sedikit ketegangan atau kejutan, mungkin untuk menyorot beberapa aspek komposisi, desain Anda mungkin muncul lebih dinamis dan menarik.

The Blockhead adapter
Blockhead adapter

Situs untuk Blockhead adapter memiliki beberapa contoh yang bagus tentang bagaimana mereka craftily diterapkan keseimbangan untuk desain mereka. Di atas, gambar ke kanan dengan teks yang menyertainya mencapai keseimbangan optik yang bagus. Sama berlaku untuk gambar di bawah. Keseimbangan, hirarki, spasi, dan penekanan yang semua baik diterapkan.

Simetris keseimbangan ini tidak sulit untuk mencapai dan cara aman untuk membuat komposisi yang menarik secara visual. Pendekatan asimetris kurang kaku atau statis tetapi mengharapkan lebih sedikit kerajinan untuk melepas berhasil. Untuk keseimbangan asimetris kita perlu bekerja pada menjaga berbagai bagian bebas dicerminkan dalam keseimbangan yang dirasakan.

The Dropbox landing page
Dropbox landing page.

Halaman arahan Dropbox membuat baik menggunakan visual keseimbangan seluruh tempat. Anda dapat melihat bahwa gambar dan teks mencapai bagus asimetris keseimbangan-terutama mengacu pada bagian lain di sekitar mereka. Dan jangan biarkan saya mulai tentang bagaimana mereka menggunakan koi carp untuk menyiratkan ketangguhan dan pengoperasian multi-perangkat. Jenius!

Ketika Anda bermain dengan visual keseimbangan, semua alat-alat desain yang Anda inginkan: ukuran, warna, posisi, bentuk, pengulangan, tekstur, dan mereka dapat semua mempengaruhi berat dirasakan secara individual dan bermain dari satu sama lain.

Keseimbangan asimetris dapat dianggap lebih ramah dan menyampaikan desain yang muncul lebih menyenangkan dan dinamis. Bukan berarti saya seorang penggemar Dropbox atau sesuatu, tetapi dalam hal desain Dropbox website membuat penggunaan terampil setiap prinsip desain yang telah kita bahas hari ini, mencapai kualitas keseluruhan untuk dikagumi.

Dropboxs asymmetric about page Good balance
Aspek asimetris Dropbox Keseimbangan yang bagus

Proximity

Elemen desain yang ditempatkan dalam jarak relatif satu sama lain secara alami membentuk hubungan tersirat. Menangani kedekatan dengan baik dapat mempengaruhi desain Anda secara positif, memungkinkan Anda untuk meninggalkan unsur-unsur lain yang seharusnya diperlukan untuk mencapai kesatuan visual - perbatasan misalnya. Sekali lagi, persatuan adalah inti dari ini, dan semua alat yang telah kita diskusikan sejauh ini dapat digunakan untuk berbagai tingkat untuk mencapainya.

Di situs untuk YoGrow Anda dapat melihat seberapa dekatnya jarak yang digunakan. Saya akan menyarankan mereka bisa menggunakan warna latar belakang yang lebih sedikit dan batas, bukan membiarkan kedekatan melakukan sihirnya.

Dalam contoh di bawah ini, yang telah kita lihat sebelumnya, jarak adalah semua yang di perlukan untuk menyiratkan hubungan antara palet warna ini. Perbatasan atau warna belakang dapat dihilangkan menghasilkan tampilan yang elegan.

Closure

Penutupan adalah tehnik komposisi di mana pengguna mengisi kekosongan desain Anda - kosong yang sengaja Anda tanam. Ini adalah bentuk saran, ilusi yang melengkapi gambar yang diinginkan desainer untuk Anda lihat. Penutupan adalah apa yang memungkinkan pembaca untuk menafsirkan strip komik, mengambil saran tentang apa yang terjadi di selokan antar bingkai. Penutupan juga yang memungkinkan kita menafsirkan ruang negatif dalam logo, misalnya.

Otak manusia yang mencari pola beroperasi dengan mengisi bagian-bagian yang hilang menjadi bentuk-bentuk yang sudah di kenal.

Ambil GitHub misalnya. Logo yang mereka gunakan di halaman adalah lingkaran hitam dengan kesan negatif dari Octocot mereka di dalamnya. Bahkan dalam ukuran kecil, Anda dapat mengidentifikasi maskot mereka dengan mudah dan, ditempatkan di navbar, berfungsi sebagai jangkar visual yang tampak bersahaja dan terkendali.

Jadi bagaimana semua ikatan ini dalam mendesain antarmuka untuk web? Yah, itu jarang terjadi. Anda lebih suka bersenang-senang dengan konsep ini jika Anda pernah mendesain ikon dan logo.

Final

Kami telah membahas banyak hak di sini! Mulai sekarang, cobalah untuk mempertimbangkan prinsip-prinsip ini setiap kali Anda melihat desain atau karya seni apa pun. Cobalah untuk memahami jika creators memperhitungkan hubungan visual, menerapkannya secara aktif dan konstruktif. Ingatlah bahwa untuk menjadi efektif dalam menggunakan ide-ide ini, Anda harus berlatih! Sementara Anda melakukannya, prinsip-prinsip ini akan membantu Anda menikmati merancang lebih banyak.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.