Merhabalar. Bildiğiniz üzere Youtube kısa bir süre önce tasarımını değiştirdi. Bir takım küçük değişikliklerle tasarımın hem sade hem de daha kullanışlı tutulmaya çalışıldığını görüyoruz. Bana kalırsa bu konuda oldukça başarılı gidiyorlar.

Youtube’da üye girişi yaptıktan sonra üst sağ alanda yer alan navigasyon sadeliği ve etkili görünümü ile çok hoşuma gitti. Bu yazımızda bu tarz bir menü sistemini basit kodlar yazarak nasıl yapabileceğimizi anlatacağız.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (8kb)

Merhabalar. Birçok tarayıcının güncellenmesiyle artık biz de Css3 kodlarımızı daha sağlıklı çalıştırır hale geldik. Özellikle Firefox 3.6 üzerinde yaptığımız uygulamaları daha iyi görme şansımız var.

Bu makalemizde de Css ile basit bir yatay menu yapacak, bu menüye gölge efekti verecek ve biraz da jQuery ile animasyon katacağız. Özellikle box-shadow ve border-radius bu makalemizde üzerinde duracağımız konulardan.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (3kb)

Uzun bir aradan sonra yine merhabalar. (Yazmayalı çok uzun zaman olmuş gerçekten) Bu makalemizde sizlerle web tasarımında son dönemlerde oldukça sık kullanılan açılır navigasyonları nasıl oluşturacağımızı anlatacağız.

Hemen belirtmeliyim ki bu makaleyi yazarken Smashing Magazine‘in yeni tasarımından esinlendim.  Kategorileri görüntülediğimiz menü oldukça hoşuma gitti. Bu tarz bir menü yapımını sizlerle paylaşmaya karar verdim.

MENÜ ÖNİZLEME MENÜ DOSYASI İNDİR

Sixrevisions 50 ikon tasarım dersi derlemiş. İkon tasarımı konusunda kaynak arayanlar için birebir.

Az önce Line25′te bir makale gördüm. Basit olarak Xhtml ve Css ile bir sayfanın kodlaması anlatılıyordu. Ne zamandır aklımda olan ama yazmaya bir türlü fırsat bulamadığım bir konuydu bu. Ben de oturup yazmaya karar verdim. Umarım size en yalın haliyle Xhtml ve Css sayfa kodlamayı anlatabilirim. Gerçekten bu iş düşündüğümüz kadar zor değil.

W3C standartlarına uygun kodlama için (valid code) Xhtml bilgimiz olması şart. Daha önceki zamanlarda sitemizde Xhtml dersleri yayınlamıştık, dilerseniz o derslerden yararlanabilirsiniz. Ancak standartlara uygun bir sayfa kodlaması için yalnızca Xhtml bilgisi başlı başına yeterli değil. Xhtml ile oluşturduğumuz kodların görünümünü düzenleyecek olan stilleri yazmak için CSS’ye de hakim olmak gerekli. Kaldı ki yazacağımız Css kodlarının da standartlara uygun olması gerekiyor. Css yazarken de belli kurallara bağlı kalmamız gerekiyor. Geçerli bir sayfa kodlaması için Xhtml ve Css’ye başlangıç aşamasında hakim olmak yeterli.

Öncelikle Xhtml kodlarımızı yazarak işe başlayalım. Sayfamız klasik olarak bir Üst bölüm (Header), bir Navigasyon alanı (Navigation), bir İçerik alanı (Content), bir Menü bölümü (Menubar veya Sidebar) ve bir Alt bilgi (Footer) alanı barındıracak. Şimdi bu alanları Xhtml olarak yazalım.

SmashingMagazine’den güzel bir makale daha. Farklı alanlarda kullanılabilecek 50 yeni Css tekniği derlenmiş.

Tasarım yaparken renkler ve renk seçimi oldukça önemlidir. Ben de tasarımlarımı yaparken mutlaka birbirine uyumlu renkler seçmeye özen gösteriyorum. Hem göz yormayacak hem de birbiriyle uyumlu olabilecek renkleri yan yana getirmeye çalışıyorum. Yukarıdaki resimde kullanmış olduğum renklerden bazılarını görüyorsunuz. Bu renklerin birçoğunu t-infection.com üzerinde de görebilirsiniz. Renklerin metin olarak sıralı halini yazının sonunda görebilirsiniz.

Renk seçimi konusunda Adobe Kuler ve benzeri servisler size oldukça yardımcı olabilir. Ayrıca Ertuğrul sağolsun ColourLovers‘tan haberdar olmamı sağladı. Renk seçimi konusunda size yardımcı olabilecek bir başka kaynakta burası bana kalırsa.

#2E83FF #E6E6E6 #F91364 #6A8C0F #95CB01
#F0F6F8 #83AA19 #93CA01 #EB157A #C0C0C0
#121212 #28E3FF #74CFF9 #B8DDFF #FF9000

Merhabalar. Günümüz web tasarım anlayışı içinde bir web sitesinde bulunması gereken olmazsa olmaz ögelerden birisi de ikonlardır. İkonlar küçük olmasına karşı oldukça etkili birer tasarım elemanıdır. Sitemizi ziyaret eden kullanıcılara sitedeki yerleşime bağlı olarak birçok şeyi bu küçük şirin ikonlar anlatabilir. Ben de yapmış olduğum tasarımlarda ikonları oldukça sık kullanırım.

Bu yazımızda sizlere ikonlarla ilgili bir web servisini tanıtacağım. İconza isimli bu servis ile kendi ikonlarınızı özelleştirip siteden indirebiliyorsunuz. Site size anasayfada verilen ikonların renk, arkaplan rengi, boyutu gibi özellikleriyle dilediğiniz değişikliği yapıp bu ikonları indirme fırsatı sunuyor. Bu değişiklikler sonucunda birbirinden güzel 70 ikona sahip olabiliyorsunuz. Dilerseniz özelleştirdiğiniz bir ikonun üzerine tıklayıp sadece onu indirme şansınız da bulunuyor. İkonların hem tek tek hem de topluca indirilebilmesi güzel bir seçenek olmuş. Açıkçası Iconza’dan neden bu kadar geç haberim oldu kendime kızıyorum. Servisi görüp denediğimde oldukça hızlı olduğunu ve basit yapısı sayesinde tüm kullanıcılara hitap edebileceğini gördüm. İkon arayışı içindeyseniz ve ikonlarınızda kendi renklerinizi istiyorsanız Iconza tam size göre.

Graphicrating.com tarafından yazılan bu makale oldukça hoşuma gitti. Binlerce takipçisi olan büyük blogların tasarımında dikkat ettikleri noktalar göz önüne getiriliyor. İncelemenizde fayda var diye düşünüyorum.

Tasarımlarınızda kullanmak üzere ücretsiz olarak edinebileceğiniz 45 kaynak listelenmiş. Listenin başında Famfamfam ikonları görünce çok sevindim, kullandığım yegane ikonsetlerden birisidir. Listeye bakmanızı tavsiye ediyorum.