Tasarladığınız sitelerde kullanmak üzere ikonlar bulmak genelde zor bir iştir. Renk uyumu, şekillerin uyumu, boyutlar gibi birçok etken devreye girer ve uygun bir ikon bulmanızı zorlaştırır. Bu dertten kurtulmamız için açılan IconPot sitesi yaklaşık 3 bin tane ikonu tasarımcıların beğenisine sunuyor. Tamamen ücretsiz olan bu ikonları ayrıca ticari amaçlarla da kullanmanız mümkün. Telif hakkı talep edilmemekte.

Zaman zaman bildirgeç‘te paylaşımlarda bulunuyorum. Geçtiğimiz gün sIFR ile bir sitenin yazıtiplerini düzenlerken yeni bir program ile karşılaştım. Bu program Adobe Flash’a ihtiyaç duymadan 3 tık ile sIFR’in swf dosyasını oluşturabilmeyi sağlıyordu. İşte bu yüzden CoffeeCup’ın geliştirdiği sIFR Font Maker programını bildirgeçe yazarak web tasarımcıların işini kolaylaştıracak bir yazılım ile tanıştırdım. Bu programa alternatif olarak online bir uygulama olan sifrgenerator.com‘u da tasarımcılara öneririm.

Bildirgeç’teki sIFR Font Maker yazım
Bildirgeç’teki köşem

Not: Birkaç gün içinde sIFR ve alternatifi olan FLIR ve typeface teknikleri hakkında bir makale yayınlayacağım. Bu konuya ilgili olanlar benim örneklerime de bakabilirler.

Olmazsa Olmaz Serisi No:1 – Otomatik Tamamlama makalem ile OOS’ye başlamıştım. İlk olmazsa olmazımız otomatik tamamalama özelliğine sahip bir arama kutucuğu geliyordu. Serimizin ikinci gerekli malzemesi ise bir çok yerde belki de duyup ne olduğunu çözemediğiniz “Reset CSS”!

Reset CSS Nedir?
Bir CSS tekniği diyebileceğimiz CSS Reset ile IE, Mozilla, Safari vb. tarayıcılarda öntanımlı olarak gelen bazı padding, margin, h1, h2, h3 tarzı verileri sıfırlayarak yazacağımız css kodunun her tarayıcıda aynı şekilde görünmesini sağlar. Bu kod bütününü CSS dosyanızın başına koyarak sitenize eklerse

Başlıyoruz…İlk adım Margin ve Padding’leri sıfırlamak

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

Elemanlara Hükmedelim

body
{
line-height: 1;
font-size: 88%;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

Birkaç özel gerekli float bilgisi koyalım

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

İşte bu kadar basit. Floatları ayarlarken uygun float sınıflarını kullanırsanız sayfanızda bir standart olur.
Dİpnot: Makalede Nettuts’un Create Your own Simple Reset CSS yazısından derleme yaptım. Kodlar da buradan alınmıştır.

Kaynak Kod

İngilizcesi Autocompletion olan “Otomatik Tamamlama” sistemi, iki ya da 3 harfi input‘a grdikten sonra en yakın sonuçları bize anında gösteren ve en uygununu seçmemizi sağlayan bir sistemdir. Javascript sayesinde yeni bir sayfa yüklemeden yapabileceğimiz bu fonksiyon facebook‘un arkadaş profilini arama kutusunda kullanılır.

Otomatik Tamamlama sistemi, site içi arama fonksiyonunun sıkça kullanıldığı sitelerde bulunmalıdır. Örneğin bir alışveriş siteniz var ya da kelephir.net gibi günlük ürünleri indeksleyen bir siteye sahipseniz daha önceki ürünlerin bulunabilmesi için otomatik tamamlama sistemini kullanabilirsiniz.

Devthought sitesinde hem otomatik tamamlama hem de facebook tarzı birçok ismin aynı anda eklenebildiği input , kullanılabildiği alanların fazlalığı ve işlevselliği bakımından Olmazsa Olmazlar Serimin 1 numarasında bulunuyor.

Kaynak Kod || Demo

Daha önce ben de CSS Sprite’ların kullanılışı hakkında “Sprite’lar nedir? Nasıl kullanılır?“adında bir makale yazmıştım. Bugün çeşitli RSS yayınlarını okurken CSSgirl sitesinde yazılmış olan CSS Sprite makalesi gözüme çarptı ve ne kadar ayrıntılı işlediklerini görünce sizle paylaşmak istedim. Sprite tekniği ile rollover bir menünün nasıl yapıldığını en ince detayına kadar anlatmışlar.

Buradan okuyabilirsiniz.

Birçok kez sıklıkla takip ettiğimi söylediğim woork‘de yayınlanan yeni yazı tüm tasarımcıların elinde bulunması gereken bir kaynak yazı olmuş. 25 farklı mükemmel rehberi bir araya toplayan Antonio Lupetti’nin yazısına buradan ulaşabilmek mümkün.

Son zamanlarda çoğu sitede devamlı tekrar eden arkaplan resimleri görüyorum. Bazıları sadece 45 derece açıyla inen çizgilerden ibaretken, bir kısım arkaplan var ki bence çok hoş görünüyor. Stripe kullanmak yerine background pattern’leri kullanmak tasarıma dolgunluk hissi katıyor. Yapımı daha zor olan background pattern’lerin kolayca yapılması için de bir web uygulaması devreye girmiş. Bgpattern sitesi sayesinde bu tarz grafikleri yapmak artık çocuk oyuncağı. Grafiğinizi seçip, renk verebiliyor, istediğiniz açıda döndürebiliyor ve ne sıklıkla tekrar edeceğini belirleyebiliyorsunuz.

Bir çok tasarımcı websitelerini Photoshop ile hazırlıyor ve PSD formatında bu dosyaları kaydediyor. Biten PSD tasarımlar ise daha sonra HTML’e çevrilerek uygun siteyle ilişkilendiriliyor. Ama işin en zor kısmı tabiki PSD’den HTML’e çevirme işlemi. NETTUTS bu konu hakkında oldukça bol resimli bir rehber hazırlamış. Tasarıma ucundan köşesinden bulaşan her kullanıcı için okunulması gereken muhteşem bir kaynak. Yazıya buradan ulaşabilirsiniz.

Ajax hayatımıza girdiğinden beri tasarımlarımız daha dinamik ve göz kamaştırıcı olmaya başladı. Birçok sitede göreceğiniz örnekler ile skalası genişleyen ajax uygulamalarından popüler olan 30 tanesini buradan inceleyebilirsiniz.

İnternette bir İtalyan dostumuzun sitesi var ki, bence en iyi tasarım blogu. Bahsettiğim blog Woork. Bence her tasarımcının woork’ün RSS kaynağına abone olması gerekir. Her yazısında güzel tasarım örneklerine yer veren ve detaylı anlatımıyla herkese hitap eden Antonio Lupetti bu sefer bogunda Pastel renklerle yapılan menü yapımını anlatmış.

CSS, html ve javascript kodlarıyla menünün yaratılışı bu adreste detaylıca anlatılmış.