Rastgele Bir Rengi Tasarım Yönüne Çevirme

1. Bir Cümlelik Tasarım Zorluğu Yazın

Renk oluşturmadan önce ne tasarladığınızı bilmeniz gerek. Bir zorluk olmadan sonucu yalnızca şahsen bunu beğenip beğenmediğinize göre yargılayabilirsiniz. Net bir kısa özet, rengin belirli bir kitleyi, mesajı ve eylemi destekleyip destekleyemeyeceğini yargılamanız açısından önemlidir.

Projeyi, hedef kitleyi ve istenen tepkiyi içeren bir cümle yazın. Örneğin: "Bağımsız fotoğrafçılara hizmetlerini profesyonel ama erişilebilir şekilde sunmalarına yardımcı olan bir açılış sayfası oluşturun." Başka bir kısa özet şöyle olabilir: "Üniversite öğrencilerini yerel bir geri dönüşüm programına katılmaya teşvik eden bir kampanya kimliği tasarlayın."

Cümleniz renkleri açıklamak zorunda değildir. İletişim sorununu tanımlamalıdır. Bu da oluşturulan her sonucu önceden belirlenmiş bir görsel cevaba zorlamanızdan sizi alıkoyuyor.

Proje yeni bir ticari fikirle bağlantılıysa, çevrimiçi bir işletme başlatmadan önce alınması gereken 12 kararı anlatan rehberimiz, tasarım kimliğine başlamadan önce kitleyi, teklifi ve müşteri yolculuğunu açıklamaya yardımcı olabilir.

2. Sonsuz Kaydırma Olmadan Renkler Oluşturun

Rastgele Renk Oluşturucusunu açın ve birkaç sonuç oluşturun. Tehlike, aracın zaten istediğiniz rengi gösterene kadar devam etmektir. Bu rastgele keşfi mevcut tercihinizin gizli onayına dönüştürüyor.

Başlamadan önce bir durdurma kuralı oluşturun. Tam olarak beş renk oluşturmaya ve üçüncüsünü geliştirmeye karar verebilirsiniz. Başka bir yöntem altı aday kaydetmek ve Rastgele Sayı Oluşturucuyu kullanarak bir ile altı arası bir sayı seçmektir.

Rastgele seçim, kullanılamayan bir sonuç yayınlamanız gerektiği anlamına gelmez. Seçilen rengi reddetmeden önce ciddi şekilde araştırmayı kabul ettiğiniz anlamına gelir. Oluştur düğmesine tekrar basmak yerine, en az on beş dakika bunun olasılıklarını keşfetmeyle geçirin.

Seçilen rengi ve oluşturma numarasını notlarınıza kaydedin. Bu egzersise net bir başlangıç noktası verir ve projenin bağlantısız ekran görüntülerinin sonsuz bir koleksiyonuna dönüşmesini engeller.

3. Rengi Kullanılabilir Biçimlerde Kaydedin

Ekran görüntüsü yeterli bir renk kaydı değildir. Oluşturulan HEX, RGB ve HSL değerlerini çalışan bir belgeye kopyalayın. Her biçim aynı görüntülenen rengi farklı şekilde açıklar ve iş akışının farklı bir bölümünde yararlı olabilir.

MDN'nin CSS renk değerleri rehberi renklerin onaltılık gösterim, rgb(), hsl() ve daha yeni renk işlevleri kullanılarak nasıl temsil edilebileceğini açıklıyor.

Orijinal değeri değiştirilmemiş şekilde kaydedin. Daha sonra destekleyici varyasyonlar oluşturacaksınız, ama orijinal sonuç tüm egzersiz boyunca referans noktası olarak mevcut kalmalıdır.

4. Adı Yerine Özelliklerini İnceleyeyin

Renk adları tutarsızdır. Bir kişinin "okyanus mavisi" başka birinin turkuaz, firuze ya da siyan olabilir. Adı tartışmak yerine, rengin nasıl davrandığını etkileyen özellikleri inceleyeyin.

Açıklıkla başlayın. Renk doğal olarak koyu bir ön plan, açık bir arka plan ya da orta ton bir aksan için uygun mu görülüyor? Sonra doygunluğuna bakın. Yüksek doygunluklu bir sonuç güçlü vurgu oluşturabilir ama geniş bir alana uygulandığında yorucu hale gelebilir. Soluk bir renk sakin bir atmosfer yaratabilir, ama önemli eylemler etrafında daha güçlü kontrast gerekebilir.

Son olarak sıcaklık ve çevre ilişkilerini göz önüne alın. Renk sıcak mı yoksa soğuk mu eğiliyor? Saf beyaz, sıcak gri, kömür ve siyahın yanında nasıl değişiyor? Gerçek bir tasarım içine girdikten sonra renk asla izole durumda görülmez.

5. Klişelere Güvenmeden Bir Ruh Durumu Oluşturun

"Mavi güven anlamı taşır", "yeşil doğayı temsil eder" ya da "mor lüksü ifade eder" gibi evrensel iddialar yapmak cazip gelmektedir. Bu bağlantılar bazen yararlı olabilir, ama bunlar sabit kurallar değildir. Anlam kültür, bağlam, endüstri, tipografi, görüntü ve çevre renkleriyle değişir.

Hemen bir duyguyu atamak yerine, iki ya da üç olası yorumlamayı oluşturun. Soluk bir yeşil, doğal cilt bakımı, finansal istikrar ya da eğitim uygulaması için uygun olabilir. Güçlü bir turuncu, bir projede dostluğu, başka birinde aciliyet ve üçüncüsünde ucuz enerjiyi iletebilir.

Her olası yorumlama için üç sıfat yazın. Sonra bu sıfatları orijinal tasarım zorlunluğuyla karşılaştırın. Renk ve proje arasında en yararlı ilişkiyi kuran yorumlamayı seçin.

Bu yöntem aynı rengin tek bir evrensel psikolojik anlamı varmış gibi davranmadan farklı öyküleri desteklemesine izin veriyor.

6. Renk İçin Bir Proje Konsepti Oluşturun

Egzersizi gerçek bir müşteri yerine pratik amaçlı kullanıyorsanız, renge hayali bir proje verin. Bir proje konsepti sizi çekici ama açıklanmamış bir ruh tahtası oluşturmak yerine, kitle, ton, düzen ve içerik hakkında kararlar vermeye zorlayıyor.

Ad Oluşturucuyu kullanarak hayali bir uygulama, kafe, giyim markası, karakter, etkinlik ya da hizmet için bir ad oluşturun. Sonra projenin ne sunduğu ve kimi hizmet ettiği hakkında kısa bir açıklama yazın.

Yalnızca rengi açıkladığı için bir ad seçmekten kaçının. Her yeşil konsepte "Orman" ya da her mavi konsepte "Okyanus" adı vermek yaratıcı yönü sınırlandırıyor. Ad proje biçimini tanımlamalı, renk ise onun kişiliğine katkıda bulunmalıdır.

Konseptiniz basit kalabilir: "Northline, karmaşık proje yönetimi yazılımına ihtiyaç duymayan müşteri son tarihlerini organize etmesi gereken serbest çalışanlar için bir planlama uygulamasıdır." Bu, kasıtlı görsel seçimler yapmaya başlamak için yeterli bağlam.

7. Rengi Görsel Kurallara Çevirin

Tasarım yönü bir paletten daha fazlasını içeriyor. Tipografi, boşluk, şekiller, simge stili, fotoğraf ve hareket hepsi seçilen rengin nasıl yorumlandığını etkiliyor.

Parlak bir sarıyı keskin köşeler, sıkıştırılmış tipografi ve yüksek kontrastlı fotoğrafla eşleştirilmiş hayal edin. Enerji verici ve bozucu hissettirilebilir. Aynı sarı, yuvarlak kartlar, cömert boşluk ve dostane görseller ile birleştirildiğinde oyuncu ve erişilebilir görünebilir.

Başlık stili, gövde metin stili, iki düğme şekli, örnek kart, görüntü referansı ve seçilen rengi içeren küçük bir yön tahtası oluşturun. Her karar, beşinci adımda seçtiğiniz aynı üç sıfatı desteklemesi gerekir.

Sonuç profesyonel bir vaka çalışması olabilirse, değerinizi kanıtlayan çevrimiçi bir portföy oluşturma rehberimizi inceleyin. Güçlü bir vaka çalışması zorluk, kısıtlamalar ve yönün ardındaki mantığı açıklıyor, yalnızca cilalı son ekranları göstermez.

8. Rengin Ne Kadarının Göründüğünü Kontrol Edin

Bir renk küçük bir düğmede güzel çalışabilir ama tüm sayfaya uygulandığında ezici hale gelebilir. Daha fazla ekran geliştirmeden önce, rastgele rengin ne kadar görsel alan kaplaması gerektiğine karar verin.

60-30-10 konsepti başlangıç egzersizi sağlayabilir: baskın temel için yaklaşık yüzde 60, destekleyici alanlar için yüzde 30, aksan için yüzde 10. Evrensel bir yasa değildir ve arayüz düzenler nadiren mükemmel matematiksel bloklara bölünür. Değeri, sizi oran hakkında düşünmeye zorlayıyor.

Sunum hazırlarken ya da geniş görsel alanların dağılımını tahmin ederken Yüzde Hesaplayıcıyı kullanın. Daha önemlisi, izleyicinin dikkatinin nereye gittiğini kontrol edin.

Yüksek doygunluklu rastgele renkler çoğu zaman daha küçük miktarlarda en iyi sonuç verir. Daha yumuşak renkler, metin ve denetimler açıkça ayırt edilebilir kaldığı sürece geniş yüzeyleri kaplamaya devam edebilir.

9. Nötrler Ekleyin ve İşlevsel Roller Atayın

Rastgele renginiz arka planlar, yüzeyler, metin renkleri ve sınırlardan destek gerektirir. Seçilen rengi birkaç eşit derecede güçlü rakiplerle çevrelemek yerine sınırlı bir nötr temel ekleyin.

Sonra, rastgele rengin aslında ne yaptığını belirleyin. Birincil eylemleri, seçilen navigasyon öğelerini, grafik vurgulamalarını ya da dekoratif görselleri tanımlayabilir. Net bir neden olmadan "etkileşimli" bir yerde ve başka yerde "dekoratif" anlamı taşımasına izin vermeyin.

Google'ın Material Design renk rolleri rehberi paletleri yapılandırılmamış swatch koleksiyonu olarak davranmak yerine renkleri amacına göre atama değerini gösteriyor.

10. Bir Gerçekçi Tasarım Örneği Oluşturun

Yönü yalnızca bir ruh tahtasından onaylamayın. Gerçek metin ve işlevsel öğeler içeren küçük, gerçekçi bir yapıt üretin. Bu açılış sayfası kahramanı, mobil profili, promosyon kartı, etkinlik afişi ya da uygulama panosu olabilir.

Konseptinizin sosyal kimlik gereksiyorsa, Instagram Kullanıcı Adı Oluşturucusu hayali proje için kullanılabilir adlandırma stillerini keşfetmenize yardımcı olabilir. Seçilen kullanıcı adını izole bir dekorasyon olarak göstermek yerine gerçekçi bir profil başlığına ya da kampanya gönderisine yerleştirin.

QR Kod Oluşturucusuyla da işlevsel bir test oluşturabilirsiniz. Poster, kartvizit ya da ambalaj konseptine QR kod ekleyin ve tasarım yönünün pratik bir gereksinimi karşılayıp karşılamadığını görün. QR kod ile arka plan arasında güçlü kontrast koruyun, açık çevre alanını muhafaza edin ve son çıktıyı birden fazla cihazla tarayın.

Gerçek içerik zayıflıkları hızlı ortaya koymaktadır. Geniş bir dikdörtgende etkileyici görünen bir renk, düğme etiketi arkasında, fotoğrafın yanında ya da küçük bir mobil bileşen içinde başarısız olabilir.

11. Yönü CSS'e Taşıyın

Konsept bir web sitesi için tasarlandığında, seçilen değerleri CSS özel özellikleri olarak kaydedin. Başka birinin her rengin neden var olduğunu anlayabileceği anlamlı adlar kullanın.

:root {
  --color-page: #f7f7f4;
  --color-surface: #ffffff;
  --color-text: #1d1e20;
  --color-text-muted: #63666b;
  --color-primary: #7b4de3;
  --color-on-primary: #ffffff;
  --color-border: #d9d9df;
}

Onları bileşenler içinde test ettikten sonra yalnızca hover, basılı ve seçili durumlarını oluşturun. Smashing Magazine'in CSS color-mix() ile paletleri basitleştirme hakkındaki makalesi bağlamsal varyasyonların mevcut tema renklerinden nasıl türetileceğini tartışıyor.

Türetilmiş değerler yine de görsel ve erişilebilirlik testi gerektirir. Otomatik karıştırma tutarlı bir ilişki oluşturabilir, ama her metin, simge ve arka plan kombinasyonunun yeterince açık olup olmadığını belirleyemez.

12. Son Yönü Test Edin ve Belgeleyin

Yönü orijinal sunumunuzdan daha az uygun olan durumlarda test ederek bitirin. Küçük ekranda görüntüleyin, düğmelere uzun metin koyun, destekleyici fotoğrafın kalitesini düşürün ve tasarımı parlak ve loş ortamlarda karşılaştırın.

Başka bir kişiye ne fark ettiğini, ne tür bir projeyi temsil ettiğini ve hangi öğelerin etkileşimli görüneceğini sorun. Niyetlerinizi açıklayarak başlamayın. Yardımsız yorumları, görsel sistemin planladığınızı iletip iletmediğini ortaya koyuyor.

Orijinal rastgele renk, son renk değerleri, proje özeti, seçilen sıfatlar, işlevsel roller, reddedilen yönler ve önemli değişikliklerin nedenlerini belgeleyin. Bu eğlenceli egzersizi tekrarlanabilir tasarım kanıtına dönüştürüyor.

Son olarak net bir karar verin: kabul et, revize et ya da reddet. Test oluşturulan rengin projeyi destekleyemeyeceğini gösterdiğinde rengi reddetmek kabul edilir. Egzersiz yeni bir olasılığı disiplinle incelemenize yardımcı olduysa başarılı olmuştır.