Özet (TL;DR) @ 2017-12-27T00:00:00.000Z: Web tasarımı yapan herkesin ihtiyacı olabilecek 5 kullanışlı tasarım aracını sizler için derledik. Bu araçlarla çalışarak iş planınızda hızlıca ilerleyebilirsiniz. 1. Figma Figma...
Web tasarımı yapan herkesin ihtiyacı olabilecek 5 kullanışlı tasarım aracını sizler için derledik. Bu araçlarla çalışarak iş planınızda hızlıca ilerleyebilirsiniz.
1. Figma
Figma birden fazla tasarımcının ekip halinde aynı proje uzerinde gerçek zamanlı olarak çalışmasını sağlayan bir ara yuz tasarım aracı. Internet tarayıcısı uzerinde çalışabilen bu araç aynı zamanda Windows, Mac veya Linux'da da kullanılabiliyor. Ne için kullanacağınıza bağlı olarak da ucretli ve ucretsiz surumleri de mevcut.
Ekip arkadaşınızla grafikler paylaşmanızı sağlayan Figma'da **** açılış sayfası wireframelerinden, ikonlarakadar her şeyi uretmeniz mumkun. Var olan tasarıma yeni katmanlar eklemeniz ise oldukça kolay. Üstelik Figma ile tasarımlarınızı masaustu, tablet ve mobil alanlarına uygun şekilde tasarlayabiliyorsunuz.
2. Anime
Web sayfasına yerleştirilen animasyonlar uzun sure boyunca dalga konusu olsa da yazılımcılar onlardan vazgeçmiyor. CSS animasyonları ve geçişleri bu konuda ileriye atılmış en buyuk adımlardan biri ancak daha karmaşık geçişler için bir kutuphaneye sahip olmanız şart. Eğer uygulamalarınızda daha karmaşık geçişlere yer vermek istiyorsanız anime'ye bakmanızda fayda var.
Bu konuda basit bir API orneği verelim;
Bu kod, canlandırmak istediğiniz nesneleri ve animasyonların ozelliklerini tanımlıyor. API ise CSS seçicilerini, DOM oğelerini veya JavaScript nesnelerini kullanarak oğeleri hedeflemenizi sağlıyor. anime ile daha detaylı bir çalışma yapmak için ise kurucusu Julian Garnier'in CodePen koleksiyonuna ya da Github'ına bakabilirsiniz.
3. Affinity Designer
Bazılarının Photoshop Katili unvanını layık gorduğu Affinity Designer ozellikleriyle bir çok web ve grafik tasarımcının aklını başından alıyor. Ayarlanabilen ve tahrip edici olmayan katmanlar bunlardan biri. Boylece gorselleri veya vektorleri onlara zarar vermeden ayarlayabiliyorsunuz. Genellikle Photoshop'ta yuzde 32.000 yaklaştırabildiğiniz gorselleri Affinity Designer'da yuzde 1.000.000 yakınlaştırabilmeniz de mumkun. Özellikle vektorler uzerine çalışanlara hitap eden bu ozelliğin yanı sıra geri al ve ge çmiş ozellikleri de oldukça kullanışlı. Öyle ki; Affinity Designer'da 8.000 adım geriye gidebiliyorsunuz.
Affinity Designer kullananlar, programın ara yuzunden de memnun. Dikkat dağıtan oğeleri sizden uzakta tutmayı amaçlayan program, Photoshop, Illustrator ve Sketch'in en iddiali rakibi!
4. GitHub Notifier
Stacy Goh tarafından yazılan duz ama kullanışlı chrome eklentisi GitHub Notifier, Github'da biri yayın yaptığında, bir yayına yorum yapıldığında, kodu kullanmak uzere indirdiğinde ya da geliştirmek uzere hareket ettiğinde anlık bildirim alabiliyorsunuz. Bu eklentiyle ilgili daha detaylı bilgi almak isterseniz Goh'un blog gonderisini ziyaret edebilirsiniz.
5. Form
RelativeWave tarafından uretilen Form'un tasarıma yaklaşımı oldukça farklı. Bir tasarım aracında bulabileceğiniz katmanlar ve araçlar Form'da yer almıyor. Uygulamayı kullanırken kod ve tasarımın birlikte hareket ettiğini kolayca hissedebiliyorsunuz. Form'da bir grafik yaratmanız pek mumkun değil. Ancak var olan grafikleri aktararak onlara jestler ve etkileşimler ekleyebilirsiniz.
Kısacası Form, tasarımcılara yaptıkları grafiklerin, prototipte neye donuşeceğini gosterirken, muhendisleri de buyuk bir iş yukunden kurtarıyor. Form'un Mac uygulamasının yanı sıra iOS uygulamasını edinerek tasarımlarınızı gerçek zamanlı olarak prototipe donuşturebilir ve onlarla etkileşime geçebilirsiniz.