İçerik Yoğun Mizanpaj İpuçları ve Örnekleri Tasarlama
Web için kapsamlı düzenler oluşturmak beceri ve özveri gerektirir. Web tasarımcıları, yapamayacakları ve çok karmaşık bir şekilde işlerini yaparlar.. Web sayfaları geliştikçe, daha önce hiç olmadığı kadar fazla alan doldurma ve içerik tutma gereğini gördük. Bir web sitesinin nasıl tasarlandığını zaten anladıysanız, bu yöntemlerin daha iyi anlaşılması için çok büyük bir avantaj. Bir web sitesindeki temel özellikler nadiren değişir. Bununla birlikte, ortalama sayfa içeriğinden daha fazlası ile beyaz boşluk, tipografi, eleman konumlandırma gibi diğer faktörler de ortaya çıkmaktadır..
İçerik yoğun düzenler oluşturmak için bazı temel ipuçlarını kapsayacak şekilde ayrıntılara gireceğiz. Bunlar, sosyal ağ uygulamaları, büyük işletme ve kurumsal web siteleri veya bunların arasındaki herhangi bir şey arasında değişebilir. Kendine sorman önemlidir "bu tasarımla ne elde etmeye çalışıyorum?"Sayfaları tasarlarken, daha geniş bir müşteri adayı öngörmenize yardımcı olacak.
Özel Web Sayfaları
Pratik web tasarımında ne kadar deneyimli olursanız olun, hepimizin bir yerden başlamak zorunda olduğu doğru. Özel web sayfaları tasarlamak, genel olarak geleneksel özellikleri uygulamadan önce web programlamada bir kariyere atılan ilk adımdır..
Her zaman şablona yüklendiği düşünülen küçük bir sayfa öğeleri listesi oluşturmanızı öneririm. Bunların hepsi bir kez yazıldıktan sonra, kötü fikirleri ayıklamak ya da kaçırılan ya da unutulan mücevherleri almak daha kolay hale gelir. Bu aynı zamanda yoldaki stresi azaltmak için kolay planlamanın yolunu açıyor.
Düzen Tel kafes
Genel 5 sayfalık web sitesi için genellikle aynı öğelerin tekrarlandığını göreceksiniz. Bir üst köşe logosu, kafa gezinti bağlantıları, muhtemelen bir kenar çubuğu ve diğer işlevlerle bölünmüş ana içerik alanı (giriş, arama kutusu, vb.).
Ayrıntılı sayfa düzenleri oluşturmak için iyi bir başlangıç noktası düşünün. Birçok tasarımcı, çok açık olmayan kusurları dışlamak için olası tel kafes tasarımlarını çizmeyi yararlı buluyor. Bu, süslü bir kağıt gerektirmez ve bitkin bir defterde bile yapılabilir. Bir tel kafesin amacı, daha sonra ayrıntıları doldurmak için site düzeninin oda ile nereye gitmesi gerektiği konusunda kabaca bir fikir vermektir..
İçerik yoğun düzenleri ile platformun ne kadar içereceği dikkate alınmalıdır. 100'den fazla sayfadan oluşan uzun, karmaşık içerik barındıran kapalı bir sütun düzeni oluşturmak, nefes alma alanı için fazla yer bırakmaz. Eskiz yaparak ve önceden planlayarak, sayfa içeriği için geniş oda miktarını kontrol edebilirsiniz. Bu sadece metinleri kapatamaz veya alanları engellemez, aynı zamanda görüntü ve videolarla da ilgilenir.
Parlak Beyaz Alan
Beyaz boşluk mümkündür en önemli faktör İçerik yoğun düzen tasarımında dikkate alınmalıdır. Web sitesi içeriği, normal web sitelerinde olduğundan çok daha fazla kurallar. Okuyucular içeriği anlayamıyorsa, çünkü kelimelerinizi sindirecek yer yoktur, trafik sivilceli olur ve memnun olmaz.
Paragraflar ve sayfa başlıkları özelleştirmelerle başlamak için harika bir yerdir. CSS özelliklerini kullanarak, dış kenar boşluklarını değiştirebilmeli ve her blok satırındaki metin elemanını açabilmelisiniz. Bunlar, 1-6 tüm başlıkları, paragrafları, blok alıntıları, listeleri, önceden biçimlendirilmiş metni ve daha az sayıda öğeyi içerir..
Okuyucunuzun dikkatini çekmek istiyorsanız, büyük metin öğelerinin altına boşluk bırakmak önemlidir. Paragraflar ve daha küçük başlıklar, 15px-25px'lik alt kenar boşlukları yerinde olduğunda en iyi sonucu verir. H1 veya h2 gibi daha büyük sayfa öğeleri için 35 piksel + 'ı düşünün (bu, yazı tipi boyutunuza da bağlı olacaktır). Dikey elemanlar arasındaki boşluklar kaydırma ve "bir bakışta" tarama için önemlidir. ancak satır yüksekliği bir metin elemanındaki çizgiler arasındaki boşluğu etkileyen bir diğer önemli CSS özelliğidir. Paragraflar, yazı tipi boyutlarına göre çok daha yüksek bir satır yüksekliği değerine sahip olmalıdır, bu nedenle satırlar arasında bol miktarda ekstra dolgu bulunur..
Dinamik Stiller düşünün
Boşluktan başka, dijital tipografi Sayfadan atlamak için manipüle edilmelidir. Bugün dünyada yüz milyonlarca web sitesi ile aynı font tiplerini her yerde görmek çok yaygın..
İçeriği ağır bir web sitesi için bir düzen tasarlıyorsanız, sonuç en sonunda başka bir yumuşak şablona benzeyecektir. Gelişmiş tipografik stiller için oynayabileceğiniz çok sayıda özellik var. Metin gölgeleri, daha az / daha fazla harf aralığı, arka plan platformları, simgeler… liste sonsuzdur.
Gerçekten tasarımcı sensin ve son sözün hukuk. Bir düzen tasarlamak, geri dönüşü olmayan tek bir şeritli otoyolla karşılaştırılamaz. Süreç boyunca geri dönüp stilleri değiştirebilir, yeni unsurları değiştirebilir veya bir konsepti tamamen çöpe atabilirsiniz. Diğer bazı faydalı CSS ipuçlarını göz önünde bulundurun ve neyin en uygun olduğunu görmek için oynayın!
Açılır Menüleri Kullan
Çok fazla içerikle, tüm bağlantılarınızın tek bir sayfaya sığması pek olası değildir. Sayfaların aşırı yüklenmesiyle ilgili birçok seçenek vardır. Ek çubukların kenar çubuğu bloklarına yerleştirilmesi veya site altbilgisindeki sütunlara dikilmesi iki amaca yönelik seçeneklerdir..
En uygun ve kullanışlı seçenek, baş kategorileri ve alt kategorileri içeren açılır bir gezinme düzeni oluşturmaktır. Ayrıca, ayrıntılı olarak ayrıntılı konularınız varsa, alt alt kategoriler sunan birçok açık kaynaklı komut dosyası da vardır..
Muhtemelen en hızlı ve en az sinir bozucu strateji bir JavaScript çerçevesiyle başlamaktır. En popüler olanlardan bazıları jQuery, MooTools veya muhtemelen Prototip'dir. Bu kitaplıkların tümü dokümantasyon sunar ve birçoğunda ücretsiz açılan menü komut dosyaları bulunur.
İçerik Görünümlerini Planlayın
Uygulamada, ortalama web sitenizin içerdiği tüm içeriği barındırmak için basit bir vücut alanı oluşturmak çok daha zordur. Değişen tarayıcı standartları ve yarı kaliteli mobil destek sayesinde, bu kadar yoğun içerikli web sitelerinin çekildiğini görmemize şaşmamalı. Görüntülenen her web sayfasının stiline karşı duyarlı olun. Bazıları birden fazla görüntü içerecek, bazıları ise birincil bir grafik veya video içerebilir veya hiç grafik içermeyebilir. Son mizanpajı kodlamayı tamamladıktan sonra, farklı görünümleri barındırmak için birden fazla HTML sayfası oluşturun.
Bunların hepsi, ana içerik alanındaki içerikler dışında aynı dahili işaretlemeye sahip olacaktır. Her sayfa görünümü değiştirilebilir ve bitmiş bir ürüne ilişkin bilgi sağlar. Her sayfa için gerekli olacağını düşündüğünüz tüm ana görünümleri içerecek şekilde bunu değiştirin. Sayfa öğelerinin diğer örnekleri yorum kutuları, videolar veya gömülü galeriler veya sayfa ayırma bağlantıları içerebilir..
Stratejileri İyice Planlayın
Aslında, bir güç santrali web düzeni oluşturmak tamamen zor değil. Pek çok tasarımcı, blok elemanları veya renk köprülerinin nasıl yerleştirileceği gibi küçük ayrıntılara kapılıyor. Bu detaylar, bir marka mesajı gönderdiklerinde önemlidir, hatta daha küçük elemanlardan bile, mesaj sayfanın tamamı ile bir araya gelmelidir. Zihinsel olarak her bir engel için en iyi yaklaşımın nasıl olduğunu bulmak için tasarımınızın aşamalarını planlayın. Bir müşteriyle çalışıyorsanız, önceden ne tür içerik dolduracağını tartışmak iyi olur. Bu size önceden planlama ve genel bir düzen için en iyi yaklaşımı stratejiye alma fırsatı verir.
Özellikle droll konularının bir diğeri de mobil tasarım. Bu yeni pazar sadece akıllı telefonlarda değil güçlü tablet PC'lerde de muazzam genişleme görüyor. Bu, kullanıcıların düzeninize mobil bir ekrandan erişiyor olabileceği anlamına gelir - içeriğin taşmadığından ve düzgün bir şekilde sunulduğundan emin olun.
7 Ağır içerikli web sitelerine örnekler
Aşağıda popüler içerik ağırlıklı web sitelerinden alınan birkaç örnek ekran görüntüsü verilmiştir. Bunlar hem fiziksel hem de dijital pazarlarda çoğunlukla tanınmış markalar. Kendi projelerinizden ilham almak için aşağıdaki fikirlerden bazılarına göz atın. Ayrıca, yorumlar bölümünde diğer web içerikli web sayfalarını paylaşmaktan çekinmeyin.
Clicker
Clicker, TV ve film severler için yeni bir sosyal ağ uygulamasıdır. Yeni bir hesaba kaydolabilir ve en sevdiğiniz klasik TV şovlarından bazılarını mevsim ve bölüm listelerine göre arşivleyebilirsiniz. Daha az bilgi ve daha fazla video içeriğiyle siteyi IMDB ile karşılaştırabilirsiniz!
Web Tasarımının Geleceği
Web Design 2011'in Geleceği, önümüzdeki baharda Londra'da bir şeyler başlatacak. Daha fazla bilgi ve metin tabanlı düzen tasarımının harika bir örneği için ana sayfaya göz atın. Tüm detaylar gerçekten paylaşılıyor ve konuşmacılar, programlar, atölyeler, sponsorlar ve daha fazlasını sunuyor.
Lord, büyük olasılıkla
Bu komik düzende ana karakter Lord Likely “karikatürleştirildi” ve bir resme perfore edildi. Site, her biri yeni içerik, reklam, yayın bağlantısı ve arşiv içeren 3 sütuna ayrılmıştır. Tasarımın kendisi çok retro ve illüstrasyon tasarımları zekice..
Microsoft,
Çoğu teknoloji meraklısı Microsoft'u tanıyor. Aslında, bir bilgisayarın ne olduğunu anlayan birçok kişi size Microsoft ve Bill Gates hakkında kısa bir açıklama bile verebilir. Ana sayfalarında onlarca yazılım paketi, haber güncellemesi, basın bülteni ve geliştirici bilgisi bulunur. Sayfayı aşağıya doğru küçük bir yolla, dinamik içerik değiştirme özelliğine sahip dikey bir sekme menüsü görebilirsiniz.
Arama Motoru Arazi
Arama Motoru Land, Arama Motorları ve İnternet pazarlaması üzerine odaklanan popüler bir web dergisidir. Harika kalitede yazılarla sık sık güncelleme yapıyorlar ve her gün yüz binlerce kişiyi sitelerine sürüyorlar. Ana sayfa, her bir içerik modülünü ve reklamı tutmak için kullanılan 3 sütuna ayrılır.
Beyaz Saray
Amerika Birleşik Devletleri Beyaz Saray tasarımı çok temiz ve profesyonel görünüyor. Cumhurbaşkanının programı ve diğer önemli siyasi olaylarla ilgili birçok bilgi var. Sayfa odasını hafifletmek için bir püf noktası, sayfa başlığına doğru küçük bir içerik kaydırıcısının eklenmesi olmuştur. Ziyaretçileriniz sayfaya girdiklerinde 3-4 büyük haber başlığını görüntülemek için bu harika.
Yahoo Portalı
Büyük içerikli web siteleri Yahoo! zirveye doğru trend olmalı. Yahoo! web postası, haberler, videolar ve hatta web araması dahil olmak üzere müşterilerine yüzlerce hizmet sunmaktadır. Bazı Y göz atın! şablonların nasıl karşılaştırıldığını görmek için kenar çubuğundan portal bağlantıları.
Sonuç
Bunlar, somut bir içerik gerektiren düzenler oluşturmak için kilit noktalardan ve adımlardan yalnızca birkaçıdır. Geniş içerikli rezervuarlara sahip web sayfaları, çoğunlukla SEO yemi ve gerçek değeri olan bir yük olarak görülüyor. Tasarım, kullanıcının her web sitesinden aldığı ilk izlenim olduğu gibi her şeydir. Yüksek hacimli içerikle bu karışıklık ve aşırı genellemeler ile felakete dönüşebilir. Uygulama yapmayı asla bırakmayın ve yalnızca birkaç projeyle yoğun içerikli mizanpajlar tasarlamada ustalık kazanacaksınız.
