Twitter ve FriendFeed İçin Arka Plan Hazırlarken Önemli Noktalar

Twitter ve FriendFeed’de biz kullanıcılara kendi dizaynımızı uygulamamız için gereken alt yapı sağlanmış durumdadır. İstediğimiz renk kombinasyonlarını ve arkaplan resmini kullanabiliyoruz. Özellikle tek parçadan oluşan arka plan resimlerinde değişik çözünürlük ve ekran büyüklüklerinde çok fazla farklar ortaya çıkabiliyor. Bir yere konumlandırılmış nesne sayfanın altına kalabiliyor mesela. İşte bu yazımda bunları en azanasıl indirebileceğimize bakacağız.

Pattern dediğimiz dolgu arkaplanlarında herhangi bir sorun yaşanacağını söylemek zor. Çünkü bu resimler her iki serviste de “tile image” seçeneği yardımıyla çözünürlüğe göre sürekli olarak tekrar eden bir biçimdedir. Yani tamamen dolgu yapmaktadır. Bu tür resimler küçüktür ve her seferinde birbirini tamamladığı için bir problem çıkartmazlar. Bunlar için çok fazla söylenecek birşey de yok zaten.

Asıl yoğunlaşacağımız nokta tekrar etmeyen tek resimlerden oluşan arkaplanlar olacak. Çünkü bazen çileden çıkartabiliyor insanı. Büyük resimler genelde tekrar etmezler. Çünkü tekrar ettikleri zaman çok aşırı farklar ortaya çıkar ve tasarım bütünlüğünü bozar. Bunun için de tekrar etmeden yerleştirilir. Ancak tekrar etmediğinde de büyük ekranlarda kenarlarda ve altta boşluklar ortaya çıkar. Yine bu da tasarım bütünlüğünü bozar. Peki kendi özel arkaplanlarımızı kullanmanın en mantıklı yolu nedir? İşte bunu birkaç adımda inceleyelim.

Örnek parça resim1-Arka Plan Resminin Yoğunluğu Tepede Olmalı

Arkaplanımızda vermemiz gereken mesajı, görseli yoğunluk olarak en üstte vermeliyiz. Çünkü her iki serviste de değişik çözünürlüklerde sorunsuz görünen ve konum değiştirmeyen kısım en üst kısımdır. Tepeden yaklaşık 100 pixel yükseklite bir alanı yoğunluk olarak kullanmalı. Yan resimde yukarıdan beyaz çizgiye kadar olan kısım 100 pixel’dir.

2-Resimleri Belli Bir Renge Doğru Yoğunlaştırmalı

Resimleri belli bir renge doğru yoğunlaştıtırsak sonrasında kullanacağımız arka plan resmi yerine renk olacaktır. Ve renk ile arka plan resmi bir bütünlük oluşturacaktır. Ayrıca bu tasarımımızın hızlı açılmasını da sağlayacaktır. Örnek resimde beyaz çigiye kadar olan alanda çok koyu bir kahverengiye doğru yoğunlaştırılmış ve sonrasında da o alnın rengi kullanılmıştır. Görüldüğü gibi bir sıkıntı da ortaya çıkmamıştır.

3-Resim Genişliği 1920 Pixel Olmalı

Şu anda piyasadaki en büyük monitör boyutlarının 106 cm FuLL HD TV’ler olduğunu düşünürsek ve bunların da 1920 pixel genişliğe kadar çıkacağını hesaba katarsak görüntü bütünlüğünde kayıp yaşamamak adına resim genişliğimizi 1920 pixel yapmalıyız. Tekrar etmesi gereken kısımları kendimiz resim üzerine işlemeliyiz.

4-Resim Üzerindeki Nesne Yoğunluğu Orta Kısımlara Dağıtılmalı

Örnek resimde mantar ve kuş resimlerinin yoğunluğunu orta bölümlere koydum. Sebebi de yaygın olarak kullanılan çözünürlüklerde bu alanın daha sık görüntüleneceğindendir. Geri kalan kısımlarda ise sürekli tekrar eden desen veya nesneler oluşturulabilir.

5-Resmin Gerçek Görüntü Kalitesi %60 Oranına Çekilmeli

Resmin görüntü kalitesini biraz azaltmalıyız ki profilimizin açılması hızlı olsun. Eğer en yüksek görüntü kalitesini kullanırsak çok geç yüklenecektir.

Örnek Twitter hesabım

Örnek FriendFeed hesabım

Son olarak dizayn bütünlüğü açısından renk paletleri de kullanılmalı.

FriendFeed Embed Özelleştirme

Temamda kullandığım sosyal akış sayfasında kullandığım sosyal ağ ve servislerdeki son durum güncellemelerinin gösterildiğini söylemiştim. Bunun için de FriendFeed’in sağladığı API desteğini kullanmıştık. API arkaplan rengi, durum görüntülerinin istediğimiz şekilde düzenlenmesine imkan veriyor. Ancak biraz da programlama bilgisine sahip olmamız gerekiyor. Ancak FriendFeed’i sitemize eklerken özelleştirme yapmak için bir diğer yol da embed kodumuzu CSS ile desteklemektir.

Dün bir projemde kullanırken öğrendim FriendFeed’in embed koduna CSS ile katkı sağladığını. Düzeni bozmamak için varsayılan çerçeve rengini, yazı tipini, yazı rengini, logo durumunu ve daha birçok özelliği kendimiz belirleyebiliyoruz. Sadece arkaplan için herhangi bir yetkilendirme yapamıyoruz. Zaten logoyu gizleme, hesap daveti gibi özellikleri kaldırmak için embed kodunu oluşturmadan önce seçenekleri ayarlıyoruz. Bunun dışındaki çerçeve rengi, yazı tipini ise aşağıdaki kod ilebelirlemek mümkün.

#friendfeed { border: 0px !important;
background:none !important;}
.widget { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.feed { border: 0px !important; font-family: Arial, Helvetica, sans-serif;}
.body {   border: 0px !important }
.logo { border: 0px !important }

Bu kodu sitemizin CSS dosyasına ilave ediyoruz. Hepsi bu kadar.

Aslında Buralardayım

Yazı yazamıyorum ama neredeyse büyük vaktim internet ile geçiyor. Sabahın ilk saatlerinde kafamın içinde tilkiler olmadığı için derslere bakıyorum ki sınıfta kalmayayım, milletin diline düşmeyeyim diye. Aslında iyi de oldu. İlk defa bir sınavın çalışmalarına bu kadar erken ve ciddi başladım tek başıma. Oldukça iyi yerdeyim konularda ve iyi olacak sınavlar.

Continue reading