Web Tasarımında Izgara Çizgilerinin Kullanımı: 33 Çarpıcı Örnek

Kılavuz çizgileri, içeriği yapılandırmak için her zaman kullanılmıştır. En eski el yazıları ve el yazmaları bile okuyucuların hikayeyi takip etmesini ve metni anlamasını kolaylaştıracak şekilde düzenlenmişti. Özellikle Rönesans dönemi, ızgara sisteminin yaygınlaşması için önemliydi. 13. yüzyıl sanatçıları, eserlerinde mükemmel simetriyi yakalamak için uğraştılar ve Fransız mimar Villard de Honnecourt bir çözüm buldu. Izgara sistemini altın oranla birleştirdiği bir diyagram oluşturdu. Bu durum bugün bile dergilere ve kitaplara uygulanan, sabit oranlı kenar boşluklarına sahip mizanpajların oluşturulmasına yol açtı. Sanayi Devrimi ve matbaanın gelişmesi, ızgaraların gazetelerde ve afişlerde kullanılmasına neden oldu, fakat ızgara sistemini tasarımın vazgeçilmez bir parçası haline getiren İsviçre Stili oldu. İdeal olan netlik ve düzen elde etmekti ve ızgaralar bunu mümkün kıldı.

Günümüze hızlı bir şekilde ilerleyin, ızgara çizgileri her zamanki gibi aynı amaç için kullanılıyor – temiz, özümsenmesi kolay içerik oluşturmak için. Web tasarımı söz konusu olduğunda, ızgaralar bir sitenin omurgası görevi görebilir. Öğeleri ayırsalar da, bunları yapısal olarak uyumlu birimler halinde birleştirerek harika bir kullanıcı deneyimi sağlarlar. Fakat geçmişleri ve kitap ve dergi tasarımındaki uzun süreli kullanımları sayesinde, ızgara çizgileri aynı zamanda nostaljiyi çağrıştırabilen ve farklı bir dokunma hissi yaratabilen güçlü bir estetik araç olarak da hizmet eder.

Izgaraların ne kadar etkili olabileceğini daha iyi anlamak için, ızgara kullanımında uzman olan aşağıdaki web sitelerini keşfetmenizi öneririz. Bahsedeceğimiz markalar ve kreatifler şunları içerir:

  • Blumenkopf

  • Aile Tipi

  • Evde Kulüp

  • Juxta Basın

  • Sar Stüdyo

  • G!theimageers

  • Bruno Arizio

  • OLMAYAN

  • kadın yüzleri

  • Oto Nove İsviçre – Paris

  • stüdyo badem

  • Hudson Gavin Martin

  • Bazen her zaman

  • Cine365 Filmleri

  • Notter + Vigne

  • Maden Sağlığı

  • Sonraki

  • Sezon dışı

  • Yıllar Aylar Günler

  • Salus Vücut

  • Kazuki Noda

  • F.Miller Cilt Bakımı

  • Kanopi Koleksiyonları

  • Totem

  • Ombia

  • Barış ve Sessizlik Müzesi

  • Zihin Haritası

  • Benimle bir gezintiye çık

  • Cilt Bakımı

  • Kablosuz Sosyal

  • EDA

  • Tahıl Morton

  • Elam Sanatçıları

Blumenkopf

Blumenkopf

Blumenkopf, editoryal ve çağdaş sanatta uzmanlaşmış Avusturyalı bir estetik stüdyosudur. Kullanıcıların ilk dikkatini çeken şey, yükleme ekranında ve site açılır açılmaz tekrar onları karşılayan büyük tipografidir. Dikey ve yatay çizgiler, tüm ana sayfayı süslüyor, fotoğrafların çoğu ve kareler ve dikdörtgenler halinde düzenlenmiş kopyalar. Stüdyonun iletişim bilgilerini içeren ekranın soldaki daha küçük kısmı ile içeriğin geri kalanının bulunduğu sağdaki daha büyük alan arasında net bir ayrım vardır. Bu iki bölüm arasında, arka planda serbestçe yüzen, hareketli bir metin vardır ve sınırların dışına çıkışı, çizgilerin sertliği ile çatışarak izleyici için göze hitap eden bir gösteri ile sonuçlanır. Kullanıcılar bir sayfadan diğerine geçerken, ekranın iki bölümünü ayıran dikey çizgiler yalnızca birkaç saniyeliğine gözden kaybolmak üzere uzaklaşıyor. Daha sonra seçilen sayfanın adı büyük harflerle görünür ve ızgaralar bir kez daha yeni içerikle yerlerini alır. “İşler” sayfasında, ızgara çizgiler stüdyonun çalışmalarını ayırır. Görünüşe göre hiçbir animasyon efekti yok, fakat kullanıcılar görüntülenen proje ön izlemelerinin üzerine geldiklerinde, görüntülerin etrafında, seçilen çalışmanın adını animasyonlu harflerle içeren bir tür kalın çerçeveler gibi metin çubukları beliriyor. Bu durum büyük bir fark yaratan, sayfayı daha ilginç ve biraz daha keskin yapan küçük bir ayrıntıdır.

Aile Tipi

Aile Tipi

Family Type, Londra ve Sidney merkezli bir dijital tip dökümhanesidir. Ana sayfanın tamamı ızgara çizgileriyle süslenmiş olsa da, ilk fark ettiğiniz şey sayfanın sağ üst köşesinde hareketli, hipnotize edici siyah-beyaz bir toptur. Daha sonra ana sayfadaki her bölümün dökümhanenin yazı biçimleri hakkında bilgi içerdiğini fark etmeye başlarsınız. Kaydırmaya başladığınızda, ana sayfanın, sitede gezinmeyi eğlenceli hale getiren sonsuz döngü efekti içerdiğini fark edeceksiniz. Site, üstteki topun yanı sıra, her yöne hareket eden ve dönen animasyonlu harflere sahiptir ve sitenin dinamikliğini daha da artırır. Menü dikeydir ve ekranın sağ tarafına yapıştırılmıştır, içeriğin geri kalanından ayrılmıştır ve her zaman gezinmeyi kolaylaştırır. Kılavuz çizgileri iç sayfa şablonlarına da uygulanarak farklı içerik türleri için ayrı bölümler oluşturulmuştur. Oynak gezinme ve ızgaraların karışımı, dökümhanenin çalışmalarını izleyiciler üzerinde güçlü bir izlenim bırakması garanti edilen alışılmadık ve ilgi çekici bir tarzda sunmasına olanak sağladı.

Evde Kulüp

Evde Kulüp

Evde Kulüp, dünyanın dört bir yanındaki kreatiflerin Covid-19 pandemisini nasıl deneyimlediklerini ve buna nasıl uyum sağladıklarını anlatan müthiş bir proje. Web sitesi, sanatçıların dünyasına ışık tutan bir katalog ya da dergi şeklinde tasarlanmıştır. Reklam öğeleri, yaşadıkları şehre göre gruplandırılır. Her kasabanın adı ekranın sağ tarafında gösterilir ve dikey bir sekme olarak görüntülenir. İstediğiniz herhangi bir şehre atlayabilir veya hepsini keşfetmek için kaydırabilirsiniz. Bu web sitesi, birkaç basit düz çizginin bir sitenin genel tasarımında nasıl büyük bir fark yaratabileceğini ve içeriği güzel ve sürükleyici bir şekilde düzenlemenizi sağladığını gösteren müthiş bir örnektir.

Juxta Basın

Juxta Basın

Juxta Press, Milano merkezli bir sanat yayıncısıdır. Sitede ilk gözünüze çarpan koyu mavi renktir. Ardından ızgaraları fark edersiniz ve tüm web sitesinin karelere ve dikdörtgenlere bölünmüş olduğunu fark edersiniz. Izgara çizgilerini film prodüksiyon, plak ve yayıncılık şirketlerinin web sitelerine dahil etmek iyi bir seçimdir çünkü bu, markaların sanatçıları hakkında pek çok bilgiyi görsel olarak çekici ve düzgün bir şekilde görüntülemelerine olanak tanır. Juxta Press’in web sitesi bir istisna değildir. Yayınladıkları eserleri sergilemek ve birlikte çalıştıkları yazarları sunmak için mükemmel ortamı yaratmak için ızgaralara güvendiler. Görüntü ve metin içeren alanların yanı sıra, içinde iki çapraz çizgiden başka hiçbir şeyin olmadığı birçok bölüm vardır. Bu alanlar, sitenin daha kolay sindirilmesini sağlar ve izleyicilerin her esere ve yazara eşit şekilde odaklanmasını sağlar. Hemen yan yana dizilmiş olsalardı, kullanıcılar bazı işleri gözden kaçırmış olabilirler.

Sar Stüdyo

Sar Stüdyo

Sār Studio, Hindistan’dan bir mobilya tasarım stüdyosudur. Izgaraların ve tonlu renklerin sakin sentezi, ürünlerini temiz bir şekilde sergilemelerine yardımcı oldu. Her öğenin kendisine ait bir alanı vardır ve bu da izleyicilerin her seferinde tek bir parçaya tamamen odaklanmasını sağlar. Bazı bölümler tamamen boştur, bu da bol miktarda beyaz alana ek olarak akıcı bir kullanıcı deneyimi sağlar. Gizli menü, sabit, dikey, tam yükseklikte bir alanda içeriğin geri kalanından tamamen ayrılmıştır. Bir menü bağlantısını diğerinden ayıran ızgara çizgilerinden oluşan tasarımı minimaldir. Açılır menüler, ekranın önemli bir bölümünü kaplayan, tam yükseklikte, ızgaralarla dolu ayrı bölümler olarak açılır. Yine başka bir açılır menüye yönlendiren bir açılır menüyü açan bir sayfa seçerseniz, ızgara ağırlıklı menünün ekranın dörtte üçünden fazlasını gasp etmesini sağlarsınız. Fakat bu gerçekleştiğinde bile, menünün netliği ve saf renk düzeni, değişikliğin gözlerinizi rahatsız etmemesini sağlayarak ilgilendiğiniz şeyi hızlı bir şekilde bulmanızı sağlar.

G!theimageers

G!theimageers

G!Theimagineers çalışmalarında mimari, senografi, ışık, görüntü ve sesi harmanlayan bir yapım stüdyosudur. Web sitelerinin düzeni, geometrik öğelerin yoğun kullanımıyla karakterize edilen biraz sıra dışı. Ana sayfa kaydırılamaz. Bazıları ana hatları çizilen dairelerle dolu, diğerleri ise bu stüdyonun yaptığı şeylerin bir listesini içeren yatay ve dikey bölümlere ayrılmıştır. Ekranın sağ tarafı dikey olarak yerleştirilmiş menüyü içerir. Sayfalar, tıklandığında genişleyen ve seçilen bölümün içeriğini gösteren sekmeler olarak sunulur. İç sayfalar ikiye bölünür, mizanpajın bir yarısı bir daire (birkaç parçaya çizgilerle bölünmüştür) veya başka, genellikle animasyonlu, geometrik şekiller içerirken, diğer yarısı şirket hakkında bilgiler içerir. Siyah arka plan, beyaz içeriği ve ızgara çizgilerini özellikle belirgin ve göz alıcı hale getirir. Genel tasarım oldukça minimal olsa da, bir kez daha, basit çizgilerin akıllı kullanımı ve bunları düzenlemenin ustaca yolu, sitenin görünümünü yükseltti ve sunumu ilgi çekici ve göz atması eğlenceli hale getirdi.

Bruno Arizio

Bruno Arizio

Bruno Arizio’nun web sitesi, ekranın ortasında bir araya gelen bir dizi dikey çizgiyle açılıyor. Yavaş yavaş daralmaya başlarlar ve üst kısımda menüyü içeriğin geri kalanından ayıran bir çizgiye yer açarlar. Aynı zamanda, ekranın bir tarafından diğer tarafına uzanan animasyonlu daireler, Arizio’nun yaratıcılığının adrenalin dolu bir girişini sağlamak için görüntü alanında belirir. Menünün kendisi gizlenir ve “Özet” olarak sunulur. Menü bağlantıları ızgara çizgileriyle bölünmüştür ve her sayfa başlığının yanında bir numara vardır. Küçük gibi görünen bu ayrıntı, “özet” ve baskın yatay navigasyonla birleştiğinde siteye bir katalog veya kitap benzeri bir hava verir. Daha fazla kaydırdıkça, her bölümün adının dikey olarak görüntülendiğini ve ızgaralar kullanılarak içeriğin geri kalanından ayrıldığını fark edeceksiniz. Arizio, seçtiği projelerin koleksiyonunu bölmek için de çizgiler kullandı. Fakat kaydırmada, iş başlıkları ve ayrıntılar yukarı doğru yükselerek projelerin nasıl olduğunu gösteren öne çıkan görüntüleri ortaya çıkarıyor. Kılavuz çizgilerin kullanımı, Arizio’nun ödüllerinin uzun listesini görüntülemek için özellikle kullanışlı oldu. Bu bölümde, dikey gezinmeyi animasyonlu, yatay olarak kaydırılan ödül adlarıyla birleştirdi. Ayrıca fareyle üzerine gelindiğinde yalnızca seçilen ödülün koyu beyaz renkte kalmasını, diğerlerinin gri renkte kalmasını sağladı, böylece yalnızca belirli bir ödüle odaklanabilirsiniz. Site boyunca çizgilerin iyi düşünülmüş uygulaması, efektlerin zekice kombinasyonu ve dikey ve yatay gezinmenin kullanımı, tasarımcının beceri setini ve basit öğeleri yaratıcı bir şekilde kullanarak ilgi çekici web siteleri oluşturmadaki ustalığını gösterir.

OLMAYAN

OLMAYAN

NON, Avustralya alkolsüz şarap alternatifidir. Web sitesi, sizi markanın hikayesine çeken canlı görsellerle doludur. Arka plan videoları özellikle ilgi çekicidir, fakat kılavuz çizgileri aynı zamanda sitenin görüntüleyenler için daha çekici görünmesine yardımcı olur. Aslında, ızgaralar, tasarımcıların kayan metni zarif bir şekilde eklemelerine ve tüm ürünlerini düzgün bir şekilde listeleyerek enerjik görsellerle sorunsuz bir şekilde harmanlamalarına izin verdi. Proje adlarının üzerine geldiğinizde, tamamı büyük siyah harfler neon yeşili olur ve bu da ızgaralar ve serifsiz tipografi ile birlikte acımasız bir his verir. Ayrıca fareyle üzerine gelindiğinde tam boy ürün resimleri vitrinde belirerek arkalarındaki içeriği örter ve tüm dikkatinizi çeker. Izgaralar olmasaydı, sitenin bazı bölümleri muhtemelen çok güçlü olurdu. Bunun yerine, yatay ve dikey çizgiler, büyük harfin, sans serif yazı tiplerinin ve animasyonlu görsellerin ve videoların harmanlanmasını sağlar ve markanın hikayesini çarpıcı bir şekilde anlatarak uyumlu ve mükemmel bir uyum içinde görünür.

kadın yüzleri

kadın yüzleri

Kadın Yüzler, kadınların sorunlarını video portreler kullanarak ele alan bir projedir. Izgara tabanlı düzenler, kolay ve net gezinme sağlar. Izgaraların ve tipografik sadeliğin birleşimi, acımasız ve İsviçre Stili havasını çağrıştırıyor. Izgaralar, özellikle FF filmlerinin bir koleksiyonunu içeren alanda kullanışlıdır. Her özelliğin kendi belirlenmiş bölümü vardır. Varsayılan olarak, yalnızca filmin adını, süresini ve yönetmenin adını görebilirsiniz. Fakat üzerine geldiğinizde, ekranda film önizlemeleri belirerek sizi öne çıkan filmleri izlemeye teşvik eder. …

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Birlikte Büyüyen Bir İş Kurma Fırsatı!

İş birliği yaparak, işinizi yalnızca bir adım öteye taşıyoruz. Daha detaylı bilgi isterseniz mail adresinizi bize iletebilirsiniz.