Prototipleme Hakkında Bilmek İstediğiniz (Ama Sormaktan Korktuğunuz) Her Şey

Prototipler, yeni araçlar, platformlar ve teknikler öğrenmek için benim çerçevem. Bir prototip, bir fikrin işe yarayıp yaramayacağının kesin kanıtı olarak çalışır. Tüm yaratıcı sürecimin merkezinde yer alıyor ve birlikte çalıştığım insanlar ve işletmelerle ilişki kurmak için kullandığım araç.

Prototipler konusunda gerginim çünkü harikalar yaratabileceklerini düşünüyorum , ama aynı zamanda vadelerinin geldiğini anlamadıklarını da düşünüyorum. Prototip oluşturma genellikle proje zaman çizelgelerine hiç dahil edilmez veya eğer öyleyse, genellikle daha büyük bir projeye teğet bir teslimat olarak. İstersen daha fazlası olabilir!

Sizi iş akışınıza daha derin bir şekilde prototip oluşturmaya ikna etmek istiyorum. Projelere bu şekilde yaklaşmak, yaratıcı bir insan olarak işbirliği yapma, öğrenme ve gelişme şeklinizi değiştirebilir. Anlaşma şu: Kağıt üzerinde iyi bir tanım elde etmek için bir adım atacağım ve ardından prototiplemeyi benimki kadar kendi uygulamanız için nasıl önemli hale getirebileceğinizi araştıracağım. Ve potu tatlandırmak için, 130 ülkede Apple tarafından öne çıkan ve kısa bir süre mağazada bir numaralı çocuk uygulaması olan Melody Jams adlı yaptığım bir oyun için oluşturduğum bazı prototipleri sunacağım.

Prototip Nedir?

Bir prototipin klasik tanımı, yapmak istediğiniz tam ölçekli bir şeyin ölçekli bir demosu olmasıdır. Bir prototip, daha büyük bir sistemin belirli bir özelliğini sergilemek için kısmen oluşturulmuş veya tasarlanmış olabilir. Bu oldukça iyi bir tanım, ancak prototipleri daha geniş bir şey olarak düşünmeyi seviyorum. Benim prototip tanımım mı? Bir fikri araştıran somut bir eserdir .

Kağıt üzerine çizilmiş bazı kaba taslaklar kadar basit olabilir. Belki de After Effects'te bir arayüzün nasıl çalıştığına dair animasyonlu bir kılavuz gibi tamamen tasarlanmıştır. Belki de Codepen'e atılan kaba bir demodur. Ya da sadakat açısından çok daha yüksek bir şey olabilir. Birisi bir prototip gördüğünde, tepkilerinde herhangi bir belirsizlik olmamalıdır. Başka bir deyişle, kişi "Ya uygulama mavi olsaydı?" diye sorarsa, bu bir prototip değildir. Uygulamanın mavi olsaydı nasıl görüneceğini gösterirseniz, öyle olur.

Ayrıca her biri farklı bir amaca sahip farklı türde prototipler vardır: dahili, harici ve genel .

Dahili Prototip

Dahili bir prototip, benim veya ekibimin dışındaki hiç kimseye anında değer katmaz. Yapmak istediğim kadar kaba ve hızlı olabilir. Web sitesi dünyasında, nasıl çalıştığına dair bir fikir edinmek ve artılarını ve eksilerini tartmak için vanilya CSS, HTML ve JavaScript, React, Angular veya Vue kullanarak basit bir bileşen oluşturabilirim. Bu tür prototipler, sürecimde çok erken ortaya çıkma eğilimindedir - aslında bir projenin başladığı ilk gün. Bu prototiplerle, birinin onu “anlayamayacağından” veya yarardan çok zarar vereceğinden korkmama gerek yok. Kendi takdirime bağlı olarak prototip oluşturma sürecinin değerini pekiştirmek için bir müşteriye veya paydaşa Dahili Prototipler göstermeyi seçebilirim, ancak mesele henüz bu değil - şu anda fikirleri hızlı, hızlı ve hızlı bir şekilde göstermek istiyorum.

Dış Prototip

Harici bir prototip, ilerlemeyi göstermek veya bir şeyin nasıl çalıştığını göstermek için gitmeye çalıştığınız yön için bir örnek oluşturur. Bir müşteri bir yönetici aracına ihtiyaç duyduğunda, her aracın nasıl çalıştığına dair bir fikir vermek için Craft, WordPress ve Contentful'da (evet, üçü de!) onlar için en iyisi. Bu prototipler, bir projenin orta ve sonraki aşamalarında harikadır. Bir müşterinin yeni bir servis sağlayıcının API'sini dahil etmek için değişiklik yapmayı düşündüğü bir projeyi hatırlıyorum. Bir prototipi bir araya getirmek, müşteriye sağlayıcının neler yapabileceğini, onu ne kadar hızlı entegre edebileceğimizi ve projenin geri kalanı üzerindeki etkisinin ne olacağını gösterdi.

Genel Prototip

Daha geniş bir dünyada halka açık bir prototip var. Bu, temel olarak gerçek tasarım sürecini vahşi doğaya göndermek, kullanıcıların ne yaptığını öğrenmek ve oradan yinelemekle ilgilidir. Tam teşekküllü bir pilot ürün veya küçük bir kullanıcı alt kümesinin erişebileceği bir şey olabilir. En cilalı prototip türüdür ve daha önce bahsettiğim geleneksel tanıma en yakın olanıdır. Bir tür test aşamasının parçası olarak daha büyük bir projeye uyma eğilimindedir.

Hızlı Prototipler İyi Prototipler mi?

Kısa cevap evet. Bir projede hızlı ve en kısa sürede prototip oluşturun. Nedenine dair bir fikir vermek için, bir egzersiz deneyelim.

Bir sandalyenin neye benzediğini zihninizde canlandırın. İyi bir fikrin var mı? Bu sandalye miydi?

Muhtemelen hayır, değil mi? Bir dış mekan sandalyesi, bir koltuk, bir ofis koltuğu veya bir tabure düşünüyor olabilirsiniz. Fotogerçekçi bir sandalye bile düşünmemiş olabilirsiniz! Artık bu sandalyenin bir resmine sahip olduğunuza göre, hiçbir belirsizlik yok. Bahsettiğim sandalye bu ve bundan böyle hepimiz bunu biliyoruz. Artık ortak bir referans çerçevemiz var.

Müşteriniz “Web sitemin modern hissetmesine ihtiyacım var” dediğinde, bunun ne anlama geldiğini nereden biliyorsunuz? Moodboard gibi somut bir eser olmadan, tıpkı yukarıdaki sandalyede olduğu gibi herkesin kafasında farklı bir “modern” tanımı olacaktır. Sorun tasarıma özgü değil. Bu, bir oturum açma akışının çalışma şekli veya barındırma ortamları arasında seçim yapmakla ilgilidir. İşleri hızlı bir şekilde yapmak, konuşmaları ve tepkileri zorlar. Tüm belirsiz şeyler daha hızlı çözülür.

Daha da önemlisi, prototipin çözmesini beklediğiniz sorunu çözmesi gerekmez . Basitçe oluşturmak ve paylaşmak, bazen insanların farkında olmadığı fikirlerin, ilhamın, zorlukların veya endişelerin kilidini açacaktır. Ne kadar hızlı ve daha sık prototip yaparsanız, tüm bu iyi şeyler o kadar erken ortaya çıkacaktır.

Anahtar bu. Prototipleme, bir sanal alanda deneme, başarısız olma, öğrenme ve büyüme yeteneğinizin kilidini açar. Kendinizi ve üzerinde çalıştığınız ürünü aynı anda geliştiriyorsunuz.

Kimler Prototip Yapmalı?

Herkes! Prototipleme, disiplinler arasındaki duvarları yıkmak için bir fırsattır. Tasarımcılar, projenin sınırlamalarını, karmaşıklıklarını ve olanaklarını öğrenebilmeleri için prototip yapmalıdır. Kodlayıcılar, elbette fizibiliteyi test etmek için prototip yapabilir, ancak aynı zamanda yaratıcı sürece daha fazla dahil olabilir. Proje yöneticileri, yapımcılar, metin yazarları, fikri olan herkes katılabilir.

Yine, prototipleme mutlaka çılgın bir şeyi kodlamakla ilgili değildir - hatta kodlamayla ilgili değildir! Oynamak ve keşfetmek için gerçek şeylerle fikirler üretmek ve test etmekle ilgilidir.

Prototipleme, olmasını istediğiniz kadar basit veya karmaşık olabileceğinden, onu uygulamanızın bir parçası olarak benimsemekten çok fazla değer elde edeceksiniz. Bazı faydalarına geçelim.

Yaratıcı Kaşıntıyı Kaşıtır

Bazen daha önce hiç görmediğiniz bir şeyi inşa etmeye çalışmak ya da havalı olduğunu düşündüğünüz bir şeyi taklit etmek istersiniz. Akıllara durgunluk veren bir fikir veya bir sonraki kullanıcı arayüzü trendi olabilir - kim bilir? En azından, işlerin nasıl yürüdüğünü anlamak, tasarımcı olmanın en tatmin edici kısımlarından biridir ve prototipleme verimli bir zemin sağlar.

Cesaret ve Radikal Fikirlere Yer Açar

Kullanıcıların anlayacağı ve yaratıcı olacağı bir şeyi aynı anda göndermeye çalışmak zor. Bir projeyi "prototip oluşturma haftası" ile başlatmış olsanız bile, bu, sınırın gökyüzü olduğu bir haftadır.

Konu Uzmanlığını Arttırır

Tanıdığım her geliştirme mağazası tek bir platformda derin bir uzmanlığa sahip görünüyor ve gizlice bunun ötesinde çalışmayı arzuluyor (bunun tasarımcılar için de aynı olduğuna eminim). Her şeyi PHP'de mi inşa ediyorsunuz ve Rails'e girmek mi istiyorsunuz? Bir projeye başlarken, iş hedefleriyle alakasız olsalar bile birkaç prototip oluşturun.

Riski Azaltır

Daha önce hiç yapmadığınız bir şeyi yapmak korkutucu. Kabaca ve hızlı bir şekilde çözmek psikolojik engelleri ortadan kaldırır. Aniden, imkansızı gerçekleştirmek sadece bir veya iki gün sürer.

Bir Fikir Kataloğu Oluşturur

Prototip kitaplığınız projeden projeye büyüdükçe, fikirler yeniden gözden geçirilir. Bazen bir projenin çöpü, bir sonraki proje için hazine olur.

Herkesi Güçlendirir

Bir şeyleri anlamaya yeni başladığınızda, unvanlar, yılların deneyimi ve beceri setleri önemli olmamalıdır. İyi fikirler herkesten gelebilir, ancak üst düzey yaratıcı falan filan düşünceyi yönlendirmek için yukarıdan geliyorsa bunu yapmak zordur. Saf bir yapımcı süreciyle başlamak, başlıkları eritir ve en alttan iyi fikirleri kabartır.

Sürecinizi Özelleştirir

Bir dizi tasarımcı ve ajansla çalıştım ve sürekli olarak şaşırdıkları bir şey, ne kadar hızlı çalışmaya başladığım. Şartların doldurulmasını, sanat yönetmenliğinin onaylanmasını veya başka bir şey beklemiyorum. Koşarak yere vurarak projeyi çok daha hızlı ilerletebilirim.

Nasıl Başlanır?

Prototip yapmanın yanlış yolu, prototipi yanlış şekilde yaptığınızdan endişe etmektir. Bruce Lee'nin dediği gibi, "Çabalamamaya çalışın." Bunu akılda tutarak, hızlı bir prototip oluşturma uygulamasını geliştirmenize yardımcı olacak bazı yönergeler aşağıda verilmiştir.

Sorun İfadeleri Yaz

Öğrenmeye veya çözmeye çalıştığınız şey göz önüne alındığında, onu atomik birimlere ayırın ve bunların her birine ayrı prototipler olarak davranın. "iOS'ta bir haritayı nasıl yüklerim?" "Haritayı belirli bir konuma nasıl konumlandırırım?" “Haritaya nasıl şekil çizerim?” “Haritaya nasıl raptiye yerleştiririm?” Dört ifade, dört prototip, çabucak öğrenilen dört şey.

Nasıl Yapacağınızı Bildiğiniz Bir Şeyle Başlayın

Antrenman öncesi esneme gibi, tam hızda başlayarak ritmi yakalayamazsınız. Bir web sitesinin prototipini oluşturan bir kodlayıcıysanız, belki kendi kalıp plakanızı oluşturarak başlamak isteyebilirsiniz: statik bir HTML dosyası, bir Gulp yapılandırması, bu tür şeyler. Bu, yaratıcı enerjinizin akmasını sağlayacak, böylece keşfedilmemiş bölgeye girdiğiniz zaman, mojonuz zaten çalışıyor.

Çirkin yap

Yazı tipleriniz için Comics Sans MS ve parlak limon yeşili kullanın. Katmanlarınıza isim vermeyin. Tüm kuralları çiğneyin. Şimdi piksel mükemmelliğinin zamanı değil; fikirleri kağıda dökmenin zamanı geldi.

İlk Prototipleri Maksimum 60 Dakikada Tutun

Prototipleme ve karmaşıklık ölümcül düşmanlardır. Doğru yaptığınızda, projedeki ilk gününüzün sonunda en az dört prototip üretebilmelisiniz.

Aciliyete göre değil, Duyguya göre öncelik verin

Bugün ne yapmak istersin? Projeyle alakası yok mu? Onunla savaşma. Bunu yapmak. Kim bilir? Belki de henüz keşfedilmemiş bir değeri vardır!

Çatal

Asla bir prototipin üzerine yazmayın. Bunun yerine, bir kopya oluşturun ve oradan yineleyin. Bu şekilde prototipleriniz her zaman olabilecekleri en basit olacak, farklı yönlerde çatallanabilecek ve öğrenmesi kolay olacak.

fazla paylaşım

Herkese ne yaptığınızı gösterin! Bununla gurur duy! Uygulama etrafında oluşturduğunuz pozitif enerji, projenin tüm yaşam döngüsünü besleyecektir. Bu adım tek başına bir projenin kültürünü önemli ölçüde geliştirebilir.

Prototip Yaptığınız Şeyi ve Sonuçları Belgeleyin

Bu, bir dizindeki README dosyası veya Slack'teki bir mesaj kadar basit olabilir. Yaptıklarından bir şeyler öğrenmek için her zaman geri dön.

Gittikçe Korkularınızı Yazın ve Onları Sorun İfadelerine Dönüştürün

Yani, ilk web sitenizi Heroku'ya gönderdiniz, ancak bir SSL sertifikasını nasıl kuracağınız konusunda endişeli misiniz? Problem değil. Daha sonra prototip oluşturmak için sıraya alın.

Bunu Projenize Nasıl Bütçelendirirsiniz?

Olay şu: Yapmıyorsun. Bu bir çeşit satış değil. Ben bu şekilde yapıyorum. Bu makalenin başlığında “süreç” kelimesinin olmasının bir nedeni var: Bu sadece bir prototipin nasıl oluşturulacağı ile ilgili değil. Bir şeylerin nasıl inşa edileceğine dair yol gösterici bir ilkedir.

Bir projeye başladığınız gün prototiplemeye başlarsınız. Prototip yapacak hiçbir şey kalmayana kadar durmazsınız. Bir prototip, ana kodunuz veya tasarım dosyalarınızla aynı değildir. Başlangıçta, prototipleriniz üretime hazır olamayacak kadar kaba olmalıdır. Daha sonra, geçiş yapmanın bir yolunu bulmak mantıklı geliyorsa, sorun değil. Bu proje bazında bir karardır. Prototipleme her zaman sabittir. Bu şekilde kurulduğunda, başarısız bir prototip veya hata diye bir şey yoktur.

Potansiyel bir müşteriyle konuştuğumda, onlara bu sürecin rakiplerimden beklediklerinden çok daha hızlı bir şekilde çok daha fazla çıktı üretme eğiliminde olduğunu açıklarım (okuyun: siz). Bu çıktı, bir API tanımlamaya veya teknik fizibiliteyi kanıtlamaya veya korkutucu bir görevi kontrol etmeye yardımcı olabilir. Tasarımcılar ve iç tasarım ekipleri özellikle etkili oluyor - bu şekilde çalışmayı seviyorlar çünkü onlarla çok çabuk uğraşıyorum, bir şeyleri çözüyorum. Daha kaliteli, daha özel, daha az hataya açık işler üretiyorum. Herkes kaba iş görmeye alıştığından, başarısız olan bir prototipin müşteriyi alarma geçirme riski yoktur - bazı şeylerin çalışmaması sürecin sadece beklenen bir parçasıdır.

Aynı zamanda beni uzun vadede iyi konumlandırıyor, çünkü yeni teknolojileri çok çabuk kavrayabiliyorum. Müşterilerim, herhangi bir ölçekte bir kurulum, fiziksel bir bilgi işlem projesi, bir uygulama veya bir web sitesi için benimle iletişime geçebileceklerini biliyorlar çünkü yaklaşımın başarılı sonuçları garanti ettiğini biliyorlar.

Benim için bu, karı maksimize etmekle ilgili değil. Yapmak istediğim şeyi yaparak geçimimi sağlamakla ilgili. Web sitelerinde veya uygulamalarda asla iyi olmak için yola çıkmadım - aslında, başladığımda bunlar yoktu! Kodlarla harika, ilginç şeyler öğrenmek için yola çıktım. Kariyerimin uzun, tatmin edici, heyecan verici ve sürekli öğrenilecek yeni şeylerle dolu olmasını istiyorum. Prototip odaklı bir süreç bunun için mükemmeldir.

Araçlar

Bu günlerde, InVision'ı düşünmeden “prototip” kelimesini söyleyemeyeceğiniz anlaşılıyor - bu, prototiplemenin Kleenex'i gibi. InVision'ı daha önce kullanmadıysanız, tasarımcıların bir kodlayıcı gerektirmeden projeleri tıklamaları için harika bir araçtır. Gerçek olan bu: hızlı, sezgisel ve anlaşılması kolay.

Sketch yaygın bir popülerlik kazanırken, onu kullanan prototipleri kolaylaştırmak için bir sürü eklenti ortaya çıkıyor. Framer harika bir örnektir; Sketch dosyalarını içe aktarır ve biraz kodlama bilgisi ile animasyonlara dokunma gibi özel demolar oluşturabilirsiniz. InVision'ın bir Sketch eklentisi de vardır. Marvel ve Craft dahil diğerleri keşfetmeye değer. Denemek için bir ton araç var.

Prototip yapmak için kodlayıcı olmanıza veya hatta yazılım kullanmanıza gerek yok. Kağıt prototipleme, bir bilgisayara ihtiyaç duymadan UI tasarımını denemenin harika bir yoludur. Beyaz tahta da yapabilirsiniz. Bu teknikler oyun tasarımı için bile işe yarar.

Hangisinden başlayacağınızı bilmiyor musunuz? Bu araçların her birini kullanarak bir prototip oluşturma sprintini düşünün!

Web ve yazılım geliştirme dünyasında yapmayı sevdiğim şeylerden biri, özellikle prototipler için bir GitHub deposu kurmaktır. Prototip oluştururken önemsediğim bazı kuralları açıklayan, bir şans vermek için kullanabileceğiniz veya çatallayabileceğiniz bir BENİOKU dosyası ekledim.

Örnek Olay: Melodi Sıkışmaları

Yaklaşık bir yıl önce, bazı arkadaşlarımla çocuklar için Melody Jams adında bir iOS oyunu geliştirdim ve başlattım (ve Smashing Magazine için bu konuda bir makale yazdım!). O oyun yaklaşık üç ayda fındık çorbasına kodlandı. Bazı zorluklar vardı: Tasarımcı daha önce hiç uygulama yapmamıştı, benden 3000 mil uzakta yaşıyordu ve biz hiç tanışmamıştık. Ayrıca, bir yılda bir iOS uygulaması kodlamamıştım, bu yüzden pirzolalarım önemli ölçüde körelmişti.

Oyun, canavarları ekranın altından sahnedeki belirlenmiş sıcak noktalara sürüklemeyi içerir. Sadece bu tasarımdan, kafamdan bir dizi sorun ifadesi geçti:

• Bir iOS uygulamasını nasıl oluştururum?
• Nasıl bir iOS oyunu oluştururum?
• Oyunda nasıl bir şey yaratırım?
• O şeye nasıl dokunabilirim?
• Şeyi nasıl sürüklerim?
• Sürüklenebilecek birden fazla şeye nasıl sahip olabilirim?
• Bir şeyin başka bir şeye yakın olduğunu nasıl anlarım?

Ve bunun gibi. Bunların her biri, çözülene kadar her biri için bir iOS uygulaması olan bireysel ısmarlama prototipler haline geldi. Her biri bir sorunu çözdü ve bazıları yeni sorunlar ortaya çıkardı - örneğin, bir şeyi sürüklemeyi bitirdiğimde nasıl canlandırırım?

Bu prototipleri Swift 3'te yeniden yarattım, böylece prototip deposunun bugün oluşturulmuş olsaydı nasıl görüneceğini görebilirsiniz. Fark edeceğiniz bir şey, bunlarla ilgili belgelerin oldukça hafif olduğudur - her dizinde bir BENİOKU dosyası ve bir ekran görüntüsü veya GIF, ancak bir ton ayrıntılı belge değil. Yorumlarımızı yazdırmaya yardımcı olacaksa, elbette yapın. Benim için bu, bir ilerleme görmekle ilgili. Burada teori yok, blog yazısı veya öğretici yok. Prototip 3, prototip 2'den, prototip 1'den akar. Yeterince pratik yapıldığında, daha önce hiç görmemiş olsanız bile, programlama dilinin nüanslarını çabucak kavrayabilirsiniz.

Projenin ilk birkaç haftasında bu akışı takip ettik ve büyük ölçüde çekirdek uygulama üzerinde çalışmadan prototipler geliştirdik. Projenin sonunda, farklı türde animasyonları, yükleme şemalarını, önbelleğe almayı, ses testlerini ve UI mekaniğini test eden 50'den fazla farklı prototipimiz oldu.

Bu devam ederken, tasarımcı logoları, hareket testlerini, uygulama simgelerini vb. prototiplendiriyordu. Ses tasarımcısı, düşündüğü şarkılardan örnekler verdi. Ve yaptığımız süre boyunca herkes yaptığımız şeyi sevdi.

Çözüm

Benim geniş tanımıma göre, muhtemelen böyle düşünmeden bile bazı prototipler yapıyorsunuz. Belki de bir sonraki adım, meslektaşlarınızla daha sık paylaşımda bulunmak veya bir sonraki projenizi başlatırken prototiplemenin olacağını iddia etmektir.

Prototiplemeyi yaratıcı sürecinize derinlemesine entegre etmek dönüştürücü olabilir . Daha olumlu, zenginleştirici bir ekip kültürü sağlayabilir. Geliştiricilerin yeni diller öğrenmesi veya tasarımcıların yeni araçlar öğrenmesi için bir mekanizma olabilir. Projeler daha hızlı ve daha kaliteli yapılır ve daha eğlencelidir. Müşterileriniz süreç hakkında daha fazla görünürlüğe sahip olacak ve şeyleri daha düşük kalitede görmeye hazır olacak, bu da onlarla bir şeyleri daha sık ve daha az acı verici hale getiriyor. Ayrıca rakiplerinizden çok daha hızlı çalışıyor ve çok çeşitli projeler üzerinde çalışabiliyor gibi görüneceksiniz.

Tüm bu avantajlarla, sevilmeyen şey nedir? Öyleyse söyle bana, ikna oldun mu? Esinlenilmiş? Bir sonraki adımınız nasıl görünüyor?