Form ve İşlev - En İyi Tel Çerçeve Araçları Kılavuzu

1487'de Leonardo da Vinci, Milano Dükü Ludovico Sforza'nın himayesi altındayken tasarladığı "dövüş aracı" adlı bir şematik çizdi. Makine, bilerek düzgün çalışmayacak şekilde tasarlanmış olsa da, bir grup mühendis onu 2010'da yeniden yarattı. Da Vinci'nin şeması , temel bir tel kafesin en eski örneklerinden biridir.

Tel kafes terimi, web tasarım dünyası tarafından benimsenmeden çok önce, onlarca yıldır kullanılmaktadır. Tel çerçeveler orijinal olarak Bilgisayar Destekli Tasarım (CAD) yazılımında bir nesnenin tasarımını ayrıntıya ihtiyaç duymadan göstermek için kullanıldı. Sonuç, tellerden yapılmış gibi görünen bir plandı , yani, sonunda tel kafeslerle sonuçlandık.

Ancak tasarımda bir tel kafes nedir ve bir tel kafese sahip olmanın amacı nedir?

Dijital tasarımdaki bir tel kafes, tipografik stil, renk, grafik ve etkileşimli öğelerden arındırılmış ve tasarım sürecinde belirli bir noktayı temsil eden görsel bir kılavuz veya sayfa şemasıdır. Amacı, içeriğin işlevselliğini, davranışını ve önceliğini gösteren sayfa düzeyinde düzen fikirleri göstermektir.

Tasarımcılar, temel kavramsal yapıları bir sitenin veya uygulama ekranının görsel tasarımıyla bağlamak için tel çerçeveler kullanır. Üç farklı tel kafes türü vardır:

• Düşük doğruluk - çok fazla ayrıntı içermeyen erken aşama çizimi. Düşük kaliteli tel çerçeveler genellikle elle çizilmiş eskizler veya bir fikri temsil eden çizgiler ve şekillerdir.
• Orta doğruluk - daha fazla bileşen ayrıntısı göstermeye başlayan ve içerik düzenine ve genel sayfa yapısına odaklanan tel çerçeveler.
• Yüksek kaliteli - davranışsal özellikler ve içerik düzenine odaklanan, bileşenlerin daha ayrıntılı ve daha yüksek düzeyde görüntülenmesini gösteren sonraki aşama (tekrarlama sonrası) çizimler.

Dijital tasarımda tel kafeslerin evrimi, başka bir UX eseridir ve teslim edilebilir: tel akışı. Tel akışları, UX tasarımcılarının başka bir amaç için yavaş yavaş birleştirdiği iki yapı olan tel çerçeveler ve akış çizelgelerinin bir birleşimidir: bir web uygulaması gibi bir üründe görev akışlarını temsil eden etkileşimleri göstermek ve takip etmek.

Tasarımcıların tel çerçevelerle karşılaştığı bir sorun, kullanıcı yolculuğunu iletmektir. Kullanıcı yolculuklarını göstermenin daha karmaşık yolları olsa da, bunları bir tel çerçevenin basitliğine dahil etme eğilimi var. Bunun için yararlı bir araç bir tel kafes haritasıdır.

Tel çerçeve haritası, kullanıcının tel çerçeveler kullanarak bir üründeki yolculuğunu göstermek için tel çerçeveleri kullanıcı yolculukları (veya kullanıcı akışları) ile birleştirir.

En İyi Tel Çerçeveleme Araçları

Tasarımcılar, hangi tel çerçeveleme aracının/araçlarının kullanılacağına karar verirken birçok seçeneğe sahiptir. Yeni araçlar sürekli olarak pazara giriyor, bu nedenle ayak uydurmak zor olabilir. İşte harika tel çerçeveleme araçlarının aranması gereken birkaç özelliği:

• Çeşitli sadakatler üretme yeteneği (düşükten yükseğe)
• Kullanımı kolay ve sık güncellenen kararlı yazılım
• Eklenti özelliklerine sahip yerleşik şablonlar, semboller ve standart UI bileşenleri

Bu kılavuzdaki araçlardan bazıları daha çok tel çerçevelemeye odaklanırken, diğerleri tel çerçeveleme ile prototip oluşturma ve maket işlevselliği arasında bir denge kurmaya çalışır. Bir aracı diğerine (veya birkaçını birlikte) tercih etmek, tasarımcının tercihine bağlıdır.

balzamik

Balsamiq, kullanım kolaylığı ve ikonik “elle çizilmiş” görünümü nedeniyle tercih edilen, aslına uygun, kullanımı kolay bir tel çerçeveleme aracıdır. Sürükle ve bırak düzenleyicisiyle hızlı ve kolay bir şekilde kullanılabilen bir dizi önceden oluşturulmuş şablonla birlikte gelir. Tasarımcılar kendi varlıklarını ekleyebilir ve düzeni özelleştirebilir.

Projeyi Tam Ekran Sunum modunda veya dışa aktarılmış bir PDF olarak görüntülerken kullanılabilirlik testi için basit tıklama deneyimleri oluşturmak üzere maketleri bağlayarak temel prototip oluşturma gerçekleştirilebilir.

Balsamiq, bir masaüstü sürümü (Windows ve Mac), bulut hizmeti veya Google Drive, Confluence ve JIRA için bir eklenti olarak sunulmaktadır.

modeller

Moqups, tel çerçevelemeye odaklanan ancak prototip oluşturma için de kullanılabilen başka bir yaratıcı işbirliği aracıdır. Balsamiq'ten farklı olarak, tamamen web tabanlıdır ve web ve mobil uygulamalar için tel kafesler yapmak içindir.

Moqups ve Balsamiq arasındaki temel fark, tel kafeslerin aslına uygunluğudur. Balsamiq "elle çizilmiş" bir görünüm üretirken, Moqups, iOS, Android ve Bootstrap dahil olmak üzere mobil uygulama ve web tasarımı için tam renkli şablonlar ve kitler sağlar.

Moqups, Balsamiq'ten birkaç başka şekilde ayrılır. Yazılım, sonlu nesne düzenleme ve sayfa yönetimine izin vererek, tasarımcılara yineleme işlemi sırasında tel çerçevelerde değişiklik yaparken çok zaman kazandırabilecek "ana" nesneleri tanımlama yeteneği verir.

Örneğin, bir tasarımcı belirli bir boyut, şekil ve renge sahip bir ana düğme nesnesi oluşturur. Bu düğme, tel kafes boyunca birden çok kez kullanılır. Daha sonra, yineleme sürecinde, tasarımcı düğmenin rengini değiştirmek isterse, her bir düğme nesnesini değiştirmek yerine, bir kez değiştirebilir ve tüm alt düğme nesneleri hemen etkilenir.

Pidoko

Pidoco, bazı temel etkileşimlerle düşük kaliteli çıktılara odaklanan en iyi tel çerçeveleme aracıdır. Ayrıca bulut tabanlıdır, yeniden kullanılabilir bileşenleri kullanır ve daha sağlam bir tıklamalı tel kafes deneyimi ile Balsamiq ve Moqups'tan ayrılır.

Pidoco, tasarımcıların uygulama sayfalarının çeşitli ekran boyutlarında nasıl görüneceğini görebilmeleri için yerleşik mobil görünümlere sahip olduğundan mobil uygulama ve web tasarımı için yararlıdır. Diğer bir yerleşik özellik, dışa aktarma ve belirtim işlevidir . Bu, tasarımcıların bir eklenti veya uzantıya ihtiyaç duymadan tel kafesten prototipe/modele geçmelerine yardımcı olur.

Picoco kalitesiz görünüyor ve hissediyor ancak tipik olarak daha karmaşık tasarım araçlarında bulunan çeşitli özellikler içeriyor. Yalın UX yapan ve daha kısa geri bildirim döngüleriyle hızlı bir şekilde yinelemesi gereken tasarımcılar için iyi çalışır.

parlak

Gliffy, onu Balsamiq ve Mockup'lardan ayıran birkaç benzersiz özelliğe sahip, orta kalitede bir tel çerçeveleme aracıdır. Benzersiz bir özellik, kablo akışları oluşturma yeteneğidir. Gliffy, dahil edilen şablonlar, zihin haritaları ve iş süreci modelleme ile yerleşik akış şeması ve diyagram oluşturma özelliklerine sahiptir.

Diğer tel çerçeveleme araçları gibi, Gliffy de şekiller, simgeler ve tel çerçeveleri Atlassian'ın Confluence, Slack, Basecamp, Trello ve WordPress ile yerel olarak paylaşma yeteneği sağlar.

Bu nispeten yeni bir UX tel kafes tasarım aracıdır, ancak statik bir tel kafesin ötesinde basit entegrasyonlar ve yetenekler arayan profesyonel tasarımcılardan oluşan geniş bir abone tabanına sahiptir.

tel kafes.cc

Wireframe.cc, Balsamiq'e çok benzeyen temel bir tel çerçeveleme aracıdır. Dikkat dağıtan çok sayıda araç çubuğu ve simge içermeyen temiz bir arayüze sahiptir. Diğer birçok aracın aksine, fare ile tel kafesleri “çizmenizi” sağlar.

Wireframe.cc, bir şablon kitaplığı ve nesnelerin temiz, karmaşık olmayan şekilde işlenmesini sağlar. Wireframe.cc'nin yalın UX ile çalışırken sunduğu yararlı bir öğe, her bir tel kafes sayfası için bir URL'dir, böylece geri bildirim için hızlı ve kolay bir şekilde paylaşılabilir.

Tamamen düşük kaliteli tel çerçevelemeye odaklandığından, yerleşik bir prototipleme veya etkileşim yoktur.

Kaprisli

Tel çerçeveler için "Google Dokümanlar" olarak adlandırılan Whimsical, OmniGraffle ve Visio gibi diyagram oluşturma araçlarını taklit eder. Ana odak noktası tel çerçeveleme ve akış çizelgeleri olduğu için prototipleme/modellere odaklanmaz, bu da onu tel akışları üretmek için harika bir aday yapar.

Gliffy gibi, Whimsical da orta kalitede bir tel çerçeveleme aracıdır ve yapılandırılabilir öğelerden (düğmeler, girişler, onay kutuları vb.) oluşan geniş bir kitaplık içerir.

Aynı tel çerçeve belgesi üzerinde aynı anda sınırsız işbirliği, uzak tasarım ekipleri için harika bir yerleşik özelliktir.

Adobe XD

Adobe XD, basit arayüzü, diğer Adobe ürünleriyle derin bağları, kullanım kolaylığı ve eklentilere ve uzantılara güvenme ihtiyacını azaltan yerleşik işlevselliği nedeniyle son zamanlarda tasarımcıların dikkatini çekti.

Adobe XD'de tel çerçeveler oluşturmanın iki yolu vardır. Nesneler ve öğeler oluşturmak için çizgiler ve şekiller kullanılarak oluşturulabilirler veya behance.net ve XD kaynakları gibi kaynaklardan önceden hazırlanmış UI kitleri kullanılarak oluşturulabilirler.

Adobe XD'nin zaman kazandıran bir özelliği de, ana bileşenden örneklenen tüm bileşenler değişiklikleri devralacağından değişiklik yaparken yararlı olan "ana" bileşenler (Skeçte Semboller olarak adlandırılır) oluşturma yeteneğidir.

XD'yi tel çerçeveleme aracı olarak kullanmanın bir başka avantajı, bir fare tıklamasıyla prototipleme moduna geçebilme yeteneğidir. Prototipleme modu XD'de yerleşiktir ve arka planda çalışır, böylece tasarımcılar tel çerçevelerden prototiplere geçerken zaman kaybetmezler.

Kroki

UX/UI tasarımcıları için popüler bir tasarım aracı olan Sketch, vektör düzenleme, prototip oluşturma ve işbirliği için bir platform sağlar ve işlevselliğini artıran yüzlerce eklentiden oluşan büyüyen bir kitaplığa sahiptir.

Sketch'te tel çerçeveleme, kitlerin/şablonların ve çizim araçlarının kullanımıyla Adobe XD'ye çok benzer. Sketch, bir kez tanımlanabilen ve birden çok kez kullanılabilen (düğmeler, vb.) yeniden kullanılabilir bileşenler olan Sembollerden geniş ölçüde yararlanır. Örneklenmiş Semboller ayrıca "ana" Sembolde yapılan değişiklikleri de üstlenir. Tel çerçeveleme süreci boyunca yapılması gereken birçok değişiklik olduğundan, bu tasarımcılar için avantajlıdır.

Sketch, tasarımcıların aslına uygun tel çerçeveler, prototipler ve maketler oluşturmasına olanak tanır. Bulut tabanlı bir uygulama değildir ve olası dezavantajlarından biri, yalnızca macOS ile çalışmasıdır.

UXPin

UXPin, tasarımcılara koşullu etkileşimleri, değişkenleri ve ifadeleri kodlama yeteneği veren etkileşimli durumları, mantığı ve programatik bileşenleri destekleyen en iyi tel kafes aracıdır.

UXPin, öncelikle UI bileşen kitaplıkları, semboller, vektör çizim araçları ve birlikte düzenleme ile prototip oluşturmaya odaklanarak tel çerçevelemenin çok ötesine geçer.

Windows, macOS ve bulut/tarayıcı sürümü vardır. Yüksek kaliteli tel çerçeveleme için UXPin, Sketch ve Adobe XD gibi çalışır. Balsamiq gibi sürükle ve bırak yöntemi değildir, ancak tek bir ekosistemde kalmak isteyen tasarımcılar için prototipleme ve maketleri bir sonraki seviyeye taşır.

hayret

Tel çerçeve oluşturmayı ve prototip oluşturmayı kolaylaştıran bir başka popüler tasarım aracı olan Marvel, tasarımcılara düşük ila yüksek kaliteli tel çerçeveler oluşturmak için tanıdık bir sürükle ve bırak arabirimi sağlar.

Marvel, tüm varlıklar dahil edildiğinden herhangi bir eklenti veya uzantı gerektirmez. Platform tamamen bulut tabanlı olup, diğer tasarım ekibi üyeleri veya müşterilerle tel kafes paylaşımını hızlı ve kolay hale getirir.

Tasarımcıların tel çerçeveleme için Marvel'i seçmelerinin nedenlerinden biri, Jira, Sketch, Confluence, Dropbox, Slack ve diğerleri gibi diğer platformlarla entegrasyonudur. Geliştiriciler, uzak tasarım ekipleri ve müşterilerle işbirliği için bu özellik tasarımcılara çok zaman kazandırır.

Marvel ayrıca, kalem ve kağıt tel çerçeve çizimlerini etkileşimli iPhone ve Android prototiplerine dönüştürmeye yardımcı olan Pop adlı bir ürüne sahiptir. Pop, tasarımcıların eskizlerinin fotoğrafını çekmesine ve bunları etkileşimli tel çerçevelere dönüştürmesine olanak tanır.

Axure RP'si

Axure RP uzun süredir piyasada ve statik tel çerçeveler (ve oldukça etkileşimli prototipler) oluşturmak için harika bir araçtır. Hem Windows hem de macOS üzerinde çalışmasına rağmen bulut tabanlı değildir.

Tel çerçeveleme, devasa sürükle ve bırak bileşenleri kitaplığı kullanılarak yapılabilir, ancak Axure RP, tel çerçevelemenin çok ötesine geçen karmaşık bir araçtır. Tasarımcılar, Axure RP'nin programatik özelliklerini kullanarak, tam olarak çalışan bir uygulamayı yansıtan işlevselliğe sahip gelişmiş prototipler oluşturabilir.

Axure'un yüksek öğrenme eğrisi göz önüne alındığında, onu yalnızca statik tel çerçeveler için kullanmak mantıklı olmaz. Ancak amaç, son derece parlak ve işlevsel prototipler üretmekse, ürün tasarımcıları için mükemmel bir araç olacaktır.

Toptal Tasarımcılarının Favori Tel Çerçeve Araçları

Profesyonel tasarımcıların hangi tel çerçeveleme araçlarını ve neden kullandığını öğrenmek için bazı Toptal Tasarımcılarına ulaştık. İşte söylemek zorunda oldukları şey.

"Favorilerim Adobe XD ve UXPin. Hızlı tel çerçeveler yapmak ve fikirleri test etmek kolay olduğu için XD'yi favori olarak seçmeye başlıyorum ve oradan aynı platformda tasarımı ve hatta prototipi gerçekten başlatabilirim." - Michael Craig

"En sevdiğim şey Pop çünkü çok hızlı. Zaten tel çerçevelerimi her zaman kağıda çiziyorum, bu yüzden harika çalışıyor ve hiçbir şeyi iki kez ele almam gerekmiyor. Ayrıca 'çözüme aşık olma' olayı için de iyi olduğunu düşünüyorum çünkü çok açık bir şekilde lo-fi.” - Nicola Rushton

“Tasarım çalışmalarım için hemen hemen her zaman Axure kullanıyorum. Çok yüksek karmaşıklığa sahip, kapsamlı tasarım çalışmaları için oldukça küçümsenmiş bir araçtır” - Andi Omtvedt

“Aslında artık kendi başına tel kafes kullanmıyorum - araçların düşük kaliteli prototipler üretecek kadar güçlü olduğunu düşündüğüm için, ilk tel kafes ile neredeyse daha iyi bir görsel birleştiriyor. Bu yılın Ocak ayından beri Framer X'i benimsiyorum ve buna bayılıyorum." - Charlie Williams

Özet

Sofistike prototipler üretme yeteneği göz önüne alındığında, tel çerçeveleme hala geçerli mi? Bazı profesyonel tasarımcılar, tel kafeslerin geçmişin bir kalıntısı olduğunu iddia ederken, diğerleri tasarım sürecinde devam eden önemlerini kararlı bir şekilde savunacaklar.

Bugün, tasarım sürecini kolaylaştıran çok sayıda tel kafes aracı var. Trend, tel çerçeveleme ile başlayan, aynı zamanda prototip yeteneğini de içeren ve çoğu durumda tam işlevli maketler üreten hibrit ürünlere doğru ilerlese bile, bazıları tamamen tel çerçevelemeye odaklanmaya devam ediyor.

Düşük kaliteli bir teslimattan orta veya yüksek kaliteli bir teslimata dönüşmesine rağmen, Wireframing kesinlikle ortadan kalkmıyor.

Toptal Tasarım Blogunda daha fazla okuma:

• Tel Kafes Eşleme: Kapsam Sürünmesi Nasıl Önlenir
• Tel Çerçeveye Ölüm. Doğrudan Yüksek Sadakat!
• Tasarım Aracı Karşılaşması – Adobe XD ve Sketch (2019)
• Bu En İyi UX Araçları ile İşinizde Ustalaşın
• En İyi Tasarımcıların Kullandığı 10 UX Çıktısı