Web Tasarımında Şeritler ve Etiketler
Eğilimler o kadar sessiz ve doğuştan doğabilir ki nadiren onları fark ederiz.
Ve yüzlerce web sitesini incelediğinizde, genellikle özleyeceğiniz kalıpları görürsünüz. Böyle bir desen, etiketlerin ve şeritlerin sık kullanımıdır.
Bu küçük güzelleşmeler giderek daha popüler hale geldi. Bu makale iki unsuru ele almaktadır, çünkü bunlar sıklıkla birlikte kullanılmaktadır.
Şeritler kendiliğinden açıkken, etiketlerle tişörtün üzerindeki bir etiket gibi ekranın üst kısmından asılan sahte etiketler kastediyorum.
Bu öğeleri kullanan web siteleri kalite açısından gerçekten olağanüstü. Bu muhteşem vitrin bir araya getirilmesi son derece kolay olduğu ortaya çıktı. Pek az trend şu şekildedir: genellikle lezzetli olanları bulmak için birçok fakir örneği beklemek zorundadır.
Neden bu şeritler ve etiketleri kullanmalı?
Etiketler yararlıdır, çünkü kullanıcının dikkatini derinlik yanılsamasını yaratarak çizerler. İçeriğini kullanıcıya aktarıyorlar. Etiketler, genellikle 3-D efektleri veya kalın kontrast renkler ile yumrukla şekillendirilir.
Bu faktörler etiketi kritik bilgiler için önemli bir yer yapar: logolar, gezinme, harekete geçirme ifadeleri. Bunu aşağıdaki vitrinte görüyoruz. Elbette, her zaman olduğu gibi, bu öğeyi kendi web sitenizde uygulamadan önce ihtiyaçlarınızı değerlendirin.
Şerit, aynı nitelikleri paylaşıyor, aslında onu bulmamızın nedeni ve etiketi sık sık bir araya getiriyor: dikkat çekiyor ve önemli bilgiler için harika bir yer. Kurdelenin şekli onu etiketten ayırır; Uçlarındaki iki ok, kullanıcının dikkatini doğrudan yönlendiren içeriğe işaret ediyor gibi görünüyor.
Stilleri bir aile
Bu iki unsurun genellikle web sitelerinde bir arada bulunmasının bir başka nedeni de, bunların her ikisi de kumaşın dijital temsilleri olmasıdır. Daha sonra, aşağıdaki web sitelerinin birçoğunun, ince dikiş, doku ve diğer organik unsurlar dahil olmak üzere, kumaşla ilgili diğer unsurlara sahip olması sürpriz değildir.
Kurdeleler
Mektup Öğrenen
Şerit güzel isimleri çerçeveler Mektup Öğrenen İşte. Ayrıca, sayfa tek bir sütun olarak düzenlenmiştir; Şeritli başlık, kullanıcıyı en üstteki yolculuklarına başlamaya ve oradan aşağı doğru akmaya teşvik eder.
Ribot
Ribot 'S kurdele oldukça ince. Şirket, iki kelimelik bir sloganla şirketin odaklanmasını özetliyor. Beklentileri belirlemenin mükemmel bir yolu, çünkü şirket adı bize ne yaptığını söylemiyor.
Alex Pierce
Metin ana sayfada çok muazzam Alex Pierce Portföyü, onu dengelemek için oldukça cesur bir öğe alacaktı. Bu durumda, şerit başlığı kapatmak için iyi bir iş yapar. Ayrıca, şeridin ortasındaki katlanmış tabakanın, tasarımcının ismine nasıl odaklanacağını da seviyorum.
Rockaholic!
Oldukça sıra dışı Rockaholic! Şerit, kullanıcının dikkatini aşağıya doğru yönlendirir, web sitesinin dikey kaydırmasına güzelce oynar ve kullanıcının içeriğe girmesine yardımcı olur.
Paris Jones
Şeritin lezzetli kırmızısı, grubun adını verir Paris Jones buradan dışarı çık. Metin tedavisi oldukça ince olmasına rağmen, cesur desen bunu fark etmenizi sağlar.
Blog tr Bois
üzerinde Blog tr Bois Kurdelenin ok etkisi, özellikle sarı arkasındaki karşıt koyu nedeniyle özellikle güçlüdür. Kendimi tekrar tekrar tekrar logoya çiziyorum. Markayı kullanıcının zihninde kazıma kesinlikle güçlü bir yoldur.
HTML5 Boilerplate
Popüler web sitesi HTML5 Boilerplate Sayfadaki en önemli eylem öğelerine dikkatimizi çekmek için şeritler kullanır. Kurdelelerin “Buradan indir” demeye gerek kalmadan işlerini yaptıklarını seviyorum. Kurdela ve etiketlerin birleşimi bize bunun kaynakların nereden indirileceğini anlatıyor.
Cantilever Balık ve Cips
Şeridin amacı çok açık değil. Cantilever Balık ve Cips . “Haftada 7 gün açık” olmanın detayı göreceli olarak küçük görünecek, ancak muhtemelen bu restoran için önemli bir ayrım.
Wells Riley
Wells Riley Estetiğin hizmetinde şeritlerin mükemmel bir örneğidir. Şeritler burada harika görünüyor ve sayfanın odağı haline geliyor.
Dhiraj Singh Karki
Her zaman sözleşmeden çıkan tasarımları severim. UI tasarımcısı portföyü Dhiraj Singh Karki sadece böyle bir web sitesidir. Burada, şerit oldukça akıllıca kullanılıyor ve diğer web sitelerinde olduğu gibi neredeyse aynı görsel yumruğu paketlemiyor. Sayfanın hemen içine karışıyor ve tasarımın çok basit görünmesini engelleyecek kadar stili var.
çizgili sincap
çizgili sincap Bir kurdelenin organik elementlerle ne kadar iyi çalışabileceğinin harika bir örneğidir. Birincil navigasyon etrafındaki şerit, aşağıdaki zengin resimlerle mükemmel uyum sağlar. Aynı zamanda navigasyonun güçlü sanat eserleri arasında kaybolmasını da engelliyor.
Ryan M. Stryker
Bir kez daha dikkat çekmek için şeridin gücünü görüyoruz. Merkezi konumu ve cesur kontrastı kaçırmamanızı sağlar. Ryan M. Stryker 'adı.
Etiketler
Ennea
Verilen Ennea bir giyim markasıdır, buradaki etiketin logo ve marka adını içermesi sürpriz değildir. Bazen basit bir yaklaşım en iyi şekilde çalışır.
Philip Meissner Tasarımı
Etiketi ana gezinmeyi içerir Philip Meissner Tasarımı . Genellikle bu alışılmamış bağlantı konfigürasyonuyla kapatılırdım, ancak buradaki düzenleme ve renkler, bağlantıların kolayca bulunmasını sağlıyor.
Tinkering Monkey
Bir e-ticaret sitesinde daha önemli olan, daha sonra kullanıcıları kontrol etmeye yönlendiren ne olabilir? Tinkering Monkey Kullanıcıların satın alma işlemlerini tamamlamalarına yardımcı olacak güzel ve cesur bir etiket var.
Parkbud
Orada tüm akıllı telefon uygulamaları ile, iyi olanların önemli farklılaştırıcılarını iletmeleri gerekiyor. Parkbud ücretsiz ve kalın kırmızı etiket bunu bildiğinizden emin olur. Etiket, bu lezzetli uygulamanın ücretsiz olduğunu hatırlatan güzel bir şekilde gözlerden uzak ama gözünüzün köşesinden her zaman görülebilir.
Lens
Lens kumaş dokular ile kombine edilmiş etiketlerin mükemmel bir örneğidir. Önce dokulu denim arka plan dikkat edin; Ayrıca, ana navigasyon altındaki taraklı sınır çok tekstil odaklı hissediyor.
Coreymade
Küçük bir detay olsa da, komut dosyasının yazı tipini etiketleme şeklini gerçekten çok seviyorum Coreymade Bir gömlek üzerinde normal bir web sitesi logosundan daha çok etiket gibi hissetmek. Ve sözde-3D efekti, etiketi görüntüleyen için gerçekten pop yapar.
Netastica
Etiketi Netastica Esasen önemli bilgiler içermesi ve ziyaretçileri ana sayfaya bağlamasına rağmen esas olarak güzel görünmek.
Ryan Havoc Taylor
Etiket böyle görünür bir konumda Ryan Havoc Taylor Web sitesinin öne çıkması çok fazla kontrast gerektirmiyor. Web sitesinin akışıyla iyi çalışır ve rolünü zahmetsizce yerine getirir.
Kurdela ve etiketler
Bu vitrin son bölümünde, hem şeritler hem de etiketlerden yararlanan web sitelerine bakacağız.
ClearSpan Medya
Şeritler ve etiketler, ClearSpan Medya . Burada ayrıca desenleri, dikişleri ve ince renk değişimlerini içeren kumaşlar bulacaksınız. Üstteki iki etiket ve aşağıdaki şerit, kullanıcı için ilgi çekici bir daire işlevi görür.
Krichevtsova Alexandra
Süre Krichevtsova Alexandra Web sitesinin içeriği daha çok barebone, etiket ve şerit ise kilit öğelere ekstra hayat katıyor. Bu web sitesinin, kişinin ne yaptığını bile bilmeden tadını çıkarabilirsiniz.
Wes Bos
Bu koleksiyondaki web sitelerinin çoğu oldukça büyük şeritlere sahiptir. Öyle değil Wes Bos . Onun çok daha küçük, onların işlevini gerçekleştirmek için tasarımı domine etmemeleri gerektiğini hatırlatıyor.
Sonuç
Bu koleksiyondaki web sitelerinin kalitesi göz önüne alındığında, bu tasarımcıların hiçbiri “modaya uygun” bir şey oluşturmaya yönelmedi. Daha ziyade, bir dizi ihtiyaçla karşı karşıya kaldılar ve bu ihtiyaçlardan, dikkati odaklamak, kritik bilgileri iletmek için etkili bir görsel cihaz ortaya çıktılar. ve önemli eylemleri vurgulayarak.
Web siteniz için bazı CSS tabanlı şeritler isterseniz, web tabanlı 3-D Şerit Jeneratör iş için kullanışlı bir araçtır.