Kapatmak için Esc tuşuna basın

Bir Tasarımın Anatomisi: Yahoyt.com

MYK Medya filosunun bayrak gemilerinden Yahoyt.com’un yeni tasarımı tamamlanarak yayına girdi. Daha önce AlkışlarlaYaşıyorum projesinde paylaştığım bilgiler hayli ilgi çekip, rağbet görünce, benzer bir çalışmayı da Yahoyt için yapmak istedim.

Yahoyt’un bir önceki sitesi aslında ihtiyaçları karşılasa da tek düze bir haber akış düzeni erişilebilirliği kısıtlamakta idi. Bu durum ise sitenin zengin içeriğinin tek bir hat üzerinde akıp giderek kaybolmasına ve sayfa gösterimlerinin arzulanan seviyede olmasına engel teşkil etmekteydi. Kendi kategorisinde özgün içeriği ve sıra dışı tarzı ile Yahoyt için artık bir teknoloji portalı olmak için çoktan hazırdı ve yepyeni bir tasarımı fazlasıyla hak ediyordu.

tekhat

Bu proje için genel bir ar-ge çalışması yapmam yeterli oldu çünkü klasik portal elementlerini kullanmayı arzulamanın yanı sıra bizim için daha önemli olan zengin içeriği daha yoğun şekilde ve belli bir düzen içerisinde gösterebilmek, ve kategorik haber ve içeriklerin ertesi gün sayfadan yok olmasını engellemekti.

Tepe kısmında manşet reklam alanları ve ana navigasyonu eski sitedekine benzer şekilde sabit tutup, content alanlarını geliştirmek üzere işe koyuldum. Ana navigasyonu içerisinde arama modülü ve üye girişinin de yer aldığı geniş bir bant ile Yahoyt’un kendi renk skalasında bıraktım. Bunun hale gelene kadar bir çok konuda MYK ekibi ile sürekli fikir alışverişi içinde bulunduğumuzu da hatırlatmam gerek.

Tek hat üzerinde akan haberler için ise çözüm her kategoriye ait kutular içerisinde en taze haberleri ilki resimli, sonraki üç haber spotları ile birlikte ve kalan üç haber başlık linkleri ile yerleşimi yaptım. İlgili kategoriden giren ilk haber için kaç yorum yazıldığını da ek bilgi olarak resim altına ikonladım. Burada gözüken yorum sayısının hem kullanıcı açısından o habere yorum yapabileceğini bilmesi açısından, ve hararetli bir konu ise ve bir çok yorum yapılmış ise bunları da okumak için tıklama hevesini artırma açısından ilgili içeriğe olumlu etki yapacağını düşündüm.

kutular

Bu şekilde kutulama sistemi ile asimetrik bir grid sistemi oluşturup, tüm kategoriler altındaki taze haberlere bir çırpıda erişebilme amacına ulaştığımızı düşünüyorum.

Sağ kolona gelince, orası içinde klasik sidebar mantığı ile o alanda yer alacak kutuları tasarlamaya başladım. Anket, Video, Dergi gibi kutucuklar o alanı doldurdu, iç sayfalarda popüler haberler ve en çok yorumlananlar gibi ajax uygulamalı dinamik kutuları dizayn etmeyi ise ihmal etmedim tabi.

ajax

Bazı iç sayfalar, detay sayfaları ve fonksiyonel sayfaların tamamlanması ile yeni Yahoyt siteside kullanıcılarının karşısına çıkmaya hazır hale gelmişti.

detay

Bu noktada altını çizmem gerek üç nokta var, her ne kadar sitenin genel anlamda çatı tasarımını oluşturmuş olsam da tasarım işi bir ekip işi ve tüm MYK ekibi ile bu işi kotardık. Tasarımın csslerini hazırlayan ve bu kez sIFR teknolojisini siteye entegre eden Fatih Hayrioğlu’nun emeklerini unutmamak gerek. Ve yeni tasarımla birlikte yayına başlayan Yahoyt derginin olağanüstü güzel tasarımına imza atan meslekdaşım Emre Parlak’ın katkılarını unutmamak gerek.

dergi

Yahoyt üzerinde yenileme işleri tam olarak bitmiş değil, geliştirme süreci devam ediyor. En kısa sürede tam sürümün monitörlerinize ulaşacağı bilgisini de buradan vermiş olalım!

Yorumlar (17)

  • Arda Yalınkılıçdiyor ki:

    26 Mayıs 2009 10:57 am

    Hasan Bey, güzel bir yazı. Bu tür yazıları Türkçe olarak ilk defa sizden okuyorum. Tebrik ederim. Çok faydalı oluyor. Önceki yazınız da güzeldi. Daha önceki bir kaç yazınızda gazetelerin çoklu manşet kullanmasını eleştirmiştiniz. Yahoyt’un yeni tasarımında yukarıda resimli değişen haberlere siz de yer vermişsiniz. Peki bu çoklu manşet sayılmaz mı? Aslında bununla ilgili de açıklama yazsanız iyi olurdu yazıda. Sizi bir çok konuda örnek alıyoruz. Bu tür bir kullanımın mantığını ve nerelerde kullanılabileceği konusunda sizin önerilerinizi merak eidyorum. Bunu gereksiz bir eleştiri olarak değil de merak edip sebebini öğrenmek için yazdım. Elinize sağlık. İyi çalışmalar.

  • Furkandiyor ki:

    27 Mayıs 2009 2:09 pm

    Açıkçası eski tasarımı daha güzeldi sitede çok oynanmış ve beğenmedim sitenin her gün ziyaret edenlerindenim fakat her şey içe içe çok karışık tıpkı facebook gibi sanırım başka siteler aramam zorunda kalacagım eski site üzerinde çalışılsa daha güzel olurdu kanaatındeyim ama yinede emeğe saygı ne diyeyim başarılar.

  • ozgur_tdiyor ki:

    27 Mayıs 2009 6:52 pm

    Eskisi bence daha okunaklıydı. Beni asıl neyin rahatsız ettiğini henüz çözemedim ama…

  • yunusdiyor ki:

    28 Mayıs 2009 2:28 am

    site gayet güzel olmuş ama arkadaşların dedigi gibi biraz itiş tıkış olmuş pixellerin her birini değerlendirmişsiniz biraz göz yoruyo ve kafa karıştırıyo ellerine saglık ;)

  • Enesdiyor ki:

    28 Mayıs 2009 8:38 am

    Genel itibariyle çalışmalarını ziyadesiyle beğendiğim ve taktir ettiğim bir tasarımcı : Hasan Yalçın

    Çok şey konuşulabilir, söylenebilir. Ama kısaca fikrimi belirtmem gerekirse, bu kez olmamış. Eski tasarımla,ya da şu veya bu tasarımla mukayese etmek istemem. Ama bir son kullanıcı gözüyle, kullanılabilirlik hayli düşmüş. Kafalar allak bullak olmuş.

  • Hasan Yalcindiyor ki:

    28 Mayıs 2009 10:16 am

    Teşekkürler Arda Yalınkılıç, soruna cevabım hayatta herşeye tek başınıza karar veremiyorsunuz, olacaktır.
    Bu arada olmamış diyen arkadaşlar neden olmamış ve nasıl olmalıydı gibi açıklamalar ile gelirlerse daha faydalı olacaktır kanısındayım. Neye göre olmamış mesela ?
    Teşekkürler

  • emindiyor ki:

    28 Mayıs 2009 2:15 pm

    Hocam tasarım güzel. Düşüncede güzel. Fakat benim görüşümce yetersiz. Şöyleki;
    yahoytyi rssden iZlemekteyim. Ama siteye girince çok büyük ikonlar kaba çizgiler ile karşılaşmaktayım. Bence elinize kağıt kalemi alın. Bir sayfada en önemli ne var? farzedelim .. var. Onu en belirgin olacak şekilde tasarlayın ve sayfada bir bakışta kendini belli etsin. Diğerleri önem sırasına göre (bu sizin belirlediğiniz önem)belirginlik kuralınca uygulayın. Mesela en belirgin kısmı koyu background ve kalın koyu renkli çerçeve, 2cil önemli olan kısmı renksel olarak 2.derecede baskın renklerle ve çerçeveyle(çerçeve şart değil sadece vurguyu anlatmak için söylüyorum anlaşılsın diye) uygulayın.

    Şimdi ben bu durumda olsam renklerin dilini kullanacağım için grafikerime bu konuyu açardım. Oda size bir sayfada 1.derecede önemli ve dikkat çeken,2.derce ve 3.derece şaklinde rekleri tanımlasın. Sizede kod kısmını uyarlamak kalıyor.

    Birde nasıl yaparsınız bilmem ama şu logo çok yer kaplıyor.Niye sayfaya her girişimde kaydırmak zorunda kalalım? Logoda ne var öyle gözümüze gözümüze sokuyorsunuz? Bi türlü anlam veremiyorum…
    oyüzden rssden takip ediyorum siteye pek girmiyorum. umarım bu söylediklerimin yararı olur.

  • Enesdiyor ki:

    1 Haziran 2009 9:05 am

    Hasan abi (bir önceki yorumuma atfen) olmamış derken yanlış anlaşılmasın, kıyasımız Hasan Yalçın’ın diğer işlerine göredir.

    Ben şahsım adına kullanılabilirliğin düştüğü kanısındayım. Elbette yeni tasarım, kullanıcının sitede geçireceği zamanı arttıracak yapıdadır. Ancak kullanıcının harcadığı bu zamanı neyin nerede olduğunu bulmakla mı, neyin nasıl olduğunu çözmekle mi, yoksa sitenin içeriğinde keyifli vakit geçirerek mi harcadığı önemli bir noktadır. Ben artan kullanıcı ziyaret sürecinin olumlu yönde harcandığı kanısında değilim. Herşeyi kullanıcıya göstermektense, bazı şeyleri kullanıcıya gösterip kullanıcının kişisel ziyaret deneyiminin bir parçası olarak diğer kısımları keşfetmesi daha olumlu olacaktır.

    Kullanılabilirlik konusunda uzmanlığına büyük saygı duyduğum Mehmet Doğan’ın altiustutasarim isimli bloğunu ele alalım. Herşey göz önünde değildir, ancak kullanılabilirliği çok yüksek bir yapıdır.

    Sadece çok küçük bir müdahale ile sitedeki yerleşim karmaşası (ya da psikolojik olarak bize öyle gelen karmaşa da diyebiliriz buna)küçücük bir ölçüde dahi olsa giderilebilir. An itibariyle internet ve yazılım başlıklı bloklar aynı hizadadır. Buna karşın oyun ve kurumsal blokları aynı hizada değildir. Bu bile bir karmaşa hissi yaratabilir.

    Sitede header altında bulunan slaytlar hayli dikkat çekicidir.Ancak onun sağına ve onun da altına hareketli 2 reklam görseli, header’a da bir hareketli reklam görseli koyduğunuzda bu karmaşa hissi yaratabilir. Bütün reklam yoğunluğunun sitenin üst kısmına verilmiş olması (anasayfa için) düşündürücüdür.

    Genel olarak ise alkışlarla yaşıyorum için yapılan çalışma, bu sitenin ruhunu tamamen karşılayan, ona bir ruh veren bir çalışmadır. Ancak yahoyt için aynı şeyi söyleyemem. Yahoyt sivrilen, keskin hatlarla bir profil yansıtan çalışma olarak bence değerlendirilemez. Şıktır, güzeldir, kötüdür, çirkindir. Ama her ne olursa olsun, şahsına münhasır bir ruhu yansıtmıyor.

    Elbette tüm bunlar benim fikrimdir. Saçmadır, isabetlidir, isabetsizdir, mantıklıdır. Ama her ne olursa olsun, kişisel görüşlerimdir.

    Benim haddim asla değildir Hasan Yalçın gibi bir büyüğümüzü, çok daha önemlisi ustayı olmamış, kötü, olmuş gibi sözlerle eleştirmek. Yaptığım sadece son kullanıcı gözüyle sitenin bana hissettirdiklerini paylaşmak.

    Sitede kullanılan blokların başlıklarının arka planı düzensiz bir biçimde farklı renklerde. Bunlar bir açık, bir koyu mavi olabilir. Ya da sağ kolondakiler açık mavi, sol kolondakiler (içerik) koyu mavi olabilir. Simetri de asimetri de yerine göre oldukça kullanışlı olabilir. Ancak asimetri düzensizlik değildir. Şu haliyle gelişi güzel bir serpiştirme hissi uyandırıyor. (Öyle olmasa bile)

  • ozgur_tdiyor ki:

    8 Haziran 2009 10:26 pm

    galiba buldum:
    sorun(benim açımdan), sosyo-kültürel bakış, biz yani bu siteyi ziyaret edenler haberleri kafamızda donanım veya yazılım diye ayırt etmiyoruz.
    google’ın enyeni şeysi de, enson model ekrankartı da bizim için gündememin “ayrılaz” bi parçası, çünkü içinde yaşadığımız teknoloji bir bütün.

    sitenin fonksiyonu yeni ne varsa onu bildirmekse bu bildiriyi haberin içerik türüne göre sıralanmış değilde; zamanına göre sıralandırılmış olarak almayı daha doğal buluyorum.

    zaten ekran kartının donanımla ilgili olduğunun bana tekrar hatırlatılmasının hiçbir faydası (fonksiyonu) yok.
    üstelik doğrusal zaman algılama alışkanlığımı dürtükleyerek canımı sıkması da cabası.
    “nerden başlasam?” , “netbook mobil midir donanım mı?” gibi bilişsel karıştırıcılardan bahsediyorum. beynim bunlarla boşuna meşkul ediliyo gibime geliyo

    yine kişisel görüşüm, satırları kutulara tercih ederim.

    yine kişisel görüşüm siz iyi şeyler yapmaya çalışan çalışkan insanlarsınız dürüstlüğümüzü hakediyorsunuz:)

  • Arda Yalınkılıçdiyor ki:

    9 Haziran 2009 9:42 am

    Hasan Bey, yahoyt’un eski tasarımında son eklenen haberleri bir bakışta görmek mümkündü. Bunda da o tür bir bölüm olsa iyi olacak. Her kategorinin kendi son eklenenini görmek için aşağılarda haber avına çıkıyoruz. Tabiki bu benim bireysel görüşüm. Yeni şeklin de farklı işlevselliği elbette vardır.

    Bu arada televidyon’un yeni tasarımını da yazacak mısınız. Beklentileri yükselttiniz bir kere :)

    Televidyon tasarımı benim isteklerime açıkcası tam cevap veriyor. Çok beğedim.

    İyi çalışmalar

  • Hasan Yalcindiyor ki:

    9 Haziran 2009 9:44 pm

    Herkese yorumları ve bakış açıları için teşekkürler, Televidyon için bir şey yazmayacağım şu aşamada :) zira bu bir ara sıcak. Televidyonun bir süre sonra tamamen yeni bir tasarıma geçmesi planlanıyor.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir