Experience Design üzerinde hazırladığınız GUI tasarımlarınızı farklı ortam veya platformlarda çalışan yazılımcı ve geliştirme ekipleri ile paylaşabilirsiniz. İşin güzel yanlarından birisi de seçili nesnelerin CSS kodlarının Zeplin üzerinden alınabilmesi. Bu sayede tasarımdan koda geçiş için hiç de fena olmayan bir yardımcı haline dönüşüyor.
Zeplin
Adobe XD, Photoshop CC, Figma veya SketchApp tasarımlarınızı web üzerinde ekip veya müşterilerinize sunmanıza, geri bildirimler almanıza yarayan bir araç. Her ne kadar UI yazılım araçlarının kendi içinde bu işi yapabilecek bir paylaşım aracı olsa da Zeplin kullanımı sadece paylaşım değil geniş eklenti kütüphanesininde etkisi büyüktür.
Zeplin ile açacağınız ücretsiz hesap oluşturabilirsiniz. Böylece 1 aktif proje üzerinde ücret ödemeden rahatlıkla çalışabilirsiniz. STARTER planı ile aylık 17$ ile 3 aktif proje, GROWING BUSINESS planı aylık 26$ ile de 12 aktif proje üzerinde çalışabilirsiniz. Bu fiyatlar yıllık alımlardaki indirimli fiyatlar. Aylık bazda ki alımlarınızda sırasıyla 19$ ve 29$ fiyatlarına çıkıyor. Büyük organizasyonlar için ise kullanıcı başına olan tarifesinde 7,65$ fiyatı bulunuyor. Ancak burada en az kullanıcı sayısı 16 olmalıdır. 16 ve üstü kullanıcılar için kullanıcı başı fiyatıdır.
Şimdi zeplin.io web sayfasına giriş yaptıktan sonra sağ üst kenarda bulunan Sign up free / Ücretsiz kayıt ol butonu ile kayıt işlemlerinizi tamamlayın.
Adresinize gelen e-postayı açın ve hesabınızı onaylayın. Ardından kullanıma hazır hale gelecektir.
Zeplin Eklentisinin Yüklenmesi
Zeplin hesap onay e-postasında gelen linkler ile macOS ve Windows için bilgisayarınıza indirebilirsiniz. Ayrıca sizin için altta paylaşıyorum.
Experience Design’dan Zepline Export Almadan Önce Dikkat Etmeniz Gerekenler
- Artboard isimlerini birdefa da doğru şekilde verin. Artboard isimlerindeki bir karakter değişiminde bile farklı bir sayfa olarak görülecektir.
- Export ederken Artboard’u seçin ve ardından export komutunu çalıştırın.
- Eklediğiniz jpg, png, svg, ai gibi dosyalarınızı mutlaka export edileceğini belirleyin. Aksi halde projeyi paylaştığınız ekip arkadaşlarınız ilgili görüntülere ulaşamayacaklardır.
Zeplin’e göndermek istediğiniz Artboard/Sayfayı seçin ve File → Export → Zeplin komut veya WIN: CTRL + ALT + E, macOS: CMD + Option + E kısayoluyla export işlemini başlatabilirsiniz.
Ardından Zeplin yardımcı penceresinde bulunan Import butonuna tıklayarak yüklenmesini sağlayabilirsiniz.
Yükleme işleminin ardından Zeplin masaüstü veya web uygulaması üzerinden projeniz görüntülenebilir, yorumlar yapılabilir.
Burada üzerinde durmadığım stillendirme ve sembol işlemleride ayrıca değineceğim bir konu olacak. Ancak burada şu kadarını ileteyim, tasarım sürecinizde eklediğiniz her nesne, yazı veya görselin genel tasarım konseptinize uygun renk, font, boyut ve daha bir çok şey olarak uyumlu olması gerekiyor. Konsept belirlendiğinde (bir nebze UI Kit) zaten bu tür detaylar çıkacağı için bu standartlara uyarak hareket etmelisiniz. Bu standartlarıda stillendirdiğinizde veya komponentlerinizi sembolleştirdiğinizde zaman aynı tasarım diline sahip bir iş sürecine sahip olabilirsiniz.
Velhasıl; Experience Design ile hazırladığınız tasarımı Zeplin’e yüklediniz, ekip veya müşteriniz ile paylaştınız, geri bildirimler ile de süreci ilerlettiniz ve tamamladınız. Harikasın arkadaş 😉
İşinizi, ailenizi, çevrenizdekileri kısaca hayatı sevin, sevdikçe dikenler yok olur sadece güzellik kalır. Bir sonraki makalemde görüşene dek sevgilerle.