Yeni Tasarımın Yapılışı - I

Bir süredir yeni tasarım yayında. Yeni tasarımı yaparken bir nevi geliştirme günlüğü tutmuştum. Ne yaptım, neler kötü gitti, neler güzel gitti, hangi kaynakları kullandım vs. gibi. Bu dokümanları parça-parça yayınlamaya başlıyorum. Bu serinin birincisi, çok uzun değil bunun gibi 2-3 bölüm daha var. Bütün seri bittikten sonrada genel olarak ne bekliyordum, ne buldum yazısı yazmaya çalışacağım.

Gereksinimler

• Temiz ve kullanışlı bir tasarım
• Geçerli XHTML Strict veya Transitional
• Eskisi gibi tablosuz CSS temelli tasarım
• 1024*768 ve yukarısı çözünürlüklerde verim
• Ortada “fixed” 960px layout, bu şekilde okunurluğun daha yüksek olduğunu düşünüyorum
• Geçerli XHTML Strict veya en azından XHTML Transitional kodu olması
• Geçerli CSS 2.1
• Tüm sitenin UTF-8 olması
  Şu anki sistemde sitenin yarısı UTF-8 ama hepsi değil bu hem teknik sorunlara neden oluyor hem de bazı durumlarda Türkçe karakterlerin doğru gösterilmesine engel oluyor.

Ekstra Eklenecek Özellikler

• Tamamen yeni ASP.NET altyapısı, Sistemin bir kısmı zaten ASP.NET ama hepsini ASP.NET’ e geçirmek istiyorum
• Yorumlar için CAPTCHA desteği
• AJAX ile yorumları okuma ve yazma
• Site arşiv sayfaları
  • Tag tabanlı arşiv
  • Tarih tabanlı arşiv
  • Ana konu tabanlı arşivler
    • Projeler
    • Araştırma Dokümanları
    • Download
• Yeni yorumlardan e-mail ile haberdar etme
• Trackback gönderme ve kabul etme
• İngilizce arabirim desteği, ikinci adım

Tasarım – 06.04.08

Ben tasarımcı değilim ama tasarımcı olarak bir geçmişim var. Yeni tasarımdaki amaçlarımdan biri daha okunaklı ve daha temiz, curcuna olmayan bir tasarım sunmaktı. Bir şeye başlamadan önce ilham almak için beğendiğim blogların tasarımlarına ve güzel tasarımları listeleyen ilham sitelerine baktım. Kendi beğendiğim blog sitelerine bakarken komik bir şey farkettim, bu sitelerin hiçbirini aslında ziyaret etmiyorum sadece RSS’ ten okuyorum. Bu da “içerik kraldır” lafını tekrar onaylıyor. Tabii ki bunu kendime bahane etmiyorum!

Bu şekilde sağı - solu bir saat kadar dolaştıktan sonra, kendi arşivimdeki eski yaptığım çalışmaları incelemeye başladım. Grafik konularından o kadar uzak kalmışım ki bir şey yapmak çok zor geliyor. O yüzden daha formdayken yaptığım çalışmalardan çalmayı düşünüyordum. Eski PNG dosyaları arasında bir saat kadar harcadıktan sonra ve Fireworks CS3 ile de bir kaç deneme yaptıktan sonra eski materyalleri değiştirip güzel ve basit bir logo çıkardım kendime.

Ben genelde tasarıma logodan başlarım daha sonra da tüm konsepti logo üzerine kurarım. Bu seferde gene o şekilde yaptım. Soldaki logoyu tasarladıktan sonra, bunun üzerine tasarımı geliştirdim.

Önce gazete benzeri bir konsept yakalamaya çalıştım, bu adımda bir kaç rasterize efektli fotografta denedim ama istediğim gibi olmadı, bu sırada daha basit bir aşağıdaki çalışmaya ulaştım.

Ama bu sefer siteyi aşağıdaki gibi, 960px, 2 kolon fixed istiyordum.

Bu şekilde istememin ana nedeni ise orta içeriğin 500px gibi sabit bir şey ile limitleyebilmekti. Dolayısıyla yukarıdaki tasarımı değiştirip, bu şablona uyacak bir hale getirdim. Son zamanlarda wordpress temalarında popüler olan alt kısmı farklı bir renk ile ayırma işlemi de çok hoşuma gittiği için bir de ek bir renk ile footer çalıştım ve ortaya aşağıdaki çıktı.

Deneyimli tasarımcılar çoktan farketmiştir istediğim şablon / CSS Layout ile yukarıdaki tasarımı birleştirmede temel bir arka plan sorunu var. Bu yüzden Logoyu tamamen transparan bir arkaplan ile çalıştım ve header ve footer arka planlarını da yatay olarak tekrar edebilecek bir hale getirdim. Orjinal resimler 1600px uzunluğunda dolayısıyla bir çok monitörde zaten tekrar etmelerine gerek kalmayacak ama tekrar ederlerse de bu tamamen gözükmeyen bir geçiş ile olacak. Basitçe resimlerin soldaki başlangıçları ile sağdaki bitişlerini aynı çizgi üzerinde tuttum. Düz olmadıklarından dolayı bu biraz vakit aldı ama sonunda oldu. Bu işlemi yaparken “Ruler” ve “Grid” leri görünür hale getirmek çok işinize yarayacaktır.

Bütün bunları yapmak ve yukarıdaki hale getirmek yaklaşık 6-7 saat sürdü. Cumartesi öğleden öncem bu işe gitmiş oldu. Pazar sabahı da tasarımdaki son detaylarla oynayıp HTML’ e aktarmaya başladım.

Bir sonraki yarın yazı Pazar sabahından devam edecek....