Media Pengembangan Web & App | by APPKEY

DesainDesign WebSkema Warna : Mudah dan Cepat, Inilah Cara Membuatnya...

Skema Warna : Mudah dan Cepat, Inilah Cara Membuatnya Sendiri

-

Last Updated on January 29, 2022 by

Color scheme atau skema warna adalah gabungan dua atau lebih warna yang berbeda-beda ke dalam sebuah komposisi. Setiap warna memiliki makna tertentu dan terkadang secara sadar dan tidak sadar makna ini berdampak langsung pada cara pengunjung Anda memandang situs Anda.

Warna yang Anda pilih dapat mendukung atau bertentangan dengan identitas brand yang Anda coba buat. Pada artikel ini, kita akan mempelajari mengenai jenis-jenis skema warna dan cara membuat skema warna.

Jenis Skema Warna Tradisional

skemawarna1

Ada sejumlah standar color scheme yang memudahkan pembuatan skema baru, terutama bagi pemula. Di bawah ini adalah skema tradisional, dengan beberapa contoh untuk masing-masing skema.

Artikel Terkait  Apa itu Teori Gestalt? Dan Penerapannya Pada Desain UI Maupun UX

1. Monokromatik

Monokromatik adalah color scheme yang paling sederhana untuk dibuat, karena semuanya diambil dari rona yang sama. Skema monokromatik mudah dibuat, tetapi juga bisa membosankan jika dilakukan dengan buruk. Menambahkan warna netral yang kuat seperti putih atau hitam dapat membantu menjaga agar tetap menarik.

Contoh:

Berikut adalah tiga contoh color scheme monokrom. Untuk sebagian besar skema ini, warna pertama (jika kita melihatnya dari kiri ke kanan) kemungkinan besar akan digunakan untuk tajuk berita.

Warna kedua akan digunakan untuk teks pada tubuh atau mungkin latar belakang. Warna ketiga kemungkinan besar akan digunakan untuk latar belakang dan dua warna terakhir akan digunakan sebagai aksen dalam grafik.

monokromatik1

monokromatik2

monokromatik3

2. Analog

Skema warna analog adalah color scheme termudah berikutnya untuk dibuat. Skema analog dibuat dengan menggunakan tiga warna yang bersebelahan pada color wheels atau roda warna.

Secara tradisional, skema warna analog semuanya memiliki tingkat chroma yang sama, tetapi dengan menggunakan tone, shades, dan tints kita dapat menyesuaikannya dengan kebutuhan kita untuk mendesain situs web.

Contoh:

    1. Ini adalah skema warna analog tradisional, dan meskipun menarik secara visual, kontras antara warna-warna tersebut tidak cukup untuk desain situs web yang efektif.

analog1

    1. Di bawah ini adalah color scheme dengan corak yang sama seperti yang di atas, tetapi dengan kroma yang disesuaikan untuk memberi lebih banyak variasi. Sekarang warnanya jadi jauh lebih cocok untuk digunakan di situs web.

analog2

3. Complementary

Skema complemetary atau pelengkap dibuat dengan menggabungkan warna dari sisi berlawanan roda warna. Dalam bentuk paling dasar, skema ini hanya terdiri dari dua warna, tetapi dapat dengan mudah diperluas menggunakan tone, tints, dan shades. Namun, menggunakan warna yang sangat berlawanan dengan chroma dapat mengganggu secara visual

Contoh:

    1. Color scheme ini sangat serbaguna.

complementary1

    1. Color scheme pelengkap lainnya dengan berbagai macam chromas. Perhatikan bagaimana menempatkan warna merah dan hijau yang lebih cerah di samping satu sama lain.

complementary2

Artikel Terkait  5 Masalah Desain Aplikasi UI/UX yang Sering Dihadapi Developer

4. Split Complementary

Split complementary atau skema pelengkap terpisah menambah kompleksitas lebih dari skema komplementer biasa. Dalam skema ini, alih-alih menggunakan warna yang berlawanan, Anda dapat menggunakan warna di kedua sisi rona yang berlawanan dengan rona dasar Anda.

Contoh:

    1. Skema di mana kuning-hijau adalah rona dasar. Penting untuk memiliki cukup perbedaan dalam chroma dan nilai antara warna yang Anda pilih untuk jenis skema ini.

splitcomplementary1

    1. Palet lain dengan berbagai macam chromas.

splitcomplementary2

5. Triadic

Triadic atau Skema triadik terdiri dari warna yang sama-sama ditempatkan di sekitar roda warna dengan 12 jari-jari. Ini adalah salah satu color scheme yang lebih beragam. Membuat color scheme ini memang agak sulit dibuat, tetapi akan menambahkan banyak daya tarik visual pada desain.

Contoh:

    1. Menggunakan versi yang sangat pucat atau gelap dari satu warna dalam triad, bersama dengan dua shades/ tones/ tints dari dua warna lainnya membuat satu warna hampir berfungsi sebagai warna netral dalam skema.

triadic1

    1. Secara bergantian, menggunakan satu rona yang sangat cerah dengan rona teredam yang dipasangkan membuat rona cerah tunggal lebih menonjol.

triadic2

6. Pelengkap Ganda (Tetradic)

Skema warna tetradik mungkin merupakan skema yang paling sulit dibuat.

Contoh:

    1. Cara terbaik untuk menggunakan skema seperti ini adalah dengan menggunakan satu warna sebagai warna utama dalam sebuah desain dan yang lainnya hanya sebagai aksen.

pelengkapganda1

    1. Skema warna tetradik dapat bekerja dengan baik untuk membuat color scheme dengan kromas dan nilai yang serupa. Cukup tambahkan netral (seperti abu-abu tua atau hitam) untuk teks dan aksen.

pelengkapganda2

    1. Ini bekerja dengan baik untuk skema warna yang lebih gelap.

pelengkapganda3

7. Custom

Skema warna custom / kustom adalah yang paling sulit dibuat dari pada yang lain. Alih-alih mengikuti color scheme standar yang dibahas di atas, skema kustom tidak didasarkan pada aturan formal apa pun.

Artikel Terkait  Balsamiq Mockup : Panduan Tersimpel Membuat Mockup dengan Balsamiq

Contoh:

    1. Warna-warna di sini semuanya memiliki tingkat kroma dan saturasi yang serupa.

custom1

    1. Menggunakan warna dengan chroma dan saturasi yang serupa efektif dan menciptakan rasa kohesi di seluruh color scheme.

custom2

    1. Menggunakan satu warna dengan chroma tinggi di antara warna lain dengan chroma lebih rendah adalah metode lain yang efektif (warna chroma yang lebih tinggi dapat bertindak sebagai aksen).

custom3

Membuat Skema Warna

Membuat color scheme tidak serumit yang dipikirkan banyak orang dan ada beberapa trik yang dapat Anda terapkan untuk membuat palet warna yang bagus. Mari kita lupakan sejenak jenis color scheme yang telah disebutkan tadi, dan membuat beberapa palet kustom (yang secara teknis disebut sebagai kumpulan warna yang tidak mengikuti salah satu pola tradisional yang telah dijelaskan sebelumnya).

Meskipun penting untuk mengetahui cara berbagai warna berinteraksi dan bagaimana skema tradisional dibuat, untuk sebagian besar proyek desain Anda kemungkinan besar akan membuat palet yang tidak sepenuhnya mengikuti pola yang telah ditentukan sebelumnya. Jadi, di sini saya akan mencoba untuk membuat palet warna untuk sebuah situs web.

Ini merupakan color scheme yang akan digunakan untuk situs kotak langganan kami, berikut skema monokromatik tradisional, dengan abu-abu terang ditambahkan sebagai netral.

skemawarna2

Saya menggunakan color scheme yang terdiri dari corak dan corak abu-abu.

skemawarna3

Ini hampir merupakan color scheme komplementer terpisah, tetapi kami telah menggunakan kuning (yang melengkapi ungu) dan merah yang diredam bersama dengan abu-abu.

skemawarna4

Terkadang palet warna Anda akan tumbuh dan berkembang saat Anda menambahkan lebih banyak warna. Di sini, kami telah menghilangkan warna ungu dan kuning, dan sebagai gantinya tetap menggunakan warna merah dan menambahkan beberapa warna biru. Ini adalah palet yang lebih bersih dan lebih modern yang lebih sesuai dengan brand yang akan dipasarkan.

skemawarna5

Menambahkan Beberapa Warna Netral

Netral adalah bagian penting lainnya dalam membuat color scheme. Abu-abu, hitam, putih, coklat, dan putih pudar umumnya dianggap sebagai warna netral. Cokelat, cokelat tua, dan keputihan cenderung membuat skema warna terasa lebih hangat (karena semuanya hanya berupa corak, dan semburat jingga dan kuning).

Warna abu-abu akan memberikan kesan hangat atau sejuk tergantung pada warna sekitarnya. Hitam dan putih juga bisa terlihat hangat atau sejuk tergantung pada warna sekitarnya.

skemawarna6

Hitam dan putih adalah warna netral termudah untuk ditambahkan ke hampir semua color scheme. Untuk menambah daya tarik visual, pertimbangkan untuk menggunakan warna abu-abu yang sangat terang atau sangat gelap sebagai pengganti putih atau hitam.

Menggunakan Foto untuk Membuat Skema Warna

Salah satu cara favorit pribadi saya untuk membuat color scheme adalah dengan menggunakan foto. Anda dapat melakukannya di Photoshop yakni dengan menggunakan tool eyedrop atau aplikasi lainnya seperti Adobe Capture.

Apabila Anda menggunakan Adobe Capture, Anda dapat mengupload gambar atau menggunakan kamera Anda. Ini bagus untuk saat-saat Anda mungkin terinspirasi oleh objek fisik. Anda juga dapat mengambil gambar dari akun Creative Cloud Anda.

Jika Anda bingung dengan warna apa yang ingin Anda gunakan dalam desain situs web, coba cari kata-kata terkait di Adobe Stock. Terkadang hal ini dapat menghasilkan skema warna yang mungkin tidak terpikirkan oleh Anda sendiri.

Anda juga bisa mengimpor palet warna ke Illustrator atau Photoshop (atau hanya melihat kode hex untuk menemukan warna yang benar untuk program lain yang Anda gunakan). Temukan foto yang Anda suka di Adobe Stock atau potret sendiri foto yang menurut Anda membangkitkan perasaan desain yang ingin Anda buat. Contohnya adalah gambar dibawah ini.

skemawarna7

Inilah color scheme asli yang diberikan Capture saat menggunakan gambar ini:

Artikel Terkait  14 Aturan Wajib tentang Cara Membuat Aplikasi Web yang Intuitif

Kesimpulan

Pada awalnya mungkin Anda akan merasa agak kesulitan untuk membuat color scheme yang tepat dan enak dipandang, cara terbaik untuk belajar membuat yang indah adalah dengan terus berlatih. Jika Anda melihat perpaduan warna yang sangat indah atau mencolok dalam kehidupan sehari-hari buatlah color scheme-nya.

Anda dapat menggunakan alat otomatis untuk membuat color scheme, yakni dengan menggunakan beberapa aplikasi yakni Photoshop atau Adobe Capture. Pemilihan color scheme yang tepat dan sesuai dengan branding akan membantu peningkatan jumlah pengunjung pada pada website Anda.

Kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru mengenai web design dan lainnya.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya