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

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 [email protected] e-posta adresine ya da bu yazının hemen altına bekliyoruz. 🙂

Yorumları GösterYorumlar Gizle (48)
  1. Tarık dedi ki:

    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 🙂

    1. fatihizm dedi ki:

      Bırakın artık antika olmayı falan. Bu gayet iyi olmuş.

      1. Osman dedi ki:

        güzel olmuş, başarılar…

    2. yusufkaraoglan dedi ki:

      Burasi Teknoloji blogu antikaci degil.

  2. Cem dedi ki:

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

  3. Kerem dedi ki:

    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.

  4. wolkanca dedi ki:

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

  5. Mustafa BAL dedi ki:

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

  6. Serhat dedi ki:

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

  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.

  8. Eren dedi ki:

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

  9. thealicoalico dedi ki:

    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.

  10. bcakircom dedi ki:

    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.

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

  12. İbrahim ÖZKAN dedi ki:

    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…

  13. Yunus dedi ki:

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

  14. Ramiz TAYFUR dedi ki:

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

  15. m.akif dedi ki:

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

    1. m.akif dedi ki:

      Birde mobilde haberlerin yorum durumu gösterilebilir.

  16. Onur Alp Baklacı dedi ki:

    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.

  17. Emre dedi ki:

    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.

  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.

  19. deniz dedi ki:

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

  20. şaban ulutaş dedi ki:

    okunabilirlik artmış gibi, bence daha iyi olmuş

  21. Cengiz Akyazı dedi ki:

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

  22. Enes Aktaş dedi ki:

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

  23. Ercan Gülçay dedi ki:

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

  24. mecnun dedi ki:

    digitalage gibi olmuş.

  25. dfs dedi ki:

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

  26. Ömer dedi ki:

    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

  27. Hasan Deger dedi ki:

    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.

  28. Ozer dedi ki:

    İ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

  29. Aygül Hayal dedi ki:

    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.

  30. Mehmet Emrullah dedi ki:

    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.

  31. Turan dedi ki:

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

  32. Serdar dedi ki:

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

  33. cem sancak dedi ki:

    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.

  34. Oktay dedi ki:

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

  35. Utku Mevlitoğlu dedi ki:

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

  36. emrahyilmaz dedi ki:

    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…

  37. Murat dedi ki:

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

  38. Metin dedi ki:

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

  39. Mithat Can Ayok dedi ki:

    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.

  40. Mustafa dedi ki:

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

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

Bir Yorum Yazın