Basit, ücretsiz ve şefkatli UI uygulaması: Figma
Öğrenme süresi 10, bilemedin 20 dk.
Sketch ve Adobe XD alternatifi olarak kullanabileceğiniz son derece basit ve etkili arayüzler dizayn edip, prototipini çıkarıp ümüğünü sıkabileceğiniz bir uygulama. Figma adresinden kayıt olup “Wireframe-sketch-prototip” karışımlı şahane uygulamayı edinebilirsiniz. İndirme seçeneği de var lakin gerek yok.
“50 mb’lık UI design app mi olur?” diyebilirsiniz, el oğlu yapıyor işte.
İçerisinde Google Material UI kiti mevcut ancak isterseniz kendi sketch uzantılı dosyalarınızı da import ederek custom UI çalışması yapabilirsiniz. “Hayır ben sketch’ten başka YUAY yapamam!” derseniz de şöyle bir karşılaştırma linkimiz de var.
Arayüz olarak neredeyse XD ile aynı. Çalışma mantığı da öyle.
Ancak prototip aşaması için tüm obje ve sembolleri, artboardlar üzerine sürükleyip bırakmaktansa, frame mantığı ile çalışabiliyorsunuz. Böylelikle sayfa içerisindeki her bir nesne, sizin zaten bir sonraki frameinizde kullanacağınız öğeniz oluyor. XD üzerinden tasarım yaparken, önce tasarım aşamasında çiziminizi tamamlayıp, prototipe aktarmak istediğiniz öğeleri sembolleştirerek belirli bir standardizasyonu yakalamaya çalışıyorsunuz ve UI ve refactoring döngüsünün “sketch” kısmı kabusa dönüşebiliyor.
İlk olarak bir sayfa üzerinde frame oluşturmanız gerekmekte.
Ancak custom çerçeve yerine kalıp ekran ve içerik boyutları her zaman için idealdir. Tasarlamak istediğiniz UI için uygun olan boyutu seçip ilerliyoruz. Yiyorsa seçmeyin.
Temel grafik objeleriyle eskiz yapabilir ya da “ben ilüstratorcuyum aga!” derseniz de kendi svg dosyalarınızı pek güzel import edebilirsiniz.
Aynı zamanda oluşturduğunuz tüm sembolleri Android, iOS ve CSS kodlarına dönüştürebilirsiniz. CSS exportlama iyi hoş ama amatör eğlendirir.
Frame oluşturduktan sonra sketch kısmına geçebilirsiniz. Bir web applikasyonunda ya da web sayfasında olması gereken temel bileşenleri (header, sidebar, navbar, footer vs.) çizmekle başlayıp daha sonra tasarım aşamasına geçmek daha faydalı.
Header kısmı için navbar çizelim.
Açılır kapanır hamburger menu için yer yapalım.
PNG formatlarındaki iconumuzu import ettik. Arkaplana icondan büyük boş canvas çizerek iconları yerleştirmeye alışırsanız, prototip aşamasında butonlara sayfa hedefi verirken hem daha kolay olur hem de prototipi mobil cihazlarında test eden kullanıcıların parmakları kocamansa daha rahat basabilirler.
XD’deki en elle tutulur özelliklerden biri olan imaj yerleştime burda da mevcut. Yapılması gereken tek şey boş bir grafik çizmek ve herhangi bir imaj formatını objeye import etmek.
İkinci bir sayfada vektörel logonuzu tasarlayabilirsiniz. SVG olarak daha sonra CSS’de de kullanabilirsiniz. Ama öyle çok da şey beklemeyin.
Son olarak butonların hedeflerini belirliyoruz. Daha kompleks yapıdaki applikasyonlar için sayfa adlandırmalarını detaylı bir şekilde yazmanız iyi olabilir. Page1, page2 diye yaparsanız olmaz, yapmayın. Sağ tıklayıp şu sayfaya gitsin diye bir özellik bulamadım çünkü ama varsa da bilemiyorum. İnşallah yoktur.
En hoşuma giden özelliği ise canlı prototipte anlık mockup yapması. Belirlediğiniz frame yapısına uygun cihazları kullanabilirsiniz. Renk tercihi falan da var. Utanmasa telefonun camına ekran koruyucu taktıracak.
Ahanda böyle.
Buradan prototipi bızıklayabilirsiniz.
