Geliştirme Sürecinizi Kolaylaştırmak için Wireframes Kullanma
Bir tel çerçeve oluşturmak, bir web sitesi tasarlamadan önce yapmanız gereken ilk adımlardan biridir.
Bir tel çerçeve, bir web sitesindeki öğeleri ve içeriği organize etmenize ve basitleştirmenize yardımcı olur ve geliştirme sürecinde önemli bir araçtır.
Bir tel çerçeve temelde bir web sitesi tasarımında içerik düzeninin görsel bir temsilidir .
Tel çerçeve, üstbilgi, altbilgi, içerik, kenar çubukları ve gezinme gibi sayfa özelliklerinin yerleşimini gösteren bir prototip görevi görür.
Ayrıca, bu içerik alanlarındaki öğelerin yerleşimini belirtir. Müşterinin gereksinimlerini doğru şekilde karşılayan ve proje değişikliklerini en aza indiren bir site geliştirmek istiyorsanız, tel çerçeveleme sizi yolda tutacaktır.
Wireframing'in faydaları
Bir tel çerçeve oluşturmak, müşteriye, geliştiriciye ve tasarımcısına, web sitesinin yapısına eleştirel bir bakış atma ve bu sürecin başlarında kolayca revizyon yapmalarını sağlar.
Wireframing aşağıdaki temel avantajları getirir:
- Müşteriye site tasarımının erken veya yakın bir görünümünü verir (veya yeniden tasarım).
- Tasarımcıya ilham verebilir, daha akıcı bir yaratıcı süreçle sonuçlanabilir.
- Geliştiriciye kodlaması gereken öğelerin net bir resmini verir.
- Her sayfada açık çağrı harekete geçirir.
- Uyum sağlamak kolaydır ve web sitesinin birçok bölümünün düzenini gösterebilir.
Tel Çerçeve Geliştirme Araçları
Tel kafes oluştururken seçebileceğiniz birçok araç var:
- Kağıda çizim , her tasarımcı için her zaman iyi bir başlangıç noktasıdır. Odaklanmak ve organize etmek için hızlı ve kolay bir yol sağlar. Eskiz ile çok hassassanız, bunu son tel kafesiniz olarak bile kullanabilirsiniz. (Bkz. Şekil 1.)
- Akış şeması veya zihin haritalama yazılımı Visio . Bu yazılım seçenekleri, tel kafesinizin akış şeması temsillerini kolayca oluşturmanızı sağlayan önceden paketlenmiş öğelerle birlikte gelir.
- Web prototipleme yazılımı gibi Gliffy veya Balsamiq . Bu gibi araçlar özellikle tel örgülerin üretilmesi amacıyla oluşturulmuştur ve kullanımı kolay prototipleme yeteneklerine sahiptir.
- Photoshop veya Illustrator gibi grafik yazılımı . Bu araçları kullanmanın yararı, tel çerçevenin daha sonra doğrudan web sitesinin tasarımının bir grafik modeline dönüştürülebilmesidir; bununla birlikte, olumsuz olan, tüm öğeleri el ile oluşturmanız gerektiğidir.
- (X) HTML wireframes neredeyse gerçek sitelerin kendileri gibidir. Stilleri uygulamadan önce tel çerçevesini kod ile koyabilirsiniz ya da son bir tasarıma çok benzeyen tam tarz, yüksek sadakatli bir düzen oluşturabilirsiniz. (Bkz. Şekil 2.)
Nihayetinde, geliştirici veya tasarımcı tercih ettikleri aracı seçmelidir. Kişisel olarak, Photoshop'u kullanıyorum çünkü süreci organize etme şeklini ve dosyayı bir mockup'a ne kadar kolay bir şekilde dönüştürebildiğimi seviyorum.
Tel kafes örneği
Bir tel kafes içindeki detay seviyesi, aşağıdakiler gibi çeşitli faktörlere bağlıdır: müşterinin ne kadar yön ve içerik sağladığı, içeriğin ne kadar karmaşık olduğu, sürecin ne kadar ilerlediğini ve ne kadar ayrıntı içermesini istediğiniz .
Burada farklı araçlar kullanılarak oluşturulan ve farklı ayrıntı ve renk seviyeleri sergileyen tel kafes örnekleri:
Şekil 1: Kıyı Sermaye Ortakları web sitesinin (şimdi Geniş Erişim Perakende Ortakları olarak adlandırıldı) web sitesi için bu basit tel kafes taslağı, grafik maketleri ve en sonunda nihai tasarımı oluşturmak için kullanıldı. Tarafından Mike Rohde .
Şekil 2: Çok düşük sadakatli HTML tel kafes. Stil eklendikten önce bir sitenin nasıl görüneceğini göstermek için kullanışlıdır. Görme engelli kullanıcılar için çok yararlı.
Şekil 3: Düşük sadakatli tel kafes Embrace Pet Topluluğu tarafından 31Three Jesse Bennett-Chamberlain .
Şekil 4: Bir sosyal konferans aracının ön hazırlaması Tiddlywiki Le Web 3'te kullanım için. tiddleleweb.tiddlyspot.com . Tel kafes tarafından Phil Hawksworth.
Şekil 5: Bu, bir blog yayınlama sisteminin (WordPress) gelişmiş kullanımına dayanmaktadır. Tarafından Mattheiu Mingassson veya Activeside İnternet Stratejileri ve Danışmanlığı .
Şekil 6: için bir tel kafes Embrace Pet Topluluğu tarafından 31Three Jesse Bennett-Chamberlain .
Şekil 7: Renk ve görüntülere sahip bir tel kafes. Yazar sayfası tel çerçeve tarafından kitabevi .
Şekil 8: Rengi olan başka bir tel kafes. Mattheiu Mingassson tarafından Activeside İnternet Stratejileri ve Danışmanlığı .
En İyi Uygulamalar
En iyi sonuçları elde etmek için, tel kafes oluştururken akılda tutulması gereken birkaç önemli nokta vardır:
- Basitlik. Anahtar, müşteriye açık ve tasarımcı için esnek olmaya yetecek kadar basit tutmak, ancak programcıya rehberlik edecek kadar ayrıntılı olmaktır. Daha önce de belirtildiği gibi, yüksek kaliteli bir tel kafes oluşturabilirdiniz, ancak bunu geliştirme sürecinin erken aşamasında yapmak, müşteriyi son bir taslak için yanlış anlayabilen kafa karıştırıcı olabilir.
- Gri tonlamalı çalışın. Bir tel kafes için elemanlar oluştururken, gri tonlamada çalışmak en iyisidir, böylece tasarımın dikkatini dağıtmadan yerleşime odaklanabilirsiniz. Tam renkli bir logo verildiyse, bunu da gri tonlamaya dönüştürün. Çeşitli öğeleri ayırt etmek ve sınıflandırmak için, farklı gri tonlarında şekiller ve anahatlar gösterin.
- Bir sitemap ile birlikte wireframes kullanın. Bir tel çerçeve, iyi bir site haritasının görsel bir temsili değil, bir yedektir. Bir site haritası, herhangi bir web sitesi için yararlı bir araçtır ve geliştirme sürecinde mutlaka başvurmak yararlı olacaktır.
- İstenen sonuca odaklanın. Müşterinizin tel kafesinizi oluşturmadan önce kullanıcılara sayfanın nasıl yanıt vermesini istediğini net bir şekilde anlayın. Harekete geçirme çağrıları, tel kafeslere bakmaktan çok açık olmalıdır.
- Bir web sitesi için ise tam boyutlu bir tel kafes oluşturun . Bu, gerçek sayfanın en doğru temsilini verecektir.
- İçeriği önceden güvence altına alarak öğeleri planlayın. En iyi senaryoda, müşteriniz size her sayfada, logo, reklamlar, Flash veya video oynatıcılar, özellikler, gezinme bölümleri ve kenar çubuğu, üstbilgi ve altbilgi öğeleri gibi görünen öğeleri sağlamış olacaktır. Bu bilgilere henüz sahip değilseniz, müşterinizle görüşün ve bir site haritası alın (veya oluşturun). Mevcut öğeleri yeniden tasarlıyorsanız, bunları web sitesinin dikkatli bir incelemesinden alabilirsiniz. Bu senaryoda, önce istemcinizle öğeleri eklemeniz veya kaldırmanız gerekmeyeceğini teyit edin; çünkü beklentilerini net olarak anlayamazsanız, işlemi yavaşlatacaktır.
Gri Tonlama ve Renk
Bir tel kafes oluştururken, gri tonlamalı çalışma, sürecin ana işlevi üzerinde odaklanmayı sürdürmeye yardımcı olur ; bu, düzeni değil tasarımı sonlandırır (bkz. Şekil 3). Renkte çalışmanın bir başka riski de, müşterinin nihai mockup için tel çerçevesini hata yapmasıdır.
Bununla birlikte, renk her bir harekete geçirici mesajın yerini gösterdiğinde yararlı olabilir. Bir sayfa çeşitli harekete geçirici mesajlar içerebileceğinden, bunlara öncelik vermek önemlidir. Wireframes, kullanıcının gözünü ilk olarak çizmek için hangi harekete geçeceğini belirlemede yardımcı olabilir.
Kısa süre önce çok hareketli bir logoya sahip olan bir projede çalıştım. Bu, yeni başlatılan bir dergiyi temsil ettiği için harekete geçmenin birincil çağrısıydı.
Renk kullandığınızda, belirli öğelerin birincil harekete geçirici mesaja baskın olup olmadığını daha kolay anlayabilirsiniz. Bu süreç, mockup tasarımından ziyade tel kafesleme alanı altındadır, çünkü eleman konumları hala belirlenmektedir.
Proje ilerledikçe , teleferiğe kademeli olarak eklenebilir; bu , elemanların yeri kilitlenmeden önce mockup'larla ilerlemekten daha verimlidir. Bunu yaparken, grafik yazılımı hazır olduğunda doğrudan bir modele geçiş yapmanıza yardımcı olabilir.
Kaçınılması gerekenler
Geliştirme sürecinizin diğer yönleri gibi, wireframing düzgün yapılmadığı takdirde tuzaklarına da sahip olabilir. En etkili sonuçlara ulaşmak için nelerden kaçınmanız gerektiği ile ilgili bazı ipuçları:
- Sayfada çok fazla şey oluyor. Geniş beyaz boşluk bırakın, böylece tasarım çok meşgul veya dar görünmez.
- Renk ve tasarıma vurgu yapmak. Wireframing, öğelerin yerleşimini ve yerini belirlemektir. Bir tel kafes, tasarımı etkileyebilmesine rağmen, grafik ve renk eklenmesi muhtemelen yalnızca amacından uzaklaşacaktır.
- Çok fazla detay. Daha sonra her zaman daha fazla ayrıntı ekleyebilirsiniz, ancak başlangıçta çok fazla yer alıyorsanız, müşteri son model için tel çerçevesini karıştırır.
Wireframes hakkında daha çok şey öğrenmek istiyorsanız Tel Çerçeve Dergisi örnekleri paylaşan, teknikleri tartışan ve bilgi mimarisi ile ilgili problemleri çözen mükemmel bir kaynaktır.
Müşterinizin web sitesi için bir tel çerçeve oluşturma, ilgili tüm taraflar için etkili bir iletişim aracı sağlar.
Basit bir tel kafes oluşturmak bile uzun vadede zamandan tasarruf edecek ve tasarımcı, geliştirici ve müşteri için geliştirme sürecini kolaylaştıracaktır.
Eric Shafer tarafından sadece WDD için yazılmıştır.
Tasarımınız için wireframes kullanıyor musunuz? Etkili tel kafesler oluşturmanın en iyi yollarından bazıları nelerdir?