Doğru düzene karar vermek, bir web sitesi oluşturmanın ilk adımlarından biridir ve doğru bir şekilde yapılması çok önemlidir. Tasarımınızın temeli olarak hizmet veren web sitesi düzeni, sitenizin ne kadar iletişimsel ve sezgisel olacağını etkileyebilir.
Web sitesi düzeni nedir?
Bir web sitesi düzeni, web sayfasındaki tüm görsel öğelerin düzenlenmesi ve aralarındaki ilişkilerdir. Sayfa öğelerinin kasıtlı olarak konumlandırılmasıyla düzen, sitenin mesajını ve kullanılabilirliğini artırabilir.
Düzen, web sitesi tasarımının önemli bir bileşenidir . Sayfa öğelerinin ziyaretçiler arasında kaydedildiği sırayı, hangi öğelerin en fazla dikkat çektiğini ve tasarımda elde edilen genel dengeyi belirler.
Açıkçası, iyi bir web sitesi düzeni, ziyaretçilerin odağını doğru yönde yönlendirebilir. En önemli olana doğru yönelmelerine yardımcı olabilir ve daha sonra önem sırasına göre aşağıdaki bölümlere devam edebilirler.
Bir web sitesi düzeni seçme
Web siteniz için doğru düzeni seçme görevine yaklaşırken, dikkate alınması gereken iki ana faktör vardır:
-
İçeriğinize uyum sağlayın: Bir web sitesi düzeni, iletmek istediğiniz hikayeyi anlatmaya katılan mesajınızı geliştirmeli ve desteklemelidir. Bazı web sitesi düzenleri en iyi ürünleri veya işleri sergilemek için kullanılırken, diğerleri gerçek bilgileri hızlı ve verimli bir şekilde iletir (bir blog veya haber platformu gibi). Seçtiğiniz düzen, içerik türünüze uygun olmalıdır.
-
Sık kullanılan düzenleri kullanın: Yaratıcılık için yer olsa da, iyi bilinen, denenmiş ve test edilmiş web sitesi düzenleri genellikle en iyi seçenektir. Bu klasik düzenler, mevcut beklentilerini veya diğer web sitelerinin geçmiş deneyimlerini temel aldıkları için kullanıcılara aşina olma eğilimindedir. Tanıdık bir düzen, daha sezgisel ve kullanımı kolay bir arayüzle sonuçlanacaktır.
Aşağıda, en etkili ve yaygın web sitesi düzenlerinden on tanesini vurguladık, onları neyin işe yaradığını ve hangi tür içeriğin her biri için en uygun olduğunu açıkladık. Aşağıdaki örnekler, stilinize ve gereksinimlerinize uyacak şekilde tamamen özelleştirilebilen Wix’in tüm web sitesi düzeni şablonlarıdır:
En İyi 10 Web Sitesi Düzeni
-
Z-pattern düzeni
-
F-desen düzeni
-
Tam ekran görüntü düzeni
-
Bölünmüş ekran düzeni
-
Asimetrik düzen
-
Tek sütun düzeni
-
Kutu tabanlı düzen
-
Kart düzeni
-
Dergi düzeni
-
Yatay şeritler düzenleri
01. Z-desen düzeni
Yeni bir web sayfasına geldiğimizde, hemen bir şeyleri gözden geçirmek için siteye bakıyoruz. Kayma okuma olarak adlandırılan bu hızlı tarama, genellikle Z harfi şeklinde veya zikzak şeklinde yapılır. Gözlerimiz sol üst köşeden sağ üst köşeye, sonra sol alttan aşağıya ve son olarak tekrar sağa doğru hareket ediyor.
Z kalıbı web sitesi düzeni, tüm önemli bilgileri Z şekli boyunca yayarak bu okuma alışkanlığımızı kullanır. Logo genellikle ilk önce kaydolmak için sol üst köşeye yerleştirilir. Bunun karşısında, en sağ köşede gezinme menüsünü belirgin bir harekete geçirici mesajla birlikte yerleştirebilirsiniz.
Z-deseninin sayfa boyunca yukarıdan aşağıya uzanan çapraz kısmı, en dikkat çekici bilgilerin nereye gitmesi gerektiğidir. Bu, büyüleyici görseller ve web sitesinin neyle ilgili olduğunu tanıtan kısa bir metin satırı kullanılarak elde edilebilir.
Z-deseninin alt kısmı, şimdiye kadar ortaya çıkan her şeyin doruk noktası olmalıdır. İster bir ürün satın almak ya da bir hizmet için rezervasyon yaptırmayı planlıyor olun, şimdi site ziyaretçilerini gemiye alma zamanı. En önemli harekete geçirici mesaj (CTA) düğmenizi Z şeklinin sonuna yerleştirin ve kullanıcıları işlem yapmaya teşvik edin.
Aşağıdakiler için idealdir: Oldukça görsel olan ve en az yazılı kopya içeren sayfalar. Belirli bir dönüşüm amacına hizmet eden açılış sayfaları genellikle mükemmel bir seçimdir.
02. F-desen düzeni
Z modeli düzeni gibi, bu tasarım da ortak bir sayfa tarama davranışına dayanmaktadır. Daha fazla metin ağırlıklı web sitelerinde, bilgileri F şeklinde gözden geçirme veya okuma eğilimindeyiz. Bu, sayfanın üst yatay kısmının dikkatimizi çektiği anlamına gelir ve gözlerimiz oradan dikey olarak aşağı doğru gider, sol taraf odak noktası olarak işlev görür.
F kalıbı düzenini kullanırken, kaynakların sayfanızın üst kısmına yatırım yaptığınızdan emin olun; burada ziyaretçiler biraz daha uzun süre kalabilir. Sayfanın geri kalanını çekici bir şekilde tanıtan web sitesi içeriği yazın . F şeklinin bu üst kısmı genellikle bir başlık, altyazı ve öne çıkan bir görüntü içerir.
Sayfanın sol tarafındaki F deseninin dikey çizgisi metnin daha çekici olmasına yardımcı olur. Bu, görüntüler, simgeler veya madde işareti noktaları veya numaralandırma gibi biçimlendirme öğeleri kullanılarak yapılabilir .
Aşağıdakiler için idealdir: Esas olarak metin etrafında dönen web siteleri. Bir blog oluştururken , örneğin, bu web sitesi düzeni hem ana sayfa hem de tek tek blog yayın sayfaları için geçerlidir.
03. Tam ekran görüntü düzeni
Bu web sitesi düzeni, büyük veya tam ekran özellikli bir resmin üstünde kısa bir metin içerir. Ön ve ortaya yerleştirilmiş tek bir görsel, göz alıcı ve sürükleyici bir ana sayfa tasarımıyla sonuçlanabilir . Aynı anda bir mesajı etkili ve anında iletmeye hizmet eder.
Büyük medya özellikleri , kim olduğunuz ve ne yaptığınız hakkında çok fazla bilgi verebilir. Görselin kendisi bir fotoğraftan bir resme veya videoya kadar herhangi bir şey olabilir. Her iki durumda da, yüksek kalitede olmalı ve hizmetiniz, ürününüz veya genel ortamınızla ilgili olmalıdır.
Bu tür web sitesi düzeninde, tam ekran görseline, sitenin neyle ilgili olduğunu daha fazla açıklamak için kısa bir metin satırı eşlik eder. Güçlü bir başlık veya akılda kalıcı bir slogan hazırlayarak işinizi sunduğunuz ürün ve hizmetleri daha fazla bilgi edinmeye teşvik edin.
Son olarak, bu düzen genellikle mobil web sitesi sürümünde de harika görünüyor .
Aşağıdakiler için idealdir: Belirli bir niş veya ürünü vurgulamak isteyen işletmeler. Örneğin, restoran web siteleri gururla belirli bir yemeği gösterebilirken, düğün web sitesi mutlu çifti gösterebilir.
04. Bölünmüş ekran düzeni
Bölünmüş ekran düzeni önemli bir web tasarım trendidir . Ekranı ortaya doğru dikey olarak bölerek, önemli bir tasarım prensibi olan mükemmel simetrik bir denge yaratır . İki bölüme yapılan bu düzgün bölünme, her bir bölümün tamamen farklı bir fikri ifade etmesine veya alternatif olarak aynı fikri iki farklı açıdan ifade etmesine olanak tanır.
Burada gösterilen web sitesi düzeni şablonu, solda göz alıcı bir görsel, sağda metin ve eşleşen vektör sanatı ile bir yemek deneyimi sunuyor . Düzen, dikkat için rekabet etmek yerine her iki tarafın da birbirini tamamen tamamlamasını sağlar. Aynı tasarım, site ziyaretçilerinden bir e-Ticaret web sitesinde ‘Erkekler’ ve ‘Kadınlar’ kategorileri gibi iki karşıt seçenek arasından seçim yapmaları istendiğinde de işe yarayabilir .
Bölünmüş ekran düzeninden en iyi şekilde yararlanmak için, ekranın her yarısının biraz farklı davranmasını sağlayarak biraz hareket katmayı düşünün. Örneğin , ekranın sadece bir tarafında paralaks kaydırma efektleri kullanabilirsiniz . Başka bir seçenek de bu düzeni tasarımınızın ikinci katına genişletmektir, ancak görsel ilgi için ekranın iki yanındaki içeriği değiştirin.
Aşağıdakiler için idealdir: İki farklı türde içerik sunan web siteleri veya yazılı kopya ile görüntüleri eşit olarak birleştirmek isteyen web siteleri. Kullanıcıları yaşa, cinsiyete veya davranışa göre bölümlere ayıran çevrimiçi mağazalar bu düzen için çok uygundur.
05. Asimetrik yerleşim
Similar to the split screen layout, this stylish website layout also divides up the screen. Only that this time, the two parts are not equal in size and weight. This shift of balance from one side to the other creates visual tension and makes the page feel more dynamic. It’s a bold design, serving as a powerful tool for generating – and retaining – user engagement.
Through a non-uniform distribution of scale, color, and width across the page, visitors’ focus can be drawn to specific elements over others. To achieve this, give certain elements more visual weight, so that they act as focal points.
İçeriğinizin hangi bölümünü vurgulamak istediğinize karar verin. Bu, bir ürünün fotoğrafından kullanıcıların doldurması gereken çevrimiçi bir forma kadar herhangi bir şey olabilir . Ardından, yüksek renk kontrastı, genişletilmiş oranlar ve diğer görsel vurgularla öne çıkarın.
Aşağıdakiler için idealdir: Çağdaş ve yenilikçi bir görünüm arayan ve kullanıcı katılımını artırmak isteyen web siteleri. Bir işletme web sitesi veya bir tasarım ajansının portföyü iyi örneklerdir.
06. Tek sütun düzeni
Bu web sitesi düzeni, tüm içeriğini tek bir dikey sütunda içerir. Basit, anlaşılır bir tasarım (ve aslında, bu sayfada kullanılan tasarım).
Buradaki navigasyonun anlaşılması kolaydır – ziyaretçiler daha fazla bilgi için sayfayı aşağı kaydırmayı hemen bilirler. Ancak, bu düzen için akılda tutulması gereken önemli bir web sitesi gezinme ipucu vardır . Kullanıcıların sitenizi daha ayrıntılı keşfetmesine yardımcı olmak için bir ‘ Başa Dön ‘ düğmesi veya sabit bir kayan menü eklediğinizden emin olun .
Metni ağır olan siteler için tek sütun düzenini kullanırken, metni görüntüler, üstbilgiler veya alt üstbilgilerle sık sık bölmeyi unutmayın.
Aşağıdakiler için idealdir: Uzun biçimli içerik web siteleri veya içeriği kronolojik sırada görüntüleyen web siteleri. Bunlar bloglardan sosyal medya yayınlarına kadar her şey olabilir .
07. Kutu tabanlı düzen
Kutu tabanlı web sitesi düzeni, birden fazla içerik parçasını tek bir geometrik tasarımda birleştirir. Her bilgi biti bir kutuya düzgün bir şekilde kısıtlandığında, öğeler birbirini gölgede bırakmaz ve bunun yerine birleştirilmiş bir görünüm oluşturur. Her kutu, kullanıcıların en çok ilgilendikleri konu hakkında daha fazla bilgi edinebilecekleri farklı bir web sayfasına yönlendirir.
Önerilen bir uygulama, başlık olarak hizmet vermek ve farklı kutuları birbirine bağlamak için geniş özellikli bir kutu eklemektir. Öne çıkan kutu, sayfanın başlığını ve içeriğinin kısa bir açıklamasını içerebilir. Diğer bir ipucu, her bir kutudaki görsellerin birlikte çalışarak uyumlu bir marka kimliğine katkıda bulunmalarıdır .
Wix’te bir web sitesi oluşturuyorsanız, Wix Pro Galerisi bu düzeni oluşturmanın harika bir yoludur. Kaliteli görüntü ekranıyla, sütun ve satır sayısından başlayıp boyutlarına ve aralıklarına kadar kutu tabanlı mizanpajınız üzerinde tam kontrole sahip olursunuz.
Şunlar için idealdir: İçerik açısından zengin web siteleri. Bu düzen, her kutu farklı bir proje sayfasına götüren bir grafik tasarım portföyü için iyi bir çözümdür .
08. Kart düzeni
Kutu tabanlı düzen gibi, kart düzeni de farklı içerikleri görüntülemek için kutular veya diğer dikdörtgen kaplar kullanır. Bu web sitesi düzeni hiyerarşik değildir, yani hiçbir öğe diğerlerinde göze çarpmaz ve tüm bilgiler eşit şekilde ele alınır.
Aynı özellikleri taşıyan tüm kartlarla (boyut, yazı tipi vb.), İçeriği her birine aktarmak kolaydır. Bu, tüm ekran boyutlarına uygun modüler bir tasarımla sonuçlanır. Ayrıca, büyük miktarda bilgiye rağmen sezgisel ve ulaşılabilir bir göz atmaya izin vererek kullanıcı deneyimini geliştirir .
Şunlar için idealdir: İçerik açısından zengin web siteleri. Bu web sitesi düzeni bir vlog veya çevrimiçi mağaza için mükemmeldir .
09. Dergi düzeni
Basılı gazetelerden ilham alan dergi web sitesi düzeni, karmaşık görsel hiyerarşi oluşturmak için çok sütunlu bir tabloya dayanmaktadır. Bireysel olarak değiştirilebilen kapları uygulayarak, dergi düzeni daha küçük makalelere göre ana başlıklara öncelik vermenizi sağlar.
Bu, boyuta göre (daha büyük resimler ve başlıklar dikkatimizi ilk veren şeydir), öğe yerleştirme (sayfanın üst kısmındaki makale genellikle okuduğumuz ilk öğe olacaktır) veya sağlanan tasarım ayrıntısı miktarıyla ( fotoğraf eklenmiş bir makale yalnızca düz metin içeren bir makaleden daha fazla odak çizer).
Dergi düzeninde, okuyucuların dikkat aralıklarını azaltan F şekli yağsız okuma deseni de kullanıldığını unutmayın . F-desenini daha karmaşık bir ızgara ile birleştirmek, büyük bir miktar bilginin sindirilebilir okumalara bölünmesini sağlarken, bir düzen hissi ve temiz, düzenli bir tasarım sağlar.
Aşağıdakiler için idealdir: Haber yayınları veya bloglar gibi içerik ağırlıklı web siteleri.
10. Yatay şeritler düzeni
Bu web sitesi düzeni, web sayfasının uzun kaydırmasını tam genişlikte şeritlere ayırır . Her şeridin tam ekran katlaması (veya tam ekrana yakın) işlevi görmesi ile bu çeşitlendirilmiş düzen, her aşağı kaydırdıklarında farklı bir sürprizle kullanıcı beklentisi oluşturur.
Her şeridi öncekinden farklı hale getirmek için, bir şeritten diğerine geçmeye çalışın. Bu, her şeritteki web sitenizin renk düzeninden farklı bir gölge kullanarak veya bazı şeritlere görüntü ekleyerek diğerlerine yazılı kopya ekleyerek yapılabilir. Ayrıca, şeridinize kaydırma efektleri ekleyerek , bu düzeni bir hareket ve derinlik hissi ile aşılayabilirsiniz.
Aşağıdakiler için idealdir: Uzun kaydırma web siteleri. Tek sayfalık web siteleri bu düzenden özellikle yararlanabilir.
KAYNAK: https://www.wix.com/blog/2020/02/website-layouts