Sosyal Medya Teknoloji Üretkenlik

Wireframe Projenin Başı Değil Sonudur!

customimage-home-changes-lives


Wireframe öncesinde nasıl bir çalışma yapılmalı?

  • Site haritasını oluşturun bunun için Xmind (http://www.xmind.net/) programını kullanabilirsiniz.
  • İçerik dökümantasyonu hakkında (Görsel ve metin) bilgi sahibi olun.
  • Benzer siteleri inceleyin, nasıl yapmışlar (yanlışlar ve doğrular) bilgi sahibi olun.
  • Rakip siteleri inceleyip analiz edin.
  • Kullanıcı deneyimlerini inceleyin eski sitede ne tarz zorluklar yaşamışlar. Kullanıcılar ne diyor? Dinleyip, yeni wireframe de çözüm noktaları düşünüp, ona göre Wireframe i yapın.
  • Wireframe’ in her aşamasında müşteri ile iletişiminizi koparmayın revizeleri wireframe aşamasında alın.
  • Wireframe, dijital bir projenin (web sitesi, mikro iste, Facebook App, Mobil App. Advergame gibi) içeriğinin, yapısının ve fonksiyonları hakkında proje için çalışacak ajans insanlarına ön görü sağladığı projeye giriş eksizlerdir.
  • Projenin iskeletini oluşturur.

Wireframe çalışması web geliştirme sürecinin çok önemli bir aşamasını oluşturur. Bu adımı atlayıp, doğrudan tasarıma başlamak cazip olsa da, içeriğin planlaması ve bir sitenin gerçek gelişimi arasında bir yerde wireframe oluşturmak büyük önem taşır. Wireframe size çok daha verimli bir şekilde bazı şeyleri yapmak için izin verir, tasarımın tüm aşamalarını yaratıcılığa dönüşmeden tüm aşamaları hakkında doğru bir şekilde tasarımcıyı yönlendirerek yaratılık aşamasında hesaplanmayan olası hataların önüne geçerek müşteriden gelebilecek revizelerin de önüne geçmiş olur.

Wireframe projenin başlangıç aşamasında yapılacak tasarımın iskeletini, anahatlarını hakkında fikir veren, düşük kalitede bir görsel temsilidir. Genellikle, wireframe temel sayfa mizanpajı yapısı ve sitenin sayfaları yanı sıra, büyük resimde yer alan resmi (web formları ve reklam birimleri gibi) nasıl bir şekilde görüneceğine ilişkin düzeni de temsil eder.

Wireframe bitmiş tasarım öğeleri içermez, tasarımın nasıl olacağı hakkında yönlendirmede bulunmaz. İçerik ( fotoğraf, video, metin) hakkında öngörü sağlar. Wireframe oluşturmak için yazılım programına ihtiyaç yoktur. Kağıt ve kalemle tüm süreci oluşturabilirsiniz. Kullanacağız wireframe programlarıyla ayrı ayrı oluşturduğunuz taslakları html olarak export ederek çalışır bir hale kolayca getirebilirsiniz. Wireframe’i html olarak yaptığınızda yazılım ekibine proje işleyişinin nasıl olacağına ilişkin fikir vermesi açısından fazlasıyla faydalı olacaktır.

  • Wireframe projede çalışanlara ve müşterilere bir takım kolaylıklar sağlar:
  • Site haritası oluşturarak site navigasyonu’nu test edebilirsiniz.
  • İçerik sayfaları nasıl gözükecek bilgi sahibi olabilirsiniz.
  • Form yapıları hakkında kullanıcılar tarafından deneyimlenmesini sağlayabilirsiniz.
  • Kullanılabilirlik hakkında genel eğilimler hakkında bilgi edinebilirsiniz.
  • Web geliştirme / programlama gereksinimleri ne olacak fikir sahibi olabilirsiniz.

Bir Wireframe yerine bir web sayfasının tasarımını oluşturmak için çok daha fazla zaman, çaba ve uzmanlık gerektirir. Müşteriler kendi istekleri dışında bitmiş bir tasarımla karşılaştıklarında revize konusunda daha istekli olabilirler. Özellikle maliyet açısından bu durum, proje ekibinde çalışanların çok ciddi zaman kaybetmelerine neden olabilir.

Öncesinde, biz wireframe’i , hem ajans içinde hem de müşteri ile gözden geçirdiğimizde, tasarım aşamasından sonra karşılaşılan büyük revizelerden kurtulmuş olacak ve müşteri sürecin içine dahil olduğu için büyük revizeler yerine küçük önerilerde bulunması sağlanarak tasarım süreci hızla geçilmesi sağlayacaktır. Wireframe aşamasında içerik ile ilgili değişiklikler yaparak, tasarım aşamasında ortaya çıkabilecek sorunların ve zaman kayıplarının önüne geçilmiş olur.

Sonuç olarak : Wireframe ve tasarım sürecinde en iyi şekilde her sayfada kullanıcı deneyimini maksimize harmanlayarak projenin her aşamasında test edilmiş bir web sitesi ortaya çıkarılmış olur.

Dijital Ajanslarda Wireframe ‘i kim yapar?  %99 Proje yöneticisi yapar.

Wireframe hangi programları kullanarak yapabilirsiniz.

Cacoo http://www.cacoo.com
Balsamiq http://www.balsamiq.com
Gomockingbird https://gomockingbird.com/
Hotgloo http://www.hotgloo.com/
Mock Flow http://www.mockflow.com/
Evolus http://www.evolus.vn/Pencil/Home.html
Pidoco https://pidoco.com/en
Protoshare http://www.protoshare.com/
İPlotz http://iplotz.com
Gliffy http://www.gliffy.com
JumpChart https://www.jumpchart.com/
Just Proto http://www.justproto.com/en/
Creately http://creately.com/

Yazar Hakkında

Özgür Fidan

Akademi İstanbul -Reklamcılık, Anadolu Üniversitesi- Halkla İlişkiler, Anadolu Üniversitesi- İşletme okullarından mezun olmuştur. İş kariyerine Cen Ajans/GREY de Müşteri Temsilcisi Asistanı olarak başlamış. Sırasıyla Kurbağa Medya Tasarım, Biyer Art Stüdio, Dreambox, 41?29!, Origin EMC 'de Satış Yöneticiliği, Müşteri İlişkileri Yönetmenliği, Digital Signate Proje Yöneticisi, Digital Proje Yöneticisi olarak görev almıştır. Alafortanfoni de Proje Yöneticisi olarak olarak çalışma hayatına devam etmektedir.

  • Cagatayblkn

    Merhaba Özgür Bey ben Çağatay bugün konuşmuştuk, yazınız gayet açıklayıcı, olayı tüm hatlarıyla kavradım. Şimdi uygulama kısmına geçip toolları öğrenip pratik yapmayı düşünüyorum. Paylaşımınız için teşekkür ederim umarım tekrardan görüşürüz.
    İyi çalışmalar.

    • http://twitter.com/fidanozgur Ömür Özgür Fidan

      Selam Çağatay,

      Faydalı olmasına sevindim.

      Sevgiler

      Özgür

  • http://www.facebook.com/emel.dogru.5 Emel Doğru

    İŞ ARAYANLAR, Hayatınızın Fırsatını Yakalamaya Hazır mısınız? http://goo.gl/OuWVN