Tel çerçeveleme nedir? Başlangıç ​​Kılavuzu

Yayınlanan: 2022-08-02

Tel çerçeveleme nedir? Basitçe ifade etmek gerekirse, UX (kullanıcı deneyimi) tasarım sürecinin en önemli yönlerinden biridir. Kullanıcı deneyimi tasarımının karmaşık dünyasına daldıysanız, en azından "tel çerçeveler" terimini etrafta dolaştığını duymuşsunuzdur.

Ancak tel kafesler tam olarak nedir ve neden UX tasarım sürecinin bu kadar önemli bir parçası?

Bu kılavuzda, bir tel kafesin tam olarak ne olduğunu öğreneceksiniz. Size bir tel kafesin yapısını göstererek başlayacağız ve tel kafeslerin genel tasarım sürecine nasıl uyduğunu açıklayacağız. Ayrıca tel kafeslerin hangi özellikleri içermesi gerektiğini de öğreneceksiniz.

Bundan sonra, size farklı tel kafes türlerini ve kendinizinkini oluşturmak için ihtiyaç duyacağınız araçları göstereceğiz.

Sonuç olarak, “Tel çerçeveleme nedir?” diye merak etmekten vazgeçmiş olacaksınız. kendi tel çerçevelerinizi kolaylıkla oluşturabilmeniz ve kullanabilmeniz için.

Şimdi, bir bakalım.

Tel Çerçeve Nedir?

“Tel kafes nedir?” gibi basit bir soruyla birinci kareden başlayalım.

Gerçekte, mimarların kullandığı bir plandan çok da farklı değil. Bir tasarımcının nihai ürünü etrafında oluşturmak için kullanacağı bir uygulamanın veya web sayfasının iki boyutlu bir taslağıdır. Bir tel çerçevenin amacı, tasarımcıya bir sayfaya açık bir genel bakış sağlamaktır:

  • Düzen
  • Yapı
  • Kullanıcı akışı
  • Amaçlanan davranışlar
  • bilgi mimarisi
  • işlevsellik

Bir tel kafes, neredeyse her zaman tasarım projesinin ilk konseptini temsil edecektir. Bu nedenle, grafik, renk ve stil gibi şeyler en az düzeyde tutulur.

Bazı durumlarda, bir kağıda elle bir tel kafes çizilebilir. Diğer tel kafesler dijital alemde yaratılır. Gerçekten, belirli tel kafeste ihtiyaç duyulan ayrıntıya bağlıdır. Ayrıca, web sayfasının veya uygulamanın son tasarımına ne kadar ayrıntı gireceğine de bağlıdır.

Başka bir deyişle, web sayfası ne kadar ayrıntılı olursa, tel kafesin o kadar ayrıntılı olması gerekir.

Tel çerçeveleme uygulaması en çok UX tasarım ekipleri tarafından kullanılır. Sürecin gözden geçirilmesi, ilgili tüm tarafların (paydaşlar), proje geliştirmeleri için geliştiricilere teslim edilmeden önce bilgilerin bir sayfada nerede bulunacağı konusunda bir anlaşmaya varmalarını sağlayacaktır.

Bir projeyi geliştiricilere teslim edilmeden önce tel çerçevelemek, genellikle yolda birçok baş ağrısından kurtarır. Bunun nedeni, projenin ilk planının (tel kafes) her zaman nihai sonucun nasıl görünmesi gerektiğine dair ilk referans noktası olabilmesidir (ve olmalıdır).

tel çerçeveleme

Tel Çerçeve İçin En İyi Zaman Ne Zaman?

Çoğu durumda, tel çerçeveleme süreci, keşif aşaması olarak adlandırılan ürün yaşam döngüsünün aşamasında gerçekleşir.

Keşif aşaması, tasarımcıların:

  • Fikirler üzerinde işbirliği
  • İşle ilgili gereksinimlerin belirlenmesi
  • Projenin genel kapsamını test etme

Başka bir deyişle, bir web sayfasını tel çerçevelemek, bir projenin genel tasarımı için başlangıç ​​noktası olarak kullanılan ilk yinelemesini verir.

Tel çerçeveler, tasarımın etkinliği hakkında geri bildirim almak için gelecekteki site kullanıcılarına sunulabilecekleri için de değerlidir. Kullanıcı geri bildirimlerine dayanarak, projenin tasarımcıları daha sonra bir maket veya prototip gibi çok daha ayrıntılı bir tasarım yinelemesi oluşturacak.

Oradan, genel proje açılmaya başlayacak.

Tel Çerçeveler Neden Yararlıdır?

Tel kafeslerin tasarım sürecine getirdiği üç önemli amaç ve fayda vardır:

  1. Ucuzdurlar ve oluşturmaları kolaydır.
  2. Bir web sitesinin veya web sayfasının belirli özelliklerini tanımlar ve daha fazla netleştirmeye yardımcı olurlar.
  3. Tasarım sürecini son kullanıcıya odaklı tutarlar.

İşleri daha ayrıntılı olarak incelemek için, bu önemli noktaların her birine ayrıntılı olarak bakalım.

1. Ucuzdurlar ve Oluşturmaları Kolaydır

Tasarım ekipleri projelerine başlarken neden bu kadar çok tel çerçeveleme yapıyor? Cevap basit: Oluşturmaları inanılmaz derecede kolay ve neredeyse hiçbir maliyeti yok. Gerçekte, bir kalem ve bir kağıda erişiminiz varsa, hiçbir şey harcamadan yeni bir tel çerçevenin ayrıntılarını çizebileceksiniz.

Dijital tel çerçeveler söz konusu olduğunda, parmaklarınızın ucunda bulunan geniş araç yelpazesi, yalnızca birkaç dakika içinde kendi dijital tel çerçevenizi oluşturabileceğiniz anlamına gelir.

Bu kılavuzda daha sonra bu araçlar hakkında daha fazla bilgi.

Bir tel kafesin faydalarından biri, çıplak kemiklerinin görünümü ve hissiyatıdır. Görüyorsunuz, kullanıcılara geri bildirim için gösterişli bir ürün sunmanın sorunu, bir proje tamamlanmış gibi göründüğünde insanların gerçek fikirleri konusunda dürüst olma olasılıklarının daha düşük olmasıdır.

Ancak sayfa mizanpajlarının mutlak özünü ortaya çıkarmak için bir tel kafes kullandığınızda, bariz sorunlu noktalar ve kusurlar daha kolay tespit edilir ve dile getirilir. Bu sorunlar daha sonra tasarım ekibi tarafından yeniden geliştirme için çok fazla para veya zaman harcamadan düzeltilebilir.

Sonuçta, ürün tasarım sürecinde ne kadar geç kalırsanız, tel çerçeveleme aşamasında kolayca yapılabilecek değişiklikleri yapmak o kadar pahalı ve zor olur.

2. Bir Web Sitesinin veya Web Sayfasının Spesifik Özelliklerini Tanımlar ve Daha Fazla Netleştirmeye Yardımcı Olurlar

Bir web tasarımcısı müşterisine fikirlerini iletirken, müşteri her zaman çok fazla teknik anlayışa sahip olmayabilir. Tasarımcılar genellikle "harekete geçirici mesaj" veya "kahraman resmi" gibi kelimeler kullanır ve çoğu müşteri dili takip etmez.

Bir tasarımcı, belirli sayfa özelliklerini tel çerçeveleyerek müşterilere bu özelliklerin nasıl çalışacağını ve tam olarak hangi amaca hizmet edeceklerini daha net bir şekilde iletebilir.

Tel çerçeveler ayrıca paydaşların sayfa özelliklerinin her biri için ayrılması gereken alan miktarını anlamalarına da olanak tanır. Süreç, görsel tasarımın bir sitenin bilgi mimarisine bağlanmasına yardımcı olur ve sayfanın genel işlevselliğini netleştirir.

Tel kafes üzerinde tüm sayfa özelliklerini gördüğünüzde, tüm bu özelliklerin birlikte nasıl çalışacağını da çok daha iyi anlayacaksınız. Tel çerçeveleme işlemi, sayfadaki diğer öğelerle iyi çalışmadıklarını görürseniz, birkaç özelliği kaldırmanız için sizi tetikleyebilir.

Bu, tel çerçeveleme süreci devam ederken proje paydaşları arasında bazı büyük anlaşmazlıklara neden olabilir. Ancak, bu anlaşmazlıkların, daha sonra kodun yeniden yazılması gerektiğinde tasarım sürecinde olması yerine, şimdi gerçekleşmesi (ve çözülmesi) çok daha iyidir.

3. Tel Çerçeveler Tasarım Sürecinin Son Kullanıcıya Odaklanmasını Sağlar

Tel çerçeveler iletişim için harika cihazlardır. Bunun nedeni, kullanıcılardan gelen değerli geri bildirimleri kolaylaştırmaları, tasarımcılar arasında fikir paylaşımını yönlendirmeleri ve paydaşlar arasında önemli konuşmalar başlatmalarıdır.

Tasarım sürecinin ilk aşamalarında kullanıcı testlerine katılarak, tel çerçeveleme daha dürüst kullanıcı geri bildirimlerini teşvik eder. Başarılı bir konsept ve nihai ürün geliştirmeye yardımcı olacak kilit noktaları daha iyi tanımlar.

Tel çerçeveleme, web tasarımcılarının kullanıcıların önerilen arayüzle tam olarak nasıl etkileşime gireceğini görmeleri için paha biçilmez bir yoldur. Toplanan içgörüler, tasarımcıya bir kullanıcı için neyin sezgisel göründüğünü gösterir. Tasarımcılar daha sonra kullanıcı geri bildirimlerine dayalı olarak kullanımı kolay ve rahat nihai sonuçlar oluşturabilirler.

Hangi Farklı Tel Kafes Türlerini Kullanabilirsiniz?

Üç farklı tel kafes türü vardır. Tel kafes tipi, tel kafesin ne kadar ayrıntı içerdiğine göre belirlenir.

1. Lo-Fi Tel Çerçeveleri

Bu, bir web sayfasının çok temel bir temsili olan çıplak bir kemiktir. Neredeyse her zaman bir tasarımın başlangıç ​​noktası olarak hizmet edecektir.

Bu nedenle, lo-fi tel kafesler genellikle oldukça kabadır. Piksel doğruluğu, ızgara veya ölçek duygusu olmadan oluşturulurlar.

Bir lo-fi tel kafesin amacı, aksi takdirde genel yerleşimden dikkati dağıtabilecek ayrıntıları atlamaktır. Şunları içerecektir:

  • Blok şekilleri
  • Sahte içerik (başlıklar ve etiketler için dolgu metni)
  • Basit görüntüler

Lo-fi tel kafesler, konuşmaları başlatmak, kullanıcı akışını haritalamak ve navigasyon düzenine karar vermek için kullanılır. Basitçe ifade etmek gerekirse, bir lo-fi tel kafes, sizinle bir odada oturan müşterileriniz veya paydaşlarınız olduğunda ve bir toplantıda otururken hızlıca bir şeyler çizmek istediğinizde mükemmel bir çözümdür.

Ayrıca, birkaç farklı konsepti düşünen ve bir projede hangi yöne gitmeleri gerektiğine karar vermek isteyen tasarımcılar için de harika çalışıyorlar.

2. Orta Fi Tel Çerçeveler

Bu, tasarım sürecinde en yaygın olarak kullanılan tel kafestir.

Bir orta-fi tel kafes, sayfa düzeninin daha kapsamlı bir temsilini gösterecektir. Tipografi veya resim gibi şeyler içermeyecek olsa da, belirli bileşenlere çok daha fazla ayrıntı verilir. Ve sayfa özellikleri daha net tanımlanmış ve ayrılmıştır.

Çoğu durumda, orta düzey bir tel çerçeve, gövde içeriğini başlıklardan ayıran değişen metin ağırlıklarına sahip olacaktır. Orta seviye tel kafesler hala siyah beyaz olsa da, bir tasarımcı tasarımın farklı unsurlarını sergilemek için genellikle farklı gri tonları kullanır.

Balsamiq veya Sketch gibi bir dijital tel çerçeveleme aracıyla bir orta-fi tel kafes oluşturulur.

WordPress site sahipleri için Kadence Blocks eklentisindeki Tel Çerçeve Blokları özelliği size tel kafes yapmanın en kolay yolunu sunar. Biraz daha sonra.

3. Hi-Fi Tel Çerçeveler

Son fakat en az değil, hi-fi tel kafeslerdir. Bunlar piksele özgü düzenlere sahiptir. Örneğin bir lo-fi tel kafes, muhtemelen “lorem ipsum” metin dolgularına ve görüntü yerleşimini gösteren X'lerle dolu gri kutulara sahip olacaktır. Bununla birlikte, bir hi-fi tel kafes, tamamen yazılı içeriği ve sayfada yer alacak gerçek görüntüleri içerecektir.

Hi-fi tel kafeste bulunan detay, interaktif haritalar veya menü sistemleri gibi karmaşık tasarım konseptlerini belgelemek ve keşfetmek için ideal hale getirir. Bir hi-fi tel çerçeveyi bir araya getirmek için gereken zaman nedeniyle, tasarım döngünüzün sonraki aşamaları için ayrılmalıdırlar.

Bir Tel Çerçeveye Neler Dahildir?

Bir tel çerçevenin içerdiği özelliklerin sayısı, büyük ölçüde, yüksek, orta veya yüksek sadakat olmasına bağlı olacaktır. Bununla birlikte, genel olarak konuşursak, her tel kafesin içereceği ana unsurlar şunlardır:

  • Arama alanları
  • Düğmeleri paylaş
  • Logolar
  • Başlıklar
  • Lorem ipsum yer tutucu metni

Bir hi-fi tel çerçevesi ayrıca iletişim bilgilerini, navigasyon sistemlerini ve alt bilgileri içerecektir.

Görüntülerin ve tipografinin hiçbir zaman düşük veya orta düzeyde bir tel çerçeveye dahil edilmesi gerekmediğini unutmayın. Bununla birlikte, birçok tasarımcı, bilgi hiyerarşisini temsil etmeye yardımcı olmak veya bir başlığın nereye yerleştirildiğini belirtmek için metin boyutlandırmayı deneyecektir.

Geleneksel olarak tel çerçeveler her zaman gri tonlamalı olarak oluşturulur. Bu nedenle, bir tasarımcı açık renkleri belirtmek için grinin açık tonlarını kullanarak gri tonlamalı gölgelemeyi de deneyecektir. Koyu gri tonları, koyu renkleri gösterecektir.

Bir hi-fi tel kafeste, bazı tasarımcılar ara sıra bazı renkler ekleyebilir. Çoğu zaman, kırmızı ve koyu mavi ile sınırlı olacaktır.

Kırmızı renk kullanımı bir hata mesajı veya uyarıyı gösterirken, koyu mavi daha sonra aktif bir bağlantı olacak olanı temsil edecektir.

Tel kafesler her zaman iki boyutludur. Bu nedenle, önerilen tasarımın vurgulu durumları, açılır menüler veya göster-gizle işlevini kullanan akordeonlar gibi etkileşimli özelliklerini sergilemek için fazla bir şey yapmadıklarını hatırlamak önemlidir.

Mobil Tel Çerçeveler ve Web Sitesi Tel Çerçeveleri

Bu kılavuzu okuyan çoğu insan gibiyseniz, muhtemelen mobil tel kafesler hakkında çok fazla değil, masaüstü tel kafesleri hakkında düşünüyorsunuzdur. Ancak gerçekte, mobil tel çerçeveler kendi özel değerlendirmelerini gerektirecektir.

Bunu bilerek, mobil tel kafesler ile web sitesi tel kafesleri arasındaki fark tam olarak nedir?

1. Tel Kafes Boyutu

Masaüstü web siteleri ile mobil siteler/uygulamalar arasında bariz bir boyut farkı olduğundan, her birinin düzeninin dikkate alınması gerekir.

Örneğin, bir masaüstü web sitesi geniş bir ekrana sahiptir. Bu nedenle, bir masaüstü sitesinin tel çerçevesi muhtemelen birkaç farklı sütuna yayılan bir düzene sahip olacaktır.

Bununla birlikte, mobil cihazlarda, bir tel çerçeve tipik olarak yalnızca bir veya iki sütunla sınırlandırılacaktır. Bu, bir kullanıcının sonsuz bir kaydırma görüp görmediğine veya altta ek içerik görüntülemek amacıyla sayfa başına görüntülenen öğe sayısını azaltmayı tercih etmenize karar vermeniz gerektiği anlamına gelir.

2. Davranış

Diğer bir temel fark, bir masaüstü sitenin veya mobil uygulamanın/sitenin genel davranışıdır. Bir masaüstü sitesinde, site kullanıcısı web sayfasında gezinmek için bir izleme dörtgeni veya fare kullanır. Ek olarak, bir kullanıcı daha fazla bilgi ortaya çıkarmak için ilgilerini çeken özelliklere tıklayabilir.

Masaüstünde, kullanıcılar site menülerini ortaya çıkarmak için belirli öğelerin üzerine bile gelebilirler.

Ancak bir kullanıcı mobildeyken, özellikleri açmak için kullanıcıların ekranlarına dokunması gerekir.

Bu, mobil cihazlar için tel çerçeve oluştururken, kullanıcıları belirli hedeflere ulaşmak için belirli düğmelere dokunmaya nasıl teşvik etmek istediğiniz konusunda daha eleştirel düşünmeniz gerektiği anlamına gelir.

3. Etkileşim

Kullanıcılar, mobil sitenizde veya uygulamanızda masaüstü sitenizdekinden çok farklı şekilde etkileşimde bulunacaklardır.

Sitenizin mobil sürümü, bir masaüstü sitesiyle aynı şekilde veri ve içerik çekerken, mobil uygulamalar ve siteler genellikle kullanıcıların, örneğin çevrimdışı kullanım için içerik indirme seçeneğine sahiptir.

Mobil cihazlar için tel çerçeve oluştururken, etkileşimin mobil ve masaüstü arasında nasıl değiştiğini hesaba kattığınızdan emin olun.

WordPress'te Tel Çerçeveleme

Görünüşte akla gelebilecek her şey için günümüzün bol teknoloji ortamında, web tasarımcıları çok sayıda gelişmiş tel çerçeveleme programına ve kullanıma hazır araçlara sahiptir.

Genel olarak, Sketch muhtemelen tel çerçeveleme için en iyi bilinen araçtır. Web tasarımcılarının piksel tabanlı bir tuval üzerinde kendi tel çerçevelerini oluşturmalarını sağlayan vektör tasarım şekilleri ve çalışma yüzeylerinin bir kombinasyonunu kullanır.

Ancak WordPress kullanıcıları için en iyi tel çerçeveleme aracı Kadence Blocks eklentisindeki yepyeni Wireframe Blocks özelliğidir.

Kadence Bloklarından Tel Çerçeveleme Blokları, sitenizin oluşturulmasına rehberlik edecek temiz, önceden oluşturulmuş bölümler sağlayacak yeni bir WordPress blokları setidir. Hepsinden iyisi, her şey natvie WordPress blok düzenleyicisinin içinden yapılır.

Tel Kafes Blokları, kullanıcılara aşağıdakiler dahil olmak üzere 30'dan fazla farklı tel kafes bloğu sağlar:

  • İçerik
  • Fiyatlandırma tabloları
  • Altbilgiler
  • referanslar
  • kartlar
  • geri sayımlar
  • portföyler
  • Formlar
  • Çok daha fazla

Bir WordPress site sahibi olarak, kablolu biçimlendirmenizi yerel WordPress blok düzenleyicisinin dışında yapmanıza gerek yoktur. Kadence Blocks'tan Tel Kafes Blokları, WordPress'te tel kafes yapmak için ihtiyacınız olan tek aracı sağlar.

Ve kullanımı daha kolay olamazdı.

Yeni Wireframe blokları, ücretsiz Kadence Blocks eklentisinde mevcuttur. Bir göz atın ve tel çerçeveleme süreciniz için neler yapabileceğini görün.

Tel Çerçeveleme Nedir? Şimdi biliyorsun!

İşte karşınızda: “Tel çerçeveleme nedir?” 10 dakika veya daha kısa sürede açıklanmıştır.

Tel çerçeveler kolayca gözden kaçabilecek bir şey gibi görünebilir. Ancak, tasarımcıların bir sitenin önemli sayfalarının navigasyonu ve düzeniyle ilgili net müşteri, paydaş ve kullanıcı geri bildirimi almalarını sağlayacaktır.

Ve tel çerçeveleme aşamasında müşterilerin, paydaşların ve kullanıcıların onayı ile donandığınızda, kullanıcıların ve müşterilerin onaylayacağı bir şey yarattığınızı bilerek projenizi güvenle ilerletebileceksiniz… ve umarım. aşk.

Ücretsiz Web Sitesi Tel Çerçeveleme Kitaplığı ile Kadence Bloklarını İndirin

Güzel tasarımlı ilgi çekici içerik oluşturmayı seviyorsanız, Kadence Blocks yerel WordPress düzenleyicide yaratıcı olmak için araçlar sağlar. Ayrıca, bir sonraki web tasarımınıza başlamak için bir tel kafes blok kitaplığı da dahil olmak üzere sitenize kolayca ekleyebileceğiniz önceden oluşturulmuş tonlarca içeriğin keyfini çıkarın. İlham ve hızlı gelişme için harika!

Şimdi İndirin