UX Designer’ın Çizim İçin En İyi Arkadaşı an

Verimlilik dolu bir araç kutusu

Şimdiye kadar, Sketch'in piyasadaki en iyi tasarım aracı olduğu konusunda hepimizin hemfikir olduğunu düşünüyorum. Şimdiye kadar karşılaştığım en basit etkileşim modellerinden birini sunmanın yanı sıra (2014'te ilk MacBook'umu aldığımda, Fireworks'ten Sketch'i tam anlamıyla bir gecede değiştirdim… Windows günlerimde karanlık bir zamandı, ama kesinlikle karakter oluşturdu).

Sketch’in benimsenmesinin bir parçası da, diğer 3 parti uygulamalarla entegrasyon kolaylığı ve eklentilere olan açık silah yaklaşımı nedeniyledir.

Bir araç ve eklenti denizi var. Bu ayrıntılı bir liste olmayacak (bunun için google.com'u kullanabilirsiniz). Bunun yerine, UX Tasarımcıları için harika bir araç karışımı olarak düşündüğüm şey (yani, tasarımcılar daha fazla ölçeklenebilirlik, süreç, iletişim ve daha az görsel deneme ve animasyon üzerine odaklandılar).

Daha Hızlı ve Daha Verimli Bir Çizim Yapın

Bu, eklentilerin büyüsü. Bazı eklentiler kısayol tuşlarıyla güzel bir şekilde bütünleşir, diğerleri ise Sketch içinde tam teşekküllü arayüzlere sahiptir.

Sketch Runner Roy van Rooijen (ve ekibi!)

Sketch için Spotlight'a benziyor. Kısmen daha ileri düzey kullanıcılar için bu, kısmen komut satırı stili arabirimlerinin ne yaptıklarını bilen insanlar için olduğu kadar, aynı zamanda düzene soktuğu eklentiler ve sembol işlevselliği uzmanlara yönelik olduğu için. Bununla birlikte, en temel seviyede gezinme stillerini ve simgeleri, clunky Sketch açılanlarından çok daha hızlı hale getirdiğini söyledi.

Rodrigo Soares'ten Katmanları Yeniden Adlandır

Bunu her zaman kullanırım. Toplu katmanları yeniden adlandırın veya bulun ve değiştirin. Sonsuz bir şekilde organize edilmiş tasarımcı için bu bir kullanım şartıdır.

InVision tarafından zanaat

Örnek verileri almak için esas olarak Craft Data'yı ve örnekler'i InVision'a itmek için Craft Sync'i kullanıyorum, böylece Inspect (daha sonradan daha fazlası) kullanarak görüntülenebilirler.

Nudg.it Anthony Collurafici tarafından

Arabiriminiz için 8 piksellik bir ızgara kullanıyorsanız (ki bu gerekir), o zaman kesinlikle bu araca ihtiyacınız vardır. Küçük ve büyük artımların Eskizde dürtmek için ne olduğunu değiştirmenize izin verir (varsayılanlar sırasıyla 1 piksel ve 10 pikseldir). Bir nesneyi 8 piksel sağa kaydırmak için ÜSTKRKT-Ok Sağ, ardından Sol Ok ve Sol Ok tuşlarını kullanacağım günler geride kaldı. Kroki'de beni bundan çok sinir bozucu tıklamadan kurtarmış olan daha basit bir araç düşünemiyorum.

Anima App tarafından Auto-Layout

Sketch gruplandırma için yeni davranışlar yayınladığında, yanıt verme yeteneğine sahip olmak isteyenler için bir cankurtarandı. En büyük dezavantajı bu kontrolün davranışlarının biraz belirsiz olmasıdır. Otomatik Düzen, yanıt veren düzenler oluşturmanıza yardımcı olan kullanımı kolay bir eklentiyle düzeltildi

Paydaşlarla Paylaş

Marvel tarafından Marvel

Bu hızla yeni favori haline geliyor. Herkes bu noktada InVision'ı tanıyor, bu yüzden bu uygulamaya odaklanacağız. Buradaki bazı önemli farklılıklar, tasarımlarınızı bir vitrinde halka açık hale getirebilir veya diğer tasarımcıların çalışmalarına bakabilirsiniz. Aynı zamanda tvOS uygulamalarını göstermek için bir AppleTV uygulaması vardır. Birçok tasarımcı hala bu ortamda tasarlamıyor, ancak hızla değişiyor.

Bu projeye buradan göz atın.

Daha hızlı geliştirme anlaşması

Bu, son 18 ay içinde uzun bir yol kat etti. Şimdi, biri diğerinden çok daha olgun olan iki uygun seçeneğiniz var. Ayrıca, kendi tasarımlarınızı kodlama seçeneğiniz de vardır; bu, tüm tasarımcılara ne kadar aptal olduğumuzu söyleyen karışık makaleler yazmanıza olanak tanır.

Zeplin Zeplin tarafından

Ekibi ve bu uygulamanın sahip olduğu desteği seviyorum. Özet olarak, UI spec öldürdü. Geliştiricilere sunmak istediğiniz Sketch'den çalışma yüzeylerini dışa aktarın ve paylaşılabilir bir URL ile senkronize edin. Geliştiriciler herhangi bir grafiksel öğeye tıklayabilir ve karşılık gelen CSS ile hemen hemen tüm özellikleri (kenarlık, renk, yazı tipi vb.) Alabilir. Zeplin akıllıca bir UI tasarımından tahmin edilmesi zor olan HTML'den uzak durur.

InVision InVision tarafından kontrol

Bu, Zeplin'in neredeyse aynı işlevselliğine sahiptir ancak InVision prototipleme ürününün bir uzantısı olarak çalışır. Bu pakete uyması çok güzel, ancak sizi kaynak Sketch özelliğiyle paylaştığı konusunda sağ üstteki indirme varlıkları düğmesiyle paylaştığı konusunda uyarıyorum.

Kullanıcı arayüzünüzü canlandırın

Verilmesi gereken en önemli karar animasyonunuzu ne kadar karmaşık yapmak istediğinizdir. Burada basit ve daha gelişmiş için iki seçenek listeliyorum. Ayrıca, After Effects ve Flash (lol jk) gibi tam teşekküllü bir animasyon yazılımını ürün tasarım iş akışına iyi bir şekilde entegre etmediğimi de unutmayın.

Daniel Hooper tarafından ilke

İlke, tasarımınıza basit animasyonlar ve geçişler eklemek için Eskiz benzeri bir arayüzdür. Katmanlarınızın gruplandırılmasını ve isimlendirilmesini gerektirir, çünkü bu isimlerle Prensipte içe aktarılırlar ve nesneleri kontrol etmek iyi isimlerle çok daha kolaydır… İPUCU İPUCU.

FramerJS Framer Team tarafından

Çok fazla animasyon yapmadığımdan beri bununla fazla oynamadım, ancak Principle'den çok daha güçlü. Daha zor çünkü gerçek kodu yazmanız gerekiyor. Ama harika, çünkü gerçek bir kod yazmalısın.

Kaynakları Yönet

IconJar

Piyasada İsim Projesi'nden Lingo gibi başka alternatifler de var, ancak bu daha ucuz ve cazibeli bir gibi çalışıyor. IconJar, simgeleri kolayca yönetmenize olanak tanır ve bonus olarak fontları bırakabilirsiniz ve her glif için SVG’ler oluşturur. Bu, acı verici bir sayfa kullanmak yerine bir simge yazı tipini bırakıp tüm karakterlerini tek tek semboller olarak alabileceğiniz anlamına gelir. Gittikçe daha fazla simge tasarımcı, ikonlarını kutudan çıkardığı IconJar ile uyumlu hale getiriyor, bu da büyük ikon setlerinizin çaba göstermeden organize edileceği anlamına geliyor.

Basitçe Kaynaklarınız

Geçmişte uygulama tasarımında da belirttiğimiz gibi, çoğu UX tasarımcıları, özel görsel varlıkların lüksü olmadan uygulamalar oluşturur. Bu liste, kaynakların denizi ücretsiz kullanabileceğiniz küçük bir kümeye indirilmesine yardımcı olacaktır.

Simgeler

  • Google Materyal Simgeleri - MD projeleri için ana set budur.
  • Nova Icons - MD hissi veren simgelerden oluşan harika bir eklenti.
  • Nucleo - Size yarıçap, renk ve boyut üzerinde kontrol sağlayan yerel bir uygulama olarak gelen çeşitli ve büyüyen simgeler kümesi.
  • Magicons - daha küçük bir set ama çoğu uygulama için bir üs olarak harika.

Yazı

UI Design için yazı tiplerini seçmek tam bir roket ameliyatı değildir çünkü sadece çok yönlü ve okunaklı, düğme, etiket, başlık vb. Üzerinde çalışmak zorunda olan okunaklı bir sans-serif seçmeniz gerekir. Açıkçası, tasarıya uygun çok fazla ince yazı tipi var. Aşağıdaki ücretsiz Google fontları, projelerinizin çoğu için genellikle işe yarar.

  • Roboto - bu harika bir yazı tipi ama Material Design'a bağlı, bu yüzden MD tabanlı projelerin dışında kullanmak zor olabilir.
  • Açık Sans - Demet çok yönlü yazı tipi. Bu yıllardır moda olmuştur ve yavaşlama belirtileri göstermez. Tüm UI ihtiyaçlarınız için bolca ağırlığa sahiptir.
  • Lato - Bunu her tür tasarım için kullanmıyorum, çünkü her zaman iyi sonuç vermeyen bazı ince vuruşları var. Yine de zarif ve UI kontrolleri için kullanılan farklı bir font içeren başlıklar için harika olabilir.
  • Kabin - Neredeyse Açık Sans kadar çok yönlü ve neredeyse her yerde değil.
  • Montserrat - çok yönlü değil ama genellikle tel kafes için kullanıyorum. Yumuşak bir his veren konseptler ve uygulamalar için mükemmel bir seçimdir.
  • Nunito - Google'dan ilk bakışta Proxima Nova Soft'un ücretsiz bir sürümü gibi hisseden yeni bir font
  • Jaldi - UI'nıza biraz yetenek katmanız için yeterli stil. Aynı zamanda küçük boyutlarda iyi işler.

Fin. Umarım, bunun ayrıntılı olmadığı açıktır. Bunlar, UX Elektrikli El Aletleri üzerinde çalışırken, Sketch için en sevdiğimiz yardımcı uygulamalardır. Daha fazla eklememizi istiyorsanız, eklentinizi veya uygulamanızı 65.000 YTL veya daha fazla yeni Tesla maliyeti için deneyeceğiz.

Medium'da olmadığımda, sizi daha iyi ve daha verimli bir tasarımcı yapmak için UX Power Tools'daki Çizim araçları üzerinde çalışıyorum. Twitter'da bizi izleyin @powertools. Ruh sizi hareket ettirirse beni de takip edin!