WordPress Portföy Sitelerinde Izgara Düzenleri: Tasarım İpuçları ve Örnekler

Herhangi bir WordPress portföy sitesinin en yaygın yapısı ızgaradır. İzleyicinin hızlı bir şekilde tarayabilmesi ve gözüne çarpan her şeyi seçebilmesi için aynı anda bir avuç işi gösterir.

Ancak bir portföy için güçlü bir ızgara düzeni yapan nedir? Ve kendi portföy sitenizi başlatırken nelere dikkat etmelisiniz?

Bu yazıda, WordPress portföyleri için en iyi ızgara düzeni tasarımları hakkında bazı ipuçları ve tavsiyeler paylaşacağım.

Sıkı Izgara Tasarımları

Bir ızgara kullanırken tasarımı sıkı tutmak akıllıca olur. Bu şekilde öğeler, hızlı bir şekilde göz atmak ve kullanıcıları içerikle etkileşime girmeye teşvik etmek için birbirine yakındır.

Izgara yapısı genellikle portföy içeriğinin türüne göre farklılık gösterir. Fotoğraflarınıza ve düzeninize bağlı olarak dolguyu artırmanız veya azaltmanız gerekebilir. Örneğin, sanat eserleri birbirine yakın olduğunda bulanık hissedebilir, bu nedenle dijital sanat portföyleri ekstra alandan yararlanır.

Ancak bir tasarımcı, çalışmalarını birbirine yakın tutabilir çünkü ekran görüntülerini uzaktan bile kolayca ayırt edebilirsiniz. WordPress için Ink temasında güzel bir örnek görebilirsiniz.

Bu, ızgara öğelerinin hiçbiri arasında kesinlikle hiçbir dolgu kullanmaz. Bu kare bloklar birbirine sıkıca hizalanır, böylece kullanıcı her şeyi bir kerede görür.

Ayrıca daha küçük küçük resimler kullanır, böylece daha hızlı dikkat çekerler. Bu tarzı gerçekten seviyorum ve kişisel favorim çünkü çok güçlü bir izlenim bırakıyor. Her bir fotoğrafın diğerlerine kıyasla nasıl açıkça görülebildiğine dikkat edin.

Bu tarzdan yararlanabilecek bir işiniz varsa Mürekkep temasını inceleyin. Bu tür portföy ızgaralarını sıfırdan kodlamadan oluşturmanın kolay bir yolu.

Ancak güzel bir alternatif, her parça arasında biraz daha fazla boşluk bulunan Bramble'dır.

Bu WordPress teması, birden fazla portföy düzeniyle birlikte gelir, böylece en çok hangi stili/tarzları gerçekten sevdiğinizi seçebilirsiniz. Bazı portföy düzenlerinde birbirine daha yakın küçük resimler bulunurken, diğerlerinde ızgaradaki öğeler arasında çok sayıda dolgu bulunur.

Ancak dikkate alınması gereken 1 numaralı şey analiz felcidir. Bu, birinin herhangi birini seçemediğini hissetmesine neden olabilecek çok fazla seçenek sunulduğunda ortaya çıkar.

Portföy girişleriniz benzersiz olduğu ve kendi başlarına ayakta durabilecek yeterli alana (ya da yer eksikliğine) sahip olduğu sürece, çok sayıda tıklama alırsınız. Ve bir portföyün bütün amacı bu değil mi?

duvar ızgaraları

Pek çok insan duvar ızgaralarını bilmiyor, ancak uzun zamandır buralardalar.

Bunlar, öğeleri değişen dikey yüksekliklere göre bir ızgarada düzenlemek için genellikle JavaScript'i kullanır. Bu nedenle, tümü aynı boyutta piksel mükemmelliğinde küçük resimler eklemek yerine, farklı boyutlarda farklı portföy öğeleri ekleyebilir ve yine de bunları sığdırabilirsiniz.

Weston WordPress teması, minimalist fotoğrafçılık portföy sayfasında bu özelliğe sahiptir. Bu, doğal olarak işlerini çevrimiçi hale getirmek isteyen fotoğrafçıları hedefler ve duvar ızgarası, değişken yükseklikteki fotoğrafçılık için uygun bir seçenektir.

Her fotoğraf, doğru miktarda yer kaplayarak ızgaraya doğal olarak girer. Genellikle tam sütun sayısını ve sütun yüksekliğini özelleştirebilirsiniz, ancak bunun cihaz boyutuna göre değişeceğini unutmayın.

Tam ekran düzenleri seviyorsanız, Notio temasına bir göz atın. Sıkı küçük resimler ve özel animasyon efektleriyle bir duvar ızgarası tasarımı kullanır.

Bu iki temadaki ızgaraların da sıkılık bakımından farklılık gösterdiğine dikkat edin. Birinde görüntüler arasında fazladan boşluk varken, diğerinde birbirine sıkıca hizalanmış küçük resimler var.

Izgara düzenleri bir avuç trendi takip eder ve hangisini en çok beğendiğinizi takip etmek sizin seçiminizdir.

Vurgulu Ayrıntılar: Yay Veya Hayır?

Birçok portföy, gezinirken küçük resmin üzerinde görünen vurgulu ayrıntıları içerir. Bu etki genellikle mobil cihazlara taşınmaz, ancak büyük küçük resimlere sahip masaüstü portföy siteleri için kesinlikle yaygın bir eğilim.

Her küçük resim, dahili portföy öğesi sayfasına bağlanmalı veya en azından o parçayla ilgili bir resim galerisi açmalıdır. Küçük resimler tüm portföyü oluşturmamalıdır.

Ancak ayrıntılar eklemek, daha yüksek tıklamaları teşvik edebilir ve insanların siteyi daha fazla incelemesini sağlayabilir. WordPress Oluştur teması, vurgulu ayrıntılara dikkat çekmek için gezinirken özel bir animasyon efekti kullanır.

İmleciniz herhangi bir portföy öğesinin üzerine geldiğinde iki önemli bilgi kırıntısı bulacaksınız:

• Portföy öğesinin adı/başlığı
• öğenin kategorisi

Bazen bu küçük ayrıntılar kullanıcı deneyimini kökten iyileştirebilir. Birisi belirli bir grafik tasarım işine göz atıyorsa, kategoriye göre göz atabilir ve tıklamadan önce başlıklara göz atabilir.

Ancak diğer zamanlarda bu ayrıntılar gereksiz yere ayrıntılı olabilir ve çok fazla yer kaplayabilir. Bu nedenle, WordPress Gather temasında bulacağınız gibi bazı tasarımcılar bu ayrıntıları atlar.

Basit fareyle üzerine gelme efektleriyle yalnızca düz küçük resimler. Gözü yormaz ve tüm ayrıntılar küçük resimlerin altında bulunur, böylece görüntüyü engellemezler.

Bu eğilimin net bir “doğru” yanıtı yok. Fareyle üzerine gelme ayrıntıları bazıları için harika çalışır, ancak diğerleri için bu özellik küçük bir sıkıntı kaynağı olabilir.

Sitenizde en iyi görüneni bulun ve kendi zevkinize göre ölçün. Ancak ayrıntılar, küçük resmin üzerine gelindiğinde veya küçük resmin altında görünsün, bunları sayfanın herhangi bir yerine eklemeye çalışın.

Etkileyici Fotoğraflarla Gözlerinizi Yakalayın

Her ızgara düzeni, dikkat çekmek için küçük resimler kullanır. Bu küçük resimler, genellikle insanları tıklayıp daha fazlasını okumaya teşvik ederek işinizin bir kısmını satar.

Çalışmanız dijital sanat, web tasarımı, simge tasarımı, UX mimarisi veya görsel çekiciliği olan herhangi bir şey olabilir. Ama mesele şu ki, satmak için kesinlikle görsel çekiciliğe ihtiyacınız var. Ve bu çekici fotoğraflardan geliyor.

Minimalist Mellow WordPress teması, her biri farklı stillere sahip çeşitli fotoğraflar kullanır. Bunlar, çoğunlukla yer tutucu oldukları için “gerçek” proje fotoğrafları değildir. Ancak, ilk sayfa yüklemesinden itibaren ziyaretçiyi satmanın açık bir örneğini sunarlar.

Diğer tasarımcıların galeri resimleri için ne kullandığını görmek için diğer portföy sitelerine göz atmanızı öneririm.

Kendi siteniz için neleri kullanabileceğinizi ve ne tür çalışmaların dikkat çekebileceğini görün. Becerilerinizi en iyi ne gösterir? Her projenin hangi kısmı görsel olarak en çekici veya işinizi başkalarına satmanıza yardımcı oluyor?

Yine bu çok açık uçlu bir soru ama birçok farklı strateji denemek isteyeceksiniz. Genelde yakın plan fotoğrafların, özellikle küçük resim biçiminde çok fazla dikkat çektiğini görüyorum. Portföy sayfasında Beckett temasıyla bu örneklerin bir karışımını görebilirsiniz.

Bir ızgara düzeninde, her proje için yalnızca çok fazla alanınız olur. Bu alanı sayın!

Küçük resimlerinizin tam olarak ne kadar büyük olması gerektiğini biliyorsanız, o zaman zaten büyük bir avantaja sahipsiniz. Bu, portföy öğeleriniz için en çok hangi kompozisyonları beğendiğinizi görmek için Photoshop'ta birçok farklı küçük resmi kırpmanıza olanak tanır.

İlerlemek

Izgara tasarımları oldukça basittir ve birçok WordPress portföy teması varsayılan olarak onlarla birlikte gelir. Ancak bir ızgara düzeni, gösterilecek muhteşem tasarım çalışmaları olmadan pek bir şey sunmayacaktır.

Umarım bu yazı, kendi portföylerini başlatan tasarımcılar ve yaratıcılar için değerli ipuçları sunar. Portföylerde ızgara tasarımları en yaygın olanıdır, bu nedenle ziyaretçiler onları bekleyecektir. Bu eğilimleri uygulayarak (veya bu temaları kullanarak) daha fazla dikkat çekebilir ve ideal olarak zaman içinde daha fazla müşteri çalışması getirebilirsiniz.