x

Webrazzi’nin arayüz tasarımı yenilendi!

webrazzi-com-yeni-tasarimPazar’ı Pazartesi’ye bağlayan gece saatler 02.00’ı gösterirken Webrazzi’nin yeni arayüz tasarımını yayına aldık. Sizler yavaş yavaş bu yeni tasarıma alışıyorken detaylara ve merak edilenlere bu yazıda yer vermek istiyoruz.

Siz okuyucularımızdan gelen isteklerin yanı sıra son olarak 2010 yılında yenilenen Webrazzi’nin arayüz tasarımını uzunca bir süredir biz de yenilemeyi düşünüyorduk. Ve nihayet 2014 yılının ilk haftalarında konsept ve fikir toplantılarıyla başlayan sürecin dün (19 Mayıs Pazartesi) itibarıyla sonuna geldik ve sizler şu an bu yazıyı yeni tasarımımızdan okuyorsunuz. 🙂

Bu arada bir tutam nostalji yapmak isteyen okuyucularımız Webrazzi’nin 22 Ağustos 2006 tarihindeki haline buradan, 29 Ağustos 2010 tarihindeki görüntüsüne ise buradan ulaşabilir. Yeni tasarımdan önceki son hali nasıldı derseniz de şuraya bakabilirsiniz.

webrazzi-com-yeni-tasarim

Yeni tasarım öncesi ne istiyorduk?

Değişim öncesinde önceliklerimizi temel olarak şu 3 başlıkta sıralayabilirim;

  • Daha modern ve responsive bir arayüze sahip olmak
  • Webrazzi PRO, Webrazzi VT, Webrazzi Kariyer ve Webrazzi Etkinlikleri gibi aslında Webrazzi’nin birer parçası olan ürün ve kanalları blog sayfamıza entegre etmek
  • Webrazzi TV’yi hem öne çıkartıp hem de kullanımını çok daha kolay hale getirmek

Yukarıdaki 3 maddenin de yeni arayüz tasarımımızla beraber hayata geçtiğini düşünüyoruz. Yalnız bu değişim sürecinin devam ettiğini, hem Webrazzi üzerinde daha yapacak çok işimiz olduğunu hem de şu sıralar mobil uygulamalarımız (iOS ve Android) için çalıştığımızı da eklemeliyim.

Kısa bir süre sonra Webrazzi’nin yenilenen iPhone uygulaması (iPad uyumlu) ile resmi Android uygulamasını da sizlere duyurmuş olacağız.

Nelere dikkat ettik, bazı kritik kararlar…

webrazzi-webrazzitv-arayuz

Webrazzi.com’un yeni arayüzünde en çok dikkat çeken noktalardan birisi sitenin en üstünde yer alan açılır kapanır menü. Bu alanda Webrazzi TV, Webrazzi’nin düzenlediği etkinlikler, Webrazzi Kariyer, Webrazzi VT ve Webrazzi PRO hakkında bazı bilgilere ulaşabilirsiniz. Yukarıda da belirttiğimiz gibi yeni tasarım öncesi Webrazzi altındaki ürün ve markaları bir arada sunma düşüncesini bu şekilde hayata geçirmiş olduk.

Bunun dışında eski tasarımda Webrazzi TV videolarını normal yazılardan ayıran çok bir fark yoktu ve kullanıcılarımızın geçmiş videolara kolayca ulaşmasıyla Webrazzi TV’de düzenli aralıklarla güncellenen programlarımızı farketmesi çok mümkün değildi.

Tüm bu problemleri de Webrazzi TV kategorisi olarak hazırladığımız özel bir sayfa altında çözdük. Artık hem Webrazzi TV içeriklerinin hem de Webrazzi TV altındaki etiket&kategori sayfalarının görünümü çok daha farklı. Bunun yanında geriye dönük olarak Webrazzi TV videolarına ulaşma ve Webrazzi TV kanallarını takip edebilmeyi de yeni tasarımda kullanıcılarımızın kolayca deneyimlemesini bekliyoruz.

Diğer yandan paylaşım butonlarında 4 farklı sosyal medya kanalına yer verdik: Facebook, Twitter, Google Plus ve LinkedIn. Bir başka önem taşıyan karar da yorum özelliğini nasıl hayata geçireceğimizdi. Bu noktada site üzerinde başka yeteneklerini de kullandığımız Jetpack‘i tercih ettik. Merak edenler için Webrazzi’de kullanılan diğer bazı pluginler de şunlar: Liveblog, All In One SEO Pack, Akismet, Contact Form 7 ve WordPress.com’dan Jetpack.

Yeni tasarım için ne kadar vakit harcadık?

webrazzi-com-yeni-tasarimi-4Webrazzi.com’un yeni arayüzü için 5 hafta kadar bir sürede 46 farklı .psd dosyası (969MB boyutunda) hazırlandı. Projeden bazı tarihler de paylaşmak gerekirse; arayüz tasarımın hazırlanmasının ardından 20 Mart tarihinde yazılım süreci başladı. Foundation Framework kullanarak responsive olarak geliştirdiğimiz önyüz ve PHP ile kodladığımız WordPress bölümlerinin temel fonksiyonlarıyla tamamlanıp test ortamına geçilmesi tam olarak 1 ay sürdü. 22 Nisan’dan itibaren de bug fix, test ve son rötuşları toparlamakla bugüne kadar geldik.

Arayüz tasarımını Nermin Akel, tüm kodlamasını da Ant Ekşiler‘in gerçekleştirdiği (RG Bilişim bünyesinde) yeni tasarımımızı 19 Mayıs Pazartesi gününün ilk saatlerinde yayına aldık.

Webrazzi’nin yeni tasarımıyla ilgili bizlere iletmek istediğiniz hata, yorum ve görüşlerinizi tech@webrazzi.com e-posta adresine ya da bu yazının hemen altına bekliyoruz. 🙂

Yorumlar (48)

  1. Yeni tasarım çok kaliteli olmuş ama hala eskisini kullanmak isteyenler olabilir. Antika siteyi de bi’ yerlere sıkıştırsanız süper olur 🙂

    Cevapla
  2. Oldukça başarılı, sade ve hoş olmuş. Tebrikler 🙂

    Cevapla
  3. Ant Ekşiler’i tebrik ederim gerçekten güzel kodlamış. Ama tasarım için aynı şeyi söyleyemeyeceğim. Boşluklara dikkat edilmemiş site hiç ferah durmuyor. Tipografi hiyerarşisi konusunda büyük sıkıntılar var. Modern tasarımda bu kadar kalın stroke’lar ile pek olmamış maalesef.

    Cevapla
  4. yeni tasarım çok güzel olmuş hayırlı uğurlu olsun.

    Cevapla
  5. Tebrikler, webrazzi’ye yaraşır bir tasarım olmuş. 🙂

    Cevapla
  6. Hayırlı olsun çağın gereksinimlerine ve web teknolojilerine ayak uyduran yenilikci bir tasarım, işlevsel bir tema olmuş. Başarılar dileriz.

    Cevapla
  7. Kodlama olarak fazla bir şey söylenemez ancak tasarım olarak daha iyi olabilirdi. Eski standart blog görünümüne oranla çok daha iyi tabi 🙂
    Yazılarda ki sosyal paylaşım kısmını beğendim. Birde ana sayfada ki resimleri linklendirseniz daha iyi olacak. Kodlayan ve tasarlayan arkadaşı tebrik ederim. Hayırlı olsun.

    Cevapla
  8. Tasarım çok şık ve kullanışlı olmuş, tebrikler..
    Gözüme takılan kısım yorumların belli bir zaman aralığında kalınlaşması, bu pek iyi olmamış.

    Cevapla
  9. Fena değil. Sidebar ve content arasını daha çok açılmalı birbirine giriyor. Ferahmış gibi duruyor ama aslında değil. Metin okuma alanı belirli bir genişlikten sonra okuma adına zahmet yaratıyor.

    Cevapla
  10. Genel anlamda başarılı buldum tasarımı bir kaç küçük hata dışında. Öne çıkarılan görsel alanı ile yazıların listelendiği alan uyumsuz olmuş. Öne çıkarılan görsel alanın tıklanabilir olmaması, altında kısa özeti bulunmaması ve diğerlerindeki gibi yorum sayısının ve sosyal ağ paylaşımının görselin içerisinde olmaması kafa karıştırmanın yanında bütünlüğü bozmuş. Ayrıca görsel alan ile görselin ilgili olduğu yazıya gitmek için bulunan yazı başlığı farklı konularmış gibi duruyor. Bu alanda bulunan mantıki karışıklık düzeltilmeli. Nacizane öneri olarak ise bu görsel alanda slider kullanılarak bir çok önemli yazı ve werbrazzi videosu öne çıkarılabilir.

    Cevapla
  11. Videolar için ayrı bir bölüm olması çok güzel yeni tasarım için tebrikler kolay gelsin.

    Cevapla
  12. İbrahim ÖZKAN |

    Eski site daha derli topluydu (Reklamlar hariç). Üst bölümdeki menü çok yorucu hangi menüye gelirseniz o içerik açılıp siteyi aşağı kaydırıyor. Siteyi aşağı kaydırmak yerine menü şeklinde olsaydı daha az gözü yorardı.

    Diğer ve en önemli sorunda, yazılar gözü yoruyor okurken, bu konu bence en önemlisi.

    Yeni tasarım bir anda yayına girmeden keşke farklı bir adreste kullanıcılarından görüşlerini aldığınız bir şekilde yayınlansaydı daha iyi olurdu bence, bu tarz önemli ziyaretçi kitlesi olan siteler tasarımlarını bir gecede değiştirmek yerine kullanıcılarına farklı bir adreste sunsalar, görüşleri alsalar daha başarılı olacaktır…

    Cevapla
  13. Tasarım Stil olarak güzel fakat white space lazım az biraz.

    Cevapla
  14. Ramiz TAYFUR |

    Tek kelime ile harika! Webrazzi kalitesine yakışır bir arayüz tebrikler..

    Cevapla
  15. Mobil sitede masaüstü görünüme dönme tuşu olmalı

    Cevapla
  16. Onur Alp Baklacı |

    eski tasarımdan bir fark yok bence. hala herşey fazla beyaz ve havada.. haber nerde başlıyor nerde bitiyor belli değil. Sitenin tüm genelinde tüm bölümler için bir sınır sorunu var bence. herşey fazlasıyla içiçe geliyor bana.

    Cevapla
  17. Tasarım güzel olabilir ama benim için kullanışlı değil. Özellikle de küçük ekranlarda çok yoğun bir yazı çıkıyor karşımıza ki bu durum göz yorucu bir hal alıyor.

    Cevapla
  18. Webrazzi yeni tasarıma geçmeye çok geç kalmıştı. Ben daha değişik bi tasarım bekliyordum ama buda çok güzel ve profesyonel bir tasarım olmuş. Yeni tasarımınız Hayırlı Olsun.

    Cevapla
  19. Bu tasarımla kendinizi venturebeat ve techcrunh seviyesine çıkarmışsınız hayırlı olsun

    Cevapla
  20. okunabilirlik artmış gibi, bence daha iyi olmuş

    Cevapla
  21. Yeni tasarımı çok beğendim. Arkadaşlar iyi iş çıkarmış.

    Cevapla
  22. Eski tasarıma oranan daha modern ve iyi olmuş. Ama genede yetersiz olmuş, özellikle menü kısmı.

    Cevapla
  23. Tebrikler, gayet başarılı ve blog havasından arınıp tüm servislerinin bir araya toplandığı bir site haline gelmiş.

    Cevapla
  24. digitalage gibi olmuş.

    Cevapla
  25. tasarım üzerinde daha çalışılsın ama daha önemlisi logo biraz modernleştirilsin ve favicon

    Cevapla
  26. Biz de gece iki saat kadar güncellemeyi bekledik ve onlarca arkadaşla yeni tasarımı değerlendirdik. http://wmaraci.com/forum/webmaster-genel/webrazzinin-yeni-tasarimi-guncellendi-147920.html

    Cevapla
  27. Hasan Deger |

    Herkes görselin üzerinde sürekli olarak hover bulunması UX açısından sıkıntılı bir durum. Günde 10 kez siteye giren bir kullanıcı sürekli mouse ile hover durumunda görüyor görselleri. İsterseniz test edin.

    Cevapla
  28. İphone/chrome da eski tasarım kasmazdı
    Ama bu tasarım inanılmaz kasıyor haberiniz olsun. Özellikle yukarı giderken sayfada site donuyor. Js ile alakalı olsa gerek

    Cevapla
  29. Tam ekran tasarımları oldum olası sevemedim, yeni tasarım görsel açıdan şık dursa da kullanışlılık açısından oldukça kötü. Boxed versiyonu için bir seçenek sunarsanız daha hoş olur.

    Cevapla
  30. Merhaba,

    Hayırlı olsun öncelikle,

    Ufak bir eleştiri yaparım haberin resmine tıkladığımız zaman gitmiyor ve aksine paylaş butonları çıkıyor resim üzerinde paylaş çok rahatsız edici.Okumadığı bir haberi kaç kişi paylaşıyor ki? Sadece başlığa tıkladığımız zaman değil aynı zamanda resme tıkladığımız zaman’da habere gitmeli zaten yeterince yazı var bide resmin yazısını aramakla uğraşmayalım.

    Dikkate alınır umarım.

    Cevapla
  31. Çok güzel olmuş ancak anasayfada yazıların thumbnaill’lerine tıklayınca yazıya gitmesi daha iyi olabilir. Yazıyı okumadan paylaş butonları bir anlam ifade etmiyor.

    Cevapla
  32. Yorumlar belli aralıklarda kendiliğinden bold olup düzeliyo çok sinir bozucu.
    http://screencast.com/t/dpuRpbraE0f

    Cevapla
  33. Headerda etkinliklere gelince, Eylül, Mayıs, Nisan, Mart gibi bir sıralama var. Biraz ters olmuş sanki 🙂

    Tasarım gayet başarılı. Sadece biraz fazla javascript kullanılmış sanırım, donanımı düşük bilgisayarlarda browser biraz kasabiliyor.

    Cevapla
  34. Hayırlı olsun.
    Önerim mümkünse haber resimlerine link verin. Eski alışkanlığımızı bozmayalım

    Cevapla
  35. Utku Mevlitoğlu |

    Yeni tasarım tarzında her parçanın bir miktar daha büyük ve daha ferah olacak şekilde kurgulanması çok doğru bir gidişat. Fakat bu güzel durumu bozan 1 tane çok önemli bir istisna var ki birçoğumuzda negatif space eksikliğini yoğunlukla hissettiren de o sanırım. Sitenin ana parçası (sol) ve yan parçası (sağ) arasında ki mesafe o kadar az ki. Bu mesafeyi mümkünse şimdikinin 3 değilse en az 2 katına çıkarmak çok daha nefes alabilir hale getirecektir arayüzü. Nermin Hanım’ın ve kodlayan arkadaşın tekrardan ellerine sağlık. Gerekli bir adımdı.

    Cevapla
  36. Yeni yorumlar en başta olması daha güzel olabilirdi. En yeni yorumu görmek için en alta inmek gerekiyor… Yada yorumlara puanlama sistemi getirilerek en yararlı yorumu en üste taşımaası fikride olabilir. Hiç olmadı Disqus gibi bir harikaya geçmek gerek.

    Çalışma başarılı olmuş, tebrik ederim…

    Cevapla
  37. Gayet güzel ama reklam panolarının dağılımı biraz rahatsız edici gibi

    Cevapla
  38. css de font smoothing antialiased yapmanız gerekiyor mac te fontlar bold gorunuyor. tasarım cok hos.

    Cevapla
  39. Haber fotoğraflarında bulunan paylaş ikonuyla büyük bir sorunu çözmüşsünüz, bravo. Haberin başlığını anasayfada gören kullanıcının yaptığı ilk şey haberi okumak değil, paylaşmak çünkü. Gerçekten mükemmel. Bol bol paylaşırım artık.

    Cevapla
  40. Kullanışlılık açısından eskisini yeğlerim.

    Cevapla
  41. Yeni tasarım kesinlikle günümüze yakışır, temiz ve orijinal olmuş. Elinize sağlık…

    Cevapla

Bir Cevap Yazın