Karanlık Web Tasarımının Dos ve Yapılmaması
Karanlık web tasarımları çok popüler ve zarif ve yaratıcı bir çekiciliğe sahip olabilir.
Ayrıca birçok müşteri çalışması için mükemmeldir, ancak her web sitesi için uygun değildir ve yalnızca uygun olduğunda kullanılmalıdır.
Bu karanlık tasarımların sahip olabileceği çarpıcı görsel etkiye rağmen, birçok tasarımcı ziyaretçiyi kapatmadan bunları nasıl etkin bir şekilde çekeceklerini bilmiyor.
Karanlık bir tasarım ile daha az okunabilirlik , çoğu okuyucu için daha az cazip ve geleneksel tasarım öğeleri için daha az fırsat geliyor.
Bu yayında, bir sonraki karanlık web sitesi tasarımınızı daha geniş bir kitleye hitap etmek için birkaç ipucu ele alacağız. Bu arada, tasarımcı, yaratıcılığınızı ifade etmenizi sağlar.
bir son anket Işık tasarımlarının genel web seyircisi tarafından% 47'lik bir oranla tercih edildiğini öne sürüyor. Ana nedeni okunabilirlik . Çoğu insan, web sitelerinde koyu bir arka plana karşı açık metinleri izlemekten hoşlanmıyor çünkü gözlerini zorlayarak daha az eğlenceli bir deneyim sunuyor.
Buna karşılık, ankete katılanların% 10'u, her zaman web siteleri için koyu arka plan tercih ettiklerini,% 36'sı ise en iyi seçimin web sitesinin türüne bağlı olacağını söyledi.
Peki, doğru cevap nedir? Buna geldiğinde, herkes kendi fikrine sahip, ve bu kadar.
Ancak, bu kadar büyük bir kullanıcı yüzdesi, karanlık web sitesi tasarımlarının tolere edilebileceğini ve hatta bazen tercih edildiğini söyleyerek, web tasarımcıları olarak kendimiz ve müşterilerimiz için etkili karanlık tasarımlar yaratmayı öğrenmek zorundayız.
Bu, aydınlık arka planların tüm gerçek inançlarını, karanlık tasarımın daha okunaklı ve kullanıcı dostu olabileceğine ikna etmek anlamına gelir.
Daha Fazla Beyaz Alan Kullan
Yoksa “siyah alan” olarak adlandırılmalı mı? Beyaz alanın etkili kullanımı her tür tasarım için önemlidir, ancak koyu arka plana sahip web siteleri için önemlidir.
Karanlık tasarımlar “ağır” hissetme eğilimindedir ve onları karıştırmak bu hissi güçlendirebilir. Aşağıda bazı popüler karanlık web tasarımlarına bir göz atın ve beyaz alanın liberal kullanımını büyük etkilere dikkat edin.
Siyah Emlak internet üzerinden tüm web sitelerinde sergilenmektedir. Gerçekten de güzel bir tasarım ve tüm dikkatlere değer. Tasarım boyunca çok fazla miktarda beyaz alan kullanılmış ve bu özel tasarımı benzersiz kılan şey, beyaz boşluğun belirli öğeleri bu kadar verimli bir şekilde tasvir etmek için nasıl kullanıldığıdır.
Logonun çevresinde çok fazla beyaz alan var ve ziyaretçiler olarak gördüğümüz ilk şey. Ana içeriği ve şişeyi hemen sonra görüyoruz. Gördüğünüz gibi, şişedeki metni ve ana içeriğin başlığını vurgulamak için beyaz alan mükemmel şekilde kullanılır.
Öne çıkan içerik TICTOC ve bu tasarımda eşlik eden görüntü en beyaz alan ile çerçevelenir. Aşağı doğru hareket ederken, daha az beyaz alan görüyoruz, bu da bize gösterilen içeriğe dikkat etmemizi sağlıyor.
Buradaki nokta, beyaz alanın kullanıcıyı yavaşça sayfanın sonuna doğru yönlendirmesidir .
Koyu arkaplan, tasarıma derinlik katar. Web sitesi çok yoğun bir şekilde beyaz alanlara dayandığından, koyu arkaplanın yaratıcı etkisi olmadan daha az ilginç olacaktır.
Mark Dearman Mark Dearman web sitesi, düzeni boyunca liberal ve eşit olarak dağıtılmış beyaz alana sahiptir.
Her bir portföy parçasını çerçeveleyen beyaz alan, barındırdığı içerik için bol miktarda solunum odası sağlar ve bir sonraki parçaya geçmeden önce güzel bir dinlenme noktasıdır.
Bol miktarda beyaz alan karanlık tasarımlar için vazgeçilmezdir, çünkü bu sadece düzeni bozmakla kalmaz, aynı zamanda önemli unsurları çerçevelemeye ve genel görünüme zarafet katmaya yardımcı olur.
Metinsel Beyaz Alan
Okunabilirlik, karanlık kökenden hoşlanmayanların bir numaralı endişesi olduğu için, tasarımcılar metnin kendisine daha fazla dikkat etmelidir.
Genel tasarımda olduğu gibi, karanlık web sitelerinde okunabilirliği geliştirmenin bir yolu, paragrafın boyutunu, karakterini ve başlığını ayarlayarak beyaz alanı arttırmaktır .
Aşağıdaki örnek, karakterlerin arasındaki ve etrafındaki boşlukların karanlık ve aydınlık düzenleri karşılaştırmada ne gibi bir fark yarattığını göstermektedir.
Karanlık web tasarımlarında okunabilirliği geliştirmenin bir başka yolu yazı tipi boyutunu arttırmaktır . Bu yayındaki diğer kuralların çoğu gibi, daha büyük yazı tipi boyutları daha fazla beyaz alan anlamına gelir. Harfler büyüdükçe, her harfin etrafında ve içinde daha fazla beyaz boşluk görünecektir.
Örneğin, aşağıdaki “a” harfi, hem etrafındaki alanda hem de a'nın muhafazasının içindeki boşlukta ve çıkıntının altında büyüdükçe daha fazla beyaz alan alır.
Küçük bir metni okuma, açık bir arka plan üzerinde karanlık birinden çok daha kolay olduğunu unutmayın. Tipografiyi yeni bir web sitesi için ayarlarken, okunabilir olduğundan emin olmak için bazı kukla metinlere baktığınızdan emin olun . Değilse, metin boyutunu artırıp arttırmadığına bakın.
Metin Kontrastı
Birçok insan, en kötü düşünülmüş karanlık sitelerin göz yorgunluğuna neden olduğu konusunda hemfikirdi. Çok fazla veya çok az kontrast genellikle suçludur. Biri mükemmel dengeyi nasıl bulur?
Zifiri siyah olan bir odada iseniz, aniden ışığa doğrudan bakmak hoş değil. Ancak daha az karanlık bir odada daha az parlak bir ışığa bakmak gayet iyi. Aynı prensip web tasarımı için de geçerlidir.
Mükemmel kontrastı bulmak, arka planın karanlığını metnin açıklığı ile dengelemek anlamına gelir .
Aşağıda, metin ve arka plan arasında nasıl bir kontrast olduğunu gösteren (çok) kaba bir kılavuz bulunmaktadır. Biri arka planın daha açık hale geldiğine dikkat çekiyor, metin de öyle.
Metin için hoş bir kontrast bulmak, saf siyah arka plan ile çok daha zordur.
Mükemmel dengeyi bulmak için farklı tonları deneyin. En iyi sonuç genellikle saf siyah olmayan ve saf beyaz olmayan bir arka plandır.
Yazı Tipleriyle Başa Çıkmak
Yazı tipleri tasarımda büyük bir rol oynar ve kesinlikle karanlık düzenler ile düşünceli bir şekilde düşünülmelidir. Aşağıdaki görüntü, hem serif hem de sans-serif yazı tiplerinde koyu bir arka planda 14 punto yazı tipi gösterir.
Sans-serif yazı tipi açıkça daha okunaklı . Ancak pek çok tasarımcı hala zarafetleri için serif yazı tiplerini seçiyor.
Yine de hile, serif yazı tiplerine yalnızca daha büyük metinler koymaktır, böylece ekstra beyaz alan her karakterin etrafında akar ve metni çok okunaklı hale getirir.
Aşağıdaki ekran görüntüsü, bu makalenin önceki bölümlerinde tartışılan bir web sitesidir. Hem serif hem de sans-serif yazı tiplerini içerir, ancak bunları akıllı bir şekilde kullanır.
Başlıklar, gezinme ve başlıklar gibi daha büyük metinler, eklenen zarafet için bir serif yazı tipindedir. Daha iyi kontrast ve daha iyi okunabilirlik için, gövde metni temiz bir sans-serif yazı tipindedir.
Minimal Renk Düzenlerini Kullan
Karanlık tasarımlarına temiz ve düzenli bir görünüm kazandırmak için tasarımcılar her zaman minimal renk şemalarını seçmelidir .
Aşağıdaki birkaç örnekte, yoğun renk düzenlerinin gerçekten karanlık arka planlara ulaştığını görebiliyoruz, çünkü kontrast çok keskin.
Bir veya iki renge yapışır . Daha fazla renk eklemek için koyu renkli bir arka plan deneyin.
Verilen, birçok karanlık web tasarımları daha heyecan verici renk düzenleri var. Yani bu kural genellikle kırılır, ancak sadece doğru tekniklerle.
Genel olarak, renk genellikle bir web sitesinin çok yoğun görünmesini sağlar . Daha koyu web sitelerinin zaten derinliği olduğundan, renkleri dikkatli kullanın.
Stil Değiştirici Teklif Et
Karanlık web tasarımlarını daha cazip hale getirmek için elimizde birçok iyi uygulama olsa da, her kullanıcı için çaba sarf etmeyecektir.
Bir stil değiştirici eklediğinizden emin olun , böylece kullanıcılar en sonunda açık bir arka plan üzerinde koyu metni görüntüleme seçeneğine sahip olurlar.
Bunun için, biri karanlık düzen için bir tane, diğeri de alternatif ışık düzeni için iki stil sayfası gerekir.
SitePoint'in bu konuda mükemmel bir öğreticisi var: CSS'de Basit Bir Stil Değiştirici Oluşturun . Eğiticideki “turuncu”, “mavi” ve “beyaz” sürümlerini kullanmak yerine “light” ve “dark” stil sayfalarını kullanmanız yeterlidir.
Karanlık Web Tasarım En İyi Çalıştığında
Belirtildiği gibi, büyük oranda web kullanıcısı, belirli bir web sitesi için karanlık bir web tasarımının çalışabileceğine inanmaktadır. Fakat çalışma, bu türlerin tam olarak ne olduğu konusunda muğlaktır.
Genel olarak, karanlık ve yaratıcı tasarımlar için en iyi çalışır . Modern şık web siteleri için, karanlık arka planlar zarafet katıyor. Aşınmış veya elle çizilmiş stiller için, koyu arkaplanlar yerleşimin yaratıcılığını arttırır.
Zarif karanlık tasarım
Karanlık derin, yetkili ve güçlü olabilir ve uygun şekilde kullanıldığında genellikle zarif görünür. İşte birkaç örnek ve zarafetin karanlık bir tasarımda ortaya çıkarılması için bazı teknikler.
İçin web sitesi Larissa Meek zarif bir ton ayarlayarak arka planda basit bir vintage tarzı desen vardır. Diğer ilginç özellikler, tasarıma kişisel bir dokunuş katıyor.
Bu teknik birçok web sitesi için kullanılabilir. Klasik veya klasik desenler ve dokular hem zarif hem de yaşlarına uygun bir görünüm oluşturabilir .
Çoğumuz bağbozumu desenleri yüksek sınıfla ilişkilendiriyoruz, böylece bu şekilde yüksek sınıf bir web sitesi oluşturmak kolaydır.
Derinlik Çekirdek stil ve sınıf ekleyen koyu bir arka plan ile çok temiz bir tasarıma sahiptir. Tasarımda bir yetki duygusu da belirgindir. Bu şıklık, bir tasarımcının portföy çalışmasının sonuç olarak daha değerli görünmesini sağlayabilir.
Bu tasarımın, portföy parçaları ve logosu dışında bir doku veya görüntü bulunmadığını unutmayın. Aksi halde, tasarım çok yoğun olurdu; olduğu gibi, içerik de birlikte örülüyor.
İzlenecek iyi bir süreç, önce temel içeriği eklemek ve ardından tasarım öğelerini gerektiği gibi getirmek . Tasarımcı, her yeni öğenin eklendiği sırada duraklatıp yansıtabilir ve düzenin aşırı güç kullanılmadığından emin olur.
Sanat eserleri zarif bir tasarımda daha değerli göründüğü gibi, ürünler de olabilir. Karanlık ve şık bir tasarım gibi Tapbots ve diğerleri, satılan ürünün vitrine yardımcı olur.
Tasarım , degradeler ve aydınlatma efektleri ile cihazın kendisini yansıtır ; Bazı tasarımlar, yüksek teknoloji ürünlerinin dokularını bile taklit eder.
Yaratıcı Karanlık Tasarım
Zarif görünen, karanlık web sitesi tasarımlarının ötesinde, standart ışık tasarımlarından daha duygusal tepkilere yol açabilir, bu da onları yaratıcı projeler için ideal kılar. Haydi yaratıcı tasarım türlerinin bazı örneklerine bakalım.
site yer Aşağıda çok az içerik var ama derinlik için eşsiz bir düzen ve koyu renkler vardır. Karanlık arka planlar çok az içerikli web siteleri için mükemmeldir .
Daha fazla beyaz alana ihtiyaç duydukları için, tasarımcı çalışacak daha çok yere sahip.
Grunge web tasarımı pek çok biçimde gelir ve grunge “karanlık ve kirli” olduğu için karanlık arka planlar bu biçimlerden biridir.
Karanlık grunge gibi tasarımlar trozo tüm kuralları yıkmak gibi görünüyor: yoğun dokular, kalabalık düzen ve geniş bir renk yelpazesi. Ve yine de bu web sitesi hala çalışıyor. Bu nasıl mümkün olabilir?
Çalışmak için çok dağınık unsurları ile, grunge tasarım yeni başlayanlar için zor olabilir. Bunu yapan şey onun organizasyonu .
Arka plan, kullanıcının gözüne rehberlik eden ve içeriği yönetilebilir bölümlere ayırmaya yardımcı olan blokları açıkça ortaya koymuştur.
İkincisi, bir ton beyaz boşluk var . Arka plan dokulu olabilir, ancak tekrarlanan model, kullanıcı tarafından beyaz alan olarak görülür ve tasarımın aydınlatılmasına yardımcı olur.
Bu beyaz alan, logonun solunda, navigasyonun altında ve sağ tarafta en belirgin olanıdır.
“Sergi 01” ile “Sergi 02” arasında bile, genellikle böyle bir web sitesinde bulunandan daha fazla beyaz alan var.
Beyaz alan, dokuya sahip olduğu için beyaz alan gibi görünmese de herşeyi dışlar . Asgari metin ve birkaç bölüm (sadece üç) de bu sadelik görünümüne katkıda bulunur.
Tasarımı Drew Wilson kesinlikle minimal renk kullanma kuralını kırar. Yine de hala çalışır, çünkü parlak renkli başlık, bu seyrek tasarımdaki birkaç özellikten biridir, bu nedenle hiçbir şey aşırı güç değildir.
Ve koyu arka plan, başlığın daha parlak ve daha sıradışı görünmesini sağlar.
Karanlık arka planlar genellikle aydınlatma efektleri yapmak için kullanılır ve parlak renkler daha fazla öne çıkar .
Bu tür tasarımlar minimal renk kuralına mükemmel bir yaratıcı istisnadır. Ancak kural dikkatli bir şekilde kırılmalıdır: Sayfada daha fazla gradyan, doku ve renk ayrılmasından kaçının.
Sarma
Karanlık arka planlar, web tasarımlarına zarif ve yaratıcı bir his verirken, bazı portföyler için onları mükemmel kılar, ancak her site için uygun değildir.
Daha büyük web siteleri, özellikle vizyon bozukluğu ve diğer engelli insanlar için, karanlık tasarımlar bir stil değiştirici ile bile, hayır-hayır.
Umarım zaman geldiğinde, karanlık bir arka plana sahip bir web sitesi tasarlamanız gerektiğinde, bu ipuçları ve stratejiler size yardımcı olacaktır.
Sadece WDD için yazılmış Kayla Knight .
Karanlık web tasarımlarını geliştirmek için daha birçok teknik ve strateji vardır, bu yüzden lütfen aşağıdaki yorumlar bölümünde topladığınızları paylaşın.