Tasarım Süreçlerinde Otomasyon.

Tasarım süreçlerinizde yaratıcılığa ve stratejiye daha fazla zaman ayırmanıza yardımcı olabilecek 30'dan fazla otomasyon yöntemi yazdık ardından bu yöntemlerde gerekli olan araç ve eklentilerin hepsini bir araya getirerek sizler için bir "Otomasyon Kiti" oluşturduk!

Nedir?

Tasarım süreçlerini otomatize etmek, araçlar ve eklentileri birbirleri ile ilişkilendirerek tüm ürün akışınıza ortak etmektir.

Ne Sağlar?

Tasarım süreciniz içerisinde olan tüm adımlarınızda size zaman ve hız kazandırmaya, engelleri ortadan kaldırmaya ve döngüyü yeniden keşfedebilmenize yardımcı olur.

Strateji

Stratejiye daha fazla zaman ayırabilmeyi…

Yaratıcılık

Yaratıcılığınızın önündeki engelleri kaldırabilmeyi…

Hız

Daha sistemli ilerleyerek rutin olan işlerde hız kazanabilmeyi…

Döngü

Tasarım geliştirme döngüsünü yeniden keşfedebilmeyi…

Hangi Süreçlerde Uygulanabilir?

Araştırmalarınız ve onların analizlerini yaparken, çıktılarınızı gösterirken, tasarım öncesi ilham ararken, tasarım yaparken, revize alırken, prototip yazılım ve test süreçlerinin hepsinde süreci otomatize edebiliriz.

Araştırma

Kullanılabilirlik Testleri, Kullanıcı Görüşmelerinde…

Analiz

Araştırmalarınızı analiz ederken…

Gösterim

Çıktılarınızı görselleştirirken…

İlham

Günlük ilham kaynakları ararken…

Tasarım

Tasarım geliştirme döngüsünü yeniden keşfederken…

Revizyon

Ekip ve müşteriden revize alırken…

Prototip

Tasarımlarınızın prototiplerini yaparken…

Yazılım

Tasarımınızı koda dökerken…

Test

Ürününüzü test ederken…

Neler Yapılabilir?

Şimdi ise tasarım süreçlerimizde bizim de kullanmayı tercih ettiğimiz otomasyon araç ve eklentilerle neler yapabileceğimizden bahsedeceğiz.

Araştırma Otomasyonları

Araştırma Yapılandırmak

Araştırma süreçlerinde analize başlamadan önce oluşturduğunuz analiz yapısını Airtable üzerinde oluşturarak analiz çıktılarınızı Page Designer, Chart gibi Block’lar sayesinde anlık olarak alabilirsiniz. Örnek bir araştırma yapılandırmasını linkte bulabilirsiniz.

Katılımcı Davet Etmek

Uygun katılımcıyı bulmak ve aday katılımcıyla iletişime geçmek zaman alan bir süreç olabiliyor. Segment aracı sayesinde katılımcı veritabanınızdan uygun katılımcıları seçip bu kişileri araştırmanıza davet etme sürecinizi tek ekrandan yönetebilmenizi sağlayabilirsiniz. Kullanıcı davranışlarına göre akıllı personalar oluşturup uygun katılımcıları araştırmalarınıza davet edebiliyorsunuz.

Görüşmeleri Takip Etmek

Kullanıcı görüşmelerinin takip çizelgesini Airtable üzerinde oluşturacağınız bir tabloya taşıyabilirsiniz. Eğer diğer kısımlarda bahsettiğimiz araştırmanın analiz çalışmalarını da Airtable üzerinden yürütüyorsanız bu çizelgeyle entegre bir şekilde oluşturulacak yapı çalışma verimliliğinizi artırabilir.

Görselleri Etiketlemek

Typeform üzerinden toplanılan veriler Airtable entegrasyonu sayesinde anlık olarak Airtable’da toplanabilir. Toplanan bu veriler arasında görsel içerikler varsa, görselin içerisindeki nesne, yazı ve logoların Google Vision API kullanan Vision Block ile etiketlenmesi gerçekleştirilebilir.

Veri Depolamak

Videoask üzerinden edindiğiniz verileri saklamak için Zapier üzerinden oluşturacağınız zapler ile verilerinizin Google Drive veya Dropbox üzerinden anlık yedeklenmesini sağlayabilirsiniz. Böylece bu dosyaları müşterilerinizle kolayca paylaşabilirsiniz.

Benchmark Yapmak

Benchmark çalışmalarında web siteleri içerisinde gezinirken bulgunun ekran görüntüsünün alınması, metin kopyalanması ve etiketlenmesi gibi işlemler sırasında ekranlar arası geçişler oldukça zaman alabiliyor. Ekranlar arasındaki geçişlerde zaman kaybetmemek ve anlık rapor oluşturabilmek için Airtable Web Clipper Block’u kullanılabilir. Bu Block sayesinde web siteleri arasında gezinirken aynı ekran içerisinde ihtiyacınız olan verileri Airtable’a gönderebilirsiniz.

Analiz Otomasyonları

Duygudurum Üzerinden Verileri Raporlanmak

Araştırma öncesi oluşturacağınız yapılandırmadan bahsetmiştik burada yapacağınız kullanıcı görüşmelerinden sonra oluşturulan yolculuk haritası adımları ile duygudurum bulgu alanının ilişkilendirmesi yapılarak, kullanıcının hangi adımda ne hissettiğine dair anlık rapor oluşturulmasını sağlayabilirsiniz.

Tek Seferde Yüzlerce Post-it Eklemek

Google Sheet içerisinde verilerinizi analiz ederken, fikirlerinizi, düşüncelerinizi ve planlarınızı kolay bir şekilde Miro’ya taşıyabilirsiniz. Taşımak istediğiniz alanı seçip kopyaladığınızda, her bir hücre bir post-it olarak Miro alanında oluşturulabilir. Fakat eklenti farklı tarayıcılarda çalışmayabiliyor, eğer sorun yaşarsanız Chrome’da deneyebilirsiniz.

Affinity Map Oluşturmak

Bir Typeform formu üzerinden verilerinizi toplamaya başlamadan önce oluşturacağınız Google Sheet entegrasyonu sayesinde form yanıtlarınız anlık olarak bir Google Sheet dokümanına yansıtılabilir. Bu döküman içerisinde ihtiyacınız olan filtrelemeleri yaparak istediğiniz yanıtları set halinde Miro’ya yapıştırıp Miro çalışma alanı içerisinde Affinity Map çalışması gerçekleştirebilirsiniz.

Daha Etkileşimli Formlar Yapmak

Typeform yanıtlarını Google Sheet’e bağlayabildiğiniz gibi Airtable entegrasyonu da yapabilirsiniz. Typeform’da oluşturduğunuz anketlerden gelen yanıtların Airtable veritabanına otomatik olarak yüklenmesini sağlamış olursunuz. Airtable veri alanlarınıza karşılık gelen tipte Typeform soru tiplerini de oluşturmaya dikkat etmeniz gerekmektedir.

Videolardan Analiz Yapmak

Sonix Türkçe dili desteği de olan bir "videoyu metne dönüştürme" aracıdır. Videoask ile insanlara sorduğunuz araştırma sorularının video karşılıklarını Sonix.ai'ya gönderip videoda söylenenlerin metin karşılığını alabilirsiniz. Transkript araçları arasından Türkçe transkript seçeneği sunan Sonix.ai’nin şu an için bazen verimsiz çalışabildiğini söylemekte fayda var. Ancak iyi çalıştığı durumlarda kullanıcı görüşmelerinizin ardından videoları izleyip metinleri çıkarmaya çalışmak yerine direkt analize başlayabilirsiniz.

Videoask ile gelen yanıtlardan çıkarılan metinleri Airtable'a aktarmak ister misiniz? En güzel analiz aracı olan Airtable sayesinde zaman kazanır ve yanıtlarınızı tek bir yerde toplamış olursunuz. Tek yapmanız gereken şey Zapier ile entegre etmek.

Videoları Hikayeleştirmek

Videodan kolay analiz yapmanın bir diğer yoluuygulamasıdır. Kullanılabilirlik testi kayıtlarınızı bu araç içerisine yükleyip metinlerin çıkartılmasını Daha sonra analiz için öne çıkmasını istediğiniz kısımları vurgulayabilir ve bunlara etiket verebilirsiniz. Tüm etiketlerinizi bir arada görüp, ekibinizle işbirliği yapabilirsiniz. Dovetail’i, Zapier sayesinde Slack aracına bağlayarak fikirlerinizi Slack kanalınızda paylaştığınız an Dovetail içerisine not olarak düşmesini sağlayabilirsiniz.

Çıktı/Gösterim Otomasyonları

Otomatik Rapor Oluşturmak

Airtable Page Designer Block özelliği ile otomatik raporlar oluşturabilirsiniz. Bu özellik Airtable'daki verileri kullanarak PDF raporları oluşturmanıza olanak tanır. Çok kolay ve esnek bir modüler yapıya sahip olduğunu özelliği denediğinizde göreceksiniz.

Persona ve Yolculuk Haritaları Oluşturmak

Page Designer Block’u kullanarak istediğiniz tasarıma uygun olarak şablon oluşturabilir, Airtable içerisindeki Persona verilerinize göre şablona yeni alanlar ekleyerek zenginleştirebilirsiniz. Airtable içerisindeki her bir satırınız birer personaya dönüşür. Aynı şekilde personalarınıza uygun yolculuk haritaları oluşturmak içinde aynı eklenti ile yapabilirsiniz. İpucumuz, her bir persona için ayrı oluşturacağınız yolculuk haritalarında her bir satıra ait veriler tek bir satırda yer almalıdır.

Airtable içerisinde persona bilgilerinizi girdiniz ve personalarınız için fotoğraf ihtiyacınız mı var? Airtable Blocks içerisinde hazır Pexels Block’unu kullanabileceğiniz gibi Scripting Block'ta bulunan Unsplash Script Block’u kullanarak da stok resimler arayabilir ve bunları verileriniz arasına çekebilirsiniz.

Sunburst Oluşturmak

Web clipper üzerinden toplanan Benchmark verileri Scripting Block’un içerisinde oluşturulacak bir Sunburst oluşturma kodu ile hızlı bir şekilde Sunburst gösterime dönüştürülebilirsiniz.

Otomatik Banner Üretmek

Airtable’daki verilerinizi kullanarak, sürükle-bırak yöntemi ile bir kez tasarlayıp yeniden kullanabileceğiniz sosyal medya şablonlarını otomatik olarak oluşturmak için tek yapmanız gereken Airtable ve Bannerbear’ı entegre etmek olacaktır.

Tasarımlardan Sunuma Aktarmak

Zeplin projelerinizi Google Slaytlara dönüştürebilirsiniz. Tek yapmanız gereken Google ve Zeplin hesabınıza bağlanıp bir sonraki adımda istediğiniz projeyi seçmeniz olacaktır. Ardından sunumunuzu hazır göreceksinizdir.

Bir diğeri ise Chrome da bulunan “Figma to Google Slides” eklentisi. Bu eklenti sayesinde Figma tasarımlarınızı da birer Google Slayt sunumuna dönüştürebilirsiniz.

Sunumlara Otomatik Veri Doldurmak

Aynı formatta olan sunumlarınızda sadece içeriklerinizin değiştiği bir yapınız var ise ve her defasında kopyala-yapıştır yapmak istemiyorsanız bir entegrasyon kurarak Google Slaytlarınızı özelleştirebilirsiniz. Örneğin Zapier’de Google Slide ile entegrasyon kurulabilecek araçları inceleyip (Google Sheet, Airtable vb.) bu araçları veritabanınız olarak kullanabilirsiniz. Kuracağınız entegrasyon sayesinde bu verileriniz otomatik olarak slayta dönüştürülebilir. Ek olarak Github’da bulunan Javascript kodu ile Google Slide oluşturma seçeneğini de bu linkten inceleyebilirsiniz.

İlham Otomasyonları

Günlük İlham Almak

Zapier, üretkenlik ve süper güçlerini bulmak için Dribbble'ı Slack kanalınıza anında bağlayarak benchmark çalışmanızı otomatikleştirmeyi sağlar. Böylelikle günlük ilham alabileceğiniz projeler sizin için hazır hale gelir.

Günlük Tasarım Kaynaklarına Ulaşmak

Slack aracınıza RSS entegrasyonu ekleyebilirsiniz. Sonrasında RSS MIX ile dilediğiniz kanala, istediğiniz sayıda kaynağın url’sini kopyala-yapıştır yapabilir ve Slack'te güncelleme almanıza olanak tanıyabilirsiniz. Böylelikle çeşitli kaynaklardan belirli periyotlar ile besleniyor olursunuz.

Tasarım Otomasyonları

Gerçek Verilerle Tasarım Yapmak

Google Sheet Sync eklentisi sayesinde Figma tasarımınıza veri çekerek tasarımlarınızı doldurabilirsiniz. Tüm verileri içeren e-tablonuzu hazırladıktan sonra verilerinizin önüne “#” ifadesini ekleyerek ilk sütun adını Figma'nın katman adıyla eşitlemeniz verileri aktarmak için yeterli olacaktır.

Bu yöntemi Airtable ile de yapabilirsiniz. Figma ve Adobe XD ile yaptığınız tasarımlarınıza zahmetsizce gerçek veri çekebilirsiniz. Bu eklenti için tek yapmanız gereken Airtable veri alanlarınız ile tasarımınız içerisindeki katmanlarınızı eşleştirmek olacaktır. Verileriniz ürün resimleri ve metin gibi içerikler olabilir. Lorem ipsum’lara gerek kalmadan gerçek verilerle oluşturarak tasarımlarınızı bir üst seviyeye taşıyabilirsiniz.

Tasarım Standartlarını Kontrol Etmek

Web Sayfası İçeriklerinin Erişebilirlik Klavuzu (WCAG); web sitede yer alan görsel ögelerin (yazı fontunun okunaklığı, yazı karakteri, resim) kontrolünden, sayfaların yüklenme sürelerinden, site içi navigasyonu sağlamaya kadar birçok konuda standartlar içerir. Web sayfanızın WCAG Standartlarına uygun olarak tasarlanmış olması, arama motorlarında ilk sayfalarda görüntülenmesi için etkili bir faktördür.

Peki siz tasarımlarınızı yaparken bunun otomatik kontrolünün yapılmasını istemez miydiniz? Figma ve Sketch’te yaptığınız tasarımları Able, Contrast Checker, Color Blind, Focus Orderer eklentilerini yükleyerek tasarım kontrollerinizi yapabilirsiniz.

Moodboard Yapmak

Miro’da Moodboard yapmak çok kolay! Tek yapmanız gereken Google Image Search dirdikten sonra Miro içerisinde doğrudan uygulama ile seçtiğiniz görselleri almak. Böylelikle sekmeler arasında kalmadan tek bir araç üzerinden işleminizi yapabilirsiniz.

Tasarıma İkonlar Bulmak

Tasarım yaparken Figma’dan ayrılmanıza gerek kalmadan ikonlara hızlıca ulaşabilirsiniz. Bunun için tek yapmanız gereken “Icons8” eklentisini yüklemek olacaktır. 32 farklı stilde, binlerce png ve svg formatında simgeye artık kolay bir şekilde ulaşabilirsiniz. Böylelikle tasarımcılar olarak, doğru zamanda uygun tasarım ögeleriyle fikirlerinizi ifade edebiliyor olacaksınız.

Tasarıma Logolar Bulmak

Bir şirketin logosunu aramak artık sizin de canınızı sıkıyor mu? Sketch, Figma ya da Adobe XD hangi tasarım programında olursanız olun tek yapmanız gereken Brandfetch eklentisini yüklemek! Çünkü bu eklenti size zaman kazandıracak. Aradığınız markanın adını girin ve logo ya da sosyal medya simgelerini anında tasarım yaptığınız programa alın.

Sketch’e Özel Eklenti Kullanmak

Temel sketch işlemlerinizi Automate Sketch paketini kullanarak daha verimli bir hale dönüştürebilirsiniz. Boyut, metin, font seçimi, renk seçimi gibi geniş bir alanda otomasyon seçenekleri sunan bu paket sayesinde manuel işlemlerde daha az zaman harcayabilir, tasarımlarınızı daha hızlı düzenleyebilir ve özgünlük gerektiren noktalara daha fazla zaman ayırabilirsiniz.

Revizyon Otomasyonları

Tasarım Değerlendirmek

Sketch için Miro eklentisini yükleyerek, tasarımlarınızı Miro’nun panosuna hızlı ve kolay bir şekilde alabilirsiniz. Böylelikle müşteriniz ya da ekibiniz ile tasarımları değerlendirme toplantısını rahatlıkla gerçekleştirebilirsiniz. Gelen bir revize sonucu tasarımda bir değişiklik yaptığınızı farz edelim, böyle bir durumda tekrar yüklemem mi gerekir diye düşünmeyin. Tek bir tıklama ile tekrar yüklemeden güncelleme yapabiliyorsunuz.

Tasarım Oylamak

Tasarımınızda birden fazla versiyon/alternatif denediniz ve ekibinize veya müşterinize danışarak bir karar mı alınmasını istiyorsunuz? Tasarım dosyanızı iletmek ya da tek tek png alıp atmak yerine tasarımlarınızı aktardığınız Miro üzerinden oylama eklentisi olan "Voting" ekleyerek süreyi ve oy sayısını belirleyip en iyi fikrin hızlıca kazanmasını sağlayabilirsiniz.

Müşteri Yorumları Almak

Invision ile yapmış olduğunuz tasarım prototiplerini slack eklentisi ile bağlayarak paydaşlarınız ile paylaşabilirsiniz. Gelen yorumları bildirim olarak alır, durum değişikliklerinden güncel olarak haberdar olursunuz. Tasarım geri bildirim sürecinizi doğrudan slack üzerinden yönetebilirsiniz.

Prototip Otomasyonları

Site Haritası ile Prototip Yapmak

Ayrıntılı bir site haritası her zaman proje sürecine katkıda bulunarak gereksinimlerin daha rahat görülmesini ve düzeltilmesini sağlar. Peki oluşturduğunuz site haritası ile prototip yaptığınız aracın birleşmesi fikrine ne dersiniz? Flowmapp aracı sayesinde görsel bir site haritası oluşturur ardından Figma ile bağlantı kurarak prototipini gerçekleştirebilirsiniz. Böylelikle müşteriniz veya ekibinizle tek bir platform üzerinden iletişimi sağlayabiliyor olursunuz.

Tasarım ve Prototipi Tek Araçta Birleştirmek

Tasarım dosyaları, prototipler ve yorumlar tek bir yerde!
Principle: Principle ile animasyonlar yapabildiğiniz gibi Sketch ve Figma’da bulunan tasarımlarınız için prototipler de yapabilirsiniz.

Marvel: Sketch’in Marvel ile senkronize olması için Marvel eklentisini yükleyerek tasarımlarınızı içe aktarabilirsiniz. Figma tasarımlarınız için “Marvel Prototyping“ eklentisini indirerek prototiplerinizi yapabilirsiniz.

Invision: Invision Craft ile Sketch tasarımlarınızı prototipleyebilirsiniz. Bu eklentiyi Sketch'e yükledikten sonra Sketch ve InVision arasında sorunsuz bir şekilde çalışabileceksiniz. Tasarım ve prototipleme süreçlerini birleştirerek yüksek kaliteli prototipleri hızla dışa aktarabilirsiniz.

Yazılım Otomasyonları

Tasarımdan Hızlı Kod Almak

Sketch ve Adobe XD ile yaptığınız tasarımların HTML&CSS kodlarını alabileceğinizi biliyor muydunuz? Tasarım dosyanızın kodunu Anima eklentisi sayesinde tek bir tıklama ile dışa aktarın. Tasarımı yüksek kaliteli koda dönüştürmek Anima'nın temel görevi olacaktır.

Kod’dan Tasarıma Aktarmak

Tasarımını beğendiğiniz bir sitenin stillerini Figma tasarımınıza aktarmak nasıl bir fikir olurdu? Eğer güzel diyorsanız “HTML to Figma” eklentisi hoşunuza gidecektir. Bu eklenti sayesinde canlı bir sitenin stillerini kolayca içe aktararak kendi tasarım bileşenlerinize dönüştürebilirsiniz.

Test Otomasyonları

Tek Araçtan Performans Takip Etmek

CrUX Dasboard’u, siteniz için size özel kullanıcı deneyimi ve performans ölçümlerini takip etmeyi ve raporlamayı sağlar. CrUX, Google Data Studio üzerine kurulmuştur. Tüm veri kaynaklarınızı bir araya toplar ve son gelen veriler ile otomatik olarak senkronize edilir. Ayrıca dashboardunuzu ekibinizdeki herkesle kolayca paylaşabilir ve ortak çalışabilirsiniz.

Duygudurum Analizi Yapmak

Bubble üzerinden hazırlanan web sitesi hakkında gelen geri bildirimlerin düzenli analizini yapmak ve bu verileri bir Google E-tablosuna aktarmak için Parabola'yı kullanın. Bubble aracı ile geri bildirimleri daha iyi anlamak için yorumları duygu durum analizine dönüştüren ve Google NLP API kullanan “Sentiment Analysis” entegrasyonunu ekleyebilirsiniz. İngilizcede daha verimli sonuçlar elde edebilirsiniz.

Tasarımdan Yazılıma Doğru Aktarmak

Figma tasarımlarınızı canlıya aldığınız web sitesi ile geliştirme yapılarınızı karşılaştırabilirsiniz. Pixelay, Figma tasarımınızı ve yazılımda kodlanan tasarım arasındaki farkları ortaya çıkararak size zaman kazandırır. Pixelay ile Web sitelerinizi ve tasarımlarınızı saniyeler içinde doğrudan Figma'dan senkronize edin.

Otomasyon Kiti

Tasarım süreçlerinizi nasıl otomatize edebileceğinize dair bilgiler verdik. Şimdi ise bu döngünün olmazsa olmazı araçları ve eklentileri sizinle bir kit halinde paylaşıyoruz. Buradan istediğiniz araç ve eklenti hakkındaki bilgilere daha detaylı ulaşabilirsiniz.