Tasarım Sistemleri
Şimdi sadece yazı tipleri, yazı tipi boyutları, görsel bilgiler ve şekiller gibi aynı görsel öğelerin değil, aynı zamanda tüm sayfanın (veya çok sayfalı bir tasarım durumunda, sitenin tamamının) kullanıldığı sistemlere bakacağız.
Bunu yapmanın akıllı bir yolu, Wix şeritlerini kullanmak: Şeritler ızgara sistemleri oluşturmak için sütunlara ayrılabilen tasarım araçları olarak kullanılabilinir, veya bütünsel bir şerit tekrarlanarak yatay veya dikey görsel yapılar oluşturulabilinir. Aşağıda, bu tür ızgara tabanlı 2 tasarım ve devamında ise biri yatay ve biri dikey sistem oluşturan iki alternatif daha göreceksiniz.
Izgara Sistemleri
Aşağıdaki iki farklı ızgara, aynı metinleri ve görsel materyali içerir. Bununla birlikte, yerleşimleri oldukça farklıdır: Birincisi simetriktir, iki eşit genişlikte sütuna bölünmüş şeritlerden yapılmıştır. İkinci ızgara asimetriktir. Burada da şeritler iki sütuna bölünmüştür, ancak oranları 4/6'dır.
Wix'te bir şerit sütun ızgarası yaparken dikkat edilmesi gereken bir şey, bölünmüş şerit sütunlarının içine metnin yerleştirilebileceği çok sınırlı alanlara sahip olmasıdır. Bu nedenle, bu yaklaşım yalnızca, daha ayrıntılı bilgi içeren takip sayfalarına bağlantı verilebilecek yalnızca başlıklar ve alt başlıklardan oluşan ana sayfalar için uygundur. İkinci olarak da, amacı sadece bir proje veya şirket hakkında hoş ve yüzeysel bir genel bakış sunmak ve iletişim bilgilerini sağlamak olan bir mikro site için de kullanilabilinirler.
İlk ızgarada şeritler iki eşit sütuna bölünmüştür. Bu sütunlar daha sonra ara sıra iki eşit parçaya bölündü. Bu alt bölümler, simetrik tasarımlarda her zaman bir tehlike olan işlerin fazla monotonlaşmasını önlemek için yapılmıştır.
İkinci ızgarada site genişliği, solda %40 ve sağda %60 olmak üzere iki eşit olmayan parçaya bölünmüştür. Simetrik versiyondan farklı olarak, bu sütunları asimetrik bir tasarım olduğu için alt bölümlere ayırmadım, monotonlaşma tehlikesi söz konusu değil.
Yatay Sistem
Tam genişlikte şeritleri birbirinin altına yerleştirip içeriğinizle doldurarak çok etkili bir görsel sistem oluşturabilirsiniz. Bu, çok fazla paragraf düzeyinde içeriğe sahip siteler için çalışmasa da, yalnızca başlık düzeyinde metinden daha fazlasını içeren içeriği göstermenin iyi bir yoludur.
Yatay bölümlerin yüksekliği içerik miktarına göre belirlenir - içine daha fazla metin yerleştirdiğiniz şeritler daha yüksek olacaktır, resim veya video şeritleri çok yüksek olabilir, böylece monotonluğu kırmak için yeterli alana sahip olursunuz.
Bu, kendi web sitemi etrafında tasarlayacak kadar sevdiğim bir stil. Buradan kontrol edin >>>
Site, tüm içeriğin yerleştirildiği tamamen yatay, tam genişlikte bölümlerden oluşturulmuştur. Bölümlerin yüksekliği içerik tarafından belirlendi, ancak görsel malzemeye gelince, videoların oranlarının yüksekliği 650 pikselde belirlediği video başlığı dışında, şerit yüksekliklerini 500 pikselde tutarlı tuttum.
Dikey Sistem
Dördüncü sistem, paragraf metni düzeyinde içeriğe sahip sayfalar için iyi olabilecek bir sistemdir ve yukarıdaki diğer üç sistemden hiçbirinin gerçekten barındırması amaçlanmamıştır - bunlar daha çok ana sayfalar veya yalnızca giriş düzeyinde bilgilerin bulunduğu mikro siteler olacak şekilde tasarlanmıştır. verildi.
Bu nedenle, bunun ötesine geçen bir içeriğiniz olduğunda, sitenin merkezinin ağırlıklı olarak kullanıldığı web tasarımının klasik, dikey, aşağı kaydırma yaklaşımına bağlı kalmak iyi bir fikirdir, ancak elbette ara sıra da olabilir. monotonluğun üstesinden gelmek için iyi olacak tam genişlikte elemanlar.
Burada sayfa, monotonluğu önlemek için birkaç dağınık yatay öğe olmasına rağmen, ağırlıklı olarak merkezi sayfa alanını kullanan dikey bir eksen üzerinde inşa edilmiştir. Sadece başlık, alt başlık düzeyinde değil, aynı zamanda gövde metinleri de olan metin tabanlı daha ayrıntılı bilgi içeriğine sahip siteler için böyle bir tasarımın çok uygun olduğunu görsel bir temsil vermek için sahte metin paragrafları ekledim.