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

8-9-2008

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

Ekstra Eklenecek Özellikler

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.

clip_image001Ben 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.

clip_image002

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

clip_image003

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ı.

clip_image005

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....

Recent Blog Posts

See all of the blog posts