Izgara Tabanlı Tel Çerçeve Çizimi Yapmak İçin En İyi Kaynak

Süreci arayüz tasarımı her zaman ile başlar fikir üretimi. Bu, görselleştirme, diğer siteleri araştırma ve hızlı prototiplemeyi içerir. Bu erken fikir aşaması için çok önemlidir düzen ve kullanıcı deneyimini anlamak inşa etmeyi düşünüyorsun. Öyleyse yeni bir projede tel kafesleme işini nasıl gerçekleştirmelisiniz??

Gerektiği kadar ekstra aletle birlikte geleneksel kağıt ve kalem hayranıyım. Fakat dijital tel kafesleme Aynı zamanda büyük ve modern tasarımcılar için uygun bir seçenek. Bu yazıda, kendi tekniğinizi yaratmanıza yardımcı olacak her iki teknik için de en iyi kaynakları paylaşmak istiyorum. ızgara tabanlı UI tel kafesleri.

Erken dönem UI / UX Kavramsallaştırma

Arasındaki farkları açıklığa kavuşturarak başlayalım. tel kafes ve bir prototip. Bu iki kelime genellikle aynı süreçle ilgili oldukları için birbirlerinin yerine kullanılır..

bir tel kafes bir tek statik kroki bir web sayfasının kullanıcı arayüzü veya bir uygulama. Düğme metni, kenar boşlukları, öğe boyutları ve hatta animasyonları açıklamak için belirtme çizgileri olabilir. Fakat tel kafesler sadece bireysel sayfalar için kaba taslaklar.

Benzer şekilde, bir prototip A gibi farklı sayfaların birbirine nasıl bağlandığını gösteren akış çizelgesi. Dolayısıyla bir prototip, farklı düğmelerin veya bağlantıların diğer sayfalara nasıl yönlendirilmesi gerektiğini göstermek için tel kafesleri birleştirir.

Bu tanımlar taştan oyulmamış, bazı tasarımcıların kendi terminolojileri olabilir ve sözlerime kesinlikle katılmıyorum. Ancak, bunları genel olarak tanımladıklarını gördüm ve bu tasarımcıların bu terimleri en iyi şekilde anladıkları.

Peki, bu erken kavramsal parçalarla tam olarak ne yapmalısınız? Gerçekten gerekli mi? Prototip oluşturmanın her zaman gerekli olmadığını söyleyebilirim, ancak özellikle karmaşık etkileşimli uygulamalar tasarlamak için çok iyi bir fikir.

Ancak tel kafesleme her zaman iyi bir fikirdir Her yeni proje için. Size yardımcı olur büyük resme odaklan ayrıntılar hakkında endişelenmeden. Genel sayfanın nasıl düzenlendiğine dair bir fikir edinirsiniz ve somut bir düzen tasarlarken bu çok değerlidir..

Wireframing'in Hedefleri

Yeni bir projeye her başladığınızda düşünmelisiniz ne çözmeye çalışıyorsun. Her site akılda belirli bir amacı ile inşa edilmiştir. Pek çok sitenin, bazı hedeflerin diğerlerinden daha önemli olduğu birçok hedef bile var.

Tel kafeslemeyi en iyi stratejiyi bulmanıza yardımcı olmak için rehber olarak kullanın. bir web sitesinin hedeflerini yakalamak. Bu muhtemelen ilk tel kafes üzerinde olmayacak, bu yüzden hazırlıklı olun birçok farklı fikir çizme.

Diğer benzer web sitelerine bakın ve en iyi özelliklerini yazın. İçeriğin nasıl düzenlendiğini ve her sayfada nasıl hareket ettiğinizi analiz edin.

Bir tel kafes düşünün etkileşimli bakış açısı. Bunlar sadece güzel resimler değil. Dijital arayüzlerin temsilidirler ve fikirlerinizi bununla birlikte düşünmek istersiniz..

Elde kılavuz kaynaklara sahip olmak, ister kağıttan yapılmış isterse dijital olsun, hızlı eskizlerde çok yardımcı olabilir. Şimdi tel kafes oluşturmak için en iyi kaynakları kontrol edelim.

Izgara Eskizleri

Yazıcı kağıdındaki temel küçük resim çizimleriyle her zaman için kaba fikirleri ortaya çıkarmak. Şahsen, ben genellikle yazıcı kağıdı üzerinde çalışmaya başladım, çünkü bu yolla şebekeler hakkında daha az endişeleniyorum ve daha fazlası hakkında fikir üretmek.

Nokta ızgarası eskiz defteri gitmek istersen gitmenin en iyi yolu bir fikri temizlemek, ve ona daha fazla yapı kazandırın. Izgara size yardımcı olur öğeler arasındaki mesafeleri tahmin etmek Sayfada ve oluştur bir çeşit simetri tel çerçevede.

İsterseniz dışarıda birçok harika ürün var kağıt üzerinde tel kafes oluşturmaya başlayın, örneğin, Rhodia Dot Pad günlük kullanım için çeşitli boyutlarda gelir. Yalnızca 80 sayfa ile gelir, ancak bu çoğu ızgara eskiz defterine özgüdür..

Çok havalı ve özelleştirilebilir bir başka ürün de Dotgrid. Dotgrid'in tüm eşyaları Rhodia kitaplarından daha pahalı, ancak daha fazla materyal ve özel kapak tasarımları ile geliyor.

Dotgrid, size izin veren ısmarlama siparişleri bile kabul eder kendi özel eskiz defteri tasarımını yap. Her kitap 100 sayfanın hemen altında, yani ön ve arka kısım dahil olmak üzere ızgara çizimi için yaklaşık 200 sayfa alıyorsunuz.

Bahsetmek istediğim birkaç diğer nokta ızgara eskiz kitabı, ciltli ve spiral ciltli Behance Dot Grid'i içeriyor, ancak yalnızca 50 sayfa kağıt içeriyor.

Responsive Design Sketchbook, web tasarımcıları için en iyi kaynaklardan biridir. Başka hiçbir ürün tasarımcısının duyarlı bir tasarım eskiz defterine ihtiyacı olmaz, ancak web tasarımcıları çeşitli cihaz genişliklerinde fikir üretebilir ızgara düzeninin üstünde.

Bu duyarlı tasarım pedleri ayrıca toplam 100 sayfa olmak üzere toplam 50 sayfaya sahiptir, ancak her sayfada dört farklı duyarlı ızgara duyarlı tasarımda farklı kesme noktalarını temsil eden masaüstü, dizüstü bilgisayar, tablet ve akıllı telefon.

Tasarım, Dotgrid kitaplarına kıyasla yumuşak olmasına rağmen, başka hiç kimse web tasarımcıları için duyarlı eskiz defterleri düşünmedi. Bu tür bir şey varsa, o zaman bir test sürüşü için bir tane sipariş değer.

Eğer gerçekten el yapımı şeyler yapıyorsanız ve para harcamak istemiyorsanız, kendi ızgara sayfalarınızı yazdırın Arayüz Kroki ile. Bu ücretsiz site sunar farklı ızgara şablonları yazdırabileceğiniz ve elle çizilmiş tel kafesler için kullanabileceğiniz.

Izgaralar, farklı yazıcı kağıdı stilleri için A4 ve ABD boyutlarındadır. Tam uzunlukta bir web tarayıcısı için şablonlar veya farklı iPhone ekranları gibi birçok seçenek arasından seçim yapabilirsiniz..

Bu seçeneklerin tümü harika ve eğer öyleyseniz keşfetmeye değer kalem eskiz. Kağıt, yeni fikirleri çabucak elde etmenin en kolay yollarından biridir, bu nedenle UI tasarımcıları tarafından sık sık tercih edilen bir seçimdir..

Dijital Araçlar ve Web Uygulamaları

Dışarıda o kadar çok tel kafesleme programı var ki, bunlar analiz felci riski olmadan zorlukla kaplanabilecekleri için, şimdilik en iyi seçeneklerden bazılarına odaklanalım. ızgara tabanlı tel kafesleme.

Öncelikle, Illustrator gibi Adobe araçlarını kullanabileceğinizi belirtmek istiyorum. kendi tel kafeslerinizi oluşturun. Bu, herkesin iş akışının bir parçası değil ve Illustrator kesinlikle ücretsiz değil. Ancak, zaten Adobe Creative Cloud ile çalışıyorsanız, başlamak için iyi bir yer olabilir..

1. Adedi

Adedi için en iyi çevrimiçi araçlardan biridir wireframing. Sayfa boyunca sürükleyip bırakmak için görsel bir düzenleyici ve bir varlık kütüphanesiyle çalışıyorsunuz.

Her yeni Moqup projesinde önceden tanımlanmış ızgara, ve öğeleri hizaya sokmanıza yardımcı olmak için parlak mor çizgiler kullanır. Izgara ile tasarım yapmayı çok daha kolay hale getiren harika bir web aracı..

Site, varsayılan olarak kullanıcıyı 300 sayfa nesnesiyle sınırlayan ücretsiz bir plan üzerinde çalışır. Sitenin premium seçenekleri var, ancak aylık ücret ödemek, Adobe araçlarına gitmekten ya da bir defalık Sketch alımından daha can sıkıcı olabilir..

2. Izgara Papr

Grid Papr web uygulaması tamamen ücretsizdir ve tel kafesleriniz için hem genel hem de özel hesaplar sunar. Projeniz için bir ad oluşturun ve herhangi bir bilgisayardan düzenleyebileceğiniz tel çerçeve için kendi benzersiz URL'nizi alın.

Her yeni tel kafes bir ızgara ile geliyor Bu, tüm elemanlara kılavuza geçmenizi sağlar. Özellikler basit, ancak yeterli dakikalar içinde bir lo-fi tel kafes oluşturun. Sadece sayfaya ne istersen sürükle ve yıldız tel kafes oluşturmak için ızgarayı takip edin.

3. Wireframe.cc

Wireframe.cc, tel kafesleme için kullanabileceğiniz en basit ve en az araçlardan biridir. Bir özellikleri dağınıklığı olmayan arayüz Birlikte önceden oluşturulmuş ızgara ve organize araç çubukları. Tuval üzerinde yeni öğeler oluşturmak için basitçe tıklayın ve sürükleyin. Ayrıca çalışmanızı kaydedebilir ve paylaşabilirsiniz.

Bu, isteğe bağlı prim planları ile birlikte ücretsiz sunulan başka bir araçtır. Her plan aylık olarak faturalandırılır, bu nedenle fiyat yapısındaki Moqup'lara çok benzer. Ücretsiz araç, hesabı olmayan herhangi bir bilgisayardan kullanılabilir.

4. alaycı kuş

Alaycı kuş, çoğu tel kafesleme aletinden çok daha fazla özellik sunan başka bir harika seçenektir. Ücretsiz olarak başlayabilirsiniz ancak deneme 7 gün ile sınırlıdır. Bu, bazı kullanıcılar için bir sıkıntı olabilir, ancak araç gerçekten inanılmaz ve tüm tarayıcılarda çalışıyor.

Alaycı kuş gibi UI öğeleri sonsuz bir kütüphane vardır sekmeler, akordeonlar, açılır menüler, video oynatıcılar ve basit metin bağlantıları. Varsayılan ızgara, 960gs ızgara sistemini kullanır, ancak seçim yapabilirsiniz. 12, 16 ve 24 sütun.

Son sözler

Geleneksel veya dijital tel kafeslemeyi seçerseniz seçin, her zaman çıktı kalitesi. Bu tür işleri yaparken öğrenmeniz gereken çok şey var, bu yüzden size en rahatı veren aracı bulun..

Yapılacak en iyi şey ilerlemek sadece tel kafeslemeye başla. En çok neyi sevdiğinizi (kağıt veya dijital) dilediğiniz gibi hissedin ve kendiniz yapın. Bu makaledeki kaynaklar, kendi dijital arabirimlerinizi tel kafeslemeye başlamak için fazlasıyla size vermelidir.

(Kapak fotoğrafı Oykun Yılmaz)