Milyonlarca web sitesinin bulunduğu bir dünyada, renk, sizinkini farklı hissettirmenin en iyi yollarından biridir. Renk, insanların markanızı hızlı bir şekilde tanımasına yardımcı olmada da büyük rol oynar . Yani sadece eğlenceli değil, kullanışlı! Sitenizi planladıktan ve oluşturmaya başladıktan sonra , muhtemelen daha yaratıcı kısma gelmek için heyecanlısınız. Zaten aklınızda bir renk varsa veya nereden başlayacağınızdan emin değilseniz, bu makale, renk seçmenin ve bunları web sitenize uygulamanın bazı temel adımlarını inceleyecektir: Web sitenizde renk kullanmak için üç basit strateji Beğendiğiniz renkleri nerede bulabilir ve tam renk kodlarını nasıl bulabilirim? Bu renk kodu web sitenize nasıl uygulanır? Rengi kolay şekillerde kullanan diğer Jimdo web sitelerine örnekler Renk paletini değil, renk eşleştirmeyi düşünün Renk ve web tasarımı ile ilgili birçok makale, renk teorisini, renk tekerleklerini ve benzerlerini kullanarak tamamen sıfırdan nasıl bir renk paleti oluşturulacağınızı yönlendirir. Bu makalede, bu yaklaşımdan uzak duracağım. Her şeyden önce, çünkü gereksizdir - web siteniz için, içinde "teori" kelimesi ile derin bir dalış içermeyen iyi renkler bulmanın başka yolları vardır. İkinci neden, sıfırdan bir renk paleti oluşturmanın, özellikle de yeni başlayan bir tasarımcıysanız, çok fazla renkle sonuçlanmasıdır. Çoğu amaç için, web sitenizde yalnızca en fazla iki veya üç renge ihtiyacınız vardır. Çok fazla hokkabazlık yapmaya çalışmıyorsanız iyi yönetilmesi ve kullanılması çok daha kolay olacaktır. Renklerle oynamaktan hoşlanıyorsanız ve daha fazla bilgi edinmek istiyorsanız, daha derine inebilecek birçok harika tasarım kaynağı var. Bu makale için temel bilgilerle başlayacağız. Web sitenizi oluşturun İşletmeniz için doğru renkleri seçme Renk seçmenin büyük bir kısmı kişisel olarak beğendiğiniz bir şey seçmektir. Bazı renklerin ilettiği duyguları ve web sitenizin amaçlanan mesajına uyup uymadığını düşünmek de iyi bir fikirdir. Bazı renkler parlak ve eğlenceli kişisel bloglara daha iyi uyurken , birçok profesyonel web sitesi daha hafif veya daha “ciddi” tonlara sahip olma eğilimindedir. Bu renk kurallarının hiçbiri taşa oyulmamış olsa da, seçimlerinizi daraltmanıza yardımcı olabilirler. Farklı renkleri görmek için Jimdo web sitelerinin altındaki slayt gösterisini gözden geçirin. Kırmızı enerjiyi, hareketi ve sevgiyi çağrıştırır - ama aynı zamanda öfke ve tehlike gibi bazı olumsuz sembolizmlere sahip olabilir. Az kullanılmış, kırmızı çok eğlenceli olabilir. Bu Jimdo web sitesinde, sinirli, güçlü ve hatta biraz asi olan bir marka ajansı gösteriyor. Canlı ve eğlenceli, turuncu genellikle heyecan, sıcaklık ve hatta hırs anlamına gelir. Burada Freedom & Spirit web sitesinde iyi bir şekilde kullanılmaktadır. Portakalın bir uyarı veya dikkat gösterebileceğini de unutmayın, bu yüzden küçük dozlarda kullanmak en iyisidir. Neşeli, çalışkan ve enerjik - bunlar sarının akla getirdiği kelimelerden sadece bazıları. Bu örnek Jimdo web sitesine baktıktan sonra biraz daha iyi hissetmemek zor. Yeşil uyumlu ve sakinleştiricidir ve genellikle doğayı, sağlığı ve hatta zenginliği ifade eder. Büyük açık hava ile ilişkileri nedeniyle, bunun gibi tatil web siteleri için iyi bir eşleşme olabilir. Birçok işletme web sitesinin maviye doğru çekilmesinin bir nedeni var. Geleneksel olarak yeterlilik, güven ve güvenliği ifade eder. Rosetta Shop web sitesinde bilim ve uzay temasıyla eşleşir ve eğlenceli yazı tipleri rengin sıkıcı hissetmesini önler. Mor genellikle yaratıcılık, hayal gücü ve sakinleştirici çağrıştırır. Aynı zamanda kraliyet ailesinin rengidir ve lüks hissedebilir. Mor, web tasarımında yaygın değildir, bu yüzden benzersiz bir şey arıyorsanız, eğlenceli bir seçimdir. Deniz mavisi veya turkuaz genellikle duygusal dengeyi veya dinginliği akla getirir, bu nedenle bu sağlık web sitesinde kullanıldığını görmek şaşırtıcı değildir. Pembe sofistike ve yatıştırıcıdır, ancak rengi daha kadınsı geleneğinden ayırmak zor olabilir. Siyah ve beyazla eşleştirerek, Zebrure web sitesi modern ve enerjik, sadece yumuşak bir ipucu ile hissediyor. Kahverengi sağlamlık, istikrar ve doğa taşır. Bu, (doğru ya da yanlış!) Tipik olarak daha erkeksi web siteleriyle ilişkili olduğu anlamına gelir. Tabii ki, sakallı bir oduncu bu mesajı eve GrillGold web sitesinde göndermeye yardımcı olur. Gri, resmi, zamansız ve lüks, bu da Seidenweiss mağazası için harika bir maç. Ulaşmayacak ve dikkatinizi çekmeyecek, ancak yine de, genel etki sofistike ve profesyonel olduğu için buna gerek yok. Marka kişiliğinizi yansıtın Marka kişiliğinizi tanımlamak doğru insanların sizi bulmasına yardımcı olur, bu nedenle renk psikolojisi ile doğru duyguyu uyandırdığınızdan emin olun. Hangi renklerin doğru resmi boyadığından emin değilseniz , çevrimiçi yaratıcı platform 99 tasarımlarından bu interaktif renk testini deneyin . Taklit etmek istediğiniz kişiliğe bağlı olarak, akıllıca eşleşen bir seçenek için ton, enerji ve yaş değerlerindeki slaytları ayarlayın. Ortak renk seçenekleri de sektöre göre değişmektedir, bu nedenle pazarlama, gayrimenkul , perakende ve daha pek çok sektördeki en yaygın seçeneklere ilişkin araştırmalarını inceleyin . ” Yeni başlayanlar için üç web sitesi renk stratejisi Gökkuşağında renkler olduğu gibi, renklere yaklaşmanın birçok yolu vardır. Web tasarımına yeni başlayan biriyseniz, bu stratejilerden biriyle başlamanızı öneririm: 1. siyah ve beyaz ile bir parlak renk Kullanın Rengi web siteniz için bir baharat olarak düşünün - güçlü bir lezzet gibi, biraz uzun bir yol kat eder. Parlak renkler dikkat çeker, ancak ziyaretçilerinizin zihinsel enerjisini de tüketir . Renkleri kullanmaya yeniyseniz, en iyi yaklaşımlardan biri, sitenizin çoğunu siyah ve beyaz tutmaktır. Örneğin, Unger Music web sitesinin logo, arka plan, yatay çizgiler ve gezinme menüsünde aynı turuncu rengi nasıl kullandığına bakarken, sitenin geri kalanı ağırlıklı olarak siyah beyazdır. Sonuç, üst düzey olmaktan ziyade profesyonel ve sofistike. Aynı şey Retropot web sitesi için de geçerlidir . Kırmızı vurgu rengi, siyah-beyaz grafik bardakların öne çıkmasına yardımcı olur ve siteyi daha eğlenceli ve ilginç hale getirir. Parlak kırmızı olduğu için bunu az miktarda kullanırlar. Bir vurgu rengi seçtiğinizde, bunu web sitenizde kullanabileceğiniz birkaç yer vardır: Başlıklar Köprüler Gezinme Menüleri Düğmeler Yatay çizgiler 2. Birincil ve ikincil bir renk kullanın Bir renk yeterli görünmüyorsa, iki rengi seçin. Ancak, her iki rengi de eşit kullanmak yerine, püf noktanızı “birincil” renginiz diğerini ikincil noktanız olarak seçmek, yani çok daha az kullanacağınız anlamına gelir. Bu şekilde renkler birbirleriyle rekabet etmek yerine birbirini tamamlar. Aşağıdaki iki Jimdo web sitesine bir göz atın. Çok farklı web siteleri, ama aslında benzer renkler kullanıyorlar. İlk web sitesinde, Laurène'nin logosundaki turkuaz ve pembe renkleri yansıtan bir arka plan resmini nasıl kullandığına dikkat edin. Ardından, navigasyonunda ve Başlık Elemanlarında da turkuaz (ana rengi) kullandı. Sitenin geri kalanında pembe, hepsini birbirine bağlamak için zaman zaman ortaya çıkar, ancak turkuaz kadar sık görünmez. jimdo resim kontrastları Kai, grubunun web sitesinde benzer bir yaklaşım kullanıyor. Sitenin çoğu siyah beyazdır ve navigasyon menüsü ve Başlık Elemanları için turkuaz kullanırlar. Pembe, Düğme Öğelerinde ve Blog Görüntülü Reklam Öğelerinde yalnızca ara sıra görünür. Pembeyi idareli kullanmak, yaptıklarında gerçekten ortaya çıktığı anlamına gelir. Jimdo Kontrast Renkleri 3. fotoğraf yoluyla renklerini Sunmak Burada bahsettiğimiz renk değişikliklerinin çoğu, arka plan renklerinizi, başlıklarınızı vb. Değiştirerek Jimdo Style Editor'da yapabilirsiniz. Ancak fotoğrafçılığa giriyorsanız, web sitenizdeki fotoğrafları da “hikaye” yi renklendirin ve marka kimliğinizi tamamlayın. Örneğin, aşağıdaki Le Velo web sitesine bir göz atın. Bisiklet dükkanı sahibi Senad, aslında siyah beyaz bir web sitesi yarattı - arka planı beyaz ve metni siyah. Web sitesindeki renk tamamen aynı mavi / yeşil ve kahverengi tonları paylaşan fotoğraflarından geliyor. Harika, değil mi? Web siteniz için Jimdo Renkleri Fotoğraflarınızda tutarlı renkler kullanmak biraz disiplin gerektirir. Çekmek için, fotoğraflarınızı nasıl düzenleyeceğinizi veya en azından üzerlerine tutarlı filtreler koyacağınızı bilmenize yardımcı olur (bunu Jimdo'nun yeni Adobe Image Editor'ü kullanarak deneyebilirsiniz ). Üç renk paleti kullanan ve bu renkleri tüm fotoğrafçılığına dahil eden bir Jimdo web sitesine bir örnek daha. Sanatçı Sami Garra'nın sitesi boyunca nasıl farklı bir yeşil, pembe ve sarı kullandığını seviyorum. Her fotoğraf bu renklerden en az birine gönderme yapar. Onun Hakkında Sayfasına da bakın, saç rengi ve gerçek hayat atölyesinin bile bu renkleri kullandığını göreceksiniz! Özveri hakkında konuşun! Web siteniz için iyi renkler Tamam, bu yüzden saç renginizi web sitenize uyacak şekilde değiştirmeniz gerekmez (eğer yaparsanız, lütfen bize bir fotoğraf gönderin!) Ancak bu örneklere bakarak, umarım ne zaman güçlü renk olabileceğinizi anlayabilirsiniz. Tercihiniz, burada ve orada küçük bir renk sıçraması kullanmak olsa bile, tutarlı bir şekilde kullanın. Web sitesi renkleri için nereden fikir edinebilirsiniz Artık renk stratejiniz hakkında daha iyi bir fikre sahip olduğunuza göre, eğlenceli kısım aslında kullanmak istediğiniz tam rengi seçiyor. Güzel olan, renk ilhamının her tarafınızda olmasıdır. İşte bazı fikirler: Renk kodu nedir? Beğendiğiniz bir renk gördüğünüzde, bu rengin RGB veya onaltılık değerini bularak Jimdo web sitenizde kullanabilirsiniz . Bunlar tam olarak aradığınız rengi tanımlayan benzersiz kodlardır ve genellikle RGB (26, 119, 127) veya # E82C0C gibi bir şeye benzeyecektir. Renk kodunu aldıktan sonra, kodu renk seçiciye yapıştırarak rengi yeniden oluşturmak için Jimdo'nun Stil Düzenleyicisi'ni kullanın. Zaten sahip olduğunuz malzeme ve marka renklerine bakın Zaten bir logonuz, ürün ambalajınız veya işinizde tutarlı bir şekilde kullandığınız bir renk varsa, bu web siteniz için doğal bir uyum olacaktır. Belki de ürünlerinizden birinde kullandığınız bir renktir veya Dotty About Ice Cream söz konusu olduğunda , belki de vintage dondurma kamyonunuzun rengi! Dotty About Ice Cream web sitesinin rengi doğrudan eski pembe dondurma kamyonundan geliyor. web siteniz için doğru renkleri seçin Zaten profesyonel olarak tasarlanmış bir logonuz varsa, tasarımcınız renk kodlarınızın ne olduğunu size söyleyebilir. Veya logo dosyanızı Renk Kodu Seçici gibi ücretsiz bir programa yükleyebilirsiniz ve logonuzdaki renkleri size söyleyecektir. Beğendiğiniz bir fotoğraftan renk seçin Çoğu Jimdo şablonunda tam genişlikte bir arka plan veya başlık resmi için yer vardır. Zaten mükemmel bir fotoğrafınız varsa (veya şu anda birçok ücretsiz stok fotoğraf web sitesinde bir tane bulduysanız ), kolay bir sonraki adım, ona uyacak renkleri seçmektir. beğendiğiniz bir fotoğraftan renk seçme Bu örnek web sitesinde, menü çubuğunu ve düğmelerini arka plan fotoğrafındaki sarı ağaçla eşleşecek şekilde değiştirdik. Bir fotoğraftaki rengi eşleştirmek için Adobe Color CC'ye bir görüntü dosyası (veya logo dosyanız) yükleyin, bu ücretsiz site eşleşecek bir renk paleti oluşturur. Daireleri, kopyalamak istediğiniz resmin tam kısmının üzerine getirin. Burada, o güzel yeşil daktilo rengini bulabileceğimi görmek için Unsplash'tan Adobe programına bir stok fotoğraf yükledim. Web sitenizde hangi renkleri seçeceğiniz Başkalarının web sitelerinde renk ilhamı bulun Web sitenizi tasarlamaya başlamanın en iyi yollarından biri, diğer kullanıcıların sitelerine göz atmanın ne olduğunu görmek için göz atmaktır. Hoşunuza giden bir renk görürseniz, gibi özgür aracını kullanarak kesin renk kodu öğrenmek ColorZilla veya Damlalık Chrome veya Firefox. Tarayıcınıza yükleyin ve başka bir web sitesinin başlığı altında gizlice zirve yapmak istediğinizde açın. Colorzilla Jimdo'yu kullanma ColorZilla tarayıcı eklentisi, favori web sitelerinizin hangi rengi kullandığını size söyleyecektir. Farenizi istediğiniz rengin üzerine sürükleyin, üstteki renk kodunu verecektir. Burada Jimdo'nun web sitesindeki sarı # FCEC59 olduğunu gösteriyor. Çevrimiçi renk kaynaklarına göz atın Renk bilenler için en sevdikleri paletleri ve renk kombinasyonlarını paylaşmak için birçok eğlenceli web sitesi var. Birçoğu renk kodlarını sağlar, böylece renkleri kendi sitenize kopyalayabilirsiniz. Bu sitelerin birçoğunun 5-6 renk veya daha fazla geniş kapsamlı palet sağlayacağını unutmayın, bu da muhtemelen ihtiyacınız olandan daha fazladır. En sevdiğiniz paletten bir çift seçin ve oradan başlayın. Jimdo Maçı Pazartesi Tamam, renklerini seçtin. Şimdi ne olacak? Diyelim ki gerçekten sevdiğiniz bir veya iki renk seçtiniz ve onlarla birlikte gitmek için benzersiz renk kodlarına (RGB veya onaltılık değer) sahipsiniz. (Bir dakika, renk kodu nedir? Bu adımı kaçırdıysanız, yukarıdaki “Renk fikirlerini nereden edinebilirim” bölümüne geri dönün veya bir sonraki kod için önemli olduğu için renk kodunu nasıl bulacağınıza dair daha ayrıntılı eğiticiye göz atın ). Artık bu rengi web sitenizde nerede kullanmak istediğinize karar vereceksiniz. Jimdo'nun Stil Düzenleyicisi'nde metninizin, bağlantılarınızın, menülerinizin, düğmelerinizin, yatay çizgilerinizin ve daha fazlasının rengini ayarlayabilirsiniz. Hemen hemen her öğe türünün, Stil Öğesinde Mağaza Öğeleri Öğeleri ve İletişim Formları da dahil olmak üzere ayarlayabileceğiniz bir renk ayarı vardır. Örneğin, Büyük Başlık Öğelerinizin rengini ayarlamak istiyorsanız Stil Düzenleyicinizi açın ve Başlık Öğesine tıklayın. Tasarım seçeneklerini ekranın üst kısmındaki siyah çubukta açık olarak göreceksiniz. Renk menüsünü açmak için renk kutusunu tıklayın. Ardından, aşağıdaki kırmızı renkle vurgulanan kutuya renk kodunuzu girin. Onaltılık kodu yazarsanız, Jimdo'nun sistemi otomatik olarak bir RGB koduna dönüştürür, ancak sonuçlar aynı olacaktır. Renk kodu seçici jimdo kullanma Renk seçiciye renk kodunuzu girin. Artık bu renk her zaman renk paletinizin alt satırında görünecek, böylece farklı öğeler için tekrar tekrar kullanabilirsiniz. Profesyonel İpucu: Sosyal medya simgelerinizin rengini eşleşecek şekilde değiştirmek mi istiyorsunuz? Tam renk kodunuzla ücretsiz simgeler oluşturmak için iconmonstr gibi bir site kullanınve ardından bunları Web sitenize Fotoğraf Öğeleri olarak yükleyin. Web sitenizi oluşturun Tüm web siteniz için bir renk şeması belirleyin İsterseniz, değiştirmek istediğiniz her öğe türü için bu adımı tekrarlayabilirsiniz. Ya da, bu rengi aynı anda tüm web sitenize uygulayarak bunu daha hızlı yapabilirsiniz. İşte hile: Stil Düzenleyiciyi açın ve Elemana Göre Stil anahtarını “Kapalı” konumuna getirin. Bunu yaptığınızda , tüm web siteniz için bir Renk Düzeni seçme seçeneğini göreceksiniz . Renk Düzeni kutusunu tıklatın, ardından renk kodunuzu daha önce yaptığınız gibi renk seçiciye girin . Seç'e bastığınızda , bu rengin web sitenizde (gezinme, altbilgi, bağlantılar, yatay çizgiler vb.) Göründüğünü göreceksiniz. Rengin görüneceği kesin yerler kullandığınız şablona bağlıdır, bu yüzden bir deneyin ve ne düşündüğünüzü görün! Beğendiyseniz, Kaydet'e basın. Bunu yapmazsanız, Geri al'ı seçin. Renk Düzeninizi ayarladıktan sonra, geçiş anahtarını her zaman tekrar “Açık” konumuna getirebilir ve öğeleri istediğiniz gibi ayarlayabilirsiniz . Tüm web siteniz için renk şeması jimdo Tüm web siteniz için bir renk şeması ayarlamak üzere Öğeye Göre Stil düğmesini kullanın Profesyonel İpucu: Başlamak için güvenli oynamak ister misiniz? Başlık Öğelerinizin, Yatay Çizgilerinizin, Düğmelerinizin ve belki de Gezinme Menünüzün rengini değiştirerek başlayın. Bu, web sitenize çok ezici olma riski taşımadan eğlenceli bir renk katacaktır. Ardından, kendinizi hazır hissettiğinizde, daha fazla öğe değiştirmeyi deneyebilir ve bunun nasıl göründüğünü görebilirsiniz! Renk, metin ve kontrast Tamam, başlamadan önce düşünmeniz gereken son şey. Renklerle çalışırken, hem estetiğin hem de duyguların ötesine geçen ve ziyaretçileriniz için iyi bir kullanıcı deneyimi sağlayan başka bir faktör daha var. Arka planınızı ve yazı tiplerini birlikte güzel görünen iki renge değiştirmeden önce, metnin okunması kolay olması için ikisi arasında hala yeterli kontrast olduğundan emin olun. Jimdo'nun web tasarımcılarından birinin söylediği gibi , “O zamandan beri beyaz kağıda siyah mürekkeple kitaplar basılmasının bir nedeni var.” Metin ve arka plan arasındaki renk kontrastı ne kadar yüksek olursa, okunabilirliğiniz o kadar iyi olur . Web sitenizdeki renkler arasındaki kontrast Arka planınız ve metniniz arasındaki kontrastın, metnin okunması kolay olacak kadar güçlü olduğundan emin olun. Kırmızı ve mavi gibi bazı renk kombinasyonları özellikle zordur. Beyaz bir arka plan üzerinde siyah metin size hitap etmiyorsa, yine de renklerle biraz eğlenebilirsiniz, ancak ideal olarak, açık bir arka plan üzerinde koyu bir yazı tipine bağlı kalmak en iyisidir. Kendi sayfanızı oluşturmak ister misiniz? Web sitenizi nasıl oluşturduğunuz aşağıda açıklanmıştır ! Renk Sonuçları Bu makalede çok fazla yer edindik, umarım korkmak yerine başlamak için ilham alırsınız. Özetlemek gerekirse, aklınızda bulundurmanız gereken bazı ipuçları: Sadece bir, belki iki renk seçerek ve bunları web sitenizde tutarlı bir şekilde kullanarak başlayın. Web sitenizin çoğu siyah beyaz kalırken yanlış bir şey yok! Maksimum okunabilirlik için arka planınızı ve metninizi karanlık tutun. Aklınızda bir renk varsa, renk kodunu tam olarak web sitenizde eşleştirmek için bulmanız gerekir. Renk kodunuzu aldıktan sonra, Stil Düzenleyicisine yapıştırmak ve web sitenizdeki öğeler üzerinde tutarlı bir şekilde kullanmak kolaydır. Renklerle daha da ileri gitmek için renklerinizi fotoğraflarınızla eşleştirmeye başlayıp başlayamayacağınıza bakın.
