Media Pengembangan Web & App | by APPKEY

Desain Design Web Mudah dan Cepat, Inilah Cara Membuat Skema Warna Sendiri

Mudah dan Cepat, Inilah Cara Membuat Skema Warna Sendiri

-

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  Cara Memilih Skema Warna Terbaik untuk Aplikasi Anda

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

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.
  2. analog1

  3. 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.
  4. analog2

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.
  2. complementary1

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

Artikel Terkait  11 Tren Desain Web dan UI Teratas yang Wajib diikuti di Tahun ini

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.
  2. splitcomplementary1

  3. Palet lain dengan berbagai macam chromas.
  4. splitcomplementary2

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.
  2. triadic1

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

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.
  2. pelengkapganda1

  3. 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.
  4. pelengkapganda2

  5. Ini bekerja dengan baik untuk skema warna yang lebih gelap.
  6. pelengkapganda3

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  Pengelola Aplikasi Wajib Baca! Survei Data Pada Aplikasi

Contoh:

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

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

  5. 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).
  6. 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:

Kesimpulan

Artikel Terkait  Cara Mewujudkan Pengalaman Onboarding Terbaik pada Aplikasi

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.


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

Subscribe Sekarang

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

Blog Post Ranking 10

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...

Proses Komunikasi: Encoding dan Decoding

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

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

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...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Apa Itu Cache Memory? Pengertian dan Fungsinya

Apa itu cache memory? Orang yang setiap hari berinteraksi dengan internet, istilah cache tentu saja bukan lagi istilah yang...

Layout adalah : 4 Prinsip Dasar Desain Layout

Desain layout adalah salah satu bagian dari seni kita semua tahu,  untuk bisa menampilkan seni dengan baik, kita harus...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya