{"id":7886,"date":"2020-09-24T13:52:48","date_gmt":"2020-09-24T06:52:48","guid":{"rendered":"http:\/\/crocodic.com\/?p=7886"},"modified":"2020-09-24T13:53:50","modified_gmt":"2020-09-24T06:53:50","slug":"bagaimana-mengkombinasikan-warna-di-ui-design","status":"publish","type":"post","link":"http:\/\/crocodic.com\/id\/bagaimana-mengkombinasikan-warna-di-ui-design\/","title":{"rendered":"Bagaimana mengkombinasikan warna di UI Design"},"content":{"rendered":"

<\/p>\n\n\n\n

Warna\ntidak menambah kualitas desain agar terlihat lebih nyaman, namun itu\nmemperkuatnya — <\/em>Pierre Bonnard<\/em><\/strong><\/p>\n\n\n\n

Dalam pembuatan UI, warna adalah salah\nsatu tahap dimana desainer selalu memakan berjam-jam dalam memilih palet warna\nyang cocok. Disini kita akan membahas beberapa cara untuk membantu\ndesainer  dapat memilih warna yang kuat\nuntuk UI dan mempercepat proses agar lebih produktif.<\/p>\n\n\n\n

Gunakan aturan 60 \u2013 30 \u2013 10<\/strong><\/h2>\n\n\n\n

Teknik ini berasal dari interior\ndesain, seringkali diterapkan dalam mendekorasi isi rumah, teknik ini sangatlah\nsederhana dalam menempatkan skema warna. Ide ini dimaksudkan untuk memberi\nkeseimbangan dan menciptakan rasa nyaman ketika mata bergerak melihat dari satu\ntitik fokus ke titik berikutnya. Cara ini sangat mudah dengan mengkombinasikan\ndalam proporsi 60% – 30% – 10%.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Wall paints, furnitures, accesories.<\/p>\n\n\n\n

60%\nadalah warna dominan, 30% adalah warna sekunder dan 10% untuk warna aksen.<\/em><\/p>\n\n\n\n

Skema proporsi warna seperti itu\ndianggap menyenangkan bagi mata manusia karena dapat mempersepsikan elemen\nvisual secara bertahap. Dengan mengetahui proporsi warna yang tepat dapat\nmembantu desainer dalam menggabungkan warna tanpa terlihat berantakan dalam\npenggabungan warnanya.<\/p>\n\n\n\n

Pertahankan Kontras<\/strong><\/h2>\n\n\n\n

Dalam mengkombinasikan warna\nkontras warna adalah bagian yang sangat penting dari komposisi visual. Ini\nmembawa setiap komponen UI dapat terlihat, desainer menggunakan tingkat kontras\ntergantung tujuan yang ingin dicapai. Semisal, jika anda ingin memberikan perhatian\nkhusus pada elemen UI tertentu, sebaiknya terapkan dua warna yang kontras\nseperti biru dan merah, kontras tinggi seperti ini sering digunakan untuk\nmendesain tombol CTA.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Contoh\nwarna kontras pada aplikasi<\/a> Absensee<\/p>\n\n\n\n

Namun, berbicara tentang komponen-komponen\nUI secara keseluruhan, terlalu banyak warna kontras mungkin tidak terlalu\nberfungsi dengan baik. Jika konten dan latarbelakang terlalu kontras satu sama\nlain, maka akan sulit untuk membaca atau memindai teks. Karena itu desainer\ndisarankan untuk membuat tingkat kontras dan menerapkan warna kontras hanya\nuntuk elemen yang ingin disorot.<\/p>\n\n\n\n

Memaknai Warna<\/strong><\/h2>\n\n\n\n

Warna dapat menciptakan emosi, arti\nwarna dapat bervariasi tergantung pada budaya dan keadaan. Setiap warna pula\nmemiliki pengaruh tersendiri pada setiap fungsinya dan reaksi pengguna. Dapat\nmembantu desainer untuk mentransfer pesan yang tepat dan membuat pengguna untuk\nmelakukan tindakan yang diharapkan . Berikut daftar pendek arti dari warna.<\/p>\n\n\n\n

Merah.<\/strong> Ini melambangkan perasaan baik dan buruk termasuk cinta,\nkeyakinan, gairah, dan kemarahan.<\/p>\n\n\n\n

Orange.<\/strong> Warna yang energik dan hangat membawa perasaan senang.<\/p>\n\n\n\n

Kuning.<\/strong> Ini adalah warna kebahagiaan, sinar matahari, kegembiraan,\ndan kehangatan.<\/p>\n\n\n\n

Hijau<\/strong>. Warna alam yang membawa perasaan tenang dan memperbarui.<\/p>\n\n\n\n

Biru.<\/strong> Ini sering mewakili beberapa gambar perusahaan. Bisa\ndikaitkan dengan jarak dan kesedihan.<\/p>\n\n\n\n

Ungu.<\/strong> Lama dikaitkan dengan royalti dan kekayaan. Itu juga warna\nmisteri dan sihir.<\/p>\n\n\n\n

Hitam.<\/strong> Itu berhubungan dengan tragedi dan kematian dan menandakan\nsebuah misteri. Pada saat yang sama, itu bisa menjadi tradisional dan modern.<\/p>\n\n\n\n

Putih.<\/strong> Warna berarti kemurnian dan kepolosan, serta keutuhan dan\nkejelasan.<\/p>\n\n\n\n

Jauhi Warna Abu \u2013 Abu Murni dan Hitam Pekat<\/strong><\/h2>\n\n\n\n

Salah satu trik warna paling\npenting yang pernah saya pelajari adalah menghindari warna abu-abu tanpa\nsaturasi dan warna hitam pekat.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Contoh\npenggunaan warna tanpa saturasi<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Ingat untuk selalu menambahkan\nsedikit saturasi ke warna Anda. Secara sadar akan terlihat lebih alami dan\nakrab bagi pengguna.<\/p>\n\n\n\n

Inspirasi<\/strong><\/h2>\n\n\n\n

Ketika berbicara tentang referansi\nUI maka ada beberapa tempat seperti pinterest, behance, ui8, dll. Namun dribble\nadalah tempat terbaik, karena di sana ada alat untuk mencari warna sehingga\nketika anda ingin melakukan penelitian visual tentang bagaimana warna tertentu digunakan\noleh desainer lain, bisa dibuka di sini dribble.com\/colors<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Alat<\/strong><\/h2>\n\n\n\n

Untuk mempermudah, saya\nmengumpulkan beberapa alat untuk memilih palet warna. Ini akan menghemat banyak\nwaktu.<\/p>\n\n\n\n

Ini adalah website<\/a> favorit saya\nuntuk mecari warna. Anda cukup mengunci warna yang dipilih dan tekan spasi pada\nkeyboard untuk menghasilkan palet-palet. Coolors juga memberi anda kemampuan\nuntuk mencari warna dari gambar yang anda unggah. Bisa dibuka di sini\ncoolors.co<\/p>\n\n\n\n

<\/p>\n\n\n\n

Coolors.co<\/strong><\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Kuler<\/strong><\/h2>\n\n\n\n

Website<\/a> Adobe kuler ini telah bersama\nkami untuk waktu yang lama. Ini tersedia di browser, dan di versi desktop. Jika\nAnda menggunakan versi desktop, Anda dapat mengekspor skema warna ke Photoshop.\nBisa dibuka di sini color.adobe.com<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Keberhasilan produk digital sangat tergantung pada warna yang dipilih untuk UI-nya. Warna yang tepat membantu pengguna merasa nyaman dengan suatu produk. Konsultasikan dengan tim konsultan kami di Konsultasi Sekarang<\/a><\/p>","protected":false},"excerpt":{"rendered":"

Warna tidak menambah kualitas desain agar terlihat lebih nyaman, namun itu memperkuatnya — Pierre Bonnard Dalam pembuatan UI, warna adalah salah satu tahap dimana desainer selalu memakan berjam-jam dalam memilih palet warna yang cocok. Disini kita akan membahas beberapa cara untuk membantu desainer  dapat memilih warna yang kuat untuk UI dan mempercepat proses agar lebih produktif. […]<\/p>\n","protected":false},"author":29,"featured_media":8981,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[354,355],"tags":[95,366,387],"class_list":["post-7886","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocodic-design","category-crocodic-dec","tag-design-3","tag-ui-design","tag-ui-ux-design"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/comments?post=7886"}],"version-history":[{"count":2,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7886\/revisions"}],"predecessor-version":[{"id":8852,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/posts\/7886\/revisions\/8852"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media\/8981"}],"wp:attachment":[{"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/media?parent=7886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/categories?post=7886"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/crocodic.com\/id\/wp-json\/wp\/v2\/tags?post=7886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}