Tasarım Trendi: Engellenen Metin

Bazı web siteleri, geleneksel bilgeliğe veya tasarım teorisinin ilkelerine karşı olsalar bile harika görünüyor. Yeni bir tasarım trendi, tasarımdaki metnin bir kısmını kaplayan veya engelleyen unsurlarla bu fikri ortaya koyuyor.

Bu ilginç bir trend, çünkü tasarımla sık sık konuştuğumuz her şeye karşı çıkıyor - kullanıcılarla hızlı bir şekilde bağlanmak için okunabilir olması gerekiyor.

Söylemeye gerek yok, bu etkili bir şekilde çekmek için zor bir teknik olabilir, ancak tasarımlar iyi yapıldığında çarpıcı ve etkilidir. İşte trendin bir dökümü ve kendiniz nasıl deneyebileceğinize dair bazı fikirler.

Tasarım Kaynaklarını Keşfedin

Basit Engel

Metin bir tasarımla kaplanmışsa, kullanıcının çok fazla efektte kaybolmaması için diğer her şeyin görsel olarak süper basit olması gerekir.

Duyarlı her kesme noktasında, metin diğerlerinden daha fazla gizlenmez.

Root Studio, renkle dikkat çeken ilk izlenim ve büyük boyutlu yazıların bir kısmını kapsayan basit animasyonlu zürafa ile bunun harika bir işini yapıyor. Buradaki hile, bazı harfler engellenmiş olsa da, ekrandaki kelimenin ne olduğu hakkında hiçbir soru olmadığıdır. Harfler, yazı tipi boyutunun basitliği ve tıkanık elemanın yerleşimi nedeniyle hala okunabilir.

Tasarım ekibi, bu web sitesinin markası olan “ROOT” un bütünlüğünü korumak için metin engeline özellikle dikkat etti. Duyarlı her kesme noktasında, metin diğerlerinden daha fazla gizlenmez. (Bu tasarımların birçoğu kısa sürüyor. Masaüstü çözünürlüklerinde harika görünüyorlar, ancak metin daha küçük ekranlarda okunamayacak kadar engellendi.)

Üç Boyutlu Katmanlar

Üç boyutlu katmanlı bir efekt eklemek, öğelerin ekrandan atlamasına yardımcı olabilir, böylece kullanıcılar neredeyse onlara ulaşabilir ve dokunabilirler. Metin bazı durumlarda arka plan öğesi olarak kullanılabilir.

Metnin üstündeki katmanın çok fazla kelimeyi (veya kelimeleri) kapsamadığından emin olun. Metin engellerinin diğer öğelerin yerleşimi nedeniyle istenmeyen sözcüklerle sonuçlanmadığından emin olmak her zaman hayati önem taşır.

Basitçe Chocolate bu katmanlama etkisini iyi kullanır. Çoğunlukla kalın yazı tipinde ortak kelimeler kullanan büyük harfli yazı ve gerçekten büyük olmayan ve şeker öğesi tarafından gizlenen aynı kelimeleri içeren bir üst öğe kombinasyonu nedeniyle çalışır.

Bu işlem, arka plandaki büyük harfleri okunabilir olandan daha fazla grafik eleman haline getirir ve yeni bir kontrast ve mükemmel katman efekti oluşturur. (Etkiyi farklı şekillerde nasıl oluşturduklarını görmek için kendinizi tüm farklı şeker aromaları arasında dolaşırken bulabilirsiniz.)

Mekan Kurallarını Unutun

Bazen metin engelleri harfleri kapsamaz, ancak boşluklarına girer.

North Street'in tasarım karmaşası ya da kopukluğu hissetmeden kırdığı bu kurallardan biri. Şirket açıklaması, ekrandaki orta dikey kurala çarpıyor (tasarımın geri kalanı bu ayırıcıyı bölünmüş ekran estetiği için kullanıyor.)

Birisi bu tedaviyi kullanacaklarını söylediyse, muhtemelen onları başka türlü ikna etmeye çalışacaksınız, ancak burada işe yarıyor. Görsel kompozisyon, çok fazla beyaz alan sayesinde çok hafiftir ve yazı tipi seçenekleri, metin için ayrılması gereken alana girmesine rağmen, hafif gri çizginin neredeyse arka plana düşmesine yetecek kadar cesurdur.

İkinci bir gri çizgi, navigasyondaki metni daha da böler, ancak çoğu kullanıcı muhtemelen engeli fark etmez.

Sadece Büyük Harfler İçin

Buradaki tüm örneklere baktığınızda, muhtemelen ortak bir tema fark edeceksiniz. Engellenen yazıların tümü oldukça büyük ve basit yazı karakterleri kullanıyor.

Küçük harfler genellikle metnin bir kısmını amaçlı görünen bir şekilde kaplayacak kadar yer sağlamaz. Bir metin tıkanıklığıyla tasarım yapmayı planlıyorsanız, kasıtlı ve anlam sahibi olmalıdır.

Yenilik tarzlarının karmaşık senaryolarını, üstlerindeki bir öğeyle okumak çok zordur.

Küçük harflerin örtülmesi amaçlı tasarım ve okunabilirlik açısından inanılmaz derecede zordur. Bu yüzden teknik büyük boyutlu tipografi ile eşleştirilir.

Bu büyük, genellikle sans serif, yazı biçimlerinin bir bakışta okunması kolaydır ve genellikle orta kontur genişliklerine ve katman öğelerini daha pratik hale getiren büyük kaselere ve sayaçlara sahiptir. Bu kavramın işe yaraması için, kendilerini bu konsepte uyacak şekillerde harflere ihtiyacınız vardır. İnce veya yoğun yazı stilleri genellikle işe yaramaz ve yenilik stillerinin karmaşık senaryolarını üstlerinde bir unsurla okumak çok zordur.

Küçük Kontrastlı Öğeler

Bazen metin tıkanıklığı metnin üstünde olan bir öğe değildir; metin öğesi ile onu çevreleyen şey arasındaki ilişkidir. Metin ve arka plan öğeleri arasında kontrast olmaması, metin engellemesine de neden olabilir.

Yine, bu etkili bir şekilde çekilmesi zor bir kavram olabilir. Metin doğal olarak okunmak için var. Kontrast eksikliği bunu zorlaştırabilir.

Yüksek oranda okunabilir metinle eşleştirildiğinde, düşük kontrastlı metin öğeleri ekranda ince hatırlatıcılardır. Bu elemanlar diğer yüksek kontrast elemanlarından sonra okunacaktır.

Anew için tasarımda, işletmenin açıklaması, marka adından daha önemlidir. Tasarımın kullanıcılara tip tedavisi nedeniyle söylediği şey budur. “Çatı katı + test mutfağı” anahtar kelimelerini görmek ve okumak kolaydır. “Anew” adı, marka işaretinin altındaki düşük kontrastlı bir yerde görünür. Büyük logo nedeniyle göz hala ona çekiliyor, ancak okuma ve bilgi toplama söz konusu olduğunda birincil odak noktası değil.

Bu tedavinin bu alanda çalışmasının nedeninin bir kısmı, tasarımın içeriğidir. “Yeni” kelimesi ile parlak beyaz yemek tabakları arasındaki ortak yaşamı düşünün. Taze, farklı ve cazip geliyor.

Sonuç

Engellenen metin tasarımları her zaman daha popüler hale geliyor. Çok uzun zaman önce bu tarzda çevrimiçi bir şey bulmak için zorlandınız. (Baskı tasarımları daha tutarlı bir şekilde kullanmıştır, çünkü tasarımcıların duyarlı kesme noktaları hakkında endişelenmeleri gerekmiyordu.)

Tamamen görünür olmayan metinle bir şey oluşturmaya dikkat edin. Kelimelerin hala ne istediğini söylediğinden (ve kastettiğinden) emin ol. Engellenmiş metin kullanırken bir tasarımın nasıl algılanacağı veya okunacağı konusunda herhangi bir şüpheniz varsa, başka bir seçeneği düşünün. Tasarımınızı asla kullanıcıların anlaması zorlaştırmak istemezsiniz.