Tüm tasarım ilhamlarınızı düzenlemenin yeni bir yolu

Ürün tasarımcıları ve dijital sanatçılar gibi çoğu yaratıcı kişi Pinterest'e aşinadır. İnsanlar, diğer şeylerin yanı sıra web sitesi tasarımları, resimler ve mimari için ilham panoları oluşturmak ve toplamak için kullanıyor. Pinterest uzun zamandır hayatımın bir parçası ve ilk koleksiyonum 2012 yılına dayanıyor. Ancak kariyerim ilerledikçe ve ürün tasarımcısı oldum, pek çok yönü benim zevkime uymadığı için araç benimle daha az alakalı hale geldi. UI tasarımcısı kişisi. Pinterest'e takılıp kalmak yerine, tasarım ruh panomu ve kaynaklarımı düzenlemek için Eagle adlı gizli bir araç buldum. Bu gönderi, Pinterest'i bırakıp tüm profesyonel iş akışlarımı Eagle uygulamasına taşımamın yolları ve nedenleri etrafında dönecek.

Pinterest neden ürün tasarımıyla alakalı değil?

Şu anda bir Fintech mobil ve web uygulamasının tasarımı üzerinde çalışıyorum. Sıfırdan başladığım için bir tasarım sistemi kurmalı, pano tasarlamak için yüzlerce ilham kaynağı araştırmalı ve yazı tipi seçeneklerini, renk paletlerini, ikonografi örneklerini, web sitesi tasarımlarını, bildirim seslerini ve mobil kalıpları araştırmalıyım. Farklı kaynak türleri içerdiğinden, Pinterest'te tam bir ilham listesi oluşturmam imkansız olurdu. Yukarıda bahsettiğim her şeyi yapmak için, belirli bir dosya biçimini anlayan ve farklı kaynaklardan ilham alabilen bir araca ihtiyacınız olacak.

İlham toplamak için çok basit bir araç olduğu, ancak renkleri, yazı tiplerini, sesi ve vektörü anlamanın gerekli olduğu gelişmiş kullanım durumlarında çalışmadığı için Pinterest burada çalışmayı durdurur. Bu nedenle, araştırmama ve kullanım durumuma daha uygun bir araç bulmaya karar verdim - Eagle .

Hadi başlayalım!

Araçlar söz konusu olduğunda , hem Eagle hem de Pinterest, ilham toplama ekosisteminde hak ettikleri yere sahiptir. Ne demek istediğimi yazının sonunda açıklayacağım. Ancak, bir ürün için tasarım ilham panosu oluşturmak, aracın Pinterest'in üstesinden gelemeyeceği gelişmiş kullanım durumlarını ele almasını gerektirir. İnşa etme ve geçiş sürecimi, Eagle'ı neden ve nasıl kullandığımı 10 nedene ayıracağım. Umarız bu nedenler, ilhamlarınızı düzenlemek için yakında çıkacak olan bu aracı keşfetmeniz için sizi motive edebilir.

01 • İlhamların hızlı içe aktarılması

İlhamlarımın çoğu birbiriyle iletişim kurmayan Dribbble , Behance ve Pinterest'te ayrı klasörlerde saklanıyor . Bu nedenle, bu kaynakların her birinden görüntüleri manuel olarak Miro'ya indirmek zorunda kalıyorum. Ancak Miro'nun performansı aynı anda yüzlerce görüntüyü işleyemediği için bir süre sonra düşüyor. Eagle uygulaması, yukarıda açıklanan akıştaki en acil sorunlardan ikisini çözmeme yardımcı oluyor —

1. Tek bir yerde depolamak için Pinterest, Behance ve Dribbble'dan görüntülerin toplu olarak çekilmesi. Bu bana zaman kazandırıyor ve aynı zamanda tüm ilhamlarımı tek bir yerde tutmama yardımcı oluyor.
2. İşlenecek çok sayıda görüntü olduğunda araç bozulmaz. Aslında, yoğun kullanımım sırasında, bunun için yapılmış gibi geliyor.

Behance gibi bazı sitelerin, insanların resimleri indirmesini engelleyen farenin sağ tıklamasını engellediğini biliyor muydunuz ? Neyse ki, Eagle-app bu JavaScript kısıtlamasını aşıyor.

02 • Topluluktan Kaynaklar

Yaklaşık beş yıl önce Sketch'ten taşındığımda, Figma'daki Topluluk desteği, bugüne kadar bile diğer tasarımcılardan bir şeyler öğrenmeme, diğer tasarımcılar tarafından oluşturulmuş ücretsiz kaynakları indirmeme ve asla şahsen tanışamayacağım insanlarla etkileşim kurmama yardımcı olan önemli bir özellikti. İnsanların Pinterest'i kullanmalarının sebebinin, başka insanların resimlerini basitçe iğneleyip kendi ilham panolarını oluşturabilmelerinin tam da bu nedenle olduğunu söyleyebilirim. Eagle ile, yalnızca ilham kaynağı değil, kaynakları toplamak için dikkatimi Topluluğuna çevirebilirim. Örneğin, ürün tasarımı UI çalışmam için yazı tiplerini, simgeleri ve çizimleri indirebilirim.

03 • Görüntü etiketleme ve filtreleme

Moodboard'umda mega tonlarca ilham topladıktan sonra görüntü sıralamak bir kabus. Eagle, tüm kaynaklarımı birden fazla anahtar kelimeyle etiketlememe izin veriyor, bu da en alakalı resme daha önce hiç olmadığı kadar hızlı ulaşmamı sağlıyor. Örnek vermek gerekirse, Revolut'tan anlık görüntüler toplamam gerekiyor. Anlık görüntüler şu şekilde kategorize edilebilir:

1. Pazarlama/Tanıtım kampanyaları
2. Web sitesi kıvrımları
3. Uygulama kalıpları
4. App Store ve Play Store görselleri

04 • Renk paletine göre avlanma

Eagle'ta Fintech moodboard'umu oluştururken, aynı veya benzer mavi renge sahip görseller bulmak olağanüstü derecede faydalıydı. Fintech cüzdan uygulaması dünyasında mavi aşırı kullanılan bir renk ve ilham aldığım tonlarca uygulama mavi rengi kullandı. Benzer tonda mavi renklere sahip tüm görüntüleri bulmam çok uzun sürerdi. Eagle, renkleri kullanarak görüntüleri ayırt edebilir çünkü her görüntüyü filtreler için kullanılabilecek altı renkli bir palete ayırır.

Eagle'ın renk paleti özelliği, her bir renk için HEX, RGB, HSL ve CMYK değerlerini dikkat çekici bir şekilde yakalar ve bunları başka bir tasarım aracında daha sonra kullanmak üzere panoya kopyalamanıza olanak tanır.

05 • 90 dosya biçimi türü için destek

Eagle kitaplığıma bir dizi kaynak ve varlık kaydettim ve aracın desteklediği dosya türleri aralığını görmek beni hayrete düşürdü. Her tür görüntüyü, 3B nesne tabanlı varlıkları, Fig/PSD/Ai gibi araç tabanlı dosyaları, video, ses, yazı tipi, görüntü-RAW ve XLS ve DOC gibi belge tabanlı biçimleri içeren 90 dosya türünü işleyebilir . . Size bir örnek vermek gerekirse, Figma artık Adobe'ye ait olsa da AI, EPS veya PDF varlıkları gibi Adobe vektör varlıklarını Figma'da öylece açıp önizleyemiyorum. Çok çeşitli dosya türlerini destekleyen birleşik bir çözüm, her reklam öğesi için rakipsizdir.

06 • Canlı bağlantı kaydetme

Açılış sayfaları tasarlanırken, web bağlantılarının kaydedilmesi önem kazanır. Belirli bir bölümün anlık görüntüleri, onu pek kesmeyen sıradan bir çözümdür. Genellikle, hem canlı bağlantı kaydına hem de web sitesinin anlık görüntüsüne ihtiyacım var. Chrome eklenti tabanlı araç — FireShot , tüm web sitesini yakalamak için harika bir seçenektir ve Eagle ile birlikte web sitesinin canlı URL'sini de kaydedebilirsiniz. Eagle'ın URL kaydetme özelliğinin en iyi yanı, web sitesini aracın içinde açmasıdır; bu, dikkat dağıtıcı unsurları azaltmak ve beni iş akışımın içinde tutmak için mükemmeldir.

07 • İç içe klasör yönetimi

Benzer kaynaklardan görüntüler toplarken bir üst-alt ilişkisi oluşturmak için bir klasörü diğerine bağlamak, bilgi hiyerarşisi ve yönetimi için harikadır. Pinterest maalesef tahtaların iç içe geçmesini desteklemiyor ama Eagle destekliyor. Kullanım durumum için, tüm Playstore ve Appstore görüntülerini ayrı ayrı ayırmam ve ayrıca her uygulama için uzun bir uygulama önizleme listesi yakaladığım ayrı klasörlere sahip olmam gerekiyordu. Kullanıcının Eagle uygulamasını kullanarak gerçekleştirebileceği tüm klasör işlemlerini açıklayan ilgi çekici bir destek bağlantısı buldum .

08 • Kopyaları Bulma

Her tasarımcı, aynı görüntüyü bazen bilerek ve çoğu zaman yanlışlıkla birden fazla panoya iki kez ekledikleri bu sorunla karşı karşıya kalırdı. Alıştırmanın ortasında, farklı klasörlerde birbirinin aynı kopyası olan 67 resim bulmak için tüm kitaplığımı taramaya karar verdim. Bu keşfi yayınlamak için on beş dakika harcadım, ilgili olmayan kopyaları manuel olarak sildim ve bazılarını ileride silmemek için bir notla birlikte sakladım.

09 • Panodan çalışır veya sürükleyip bırakın

Deneyimlerimden zaten anlamış olabileceğiniz gibi, iyi tasarlanmış bir ruh hali panosu oluşturmak zorlu bir iştir. Oldukça sıradan bulduğum resim adlarını, açıklamaları ve diğer değerleri doldurmak için çok çalışma ve doldurma gerektiriyor. Genellikle 2-3 saatimi yalnızca birden fazla kaynaktan ekran görüntüsü alarak ve ardından bu ekran görüntülerini mantıksal klasör yapılarında düzenleyerek harcıyorum. Ekran görüntüsü sayısı 200'den fazla olabileceğinden, sürükle ve bırak özelliği kullanışlıdır. Pinterest'in aksine, 200'den fazla düzenlenmemiş görüntüyü Eagle'a sürükleyip bırakabilir ve onları olduğu gibi tutmayı veya daha sonra ihtiyacım olduğunda düzenlemeyi seçebilirim. Uygulama beni dosyalarımın her birini adlandırmaya zorlamıyor. Genelde kategorize edip toplu olarak yeniden adlandırırımve 10 dakikadan daha kısa sürede etiketleme. Ayrıca, Figma veya Confluence gibi bir araçla uğraşırken harika olan panomdaki görüntüleri doğrudan kopyalayıp yapıştırabilirim.

10 • Bir tasarım sistemi ilham panosu için harika

Sonuç olarak, yukarıda bahsettiğim gibi Eagle, bir ürün tasarımı ilham panosu oluşturmak için harikadır. İşte toplama aşamasında moodboard klasör yapımın nasıl göründüğü:

Sonunda çok daha fazla sadece mobil ve web ilhamı topladım. Toplam paket, yıllık fintech raporlarından, renk paletlerinden, uygulama akışlarından, tasarım modellerinden, Playstore/AppStore ekran görüntülerinden, bildirim seslerinden, logolardan, simgelerden, çizimlerden ve gerçek web sitesi URL koleksiyonlarından oluşuyordu.

Bir şey daha var…

Eagle ile başarabileceğim tüm harika şeylere rağmen, geliştirilebileceğini düşündüğüm bir nitpick var. Eagle, öncelikle yerel olarak kurulan istemci tabanlı bir araçtır. Bu, resimlerime bir mobil cihazda göz atamayacağım ve ilhamlarıma iPad gibi yalnızca çevrimiçi olan bir cihazdan erişemeyeceğim anlamına geliyor. Hala tüm kitaplığımı Google Drive veya Dropbox'a yedekleyebilirim, ancak dizüstü bilgisayarıma erişimim olmadığında onları görüntüleyemiyorum. Bu bir anlaşmayı bozmasa da ideal değil. Yeni bir projeye başlarken, ara sıra çok fazla ilham toplamaya takıntılıyım, bu da işe gidip gelmek gibi aktiviteler yaparken görüntü toplamaya eğilimli olduğum anlamına geliyor.

Umarım Eagle, gelecekteki sürümünde mobil tabanlı bir deneyimi destekleyebilir. Büyük dosya türleriyle uğraşırken çözmek özellikle zor olabilir, ancak çevrimiçi sürümde yalnızca PNG, JPEG, WEBP, GIF, MP3 ve MP4 kaynaklarını göstermenin bir yolu ve diğer karmaşık dosya türlerinin önizlemesi engellenebilir. Bu çözüm, çok çeşitli görüntü tabanlı koleksiyonları kapsayabilir.

Bu soruna acil bir çözüm olarak, hareket halindeyken fikirleri ve çözümleri yakalamak için Pinterest veya Behance gibi mobil özellikli bir araç kullanmaya devam ediyorum. Daha sonra, tüm fikirleri birleştirmemi sağlayan tüm bulut depomu Eagle'a çekiyorum.

bitiş notları

Günün sonunda Eagle, diğerleri gibi bir araçtır. Boktan fikirleri filtreleyemez veya otomatik olarak mükemmel bir uygulama oluşturmamıza yardımcı olamaz. Yaptığı şey, verimliliğimizi artırmak ve yürütme hızını artırmak için iş akışını geliştirmektir. Fikirlerimi ve bilgilerimi sistematik olarak organize etmek ve tüketmek için farklı iş akışları ve araçlar arasında gidip gelmek için tonlarca zaman ve çaba harcadım. Keşfime bunu düşünerek başladım ve Eagle uygulamasını kullanarak tam olarak bunu başardım . Karmaşık bir varlık grubunu düzenlemenize ve kaynaklarınız üzerinde bir ton pratik işlem gerçekleştirmenize yardımcı olan akıllara durgunluk veren bir araç arıyorsanız, başka yere bakmanıza gerek yok.

Bu kısa ama umarım anlayışlı okumanın sonu budur. Sonuca ulaştığınız için teşekkürler. Umarım bundan bir şeyler kazanmışsındır.

‍ İçeriğime katılın veya LinkedIn , Twitter , Figma , Dribbble ve Substack'teki DM'lerime girin . Düşüncelerinizi ve geri bildirimlerinizi yorumlayın veya bir sohbet başlatın!