Blogunuzun Tasarımını Geliştirmenin 6 Yolu
Bloglar, tasarım söz konusu olduğunda sıklıkla soğukta bırakılabilir. Şirketlerimiz ya da kendimiz için olsun, bizim bloglarımız söz konusu olduğunda birçoğumuz yoğun tasarım ihtiyacını indirgiyoruz.
Ancak, kimliğimizin her yönünün, tercih ettiğiniz tarzla, temiz ve sezgisel bir şekilde tasarlanması gerektiğini fark etmemiz önemlidir. Web çalışmasının bu zorlu yönü, sürekli olarak uğraşmamız gereken bir şeydir. Ve evet, bu, bloglarla çalışarak geçirdiğimiz zamanı içerir.
Pek çok zaman blogunun karmaşasında kaybolması, çünkü bunları bilgi mimarisine geldiğinde muazzam 'metin döküntüleri' olarak görüyoruz ve kesinlikle onların kimlikleri için bir yönü var, ama bundan daha fazla potansiyele sahipler.
Bazı bloglar, uygun şekilde tasarlandığında, düşünce akışımızın yanı sıra bazı portföy bilgilerinin görüntülenmesi için harika, diğerleri ise hem haberleri hem de fotoğrafçılığı sergilemek için harika.
Önemli olan, bir blog, çeşitli konular için harika bir tutma tankı olabilir ve ekranı, içinde yaptığınız belirli tasarım seçeneklerine göre gelir. Son beş yılda, blog dünyasını eskiden olduğundan çok daha kolay hale getirmek için birçok şey ortaya çıktı. Örneğin, WordPress mükemmeldir ve temalar bizim için çok fazla tasarım çalışması yapar, ancak eğer o kadar baharatlı olmak istiyorsanız aklınızda bulundurmanız gereken birkaç şey vardır.
Benzer şekilde, eğer kişinin navigasyonunu veya düzenini düzenlemek isterseniz, farkında olmak istediğiniz bazı şeyler de vardır. Bu neredeyse herhangi bir blog motoru için veya kendi başına çalışırken. İşte bu önemli bitlerin ne düşündüğüne dair düşüncelerim.
Gölge tabanlı metin efektleriyle çalışma
Metin efektleri, blog'unuzda başlık başlıklarını, gezinme çubuklarını veya içerik tanıtımlarını sunmak için kullanışlıdır. Web üzerinde fazla kullanıldığını gördüğümüz bazı yaygın etkilerden ve bunların nasıl doğru bir şekilde kullanılacağından bahsedelim.
Retro metin
Genellikle çalışmak için bir acı, ama bu gerçeği rağmen geçen yıl buçuk tur yapıyor gibi görünüyor. Ve CSS3'ün gelişiyle, bu mükemmel gölgelendirmeyi manipüle etmek ve bulmak çok daha kolay. Bu etkinin nasıl doğru bir şekilde oluşturulacağını anlamamıza yardımcı olacak bir örneğim var, sonra ne zaman kullanacağımı ve ne zaman kullanmam gerektiğini anlatacağım. Oyunun retro efektli adı, bulanıklık yarıçapı ve çift gölgeler kullanmıyor. Diyelim ki koyu renkli bir yazı tipiyle çalışıyoruz (# 707070I), bunu başarmak için ikili bir metin gölgesi kullanmak istiyoruz. Böyle bir şeye benziyordu:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
Bu size 70'li bir bakışla güzel bir ikili kenarlık efekti vermeli. Tabii ki, gerçek 70'lerin vibe'sini elde etmek için her türlü renk manipülasyonunu eklemeniz gerekebilir, ama en azından baz etkisi azalır. Unutmayın, renklendirme ile çok çıldırmayın - ve kesinlikle metin gölgeleri için x ve y ofsetiyle çok çıldırmayın (çok hızlı okunamaz hale gelebileceği için). Retro efekt kullanıldığında, en iyi kullanım başlık başlıklarındadır. Bu, küçük boyutlu metin veya açıklayıcı bilgilerle iyi çalışacak bir etki değildir. Blogunuzun üst kısmına yapışıp yalnız bırakmak için en iyisi.
Letterpress ve metin metni
CSS3 shadow'in sunduğu bir diğer popüler özellik, 'letterpress' olarak da bilinen bir iç stiltir. Bu kesinlikle CSS3 metin efektleri dünyasında sıcak bir konu, bu yüzden onları düzgün bir şekilde nasıl yapılacağına bakalım. Bir iç tasarım, tipik olarak Y ekseninin, metnin hemen arkaplanında ince bir vurgulama izlenimi vermek için küçük bir miktarın dengelenmesiyle elde edilir. Çoğu zaman, arkaplan kontrastının (ışık / karanlığa) karşıt olarak kullanıldığını göreceksiniz, böylece etkinin daha çok okuyucu üzerinde bir etkisi vardır. Hadi bir örnek verelim.
Açık renkli, koyu metin:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
Koyu arka plan, açık metin
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
Bu, üstbilgiler veya blog başlıkları için kullanılabilecek gerçekten güzel bir katmanlanmış / eklenmiş bir etki bırakacaktır. Site boyunca zorlu bir şekilde kullanın, çünkü hiçbir şey metin efektlerini aşırı kullanan birinden daha kötü değildir. Bu durumda, çeşitli alt başlıklarda veya çeşitli kenar çubukları veya altbilgi öğeleriyle kullanılmayabilir - ancak bunu açıklayıcı bilgilerde kullanmadığınızdan emin olun. Yine, herhangi bir gölge temelli metin etkisi böyle bir şey için kullanılmamalıdır.
Blogunuzdaki görsellerle çalışma
Bununla yüzleşelim, web tasarımcıları olarak çalışmalarımızı sergilemeyi seviyoruz. Bu kadar çok seviyoruz ki, kişisel bloglarımız bile, portföy görüntüleri ve bu konudaki başlıklar ile dolu olabilir. Öyleyse neden ikisini birleştirmiyorsunuz? Altyazı bilgisi ile çalışmanın en iyi yolu, resmin içindeki ilgili bilgileri içermektir ve bunu yapmanın en iyi yolu, doğrudan görüntü üzerinde bir CSS3 efekti uygulamaktır.
Bunun neden resimlerle çalışmanın önemli bir özelliği olduğunu merak ettiyseniz, sadece Google Chrome web mağazasına (eklentiler) gidin. Binlerce görüntüyü çevrelerinde hiç metin olmadan görüntüleyebildikleri gibi, üzerlerine tıklamak isteyip istemediğimizi bilmek için yine de söz konusu görüntü hakkında yeterli bilgi veriyorlar. Bu çok zekice ve daha fazla şey, sadece gereksiz altyazı metinlerini temizlemekle kalmayıp aynı zamanda kullanıcı deneyiminde bir artış sağlamak için böyle bir tekniği hayata geçirmelidir.
Öyleyse, kişisel blogunuz için, ancak kendi dokunuşunuzla yeniden oluşturalım. Böylece, üzerinde çalışmış olduğunuz web sitesi görüntüleri için istemci bilgilerini görüntüleyebilirsiniz:
Önce görüntü için bir kapsayıcı oluşturmamız gerekiyor, sonra da içinde kullanmak istediğimiz metin için başka bir kap oluşturmamız gerekiyor. Bu durumda, bir alt başlık, bir parça metin ve bir bağlantı kullanacağız. sonra içeride, metin için bir kapsayıcı ve görüntülediğimiz müşterinin web sitesine bağlantılar oluşturuyoruz.
Bu bölümde, yaptığımız şey gerçek görüntüyü değiştirmek ve metnin geçişini sağlamaktır. Aynı zamanda görüntünün Y ekseni boyunca değil de X ekseni boyunca ayrılmasını istediğimizi belirliyoruz. sürgülü kapı tipi bir etkiye sahip olacağız.
Şimdi fareyle üzerine gelme efektini ayarlayacağız ve bu etkinliğin başlaması için geçişi başlatacağız.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }Burada gördüğünüz gibi, yaptığımız şey görüntü için yukarıda yaptığımıza benziyordu. Sadece görüntü kaldıktan sonra metni getirdik ve sorunsuz gittiğinden emin olmak için + 0.1s bir gecikme verdi. Ve bu konuda.
Bunu özelleştirebileceğiniz bir dizi başka yol ve kesinlikle kullanabileceğiniz başka geçiş efektleri. Unutmayın, eğer daha gelişmiş geçişlerle çalışıyorsanız, bunları, bu kadar basit bir şeyle yaptığınız gibi tekrar eden bir şekilde kullanmayın. Anahtar görüntüleri vurgulamak için en iyi şekilde kullanılırlar.
Yaratıcı düzenlerle çalışma
Çoğu zaman, web tasarımcıları olarak, yıl içinde ve yıl içinde istismar edilen aşırı derecede kullanılan eğilimleri göreceğiz ve onlarla ilgili değişim için bir ses olmak istiyoruz. Ancak tahıllara karşı çıkmak riskli bir uygulama olabilir, özellikle de doğru şekilde yapmıyorsanız (bir not olarak) 'doğru yolla' yaratıcı olmanız gerektiğini söylemiyorum çünkü 'doğru yol' yoktur. yaratıcı ol). Ben bunun yaratıcılık olduğunu düşünüyorum çünkü bence kendimizi kısıtlamalardan ya da yaratıcı normlardan koparmaktayız ve aslında bunu özendiririm, ama aynı zamanda bu normların web sitemizde yer almasının nedenlerine de dikkat etmemiz gerektiğini düşünüyorum. tasarım temaları ve onlarla birlikte yenilikçi olmak için neler yapabileceğimizi, akılda tutarak.
Benzersiz metin hizalaması
Metinle yaratıcı veya benzersiz yollarla çalışırken (örneğin, 12pt Arial orta hizalı değil), metninizin artık sayfadaki ana içerik olmadığını hatırlamak çok önemlidir. Önemli bir de olsa, destekleyici bir unsura düşürülmüştür.
Metinle çalışırken kendinize her zaman sormanız gereken bir soru, “Bu, sayfanın geri kalanıyla iyi bir denge sağlıyor mu?” Bazı portföy çalışmalarına, bazı rastgele görüntülere veya belki de diğer iki metin sütununa bitişik olabilir. sayfa.
Ancak, bitişik veya dik olana bakılmaksızın, mümkün olan en iyi şekilde denemeniz ve dengelemeniz gerekir. Izgara çizgilerini düşünün ve eğer varsa, ızgara sistemlerini inceleyin. 960 ızgara sistemi ne tavsiye ederim). Sayfadaki ızgara düzenini nereye yerleştirdiklerini araştırın ve sonra kendinize bunun nedenini sorun - daha sonra sizinkiyle eşit derecede dengeli olup olmadığını öğrenin. İçeriğinizin ızgara sistemi boyunca kendinizin üzerine döşendiğini ve bu durumda neye benzeyeceğini düşünmeye çalıştığınızı hayal edin, ardından bunu CSS'de çoğaltın.
Yaratıcı altbilgiler
Yaratıcı altbilgiler, bir bloga veya web sitesine gerçekten çok fazla kişilik ekleyebilir ve böyle düşünmenin tersine sezgisel görünmesini sağlar. 'Dünya altı' tarzında temalı güzel bir altlık ya da sadece bir şirketin web sitesi veya blogunun temeli olan jQuery kaydırma hakkında konuşuyor olsak da, bu bir web sitesinin çok dakikasıdır. çok güçlü bir etkisi olabilir. Görüşler, durumun ne ölçüde olduğu ve bunun neden olabileceğine bölünmüştür. Kendi teorim var: Bir web sayfasını okuduğumuzda baştan başlayıp aşağıya doğru hareket ediyoruz ve okuduğumuz şeyle ilgili çıkarımlarımızı çizdiğimiz sayfanın dibindedir.
Yaratıcı altbilgiyle çalışırken, aklınızda bulundurmak istediğiniz birkaç şey ve en çok sevdiğim altbilgilerde kullanıldığını fark ettiğim birkaç en iyi uygulama var. Benim için bu şekilde bir altbilgi kullanmanın en önemli parçası, web sitenizle aynı renk şemasını kullanmaktır, ancak farklı bir kontrastla. Bu, son derece önemlidir ve tabiki, ilk önce altbilgideki genel tema için çalıştığınız karşıtlığa göre font rengindeki yukarı veya aşağı kontrastı pompalayabilirsiniz.
Hatırlanması gereken en önemli şey, bu bölüm için güzel bir üslup setine sahip olmaktır. Siteye güzel bir tamamlanma hissi verir. Bu tekniği kullanırken, altbilgiyi istediğiniz kadar yüksek yapabilirsiniz. Çünkü, karşıt renk şemasıyla, bunun aslında bir alt bölüm olduğu açıktır.
İçerik gelince, yeni footer dünyasında, logo resminizi ve blog adınızı, sosyal ağ görsellerinizi veya bağlantılarınızı, son tweet'inizi ve hatta basit bir iletişim formunu eklemeniz uygun olabilir. Bu elbette ki kişisel tercihlerinize bağlı olarak değişebilir, ancak tüm bu seçenekleri gösterme meselem, bir web sitesinin veya blogun altında gösterilmesi uygun olan şeyde geçmişten günümüze evrimi göstermek.
jQuery kaydırma
Bu, bir web sitesinde gezinmenin en sevdiğim yollarından biridir ve bunun bir blogdaki yayınlarda gezinmek için özellikle geçerli olduğunu düşünüyorum. Bunun için jQuery ile çalışmanın birkaç farklı yolu vardır, bu yüzden burada pürüzsüz bir kaydırma yapmak için en sevdiğim (ve en kolay) yöntemlerden biri olan ve daha sonra neler olup bittiğini ve nasıl uygulanacağını gözden geçireceğim.
Yatay kaydırma istenen düzeyde olmadığı için bu dikey kaydırma kodudur.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} , 1000); event.preventDefault ();});});Burada neler olup bitti karmaşık görünebilir, ama aslında oldukça basit. Gezinme öğesinin “.class” ı üzerine tıklayacağımız bir işlev açıyoruz (buna bir tıklama olayı diyoruz). Bu yüzden, buradaki en önemli kısım, listenin (ul) sınıfını “nav” olarak adlandırmaktır. Ya da bu sınıfa ne yazmış iseniz, koddaki “nav” ile değiştirin. Ve işleyen bir jQuery kaydırması için bu oldukça fazla, sadece web sitenize atmak ve minified jQuery (tercih edilir) ve hepiniz gitmeye hazırsınız.
Kullanım böyle bir dikey kaydırma ile gider, oldukça sınırsızdır. Bir çok insan el ile aşağı doğru kaydırma yapmaktan zevk alamıyor, onlar için gerçekten sayfanın tadını çıkarıyorlar. Ayrıca, özellikle de bu mesajlar büyükse, bir web sitesinde yayınlamak için mükemmel bir yol. Bloglarımda veya web sitelerindeki kategorilerdeki çeşitli portföy alt bölümlerine geçmek için sıklıkla kullanacağım. Sitenizi bir gece gündüz teması yapmak veya kategorileriniz veya blog konularınız için tema yapmak gibi temalar yapıyorsanız, mükemmel bir tekniktir.
Umarım bu tekniklerin bazıları, blogunuzda çeşitli tasarım estetiği uygulamak için hepinize yardımcı olmuştur. Unutmayın, onları dikkatli kullanın ve gösterişli efektler kullanırken en iyi karar verdiğinizden emin olun. Dış dünyanın belirli yönleri olduğu kadar çirkin olmayan bir internet yaratma yükümlülüğümüz var. Her ne kadar büyük ve ezici bir görev olsa da, bir seferde sadece bir tasarım ve bir günde bir tane alırsak başarabileceğimiz bir şeydir. Bunu basitleştirin, dürüst tutun, gerçek tutun ve her zaman tuttuğunuz her zaman tutkuyla tutun.
En iyi blog tasarım ipuçlarınız neler? Gerçekten harika bir blog tasarımı için ne yapar? Yorumlarda bize bildirin!
