Web için Framer ile Prototipleme
tasarlayan düşünebileceğiniz her şeyi prototipleyebilen gerçekten güçlü bir araçtır ancak Framer's Gallery'ye bir göz attığınızda hızlıca bir şey fark edeceksiniz:
Bunların 54 örneğinden 48'i Apple Watch, 4'ü iPad, 1'i Apple TV olmak üzere 4'ü. Framer, 'geleneksel' web / masaüstü tasarımı için bile kullanılıyor mu?
Kesinlikle.
IBM Design'da tasarımlarımın çoğu kurumsal masaüstü web uygulamaları için üretildi. Çoğu tasarımcıyla birlikte çalışırım kroki (ben dahil). Bu Eskiz dosyaları daha sonra benzeri bir araç kullanılarak prototiplenir InVision veya kodda yeniden oluşturulmuş ve prototipli. Tasarım ekibinde bir ön geliştirici olarak, hem prototip tasarladığım hem de kodladığı benzersiz bir konumum var.
Framer'ın temellerini öğrendikten sonra, onu iş akışımma eklemeye karar verdim ve tasarım sürecimi gerçekten geliştirdi. En güçlü tek parça, statik bir Sketch dosyasını Framer'a aktarabilmenin ve nispeten kısa bir sürede gerçekçi, interaktif bir prototip haline getirebilmesinin mümkün olduğunu gösteriyor.
Bununla birlikte, kodun tasarımlarını yeniden oluşturma sürecinin başında değerli zaman harcamak zorunda değilim. Paydaşların ve kullanıcıların önündeki fikirleri daha hızlı alabilirim. Proje daha katı olduğunda kodlamayı daha sonra saklayabilirim.
Framer'ı birkaç ay kullandıktan sonra öğrendiğim bazı şeyler:
Prototiplerinizi planlayın ve düzenleyin
Bir projeye başlamadan önce birkaç şeye karar verdim:
Neyi başarmaya çalışıyorum?
Prototip, kullanıcı testi için mi, yoksa kavramsallaştırılmış bir fikir edinmek mi, fikrimin üzerinden geçebilmek için ya da testten bilgi edinmek için gereken minimum iş miktarı nedir? Sadece tembel olmuyorum;), bu gerekli olan gerekli etkileşimleri, animasyonları ve ekranları kararlaştırmaya yardımcı olur.
Tasarımınıza harcadığınız zaman ne kadar artarsa o kadar çok bağlanırsınız. Daha fazla ekli, gerekli değişiklikleri yapmak için daha az olasıdır.
Yukarıdaki prototipi örnek olarak kullanalım.
Yeni bir proje üzerinde çalışıyordum ve eyaletler arasındaki 'karmakarışık' animasyonlara benzeyen kart tabanlı bir düzenin nasıl görüneceğini araştırmak istedim. Başlangıç noktası olarak bunu yapmak ve kullanmak istediğim temel fikri çizdim.
Eğer sen Bir göz at bitmiş prototipte, her adımda sadece ilk kart tıklanabilir. Geri dönmek için hiçbir yol yoktur, hiçbir durumda, son ekranda içerik tamamlanmış değildir ve neredeyse mükemmel piksel değildir. Onlardan hiçbiri fikrimi elde etmek için gerekli değildi, bu yüzden onlar da dahil olmak üzere zaman harcamadım. Framer hemen hemen her şeyi yapabilir, ancak bu sizin prototipinizde her şeyi yapmaya çalışmanız gerektiği anlamına gelmez.
Andreas'ın müthiş ViewController modülünü kullanarak UI akışları oluşturun
Kullanabilirsiniz ViewController Sketch'de doğrudan UI akışı oluşturmak için kroki eklentisi. Kod yazmak zorunda kalmadan tasarımlarınızı tıklanabilir prototiplere dönüştürün.
Bu, çalışmalarınızı paydaşlara sunmak için harika ve yapmak gerçekten çok basit. Bir Sketch dosyasında bir düzine çalışma yüzeyi veya bir .pdf ile yürümek yerine, etkileşimli bir prototip sunabilir veya barındırılan Framer proje URL'nizi paylaşabilirsiniz.
Gerçekleştirmeye çalıştığım şeye bağlı olarak, gerçekçilik ve etkileşimin ek bir dokunuşu için vurgulu efektler, animasyonlar ve metin girişleri gibi bazı kodlar yazabilirim. Yine bir tasarımcı olarak fikrinizi doğru bir şekilde uygulamak ve uygulamak için neyin gerekli olduğuna karar verin.
Çıkış yapmak Andreas'Sketch ve Framer makalesini kullanarak UI akışları oluşturun eklenti hakkında daha fazla bilgi edinmek için.
mikro etkileşimler
Mobil prototiplemenin Framer ile gerçekten çok popüler olmasının birkaç nedeni olduğunu düşünüyorum, bunlardan biri mikrointeraksyonların mobil cihazlarda çok daha yaygın olduğunu gösteriyor. Ama bu şekilde olmak zorunda değil! Web için tasarımcıların işimizi daha fazla harekete geçirmede daha iyi olabileceğini düşünüyorum ve Framer bu konuda gerçekten çok iyi.
Bu, ekibimde zaten bir tasarımcının yaptığı bir Sketch dosyasını kullanarak yaptığım hızlı bir etkileşimin basit bir örneğidir. Bunun gibi etkileşimleri keşfetmek birkaç dakika alır.
Tabi, ama neden sadece kod değil?
Bir ön geliştirici olarak, projelerimin çoğu sonunda kodlanmış bir prototip ile sonuçlanacak. Daha sonra bu prototipi, ön uç kodunu ürüne yazıp, yan mühendislikte çalışmak için bir temel olarak kullanıyorum. Öyleyse neden sadece başlangıçtan kod değil?
Daha önce de belirttiğim gibi, hız. Ben ya da başka bir tasarımcının Sketch'den Framer'a ithal ederek yaptıkları fikirleri çabucak anlatabilirim. Fikirleri araştırdığınız ve geri bildirimleri hızla uygulayacağınız tasarım sürecinin ilk kısmı için mükemmeldir. Kodda oldukça hızlı hareket edebilirim, ancak Framer onu bir sonraki seviyeye taşıyor.
Bir başka sebep ise özgürlüktür. Framer'da yazılan tüm kodlarımın atılacağı basit bir gerçek aslında harika. Aksi halde yapamayacağım şeyleri denememe ve kodumla biraz daha gevşek olmamı sağlıyor. Bir fikri keşfetmek için 15 dakika harcayabilir ve ardından herhangi bir pişmanlık duymadan çöpe atabilirim.
Bazı ipuçları ve püf noktaları
Siz (veya birlikte çalıştığınız tasarımcı) muhtemelen Sketch dosyalarını biraz farklı bir şekilde kurmak zorunda kalacaksınız.
- Katmanlarınızı gruplandırın. Bir grupta olmayan katmanlar dikkate alınmaz
- Grup adlarınızda boşluk kullanmaktan kaçının
- Sketch'deki gizli katmanlar hala içe aktarılıyor ancak görünürlükleri false olarak ayarlanacak.
- Çalışma yüzeyleriniz için basit, benzersiz isimler oluşturun
- Çalışma tablonuzun sonundaki bir eksi (-), Framer'a içe aktarılmasını engeller.
Sketch'deki herhangi bir katmanı statik kalacak şekilde düzleştirin. Bu, projenizin yüklenme süresini artıracaktır, bu da özellikle daha büyük bir prototip oluştururken harikadır. Sketch'deki katmanın sonuna bir yıldız işareti (*) ekleyerek bunu yapabilirsiniz.
Ekibinizdeki tasarımcılarla, Sketch dosyalarının iş akışına en uygun şekilde nasıl ayarlanacağını ve takım için en iyi olanın nasıl yapılacağını öğrenmek için biraz zaman ayırmaya değer.
Bir Sketch dosyasını Framer'a içe aktardığınızda, şöyle bir şey görürsünüz:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Sketch'i $ ile değiştirin ve şimdi Sketch katmanlarınıza referans vermek için $ kullanabilirsiniz, yüzlerce kez kelimelerinizden yazmaktan kendinizi kurtarın:
$ = Framer.Importer.load("imported/design@1x")Normal bir fare işaretçisi için 'Normal İmleç' snippet'ini kullanın:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Tasarımlarımı @ 2x'e aktarıyorum ve daha sonra onları küçültüyorum, bu yüzden fazladan gevrekler. Bu yukarıda belirtilen ViewController modülü ile birlikte görünmüyor.
Framer.Device.contentScale = .5Çizim ve Çerçeve, web için farklı varsayılan çalışma yüzeylerini / aygıtlarını kullanır. Sketch 1440 × 1024 kullanırken Framer 1440 × 900 kullanır. 1440 × 900'ü tercih ederim. Yükseklik için 900 pikselle sınırlı olduğunu düşünmeyin, kolayca Framer'da kaydırılabilir sayfalar oluşturabilirsiniz.
[- Bu yazı aslen Ortada yayınlandı , yazarın izniyle yeniden yayınlandı -]