WIREFRAME

Posted: May 7th, 2010 | Author: B | Filed under: Makale, Web | Tags: grid system, information architecture, matt brown, mix, mix10, pencil, running with wireframes, seminars, smashing magazine, wireframe | 1 Comment »

Wireframe nedir?

Wireframe, bir web sayfasının içeriğinin ve fonksiyonlarının tanımlandığı eskizlerdir. Aynı zamanda bir masaüstü uygulaması, mobil uygulama, sunum tasarımlarında da kullanılmaktadır. Herhangi bir şekilde renk, font, grafik, fotoğraf, resim, illustrasyon gibi arayüz tasarımı ile ilgili bir öğe içermemektedirler.

Nasıl kullanılırlar?

Site haritaları (site maps) wireframe oluşturmak için son derece faydalıdır. Tasarım konusunun “Amaç dokümanı”  da işin tanımlanması ve sürecin tekrarlardan kurtulması açısından önemlidir ve zaman kazandıracaktır. Ayrıca, Bilgi Mimarisi (Information Architecture ) için önemlidirler. 

Wireframe’ler genel olarak Bilgi Mimarları (Information Architects), İş Analisti (Requirement Analyst) veya Tasarımcı (Designer) tasarınfdan oluşturulurlar. Tasarım gruplarında genellikle aynı kişilerdir.

Detaylı Wireframe oluşturmak çoğunlukla öngörülemeyen ihtiyaçları ve gereksinimleri ortaya çıkarırken, iş tanımı yapılırken farkına varılmamış ve kimsenin aklına daha önce gelmemiş soruları da işin başında sorabilmemizi sağlar. İş tanımı yapılırken bu özellikten yararlanmak adına wireframe kullanılabilmektedir. Detaylı bir Wireframe, size zaman kazandıracak, maliyetlerinizi azaltacaktır. Yönetici ve müşterilerizin, işlevsellik konusunda en başta düşünmelerini, birlikte çözüm üretmenizi sağlayacak, tüm ihtiyaçları karşılamanız konusunda size yardımcı olacak ve iş tamamlandıktan sonra talep edilecek olası değişiklik sayısını indirgeyecektir.

Wireframe nasıl oluşturulur?

Wireframeler, birçok bilgi mimarlığı diyagramları gibi, çeşitli yazılımlarla oluşturulabilirler. Bu yazılımlarda ihtiyacınız olan bir çok şablon bulunmakta ve işinizi kolaylaştırmaktdır. Bu adreste wireframe için önerilen yazılımları görebilirsiniz. Tabi yazılıma olan hakimiyetinize göre, word, ecxell, Powerpoint gibi ofis uygulamalarının çizim araçlarını da kullanabilirsiniz. Benim tercihim oluşturulan wireframeleri PNG, HTML ve PDF gibi formatlarda çıktı alabildiğimden PENCIL. Öte yandan en keyifli ve hızlı değiştirilebilir olanı da kağıt kalem ile çalışmak. Bunun için çeşitli grid sistemlerin PDF formatında şablonlarının çıktısını alıp daha derli toplu çalışabilir, çalışma şeklinize göre uzun vadede kendinize özgü dokümanlar oluşturabilirsiniz. Tek dikkat etmeniz gereken, ürünün alanındaki dünya standartlarına bağlı kalmanız.

Wireframe oluşturuken dikkat etmeniz gerekn en önemli konulardan biri de ne çok genel ne de çok detaylı olmadan dengeyi sağlamaktır. Çok detaylandırmış olmak, tasarımcı için hareket alanını daraltırken, çok genel bir doküman oluşturmuş olmak, tasarımcıyı okyanusun ortasına atmak gibi olacaktır.

Matt Brown MIX10 Seminerinde “Running With Wireframes” konulu seminerinde wireframe’i 3 başlıkda toplamıştır.

LO-FI Wireframe: Kağıt üzerinde yapılan wireframeler, üretilmesi, paylaşılması, tasarımcının özgür olması ve kısıtlamaları olmaması gibi avantajlar sağlayacaktır. Öte yandan okuması güçleşebilir.

“Funtional” Fidelity Wireframe: Üretilmesi yine kolaydır. Aynı zamanda görünüm hakkında da bilgi verebilmektedir ve detay-genel konusunda daha dengelidir.

HI-FI Wireframe: Komple bir bilgi mimarisi çözümüdürler. Basit anlamda tasarım belirlenmiştir. Müşterinin nihayi ürünü görebilmesini sağlarlar. Ancak, üretilmeleri ve değişiklik yapılması maliyetleri artırmaktadır. Tasarım ekibini sınırlar.

Ayrıca Matt;

• Tasarımcıları mümkün olduğunca erkenden sürece dahil edin,
• İçerik sağlayıcının gerçek verileri en erken şekilde iletmesini sağlayın,
• İş gereksimi dokümanı ve Site Haritası oluşturun,
• LO-FI aşamasında yepyeni fikirler olabileceğinden mümkün olduğunda bu süreci uzatın,
• Renk, font, grafik kullanmayın,
• Takımın bir parçası olarak hiçbir olarak hiçbir yorumu kişiselleştirmeyin.

önerilerinde bulunmaktadır.

HTML Wireframeler

Tasarımcı ve Bilgi Mimarları wireframelerini HTML olarak oluşturmakta ve programcılara bu sayfaları vermektedirler. Bu, hem programcının işini kolaylaştırmakta hem de son kullanıcının işlevsellik dışında son ürünü görebilmesini kolaylaştıracaktır.

Barış Öztekin
barisoztekin.com © 2010

---