Diberi skema warna, bagaimana cara saya mendaftar ke desain situs web?


22

Supaya ada sesuatu yang konkret untuk dibahas, katakan saya memiliki skema warna ini:

palet warna nada musim semi

Sumber

Ada banyak artikel tentang cara memilih skema warna yang koheren berdasarkan warna komplementer, warna monokromatik, dll. Namun, begitu saya memiliki satu set warna, bagaimana cara menentukan warna mana yang merupakan tajuk, warna mana yang taut, warna mana yang taut, mana yang menjadi latar belakang? dan teks. Bahkan jika saya memutuskan bahwa saya ingin cahaya pada skema gelap atau gelap, menempatkan sisa warna pada layar masih dapat membuat situs terlihat jelek.

Apakah ada aturan praktis atau pedoman umum yang membantu seseorang memutuskan warna mana yang digunakan?


2
Jawabannya adalah Anda memilihnya berdasarkan apa yang terlihat bagus, dan mencapai tujuan desain. Sayangnya, tidak ada formula untuk ini.
DA01

Yah @ DA01 sudah mengatakannya, plus, Anda tidak dapat menerapkan skema warna yang diberikan ke situs web mana pun. Sebaliknya Anda memutuskan skema warna sesuai dengan situs web.
ikartik90

1
Pertanyaan bagus! Sayangnya gambar itu adalah 404 sekarang.
Animesh

Bagi mereka yang bertanya-tanya, saya telah membuat ulang skema warna dari tautan mati di atas. Memilih kode warna dari jawaban dan komentar memberi saya palet ini: color.adobe.com/create/color-wheel/…
springloaded

Jawaban:


13

Saya melihat banyak orang berkomentar hal-hal seperti "tidak ada jawaban yang tepat" yang saya (agak) tidak setuju dengan ... Pasti ada setidaknya satu jawaban yang benar, mungkin beberapa dan saya yakin ada banyak jawaban yang salah juga, desain yang baik adalah tentang mencapai solusi terbaik berdasarkan sumber daya dan waktu yang tersedia untuk Anda. Dan tentu saja solusi semacam itu akan lebih besar daripada beberapa alternatif. Anda telah memberi kami palet warna untuk tujuan diskusi jadi, saya akan melakukan itu dan menjawab pertanyaan Anda berdasarkan palet warna yang disediakan. (Mengingat saya belum melihat tata letak yang Anda kerjakan dengan ini masih akan cukup luas tetapi akan memiliki beberapa proses untuk Anda ikuti.)

Jadi, warna pertama yang ingin saya pilih saat membuat skema warna dalam proyek web adalah latar belakang untuk bodi dan warna teks utama. Biasanya merupakan ide yang baik untuk memilih dua warna yang paling kontras untuk mengisi peran ini dan palet contoh Anda tidak terkecuali sehingga dalam hal ini warnanya adalah # DEE1DD dan # 28363D. Sekarang kita harus memutuskan mana yang akan digunakan untuk teks dan mana yang akan digunakan untuk latar belakang dan dalam kebanyakan kasus saya mencoba menggunakan warna yang lebih terang untuk latar belakang dan yang lebih gelap untuk teks. Sudah ada penelitian yang cukup besar untuk menunjukkan bahwa kita membaca warna gelap pada warna terang lebih mudah daripada warna terang pada gelap sehingga itulah yang biasanya saya default kecuali ada alasan untuk tampilan yang lebih gelap (seperti Anda sedang melakukan situs web untuk logam berat band atau sesuatu ... Aku akan menganggap itu tidak terjadi di sini). Begitu,

Selanjutnya saya ingin beralih ke apa yang saya pikir adalah item terpenting berikutnya, yaitu hyperlink. Anda ingin warna yang cukup kontras dari latar belakang agar tidak sulit dibaca tetapi juga cukup kontras dari teks agar terlihat. Dalam contoh ini sebagian besar hijau yang lebih ringan tidak akan terbaca pada latar belakang cahaya sehingga jawaban yang paling jelas adalah # 2F575D.

Selanjutnya Anda menyinggung header yang perlu diwarnai, dan sekali lagi kita perlu kontras dari latar belakang. Untuk kepentingan minimalis, saya mencoba dan menggunakan kembali warna yang telah saya gunakan di dalam tubuh, dan dalam hal ini warna teks mungkin terlalu gelap untuk mengisi ruang yang besar sehingga saya cenderung memilih # 2F575D dan untuk semua alasan di atas saya akan menggunakan warna tubuh latar belakang # DEE1DD Untuk mengisi teks atau tautan di header.

Akhirnya saya membahas elemen desain yang tidak penting seperti hover state terakhir dan kami punya beberapa hijau yang berbeda untuk dipilih. Sekali lagi ini mungkin perlu kontras dari latar belakang cukup karena tautan tidak hilang ketika berguling jadi jika cenderung menggunakan # 658B6F ...

Dan ... Voila! Anda sekarang memiliki skema 4 warna (dasar). Saya harap proses ini membantu Anda sebanyak itu membantu saya :)!


3

Situs web yang Anda tautkan menunjukkan kepada Anda cara menggunakan warna-warna itu:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

Saya biasanya memercikkan warna saya sendiri dalam desain - bahkan jika saya tahu mereka sedikit salah - setidaknya saya memiliki sekitar dua warna solid atau setidaknya satu. Kemudian ketika saya telah meletakkan ide saya, saya mengambil warna utama saya (yang paling saya gunakan) dan menambahkannya ke roda warna. Dengan begitu saya mengganti warna saya yang lain. Atau saya mencoba menemukan beberapa gambar yang memiliki sebagian besar warna asli saya.

Saya telah membaca artikel yang mengatakan, ambil gambar dan desain karya Anda berdasarkan warna itu, saya tidak bisa melakukan itu. Saya membuat desain sendiri, dengan setidaknya satu warna dalam pikiran dan kemudian menggunakan teknik teori warna

semoga membantu


> Situs web yang Anda tautkan menunjukkan kepada Anda cara menggunakan warna-warna itu: Benar, itu pertanyaan saya, apa 'algoritma' untuk mencari tahu sendiri?
Shahbaz

Saya kira tidak ada. Misalnya, jika saya harus menambahkan warna itu ke situs web itu, saya tidak akan mengaturnya dengan cara itu. Misalnya cara mereka menggunakan warna di sini lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/... mengerikan menurut pendapat saya, meskipun warnanya sangat bagus tapi - menurut saya - buruk diatur. Jadi, Anda harus bermain dengan warna. Saya tidak berpikir ada cara mekanik - jika ada saya akan merekomendasikan Anda bermain dengan desain Anda dan jangan menggunakannya!
aurel

3

Tidak ada formula tentang apa yang harus diambil, yang harus menjadi latar belakang dan sebagainya, itulah sebabnya desain adalah seni.

Biasanya saya akan melakukan banyak ujicoba dengan set warna yang saya miliki, misalnya warna font mana yang terlihat lebih baik di latar belakang mana.

Meskipun ada aturan praktis, yaitu untuk membedakan warna yang digunakan, kebanyakan orang akan mengatakan ini adalah akal sehat, seperti font warna terang dengan latar belakang warna gelap. Kemudian mungkin muncul, bagaimana Anda menentukan warna untuk sub-komponen, seperti kotak peringatan, navigasi dan sebagainya.

Seperti yang saya lihat, Anda harus memiliki struktur terbuka untuk situs web Anda, maka setelah itu Anda perlu menentukan mana konten utama Anda, bagaimana Anda ingin menyajikannya. Mungkin warna yang lebih lembut pada subkomponen, yang tidak perlu perhatian segera.

Bagaimana Anda tahu itu baik atau tidak? Mudah, segera setelah Anda mengatakan "Ini bagus", saat itulah bagus. Itu selalu membantu untuk mendapatkan pendapat kedua dari orang lain.

Secara keseluruhan, teruslah mencoba dengan kombinasi warna, jangan hanya terpaku pada satu, dan Anda mungkin akan terkejut dengan komposisi yang mungkin Anda raih di akhir.

@Color Combination: Kombinasi yang disediakan oleh situs web ini cukup baik untuk memulai.


2

Saya teringat saat ketika istri pertama saya dan saya mendapatkan panel kanvas besar dan beberapa tabung cat akrilik. Kami meletakkan kanvas di lantai dan tanpa sengaja menyemprotkan warna acak di atasnya. Kami membiarkannya kering dan menggantungnya di atas perapian. Seiring waktu, beberapa tamu berkomentar betapa indahnya itu terlihat dan berpikir itu adalah karya seni mahal ... yaitu, sampai kami memberi tahu mereka bagaimana itu dilukis. Semuanya ada di mata yang melihatnya.

Setelah menceritakan kisah itu, saya harus mengatakan bahwa saya setuju ada kombinasi warna yang tidak cocok, jelek bagi sebagian besar pemirsa. Namun, tidak banyak dari mereka. Saya tidak berpikir Anda harus terlalu menekankan untuk memperbaikinya . Apa yang terkandung di dalam situs web dapat menggantikan banyak pilihan warna yang buruk. Konten akan selalu truf desain.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.