Tasarımda Tel Çerçevenin Faydası

Müşterilerimizden yeni proje fikirleri ve kullanıcı gereksinimleri belgeleri alacağımız günlerdeki kötü alışkanlıklar, Belki de birkaç fikir çizip ilgi çekici Photoshop tasarımına atlıyoruz.

Bu metodoloji için akıl yürütmemiz, revizyon için zaman tanımak için hemen tükenen tasarım kapısına basmaktı.

Bir süre sonra tasarıma çok zaman harcadığımızı fark ettik, neden? Revizyonlar her zaman aldı. Revizyonlar karmaşıktı; düzenleri, Grafikleri ve tipografiyi ayarlamak zorunda kaldık. Her şey sinir bozucuydu, proje zaman çizelgeleri için felaketti, müşteriler için endişe vericiydi ve bizim için yıpratıcıydı. Farklı bir yaklaşıma ihtiyacımız olduğunu anlamamız biraz zaman aldı. Daha önce görmezden geldiğimiz “Kare Bir” ilk işlemine geri dönmeye karar verdik “Tel çerçeveleme”. Gri kutulu tel kafeslerle başladık, onu tasarım sürecimize dahil ettik, sonra başka bir sürece geçtik ve tasarım sürecine ekledik. Sonunda model yerine oturuyordu, “Tel çerçeveleme” sayesinde zamanımızı kurtardı ve sorunları daha erken çözmemize yardımcı oldu. Bu nedenle tasarım sürecinde tel çerçevelemeyi “ilk Kapı” olarak görüyorum.

Tel Çerçeveleme Kullanıcı Deneyimi Tasarımları

Kim bilir, tasarımlarınızda olası kullanılabilirlik zorluklarını en erken aşamada fark edebilirsiniz. Bazen katı (URS) kullanıcı gereksinimleri olan harika proje konsepti, ilk işlem sırasında yerine oturuyor gibi görünüyor. Kağıtlar için planlar yapmaya başladığımızda daha da kötüsü olur, “Ne oldu?” Bir planı çizmek için renkli Photoshop'tan sadece birkaç dakika alan tel çerçeveyi görmezden geldik. Daha sonra ayarlamaya daha erken başlamak daha iyidir.

Bir Zaman Yönetim Aracı Olarak Tel Çerçeveleme

Bir proje sıkı bir zaman çizelgesindeyse, zaman yönetimi her başarılı proje için önemli bir tekniktir; "Neden tel çerçevelemeyle zamanımı boşa harcayayım, bu yüzden renkli Photoshop'a geçsem iyi olur" diye düşünebilirsiniz. Başlangıçta bu hatayı yaptık, ancak bunun yerine zaman alıcı ve kaynak israfı olan tüm konsepti revize ettik. Gri Kutuları ve eskizleri gözden geçirmek, birkaç karmaşık öğeyle birleştirilmiş tam renkli tasarımları gözden geçirmekten çok daha kolaydır.

Tel kafes, bir sayfanın gerçek ve doğru boyutunu oluşturmak için kullanılır. Müşteri tarafından onaylandıktan sonra, görünümünü güçlendirmek için yalnızca grafik bir çözüme ihtiyacımız var. İşin püf noktası, eğer tel kafesler, eskizler ve gri kutular düzenliyse, revizyon için zamanımız olmayacak. Bunun yerine, bir sonraki süreç “görsel” kısmına atlayacağız.

İstemci bağlama için tel çerçeveleme

Renkli sayfa düzeni bazen müşterilerimizin dikkatini dağıtabilir; belki bir müşteri "Mor" renkten nefret eder, müşterinin duyguları plana odaklanmayı zor bulur. Geri bildirimleri duygularından dolayı olumsuz olabilir. Sonunda “Yeniden başla” diyebilirler, tasarımlar tamam olabilir, ancak müşteriyi rahatsız eden tek şey “mor” renktir. Bu nedenle gri kutular ve eskizler kullanmak etkili bir yoldur, çünkü öğelerin dikkat dağıtıcı unsurlarını ortadan kaldıracaktır.

Bir tel kafes, müşteri yalnızca görünüme odaklanmadan boyutlandırma, yerleşim konusunda geri bildirim almada yardımcı olacaktır. Tel kafes yaklaşımını kullanmak aynı zamanda bir müşteri hakkında daha fazla bilgi edinmemize yardımcı olur, nelerden hoşlanır? Stiller, Tipografi, vb., Tel çerçeveleme sunumu, bir bağlanma zamanı gibidir, geri bildirimleri ve etkileşimleri, onlar ve tasarımları hakkında ve projenin gelecekteki aşamalarında neler bekleyebileceğiniz hakkında bilgi sahibi olmanızı sağlar? Kağıda kabataslak bir taslak çizerken, müşteri simgeler, düğmeler, yazı tipleri vb. hakkında yorum yapmaya devam edecek. Daha büyük düğmeleri daha küçük vb. tercih ettiklerini söyleyerek sona erecekler. Sonunda, bir tasarımcı müşterilerden öğrenir ve izlemeye başlar. geri bildirim kalıpları ve öğrenmek, bilgiye sahip olmak zamanınızı, enerjinizi ve kaynaklarınızı koruyabilir.

Tel Çerçeveler Hakkında 7 Büyüleyici Şey

1. Takım Çalışması Deneyimini Artırır

Tel çerçeveleme süreci, çeşitli becerilere sahip farklı insan gruplarını bir araya getirir; herkes proje sürecinin bir parçasıdır. Proje yöneticileri, tasarımcılar, geliştiriciler hep birlikte bir amacı gerçekleştirmek için bir araya gelirler. Bu değerlidir çünkü ekip çalışmasını geliştirir ve ekip arkadaşlarının birbirini daha iyi anlamasını sağlar. “Şelale” modeli ile projeler aslında kırılabilir.

2. Şeffaf İletişim

Sorunsuz iletişim akışı, geliştiriciler gibi bazı ekip üyelerinin proje tartışmasına dahil edilmediği durumlarda sıkıntı yaşardık. Her bir kişiyi tel çerçeveleme işlemine dahil ederek sorun çözülür. Bir geliştirici, e-postalarda ve sohbetlerde gözden kaçabilecek bir sorunu daha önce tespit edebilir. Öte yandan, teknik özellikler zarif ve güzel ancak görselleştirilmesi daha zor.

3. Müşterileri Etkileyin

Renkli sayfa düzeni bazen müşterilerimizin dikkatini dağıtabilir; belki bir müşteri "Mor" renkten nefret eder, müşterinin duyguları plana odaklanmayı zor bulur. Geri bildirimleri duygularından dolayı olumsuz olabilir. Sonunda “Yeniden başla” diyebilirler, tasarımlar tamam olabilir, ancak müşteriyi rahatsız eden tek şey “mor” renktir. Bu nedenle gri kutular ve eskizler kullanmak etkili bir yoldur, çünkü öğelerin dikkat dağıtıcı unsurlarını ortadan kaldıracaktır.

Bir tel kafes, müşteri yalnızca görünüme odaklanmadan boyutlandırma, yerleşim konusunda geri bildirim almada yardımcı olacaktır. Tel kafes yaklaşımını kullanmak aynı zamanda bir müşteri hakkında daha fazla bilgi edinmemize yardımcı olur, nelerden hoşlanır? Stiller, Tipografi, vb., Tel çerçeveleme sunumu, bir bağlanma zamanı gibidir, geri bildirimleri ve etkileşimleri, onlar ve tasarımları hakkında ve projenin gelecekteki aşamalarında neler bekleyebileceğiniz hakkında bilgi sahibi olmanızı sağlar? Kağıda kabataslak bir taslak çizerken, müşteri simgeler, düğmeler, yazı tipleri vb. hakkında yorum yapmaya devam edecektir. Sonunda daha küçük düğmeleri tercih ettiklerini söyleyeceklerdir. Sonunda, bir tasarımcı müşterilerden öğrenir ve izlemeye başlar. Geri bildirim kalıpları ve öğrenmek için bilgiye sahip olmak zamanınızı, enerjinizi ve kaynaklarınızı koruyabilir.

4. Farklı Yaklaşımlar

Beyin fırtınası, insanların projelerle mücadele etmenin çeşitli yollarını bulmalarına olanak tanır. Özellikle kağıtlarda üretimi ve eskizleri kolaydır, ihtiyacınız olan tek şey bir kalem ve bir kağıttır ve sorunları farklı açılardan ele alıp bir kağıda çiziyoruz. Mantıklı iki veya dört tane olana kadar atamayı birleştirebilir ve silebilirsiniz.

Çeşitli yaklaşımlar arasında Teknik Yaklaşım - Yeni ve trend olan teknolojik özellikler, kullanıcı deneyimi ve kullanılabilirlik testi, kullanıcıların bir hedefi ve bir görevi nasıl sıkılmadan hızlı bir şekilde gerçekleştireceklerini, dolayısıyla görev kürtajını, yine çevresel Yaklaşımı - paydaşlar kimlerdir? Hangi alanları hedefliyoruz? Belirli bir paydaş ve odaklanılan alanla kolayca uyum sağlayabilecek ne tür özellikler önemlidir?

5. Test için bir temel

3 veya 5 prototip ile bir proje taslağını gerçek kullanıcılarla test edebilirsiniz. Yalnızca tamamlanmış HTML prototipini kullanarak test edebileceğimize dair bir algı var ama bu doğru değil. Ayrıca elle çizilmiş tel kafesler test için kullanılabilir. Kullanıcının tıklamak istediği butonlar hakkında önerilerini sorabilirsiniz; ayrıca etiketleri adlandırma konusunda geri bildirim alabilirler ve son olarak doğru görsel hiyerarşiye sahip olup olmadıklarını kontrol etmeye yardımcı olabilirler. Tel kafes aracılığıyla test etme, sorunları daha erken belirlemeye yardımcı olur.

6. Daha hızlı proje üretildi

Tel çerçeve tabanlı bir projeyi prototiplemek biraz zaman ve para gerektirir, bunun nedeni tel çerçeveleme sürecine farklı insan gruplarının dahil olmasıdır. Bu nedenle revizyona neden olabilecek öngörülemeyen hatalar gerçek projeden önce ele alınır. Yine proje yerleşimi müşteriler tarafından görüldü ve böylece nihai tasarım imzaları atıldı. Bu, birden fazla konsept için zamanı azaltır.

Photoshop ile tel çerçeveleme

Photoshop ile gri kutular ve eskizler.

Adım 1: İstemcilerden ek gereksinimleri toplayın, ardından tam photoshop'u renklendirmek için "ateşleyin" ve tel çerçevelemeye başlayın.

Adım 2: Belgeyi 960 ızgara sistemine dayalı olarak oluşturun, (1100 piksel genişliğinde ve 760 Yüksek) bunu “Photoshop'ta Izgarayı ayarlama” bölümünde öğrenebilirsiniz.

Adım 3: Arka plan rengi veya resmi olacağını açıklamak için arka planı açık gri bir renkle doldurmak için Boya Kovası Aracı (G) kullanılır.

Adım 4: Araç çubuğundan Dikdörtgen Aracını seçin ve içerik alanını simgelemek için bir kutu çizin. 960 grid sistemini kullanıyoruz; çizilen kutum 940 piksel genişliğinde olacak. Gri arka planımıza karşı görünmesi için “Paint Bucket Tool” kullanarak ön plan rengini beyaz yapın.

Adım 5: İşlemi çok daha hızlı hale getirmek için, ön planı siyaha veya size uyan herhangi bir renge ve arka planı beyaza veya herhangi bir renge ayarlamak için (D harfini yazın) yeterlidir. Ardından içerik alanlarını temsil etmek için kara kutular çizin, Yine arka planların opaklığını gri veya herhangi bir renk gösterecek şekilde değiştirmeyi seçebilirsiniz.

Adım 6: Izgaranın içine herhangi bir şeyi temsil edecek bir dikdörtgen ekleyin. Bu durumda “Giriş Düğmesi” , Dikdörtgen çizildikten sonra dikdörtgenin opaklığını (“30”) azaltmak için opacity Value (“30”) yazın. Kutunun üzerine “LOGIN” metnini eklemek için yazım araç çubuğundaki Yazım Aracını (T) kullanarak metin ekleyebilirsiniz. Gezinme alanını oluşturmak için başka bir dikdörtgen ekleyin, tekrar gri yapmak için opaklık değerini azaltın.

7. Adım: Dikdörtgenler ekleyin, içerik sütunu alanlarını oluşturun. Ana sayfa resmi için biraz daha büyük bir ana içerik sütunu ve daha küçük bir sütun içeren iki sütunlu bir düzen kullanın. Sütunlar için opaklığı %10'a ayarlayın ve ayrıca sayfanın alt kısmındaki altbilgiyi temsil etmesi için başka bir dikdörtgen ekledi.

Sayfa 8: Photoshop'un Yazım > Lorem Ipsum Yapıştır komutunu kullanarak içerik alanına yapay metinler ekleyin.

Diğer uygulamalar

Grafik Dışı tasarımcılar tarafından etkileşimli ve güzel tel çerçeveler oluşturmak için kullanılabilecek diğer tel çerçeve uygulaması.

OmniGraffle

Micro-Visio'ya benziyor, yüksek teknoloji tasarımı için kullanılabilecek çok güzel şablonlara sahip ve özellikleri harika. En iyisi bu.

ninja alayı

En sevdiğim, kullanımı ÜCRETSİZ, etkileşimli bir proje konsepti oluşturmak için kullanılabilecek çok güzel özelliklere ve şablonlara sahip. Kullanıcıların çevrimdışı ve çevrimiçi çalışmasına izin verir.

Güzel Grafikler

Bu yeni başlayanlar için iyidir, ÜCRETSİZDİR ve arayüzlerin anlaşılması kolaydır.

balzamik

Tasarım konseptlerini bir müşteriye aktarmanın hızlı bir yolu, kullanıcıların nihai ürünü kaydetmesine olanak tanıyan ücretsiz bir demosu var. Eskiz için gerekli tüm unsurların yanı sıra benzersiz el çizimi görünümüne sahiptir.

Google Drive Çizimi

Ekran maketi için kullanılabilir, tamamen tel çerçeveleme tipi değildir, ancak iyi işbirliği aracı, hızlı, Ücretsiz ve kullanımı kolay gibi özelliklere sahiptir.

parlak

Gliffy Kullanımı daha kolay, daha kaygan ve akış şemaları ve planları gibi diyagram özellikleri sunuyor, ağ süreçleri ile Venn diyagramları ve SVG, PNG ve JPEG'e ihracat yapan UML'ye sahip.

Lumzy

Bir flash uygulamasıdır, işbirliği platformu sağlar, Ücretsizdir, hızlıdır ve son olarak kullanımı kolay farklı türde kontrollere sahiptir.

modeller

Ücretsiz, hızlı ve kullanımı kolay, bir tarayıcı eklentisine ihtiyacım yok, ekran ve düğme bağlantısı kusursuz bir şekilde yapılır, böylece bir kişi müşterilerin görüntülemesi ve kullanması için bir gösteri yayınlayabilir. Spesifikasyona göre görüntülerin dışa aktarılmasına izin verilir. Bunun dışında standart HTML5 ve JavaScript Moqups'a entegre edilmiştir.