Dikkat: Tasarımda kullanılmış olan marka ve logolar hayal ürünüdür.

Konsept

Tasarım, alışılagelmiş Türk haber sitelerinden farklı bir konsepte sahip. Aslında; popüler Alman haber siteleri Stern, Bild ve Spiegel Online’ın konseptlerini karıştırıp, ortaya böyle birşey çıkardık. Ziyaretçi uzunca bir sayfa üzerinde ilgilendiği kategorilerde öne çıkarılmış haberlere odaklanıyor. Sayfanın uzunluğu, kategorilerin tekrarı ve kategorilerdeki haber sayıları ortaya Türkiye’de henüz gerçek anlamda kullanılmamakta olan bir konsept çıkarıyor. Ziyaretçi böylece henüz anasayfa üzerinde bile yeterince bilgi sahibi oluyor.

Gerçeği söylemek gerekirse, bu tür bir konseptin Türkiye’de neden hiçbir haber ve gazete sitesi tarafından kullanılmamakta olduğunu anlamakta güçlük geçiyor, ve kullanıcıyı gerçek anlamda içeriğe odaklayan bu tür bir tasarımın getireceği başarıyla gerçekten inanıyorum.

Tasarımı gerçekten anlamak için lütfen indirip ayrıntılı olarak inceleyiniz.

Ne amaçla kullanılabilir?

Tasarımı istediğiniz şekilde değiştirebilir, güncelleştirebilir, çoğaltabilir, ticari ve kişisel projelerinizde kullanabilir, yeni versiyonuyla yeniden dağıtabilirsiniz. Tasarım CC Attribution-Share Alike 3.0 lisansına sahiptir; bundan dolayı eğer tasarımı bir sitede kullanırsanız, sitenin künye sayfasında tasarımcının adını bu sitenin anasayfasına bir bağlantı vererek yayınlamanız gerekmektedir. Tasarımı yeniden dağıtırsanız, tasarımcının ismini bir dosyada yayınlamak ve tasarımı benzer bir lisansla paylaşmak durumundasınız.

İndirin

Tasarımı bu bağlantı üzerinden indirebilirsiniz. Soru ve sorunlarınızı yorum yaparak dile getirebilirsiniz. İyi eğlenceler!

Okunulabilirliğin artığını düşünsem de, erişilebilirliğin daha da artığını söyleyemeyeceğim. Nedeni ise, hala ve hala Internet Explorer 6 kullanmakta ısrar eden dostlarımızın bu sayfaları göremediği, bu yazıları okuyamadığı. İsterseniz sayfaya IE6 ile erişmeyi deneyebilirsiniz. Bu seçimimin nedenlerini, kullandığım yöntemi ve ileriye ait düşüncelerimi ileriki bir yazımda açıklayacağım.

Kısaca yenilikler

Arayüzü her sayfasıyla tamamen yeniden tasarladım. Bunu yaparken gereksiz şeyleri ortadan kaldırmaya, aynı zamanda siteyi biraz daha sosyal hale getirmeye özen gösterdim. Tipografiyi düzenledim; özellikle bir mac kullanıcısı iseniz farkı göreceğinize eminim. Yeni bir portfolyo ekledim, tamamen dinamik hale getirdim. Böylece çalışmalarımın listelendiği sayfayı daha güncel tutabileceğim. Arşiv sayfasını yeniden tasarladım, daha fonksiyonel bir hale getirdim. Yeniden tasarladığım yorumlar alanını daha çok bir konuşma-tartışma ortamı haline getirmeye çalıştım. Kısacası siteyi web‘i daha etkili konuşabileceğimiz bir ortam şekline sokmaya çalıştım.

Ve son olarak, iki senedir kullanmakta olduğum e-posta ile abonelik sistemini kaldırıyorum. RSS’den dolayı buna gerek olmadığını düşünüyorum. Şimdiye kadar güvenip üye olan herkese çok teşekkür ederim.

Siteyi tasarlarken kullandığım her Wordpress tekniğini ilk fırsatta anlatacağım.

Eski versiyonlar

• Ezgi, 2006
• Ezgi Wide, 2007

Son birşey; yorumlarınız değerlidir :)

En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

Fakat müşterileriniz için çalışmaktaysanız, durum yazının yazarlarının bahsettiği kadar kolay olmuyor. Müşteriniz ilk görüşmede de, son konuşmada da birçok detay görmek isteyeceğinden Photoshop’la biraz daha fazla zaman geçirmeniz gerekmekte. Böyle bir durumda müşteriyle önceden görüşmek, ve onun isteklerine göre bir yol izlemek en iyisi. Unutulmaması gereken şu ki, eğer CSS/XHMTL çevirimini siz yapmayacaksanız, Photoshop’la biraz daha haşır neşir olmalı, en küçük detaylara bile inmelisiniz. 

Alman tasarımcı Manuela Hoffmann‘a göre ise, ilk görüşmede kesinlikle birden fazla grafik taslalığının müşteriye sunulmaması gerekiyor. Bu, zaman kaybından başka birşey değilmiş. Bence de :-).

Neden bahsediyoruz?

‘Faviconlar’, web tasarımcıları tarafından web siteleri için hazırlanan ve tarayıcılar tarafından belli yerlerde görüntülenen küçük ‘favori simgeleri’dir. Modern tarayıcılara örnek olarak Firefox, Safari ve Opera bu simgeleri adres çubuğunda ve sekme bölümünde gösterirken, Internet Explorer faviconları yer imleri penceresinde görüntülemektedir.

Mantık

<head></head> kodları arasına yerleştirilen kodlar yardımıyla, sunucuya yüklenmiş olan favicon.ico isimli dosya tarayıcıya iletilmekte, ve bu dosya tarayıcı tarafından belli yerlerde görüntülenmektedir. Genellikle site tasarımı ile aynı stile sahip olan, 16×16 ve 32×32 piksel büyüklüğündeki bu dosyalar sitenin tasarımının, dolayısıyla renk ve genel stilinin ziyaretçinin aklında kalmasına yardımcı olmakta, ziyaretçinin beyninde küçük de olsa yer edinmektedirler.

Farklı kullanıcılar aynı platform üzerinde aynı tarayıcıya sahip olsalar bile, faviconların her bilgisayarda görüntüleneceği garantisi yoktur. Buna rağmen bu durum fazla yaşanmamaktadır.

Ben de isterim!

Tüm bunlar heyecan verici değil mi? Kullanımı da öyle, zira hiç kod yazmadan da sitenize bir favicon atayabilirsiniz! Tüm modern tarayıcılar, sitenin en üst klasöründe bulunan favicon.ico dosyasını otomatik olarak favicon olarak algılamaktadırlar. Kısacası, sitenizin ana klasörüne ‘favicon.ico’ isimli 32×32 veya 16×16 boyutlarındaki ikon dosyasınızı yüklediğinizde, ikonunuz favicon olarak algılanacak ve gerekli yerlere konumlandırılacaktır.

Eğer işinizi yine de ‘garantiye almak’, veya ikon dosyanızı sunucunuzda başka bir klasöre yüklemek isterseniz aşağıdaki iki koddan birini kullanabilirsiniz;

<link rel="shortcut icon" href="http://siteniz.com/favicon.ico" type="image/vnd.microsoft.icon" />

<link rel="icon" href="http://siteniz.com/favicon.ico" type="image/vnd.microsoft.icon" />

Dikkat ediniz

• Yukarıdaki kodu sitenizin head bölümüne uygulamayı unutmayınız.
• Simgenizin 16×16 veya 32×32 boyutlarından birine sahip olmasına dikkat ediniz. Çıktı boyutu 16×16′dır.

Ziyaret ediniz

Oluşturmuş olduğunuz grafikleri ikon dosyasına Photoshop aracılığıyla dönüştürmek isterseniz bu photoshop eklentisi hoşunuza gidecektir. Şayet bu işlemi çevrimiçi ve ücretsiz olarak yapmak isterseniz bu adres tam size göre. Kendi grafiğinizi internetten oluşturmak ister, ve diğer favicon örneklerine göz atmak isterseniz burası tam sizlik.

Diğer tüm programlarda tasarlanan web grafiklerinde olduğu gibi, Fireworks ile hazırlanan grafiklerde de dokumalar (veya ün salmış ismiyle ‘Texture’lar) ve renk geçiş efektleri, yani ‘gradient’ler baskındır.

Bu küçük iki efekt, -her ne kadar basit olsalar da- pek verimli sonuçlarla tasarımcıları memnun ediyor. Özellikle Photoshop kullanıcıları, programla beraber gelen dokumaları sürekli kullanmakta, hatta Fireworks’e geçtiklerinde ilk olarak dokuma menüsünü aramaktadırlar.

Ne var ki, dokuma ayarları Fireworks’te Photoshop’taki kadar ayrıntılı değildir. Photoshop’ta dokumaların renklerini istediğinize göre değiştirebiliyor, ve yeni dokumaları otomatik olarak oluşturabiliyorsunuz. Peki bu durum Fireworks’te nasıl? İşte bu yazımızda web grafik dünyasının küçük kahramanlarını inceleyeceğiz.

Yazı sonunda ne yapabileceğim?

Yazı sonunda yukarıdaki gibi bir grafiği Fireworks üzerinde hazırlayabilir nitelikte olacağız.

Bölüm 1: Renk geçişleri

Örnek resmimizde olduğu gibi, 364×150 boyutlarında boş bir Fireworks belgesi açarak işe koyulalım.

Belgemiz işlenmeye hazır.

Sağ menüde bulunan ‘Vector’ alt menüsündeki ‘Rectangle tool’u seçerek 364×150 boyutlarında bir dörtgen çizin. Çizdiğiniz dörtgenin önceden kullandığınız rengi aldığını göreceksiniz. Resimde de görüldüğü gibi, dörtgenimizin koyu lacivert ve açık lacivert renklerine bürünmesi gerekiyor. Bunu da Fireworks renk geçişleriyle gerçekleştireceğiz.

Dörtgeninizi seçtikten sonra, alt bölümdeki ‘Properties’ menüsünde bulunan renk, ve genel ayarda ‘Solid’ seçeneğinin seçilmiş olduğu kutucukta ‘Gradient’ alt menüsü altındaki ‘Radial’i seçin.

‘Properties’ menüsü açık değilse, CTRL+F3 (Windows) veya Command+F3 (Mac) tuş kombinasyonuyla bu menüyü açabilirsiniz.

Bu işlemin ardından, dörtgeninizin renginin içe doğru dönüştüğünü göreceksiniz. ‘Gradient’ menüsü altındaki diğer öğeler ile, renk efektlerini değiştirebilirsiniz.

Bu işlemi uyguladıktan sonra, dörtgeninizin üzerinde bir ucu yuvarlar, diğer ucu kareden oluşan bir ok oluştuğunu göreceksiniz. Bu okun yuvarlak kenarından oku diğer bölgelere taşıyarak renklerin başlangıç noktasının yerini değiştirebilir, kareli kenar ile okun yönünü ve uzunluğunu ayarlayabilirsiniz.

‘Properties’ menüsü açık değilse, CTRL+F3 (Windows) veya Command+F3 (Mac) tuş kombinasyonuyla bu menüyü açabilirsiniz.

Okun kare ucunu basılı tutarak, ucu düz şekilde dörtgenin en sağ bölümüne taşıyın. Ardından ‘Properties’ menüsündeki renk seçme kutucuğuna tıklayarak, iç renk olarak #003B65, dış renk olarak #00182C renklerini seçin;

Ve bu adımla, dörtgenimizi tamamlamış olduk.

Adım 2: Dokuma

Daha önce de bahsettiğim gibi, Fireworks’ün dokuma ekleme/değiştirme özelliği, ne yazık ki Photoshop’taki kadar gelişmiş olmadığından kendi ekleyeceğimiz dokumaları belli bir klasöre atmak zorundayız. Yine de, internetten indirdiğiniz dokumalarda genellikle otomatik yükleme paketleri bulunmaktadır.

Fireworks’te kendi texture’unuzu oluşturun.

İnternetten bulduğunuz, veya çizdiğiniz dokumaları Program Files -> Macromedia Fireworks 8 -> Configuration -> Textures klasörüne kopyalayın. Resmimizde kopyalayacağımız dokumayı, lütfen bu link üzerinden indirip yukarıdaki klasöre yapıştırın.

(Dokumayı kullanabilmek için Fireworks’ü yeniden başlatmanız gerektiği için, dosyanızı kaydedip programı yeniden başlatın.)

Dokumayı yükledikten sonra, hazırlamış olduğumuz dörtgenimizin üzerine yine aynı tekniklerle aynı boyutlarda bir dörtgen daha çizin. Bu dörtgenin renk ayarını, yine aynı kutucuktan tek renk, yani ‘Solid’ olarak ayarladıktan sonra, az önce kullanmış olduğumuz koyu lacivert (#00182C) rengini ikinci dörtgenimize atayın. Bu işlemden sonra, ilk dörtgenimizin yeni dörtgenimizin altında kalarak görünmemesi gerekiyor.

Ve son olarak, yine ‘Properties’ bölümünde bulunan ‘Texture’ kutucuğundan az önce yüklemiş olduğumuz ‘BT-Pixel Argyle 2′ dokumasını seçin.

İlk olarak karşınıza şöyle bir görüntü çıkacak;

Ve şimdi dokuma belirginliğini %50′ye indirip hemen aşağısındaki ‘Transparent’ kutucuğunu işaretleyin.

Ve bingo! Grafiğimizin son hali bu minik 2 ayardan sonra karşınızda.

Yukarıdaki grafiği farklı kaydedip, Fireworks ile açarak grafik üzerinde değişiklikler yapabilir, nasıl yapıldığını görebilirsiniz.