Liste

Prototip Oluşturmak İçin Kullanabileceğiniz Online Araçlar

Yazar
İrem Nur Akdemir
Yeni bir ürün geliştirme sürecinin önemli adımlarından biri olan prototip; ürünün, hedef kitlesiyle test edilebilir ve etkileşimli hale getirilip onun hakkında gelecekteki kullanıcıları tarafından ilk yorumların alınması için yapılan bir çalışma. Online'da da pek çok araç bu çalışmayı yapabilmenize olanak sunuyor, en iyilerini sizler için listeledik.
USERSPOTS BÜLTEN
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
Aramıza hoş geldin! Yeni bültenlerimiz de görüşmek üzere...
Oops! Something went wrong while submitting the form.

Online Prototipleme Araçları

Tasarım sürecinde ürettiğimiz fikirleri çalışan prototiplere dönüştürmek önemli. Prototip Nedir Nasıl Yapılır adlı rehber yazımızda prototipin tanımından uygulanışına, öneminden yöntemlerine her adımını anlatmıştık. 

Arayüz prototiplerken kullanabileceğimiz bazı araçlara ve örnek arayüz prototiplerine de Arayüz Prototipleme adlı IoX rehberimizde yer vermiştik. Bu yazımızda ise yine prototip yapmak için kullanılabilecek online araçları anlatmaya devam ediyoruz.

1. Figma

Figma, bizim de Userspots olarak sıklıkla kullandığımız araçlardan bir tanesi. Ücretsiz olması, kendi komünitesini oluşturmaya çalışıyor olması ve kullanım alanlarının geniş olması gibi özellikleriyle bizimle birlikte birçok kişinin gönlünü çaldı. 

Sen de Figma’yı öğrenmek istersen Figma Nerelerde Kullanılır adlı yazımızı okuyarak başlayabilirsin.

2. Marvel

Marvel, basit arayüzü ile ön plana çıkan araçlardan biri. Bu araç ile daha önceden tasarladığın arayüzleri çeşitli formatlarda yükleyebilir ve birkaç basit tıklamayla tasarımlarını çalışır hale getirebilirsin. Bu özelliği ile elde çizilen ekranları prototiplemek için oldukça ideal! 

Marvel, ücretsiz kullanımda yalnızca bir proje oluşturmana izin veriyor ancak o proje içerisine istediğin kadar ekran yükleyebilir, istediğin kişilerle link olarak paylaşabilir ve paylaştığın kişilerden yorum alabilirsin.

3. Framer


Framer, içeri aktarma seçeneklerindeki çeşitlilik ve bazı animasyonlardaki uygulama kolaylığı ile öne çıkıyor. Sadece bir link aracılığıyla Figma’daki çalışmalarını içeri aktararak tasarımını hareketli hale getirebilir ya da Framer içerisindeki kütüphanenin yardımıyla en baştan tasarlamaya başlayabilirsin.

4. Moqups

Moqups alışmakta zorlanmayacağın bir diğer prototipleme aracı. Prototipleme konusunda iyi olduğu kadar diyagram oluşturma, grafik çizme gibi alanlarda da iyi ve gittikçe gelişiyor.

5. Mockplus

Mockplus, Classic ve Cloud olmak üzere 2 ayrı programa sahip. Classic, tamamen prototiplemeye odaklanıyor. Cloud ise sadece tasarımcıların değil, proje yöneticileri ve yazılımcıların da verim almasını sağlamaya çalışıyor,  görev dağılımı ve takibi gibi özellikler de sunuyor.

Ücretsiz planda oldukça cömert olan Mockplus Classic ve Cloud ürünlerine tek bir üyelik ile ulaşabilirsin.

6. Quant UX

Quant UX, hem prototipleme hem de kullanıcı testlerine özelleşmiş ücretsiz bir araç. “Prototiple, Test et, Öğren” sloganıyla hizmet veren bu ürün ile tasarım yapabilir, prototipleyebilir, tasarımını gerçek kullanıcılar ile test edebilirsin. Dahası, uygulama içine kaydedilmiş olan kullanıcı test videolarını dönüp tekrar gözden geçirebilirsin.


Test sonuçlarını grafikler ile görmek, sıcaklık haritaları oluşturmak gibi ek özelliklere de sahip olan bu açık kaynak aracı incelemeni öneriyoruz.


7. FluidUI


Bu aracın en iyi özelliklerinden birisi, kendi içinde Material.io ve IOS Design Kit gibi önemli kaynakları barındırması. Her bir seçenekte bu kaynaklardan gelen temel UI elemanlarını bulabilir, tasarımına uygun olan şekilde düzenleyebilirsin.

8. Pidoco

Pidoco, aslında bir wireframing aracı. Sunduğu grid yapısı ile hızlıca wireframeler oluşturmak ve bu wireframeleri hareketlendirmek için kullanabilirsin. 

Ücretsiz planı oldukça kısıtlı olsa da uygulamanın kullanımı kolay.

Biraz da no-code araçlardan bahsetmekte fayda var. No-code araçlar günümüzde tasarımcıların kod yazmadan websitelerini prototiplemelerine ve canlıya almalarına olanak sağlıyor. No-code araçların tasarımcılara, girişimcilere, öğrencilere, herhangi bir fikre sahip olan herkese çok büyük faydaları var. Bu araçların gelecekte de karşımıza bolca çıkacağına inanıyoruz. Bu nedenle şimdiden bazılarına aşinalık kazanmakta fayda var.


9. Webflow (No-code)

Webflow, bizim de Userspots içerisinde kullandığımız bir araç. Ücretsiz versiyonda yalnızca 2 proje oluşturma hakkın var. Bu, az gibi gözükse de oldukça orjinal işler yapmak mümkün. Bu işleri yaparken Webflow University içerisinde yer alan kursları izlemeni tavsiye ediyoruz. Bu kurslar ile başlangıç seviyesinden ustalık seviyesine kadar ilerleyebilirsin.

Webflow konusunda farklı kaynaklara ulaşmak istersen de Space Club üzerinden Tool Of The Week alanını ziyaret edebilirsin, geçtiğimiz haftalarda İpek Karaoğlu’nun anlattığı bir giriş videosu ile webflow öğrenebileceğin farklı kaynakları paylaşmıştık.

10. Bubble (No-code)


Bubble, oldukça geniş bir entegrasyon kütüphanesine sahip ve her geçen gün bu kütüphane daha da büyüyor. Tasarladığın websitesinin nasıl bir performans gösterdiğini bu entegrasyonlar ile görmen mümkün. Ayrıca ekip arkadaşlarınla birlikte çevrim içi olarak çalışma imkanı sağlaması, Bubble’ın en büyük artılarından.

Online Prototipleme Araçları

Hazırlayan;

IoX Intern

İrem Nur Akdemir

Userspots Bülten
Her ay tasarım ve teknoloji üzerine yeni stiller, dijital ürünler, projeleriniz için kaynaklar, tasarım ilhamları ve daha fazlasına sahip bülten.
2300’den fazla kişinin kayıtlı olduğu kulübümüze katıl !
Başvuru için teşekkürler. En kısa sürede sizinle iletişime geçeceğiz.
Lütfen eksik bilgileri tamamlayıp, tekrar deneyin.