Tasarımcının Araç Seti: İş Akışları, Yazılım ve Web Siteleri

Tıpkı yazılım geliştiriciler, içerik yazarları, pazarlamacılar vb. Gibi, tasarımcıların da günlük işlerle başa çıkmalarına yardımcı olacak iyi bir araç setine sahip olmaları gerekir. Burada yapmaya çalıştığımız şey, işinizi hızlandırmak ve hata ve hata olasılığını azaltmak için bu tür araçları, iş akışlarını ve bunları bir araya getirme şeklinizi özetlemek.

Bilgi toplamak

Yeni bir proje geldiğinde, ilk birkaç saat çoğunlukla bu konu hakkında bilgi toplamakla ilgilidir - müşterinin karşılaştığı sorunlar, hedefleri nelerdir, neleri sevdikleri vb. Bu önemli adımda tasarımcı, daha sonra eğitimli kararlar almak için kullanılacak olan olabildiğince çok yararlı veriler.

Evernote

Evernote harika bir yazılımdır - yalnızca not almak için bir uygulama değildir. Dosyaları depolayabilir, koleksiyonlarda, etiketlerde, gruplarda vb. Birleştirebilir. Güçlü araması sayesinde önceki projelere ve benzerlerine geri dönebilirsiniz. Tabii ki, bunun en güçlü yanı onu nasıl kullandığınızdır. Bazı organizasyonel yaklaşımlar için kaba bir kılavuzları var.

E-posta, Slack, Yakınlaştır…

Sırada başka bir bariz olanı var, ancak onu eklememizin bir nedeni var - bir aramayı, bir mesajı veya bir görüntülü toplantıyı ertelemek bir proje için büyük bir gecikme olabilir. Çoğu zaman, bir ekranı paylaşma ve modellerin, tel kafeslerin, kavramların ve tasarımların üzerinden geçme yeteneği hayat kurtarıcıdır. Bunu asla unutma

İlham Bul

Yeterli bilgi olduğunda, bir sonraki adım ilham toplamaktır - bir uygulama / web sitesi nasıl görünmeli, tarzı nedir, amaç nedir, vb. Kullanılacak yeni teknoloji veya farklı medya türleri için harika fikirler var mı? ? Tüm tasarımcılar solda ve sağda ilham arıyor - web siteleri, kitaplar, dergiler, her şey.

Dribbble, Behance ve benzeri web siteleri

Tam da bu nedenle (ve tasarımcıların övünmesi için) Dribbble gibi web siteleri var. Orada, biz tasarımcılar şu anda karşı karşıya olduğumuz sorunları çözen fikir ve yaklaşımlara göz atabiliriz. Bazen amaç, "hizmet A için genel bir satış sayfası" oluşturmaktır. Bu satış sayfasında tam anlamıyla bir stok fotoğraflı birkaç paragraf olacaktı. Tamamen sönük bir hedef, ama gerçekçi. Renklerin, tipografinin, boşlukların vb. Kombinasyonu biraz daha benzersiz olabilir. Belki farklı düzenler de deneyebilirsiniz! Ve bunun fikri 3-4 yıl önce yayınlanan rastgele bir açılış sayfasından gelebilir. 99Design'ın Keşif sayfası da bakmak için iyi bir yer!

Awwwards

Awwwards gibi siteleri ayrı bir kategoriye koyarız, çünkü bunlar aslında oluşturulmuş ve çalışır durumda görülebilen bir şeyi sergilerler. Dahası, "herhangi bir tasarım çalışmasına" değil, daha çok sanatsal yola odaklanıyor. Çoğu zaman, siteler o kadar ağırdır ki, yalnızca yüksek kaliteli makinelerde kullanılabilir hale gelirler, ancak yine de onlardan ilham alabilirsiniz.

Renk paleti / markalama

Önceden tanımlanmış renklerin olmadığı yepyeni bir yapı için, çalışmaya başlamanın adımlarından biri, yeni siteye uyacak bir şey seçmek olacaktır. Buna yaklaşmanın iki yolu vardır - mevcut bir renk şemasını seçin veya birincil / ikincil rengi ayarlayın ve bunlara bağlı olarak tüm şema etrafında çalışın.

ColorHunt

Color Hunt gibi web siteleri, topluluk yapımı renk paletleri koleksiyonu sağlar. Bunları doğrudan seçip kullanabilir veya başlamak için ana renkleri seçebilirsiniz. Color Lovers kadar güzel değil ama aynı zamanda benzer.

Marka Renkleri

BrandColors'ın biraz farklı bir hedefi var - büyük markaların ve renk şemalarının bir listesini sağlıyor. Orada, yapınıza ilham verebilecek bazı harika gölgeler ve kombinasyonlar bulabilirsiniz. Renkler herhangi bir telif hakkı kapsamında değildir, ancak tavsiyemiz, örneğin Amazon gibi yerlerden tüm renkleri kopyalayıp yapıştırmak yerine onlarla biraz oynamanızdır.

Premium ve Ücretsiz Varlıklar

Sitenin her bir bileşeni üzerinde çalışmak için her zaman yeterli zaman yoktur. Bazen, başka bir tasarımcı / fotoğrafçı tarafından yapılmış bir simge paketi, bir illüstrasyon veya bir stok fotoğrafı kapmak ve bunu doğrudan kullanmak en iyisidir.

• Font-Awesome - Font glifleri biçiminde büyük bir simge koleksiyonu
• Envato Elements - İyi bir fiyata çok sayıda üstün kaliteli varlık.
• Unsplash - Yüksek kaliteli ücretsiz fotoğraflardan oluşan geniş koleksiyon
• Squircley, getwaves, blobmaker gibi SVG üreteçleri
• Adobe Fonts (ücretli) ve Google Fonts (ücretsiz)

Buradaki en iyi ipucu, yukarıda buna benzer birkaç site bulmak ve onları yakınlarda bulundurmaktır, böylece iş için en iyi grafikleri aramak ve bulmak için harcadığınız zamanı ve çabayı olabildiğince azaltırsınız.

Ana Tasarım Araçları

İlk çalışma yolun dışına çıktığında, aslında tasarımın inşa edilmesine gelir. Tasarımcılar için tüm aşamalı yazılımlar, web / uygulama tasarımları oluşturmak için gerekli tüm araçlara sahip olduğundan, wireframing araçlarını atlayacağız.

Figma

DevriX'teki tasarım çalışmaları için temel seçimimiz Figma'dır. Linux, Mac veya Windows gibi ekipteki herkes tarafından erişilebilen tarayıcı tabanlı uygulamaların yanı sıra harika işbirliği yetenekleri sağlar. Daha önce Adobe XD kullanıyorduk, ancak Linux tabanlı üyeler onu kullanamıyordu ve Sketch yalnızca Mac'te kilitlendi.

Illustrator / Affinity Designer

Daha fazla özel çalışma için Illustrator veya Affinity Designer kesinlikle en iyi seçeneklerden bazılarıdır. Geçtiğimiz bir veya iki yıl içinde, özel çizimler web sitelerinin en trend olan bölümlerinden biridir. Büyük, renkli grafikler ekranın üst kısmına hükmeder ve doğru araçlarda daha fazla deneyim kesinlikle yapılacak iyi bir şeydir. Buraya, web sayfalarında varlık olarak kullanılabilecek 3 boyutlu modellerin oluşturulması için Blender gibi 3 boyutlu yazılımlar da ekleyebiliriz.

Photoshop / Affinity Fotoğraf

Photoshop, web tasarımında lider yazılımdı. Özellikle web'e odaklanan tüm bu harika araçlara sahip olduğumuz için bugün bu kulağa garip gelebilir. Ancak Photoshop hala harika bir araçtır ve genellikle bazı şekillerin / formların düzenlenmesi veya kırpılması gereken fotoğraflar olduğunda onu kullanırız.

Sunum

Ancak bu sadece tasarım işi değil - statik bir PNG. Biraz daha hareketli grafiklere ve etkileşimlere odaklanan bazı tasarımcılar. Öğelerin üzerine gelindiğinde, kaydırıldığında veya tıklandığında nasıl davranması gerektiğine dair iyi bir demo, ön uç geliştiricilerin çalışmalarına büyük ölçüde yardımcı olacaktır. Hem Figma hem de Adobe XD bu konuda yardımcı olabilir, ancak ikisi de sınırlıdır.

Adobe After Effects

After Effects, hareketli grafikler için ilk seçeneklerden biri olarak kabul edilir. Tüm eylemleri ve animasyonları temsil etmek için gerekli tüm araçları sağlar. Tasarımcılara burada hatırlatılması gereken iyi bir şey, animasyonların web'in sınırlamalarına uyması gerektiğidir. Hareket bulanıklığı eklemek, yapabileceğiniz bir şey değildir. Bu nedenle, daha gelişmiş animasyonlara girdiğinizde, bunu kesinlikle ön uç geliştirme ekibinizle tartışın veya web'deki animasyonlar ve neyin mümkün olduğu hakkında daha fazla bilgi edinin. Aynı şey UX ve A11y için de geçerli.

Depolama

Figma ve Adobe XD hemen hemen bulut odaklıdır, bu yüzden işinizi kaybetme konusunda endişelenmemelisiniz, ancak her şey böyle değildir - Photoshop, Illustrator dosyaları, indirdiğiniz yazı tipleri, fotoğraflar vb. Hepsi makinenizde bulunur.

Bunları yedeklemek ve her zaman erişilebilir durumda tutmak en iyisidir, özellikle birden fazla makinede çalışıyorsanız. Ve bunları paylaşmak söz konusu olduğunda, çok kolay.

Dropbox

Bunun için en iyi seçim Dropbox olacaktır. Kullanımı kolay masaüstü uygulamasıyla, dosyalarınızı izlemeye devam edecek ve herhangi bir değişiklik yaptığınız anda bunları bulutla senkronize edecektir. Oradan, bunları müşterinizle veya ekibinizle paylaşmak tek bir tıklama uzağınızda.