Recommended
More Related Content
What's hot
What's hot (20)
Similar to Wireframing Sunum
Similar to Wireframing Sunum (20)
Wireframing Sunum
- 2. Wireframe Nedir ? Web site, desktop uygulama, mobil uygulama... Kısacası yazılımın kullanılabileceği her alanda tasarımın nasıl oluşacağı, içerisinde kullanılacak renkler, grafikler, butonlar, textbox, checkbox, media player gibi birçok nesnenin tasarımda hangi konumda kullanılacağı ve çalışacağı hakkında müşteriye örnek teşkil etmesi açısından kullanılan bir ön izleme ve tasarımcının tasarım boyunca izleyeceği yolları gösteren bir ön çalışma diyebiliriz.
- 3. Site hakkında her ne kadar birbirinden parlak fikirleriniz de olsa bunu bazen daha site hazır olmadan başkalarıyla paylaşmanız gerekir. İşte wireframe bunu yapmanın en basit yollarından birisidir. Çalışmanızı karşı tarafa aktarmak için iletişim biçiminiz ne kadar iyi olursa karşı taraf sizi o kadar iyi anlayacaktır, bu aşamada görsel iletişim araçlarının önemi devreye girer. Kağıdın üzerine çizdiğiniz bir bardak resmi, aynı dili konuşmasanız dahi dünyanın herhangi bir yerindeki kişi için yine aynı anlama gelecektir. Kullanılma Amacı
- 4. Ne zaman, nerede kullanılır ? Gelişen teknolojiyle kullanıcı tasarım sürecine katıldı ve pratiklik ve hız ile birlikte kullanıcının isteği doğrultusunda tasarımın tamamı değiştirilmeden kullanıcının isteğine göre tasarım dizayn edilmeye başlandı. Bu durum zamandan tasarrufu da beraberinde getirmektedir. Dolayısıyla skeçleme (wireframing), tasarımın olabildiğince erken aşamalarında kullanılmalıdır. Böylece kullanıcıların ve site sahibinin belli başlı site elemanları hakkında fikirleri alınabilir, site hakkında söz sahibi olanlar bilgilendirilebilir.
- 5. Ne zaman, nerede kullanılır ? Kısaca özetlemek gerekirse müşteri tarafından verilen brief’e uygun olarak skeçleme araçları ile müşteriye tasarımın ön izlemesi sunulur. Tasarımcı, müşterinin skeç’i beğenmesi halinde photoshop, fireworks tarzı programlar ile web standartlarına uygun olarak tasarımı hazır hale getirir ve front-end developer’a teslim eder. Front-end developer tasarımı html’e döker ve Back-end devaloper’a teslim eder. Back-end developler’da bu çalışmayı koda döker.
- 6. Faydaları Nelerdir ? - Wireframe uygulamaları zaman tasarrufu sağlar. - Sürükle-bırak mantığıyla çalıştığı için tasarımda yapacağınız değişikliklerde size büyük kolaylık sağlar. - Projedeki karmaşıklığı ortadan kaldırır ve projenize kuşbakışı bakmanızı ve projenin büyük resmini görebilmenize imkan sağlar. - Müşterinize tüm ekranların nasıl görüneceğini “onun anlayabileceği bir dilde” gösterebilirsiniz. - Yazılım ekibine akışın nasıl olacağını rahatlıkla anlatabilirsiniz. - Tasarım ekibi ile aynı dilden konuşabilir ve anlaşabilirsiniz.
- 7. Wireframe, Mockup, Prototype Farkları Farklı görünürler, kullanılma amaçları değişiktir ve farklı amaca hizmet ederler. Eskiz’den Prototip’e doğru detay artar.
- 8. Wireframe Wireframe, bir tasarımın düşük aslına uygunluk seviyesinde gösterim şeklidir. Kabataslak, genel olarak siyah-beyaz bir eskizdir. Aşağıdakileri net bir şekilde göstermelidir: - İçeriğin ana gruplarını (Ne ? ) – Header, footer, navigasyon öğeleri, sayfa başlığı, link… - Bilginin yapısını (Nerede ? ) – Konumlar, resim genişlikleri, hangi öğeler gruplanacak… - Kullanıcı – arayüz etkileşiminin tanımlayacak şekilde basit bir gösterimi. (Nasıl ? ) - Sistemin işlevselliği, arayüz elemanlarının nasıl çalışacağı…
- 9. Mockup Mockup bir tasarımın orta – yüksek aslına uygunluk seviyesinde gösterim şeklidir. Mockup asıl tasarımı çok yakın bir eskizdir. - Wireframe’deki özelliklere ek olarak tasarımın rengi, parlaklığı gibi etkenler üzerinde durulur. - İnsanları projenin görsel tarafını gözden geçirmeye yönlendirir.
- 10. Prototype Prototip bir tasarımın orta – yüksek aslına uygunluk seviyesinde gösterim şeklidir. Son ürünün kullanıcı-arayüz etkileşimini detaylı bir şekilde simule eder. - Genel etkileşimler test edilir. - Dinamiktir.
- 11. Wireframe, Mockup, Prototype Aslına Uygunluk Maliyet Kullanım Özellik Wireframe Düşük $ Dokümantasyon, Çabuk iletişim Skeç tarzı, siyah-beyaz Prototip Orta - Yüksek $$$ Kullanıcı Testi, tekrar kullanılabilecek arayüz İnteraktif Mockup Orta - Yüksek $$ Geri besleme almak, Paydaşları ikna etmek Renkli, tasarımın son haline yakın görünümü
- 15. Kağıt Prototipleme Yöntemi Bu yöntem yukarıda saydığımız yöntemlerden en basit ve kolay olanıdır. Sistemin temel ihtiyaçlarını kolayca tespit edebileceğiniz bu metotla çok fazla para harcamadan sürece tekrardan yön verebilirsiniz. Bir dalda uzmanlaşmaya gerek duyulmayan bu yöntemde kağıt kalem kullanabilmeniz yeterlidir.
- 16. HTML Prototipleme Yöntemi Herhangi bir maliyeti olmayan bu yöntemi uygulayabilmek için HTML kod yazmak konusunda uzmanlaşmış olmalısınız. Bu yöntemin güzel olan yanı ise interaktif yani çalışıyormuş gibi görünen prototipler üretebilmenizdir. HTML kodlarla sadece tek bir sayfayı değil bir sonraki adımı da görebildiğiniz, sistemi bir bütün olarak kurgulayabildiğiniz modeller üretebilmektesiniz.
- 17. Online Prototipleme Araçları UXPin, Pidoco, HotGloo, iRise, Mockingbird, Mybalsamiq gibi araçlarla yapılabilen prototipler online ortamda gerçekleştirilmektedir. Genelde ücretli olan bu uygulamalar ile interaktif sistemler yapılabilmektedir. Uzmanlık gerektirmese de bir miktar deneyim gerektiren bu uygulamalar oldukça pratiktir. Bu tarz online araçlar ‘collaborative’ (beraber çalışma, takım çalışması) çalışmada büyük avantajlar sağlar.
- 18. Prototipleme Programları (Desktop) Bir çok profesyonelin kullandığı bu programlar ile çok detaylı ve interaktif prototipler üretebilirsiniz. Lisanslı olarak satılan ve maliyetleri yüksek olabilen bu yazılımlar ile gerçeğine neredeyse birebir uyan modeller hazırlayabilirsiniz. WireFrameSketcher, Keynote, Axure, Omnigraffle gibi programlar örnek olarak verilebilir.
- 19. The 20 Best Wireframing Tools (En İyi 20 Wireframe Uygulaması) http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
- 20. Usability Checklist Prototipiniz gerçek tasarıma yaklaştıkça tasarımınız usable (kullanılabilir) olması daha da önem kazanacaktır, dolayısıyla genel usability kurallarına uyularak devam edilmesi daha uygun olacaktır. Aşağıdaki link’ten genel usability kurallarının bulunduğu usability checklist’e ulaşabilirsiniz. http://userium.com/
Editor's Notes
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.
- Sonuç olarak yazılım hataları insanlara, şirketlere ve doğaya büyük zararlar verebilir. Para, zaman, imaj kaybına ve hatta ölümlere yol açabilir.