Tasarım Konusu

CSS‘te tablosuz tasarım yapmak günümüzün popüler tasarım konsepti. Aynı zamanda web programcıları için popüler intihar sebebi. Her ne kadar bu işler eskisine göre daha rahat olsa da, Internet Explorer 6′nın ölemediği bir dünyada hiç bir şey gerçekten kolay değil. Her neyse, saygıdeğer bir kardeşimiz tablosuz tasarım yapmak isteyenler için çeşitli sayfa yerleşimlerini (layout) dizmiş sayfasına. Kimi sayfalarda gerekli CSS kodları sayfa içerisinde verilmiş, kimisinde ise sayfa koduna bakmanız gerekecek. Sol sütundaki örnek resimlere tıklayarak ilgili sayfalara gidebilirsiniz.

2 sütun 2 sütun. Menü sağda, içerik solda, dinamik genişliğe sahipler.
2 Kolon 2 Sütun. Menü solda ve sabit genişlikte, içerik dinamik genişliğe sahip sayfanın geri kalanın kaplıyor
2 Sütun 2 sütun. Menü solda, içerik sağda, dinamik genişliğe sahipler.
3 dinamik sütun 3 sütun, Hepsi de dinamik genişliğe sahip.
4 dinamik sütun 4 sütun. Hepsi de dinamik genişliğe sahip.
Float Menü wikipedia’daki sayfa indeksi gibi içeriğe sahil bir şekilde sağ üst köşede duruyor.
3 sütun 3 sütun. sağ ve sol menü sütunları sabit genişliğe sahip, içerik sütunu dinamik genişlikte sayfaya yayılıyor.
3 sabit genşlikte sütun 3 sütun, hepsi de sabit genişlikte sayfaya ortalanmış biçimde duruyorlar.
yatay ortada sabit sütun Yatay düzlemde ortalanmış genişliği sabit tek bir kutu/sütun.
Yatay ortada dinamik sütun Yatay düzlemde ortalanmış dinamik genişlikte tek bir kutu/sütun.
Sayfa ortasında tek kutu Hem yatay hem düşey düzlemde ortalanmış yani sayfanın tam ortasında sabit genişlik ve yüksekliğe sahip tek bir kutu.
Kategoriler: Tasarım
Tags: , , ,
devam et >

OSWD.org, Open Source Web Design insanların yaptıkları web sitesi taslaklarını ücretsiz olarak paylaştıkları bir site. Bu taslaklar tasarımcıya link verme zorunluluğu olmadan ticari işlerde de kullanılabiliyor (yine de link verilmesi güzel olur tabi). Tasarımlar çok parlak olmasa da nispeten güzel bulduklarımı aşağıda listeledim. Linklere tıklayarak tasarımları görebilir ve indirebilirsiniz.

Jefferson by dreamlogic


BusyCity by JJenZz


Dark Shine by Jack


Optimistic by nelchee


The Hobbit by Arcsin


Fashionista v2 by dreamlogic


Mother Russia by dreamlogic


FreeStyle by mrpires


Lonelyness by Dieter


 

Devinatart

Portfolyo adresiniz: isminiz.deviantart.com
Sosyal öğeler: Yorum, kritik, forum, gruplar, arkadaş olma, mesajlaşma, blog, ne ararsanız var.
Notlar: Bu listedeki portfolyo siteleri içerisinde açık ara en büyük olan deviantart. Burada herkes birşeyler yayınlıyor. Bu yüzden kalite biraz düşük gibi gözükebilir ama biraz dolaşırsanız gerçekten harika insanlarla tanışabilirsiniz. Pek çok farklı formatta dosya gönderilebiliyor. Direkt video yükleyemiyorsunuz ama flash dosyaları görüntülebiliyor. Ayrıca çok sayıda program için temalar (windows, linux, vs.), eklentiler (photoshop, illustrator, vs.) yüklenebiliyor. Amacınız sadece portfolyonuzu yayınlamak değilse buraya mutlaka üye olmalısınız.

Behance

Portfolyo adresiniz: http://www.behance.net/isminiz
Sosyal öğeler: Yorum, mesajlaşma, gruplar, iş arama.
Notlar: Diğer sitelerden en önemli farkı davetiye ile üye almaları. Hemen belirteyim ki davetiye için süründümüyorlar. Üye olma (signup) sayfasında sol tarafatki formu kullanarak hemen bir davetiye isteyebiliyorsunuz. Onlar da hemen gönderiyorlar zaten. Portfolyo sahipleri için en büyük – profesyonel sitelerden birisi burası. Zaten işlere baktığınızda da göreceksiniz bunu. Son olarak burada tanıttığınız projelerin içine video ekleyebiliyorsunuz.

Coroflot

Portfolyo adresiniz: http://www.coroflot.com/public/individual_details.asp?individual_id=kullanici_numaraniz
Sosyal öğeler: Yorum, gruplar, iş arama
Notlar: Size verdikleri adres biraz can sıkıcı olsa da güzel bir site olduğunu söyleyebilirim. Sanırım Türkiye’de protfolyolar için bolca kullanılıyor. Portfolyo görüntülemek dışında Twitter tarzı ‘updates’ bölümü var.

Carbonmade

Portfolyo adresiniz: http://isminiz.carbonmade.com
Sosyal öğeler: Yok
Notlar: En önemli özelliği size verdikleri portfolyo sayfasının son derece sade olması. Sayfalarınızda reklam ya da an alt köşedeki carbonmade logosu dışında sizin portfolyonuz harici birşey gösterilmiyor. Flash ekleneilibiyor. Video eklemek isterseniz ücretli üyeliğe geçmeniz gerekiyor. 35 resimlik 5 proje oluşturma ücretsiz daha fazlası için yine aylık 12$ ücreti olan paralı üyeliğe geçmeniz gerekiyor.

Designrelated

Portfolyo adresiniz: http://www.designrelated.com/portfolio/isminiz
Sosyal öğeler: Yorum, arkadaş olma, blog, iş arama

Gfxartist

Portfolyo adresiniz: http://isminiz.gfxartist.com/
Sosyal öğeler: Yorum, forum, blog.
Notlar: Deviantart gibi bir komünite sitesi gibi duruyor. yorumlar, forumlar bloglar ve envai çeşit şey mevcut. Arkadaş olma ve ilintili şeyler ise yok. Her ay bazı üyeler ‘elite’ olarak seçiyorlar. Bu şekilde çalışmalarınız daha farklı yerlerde daha büyük boyularda listeleniyor ve bu da sizin ön plana çıkmanızı kolaylaştırıyor.

Dripbook

Portfolyo adresiniz: http://www.dripbook.com/isminiz
Sosyal öğeler: Yorum, gruplar.
Notlar: Baştan söyleyeyim dripbook ücretli bir site. Protfolyo sayfalarınız reklamsız ama carbonmade gibi sade de değil. Diğer portfolyo siteleirnde en önemli farkı size portfolyonuzu başka yerler aktarabilme seçeneği sunmaları. Şu anda IPhone, Facebook, Twitter ya da kendi web sitenize aktarım yapabiliyorsunuz.

Shownd

Portfolyo adresiniz: http://shownd.com/isminiz
Sosyal öğeler: İş arama
Notlar: Carbonmade’i hatırlatan sade ve reklamsız bir portfolyo sayfası var ve tamamen ücretsiz, iş arama seçeneği de cabası.

Shadowness

Portfolyo adresiniz: http://shadowness.com/isminiz
Sosyal öğeler: Yorum, forum
Notlar: Twitter’a benzeyen bir sistemi var. Bu biraz kafa karıştırabilir, farklı sitelerde resimlerimizi nereye yükleyeceğiz diyen kızgın insanlar gördüm. Hemen söyleyeyim: yeni bir post (yazı) eklerken metin yazma kutusunun hemen altındaki ‘add image’e tıklıyorsunuz ve resminizi ekliyorsunuz.

Finalcrit

Portfolyo adresiniz: http://www.finalcrit.com/kategori/isminiz
Sosyal öğeler: İş arama
Notlar: Burada da sade, reklamsız bir portfolyo sayfanız var. Sağ alt köşeye logonuzu koyabiliyorsunuz. Diğerlerinden farklı olarak portfolyo sayfası tamamen flash ile yapılmış.

Kategoriler: Tasarım
Tags: , ,
devam et >

SteamPunk

12 Temmuz 2007

Steampunk tarzında bir site hazırlamayı düşünüyorum. Konu ile ilgili çizimleri araştırırken karşıma şöyle bir site çıktı: http://www.crabfu.com/steamtoys/diy_steampunk. Bu sitenin sahibi olan animatör ve konsept sanatçısı şahıs steampunk tarzındaki makinelerin nasıl çalıştığını, çizileceğini ve yapılacağını, her bir parçayı tek tek inceleyerek anlatmış. Ayrıca buraya tıklayarak aynı kişinin steam punk tarzındaki oyuncaklarını görebilirsiniz. Eğer oyuncaklar ilginizi çekerse http://www.cedesign.net/steam adresinde bu tür oyuncakları inceleyebilirsiniz.

Örnek bir kaç resim: