İnfografik Tasarımları ile Anlatımlarınızı Renklendirin

infographic-banner

Günümüz anlatım ve sunumlarında görsel yükü artık infografikler (infographic) taşıyor. Dev firmaların da büyük verilerini yine infografik şabloları ile sosyal medyada anlatır olması bu tasarım tipini daha da popüler kılmakta.

Genellikle Adobe Illustrator üzerinde hazırlanan ve düzenlebilen bu şablonları siz de anlatımlarınızda kullanmak ister misiniz? Adobewordpress ailesi olarak sizler için 10 kaliteli ve ücretsiz infografiği derledik.
(daha&helliip;)

Devamını Oku


kagittan-htmle-web-tasarimi

Eskizden Kodlamaya Web Tasarımı

Eğlenceli bir makale ile yine sizlerleyiz. Bugün sizlerle deftere çizeceğimiz bir eskize hayat vereceğiz. Böylece web tasarımının en derinlerine dokunmuş olacağız. Biraz uzun soluklu olsa da gayet eğlenceli. Yukarıdaki gibi deftere karaladığımız tasarımları ilk Photoshop‘a, daha sonra da HTML ve CSS‘e dökeceğiz. Tabii bu işlemleri yaparken bütün bu teknolojilerin en son versiyonlarını ve en güncel tanımlarını kullanacağız. Herşey hazır olduğunda aşağıdakine benzer bir sonuç elde edeceğiz.

eskiz-web-tasarimi

Başlamaden önce malzemelerimizi hatırlayalım :

  • Cetvel
  • Kalem
  • Defter
  • Mac kullanıcıları için TextEdit
  • Windows kullanıcıları için Notepad

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

Responsive WordPress Temaları ~ Ağustos 2013

WordPress TemalarıResponsive WordPress temaları üzerine konuşmaya devam ediyoruz.

Mobil cihazlarının kullanımının artmasıyla Responsive kelimesini daha sık duymaya başladık.İşte karşınızda Ağustos ayında sizler için seçtiğimiz 10 adet ücretsiz WordPress teması.

Liste gayet kaliteli, bu temaların niçin bedava dağıtıldığını merak edeceksiniz. (daha&helliip;)

Devamını Oku

Photoshop ile Renkli Yazı Efekti

Rainbow Text Effect

Bu makalemizin konusu renkli bir yazı efekti. Photoshop ile birkaç dakikada hazırlayabileceğiniz bu yazı tasarımı sunumlarınız için gayet şık bir tercih olabilir.

Başlayalım

Photoshop’u açtıktan sonra istediğimiz boyutlarda yeni bir çalışma alanı oluşturuyoruz. Ben 690×235 piksel boyutlarında çalışacağım. Açtığımız yeni çalışma alanının arkaplan rengini siyah olarak ayarlayabilirsiniz. Burası sizin tercihiniz.

 

(daha&helliip;)

Devamını Oku

CSS ile Basılabilen 3 Boyutlu Buttonlar


CSS ile birçok button hazırladık. Fakat yukarıda gördükleriniz basılma hissiyatını en çok verenler.

Box-Shadow ile hem 3 boyut hem de basılma efekti oluşturacağız. Yani buttonu tasarlarken bir yandan da hover için alt yapı oluşturmuş oluyoruz. Bu şu demek oluyor; 50% daha hızlı yüklenen buttonlar ve aynı oranda artan performans.

“Bu makalede hazırlayacağımız buttonlar performans-tasarım açısından en iyiler listemde.”

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku

HTML5 ve CSS3 ile Button Örnekleri

Daha önceki yazılarımda HTML5’in yeni elemanlarını tanımıştık. Şimdi onlardan birini, aside’ı kullanarak birkaç button hazırlayalım.

Beraberinde CSS3 ile aramıza katılan çerçeve özgünleştirme özelliklerini de kullanacağız. Ve tabiki :before :after bölümleri ile objelerimizin sol ve sağ taraflarında farklı farklı stiller oluşturacağız.

Aside nasıl kullanılır?

HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it.

Yukarıda da anlatıldığı aside çeşitli metinlere destek amaçlı oluşturulabilecek küçük anlatımlardır. Yazının altında duran alıntı metinler gibi olduğu söylenebilir. Kullanılması zorunlu değildir fakat uzun makalelerde anlaşılabilirliğin arttırılması için tavsiye edilir. Biz ise yeni kod birimini button olarak kullanacağız. HTML5’in temelinde aside’ın button işlevine dair bir anlatım yok. Fakat HTML5’in sunduğu en büyük yenilik özgürlük!

ÖRNEĞİ GÖRÜNTÜLE

(daha&helliip;)

Devamını Oku