Sürdürülebilir tasarım ve birlikte çalışma

Bir tasarım nasıl sürdürülebilir olur?

Yaptığınız tasarımları ve tasarım süreçlerinizi sürdürülebilir olarak tanımlamak için aşağıdaki sorulara evet cevabını verebilmelisiniz;

• Dosyalarım herhangi bir seviye tasarımcı veya geliştirici tarafından kolay anlaşılır ve güncellenebilir mi? (Çevre)
• İş devri kolay yapılabiliyor mu veya mümkün mü? (Ekonomi)
• İş paydaşları tarafından kolay ön izleme yapılabiliyor mu? (Toplum)

Yukarıdaki şemadan net bir şekilde anlaşılacağı gibi, sürdürülebilir tasarım bu 3 temel yaklaşımın kesişimidir. Siz anlaşılır, güncellenebilir bir tasarım yaklaşımı ile takım arkadaşlarınızın hızına (çevre), devredilebilir bir tasarım yaklaşımı ile şirketin/projenin size bağımlı kalmamasına (ekonomi), ön izlenebilir bir tasarım yaklaşımı ile şirket içi ve dışı iş paydaşlarının proje üzerindeki hâkimiyetine (toplum) doğrudan olumlu ve sürekli bir etkileşim sağlarsınız.

1. Anlaşılabilir, Güncellenebilir Tasarım

Birlikte çalışma kapsamında tasarımcıların en çok önem vermesi gereken konuların başında bu tasarım yaklaşımı gelmektedir. Hem sizden sonra arayüz geliştirme yapacak olan hem de sizinle aynı işi yapan takım arkadaşlarınız, ürettiğiniz dosyaları hızlıca anlayıp üzerinde eklemeler, düzenlemeler yapabilmelidir.

Yıllar önce “Front-end developer dostu ui designer nasıl olmalı?” başlığı altında yazdığım maddelerin neredeyse hepsi bugün de değerini koruyor; fakat tasarımcılar gibi, tasarım araçları da kendini geliştirip bizlere kolaylıklar sağlamaya devam ettiğinden güncel birkaç ipucu vermek yerinde olacaktır.

Hiçbir zaman Photoshop mu, Sketch mi? tartışmasına girmemiş biri olarak, kendinizi nasıl daha rahat, daha hızlı ve verimli hissediyorsanız o tasarım aracıyla işinize devam etmenizi tavsiye ederim. Aşağıda vereceğim örnekler Photoshop üzerinden olacak fakat Sketch veya başka bir tasarım aracını da bu süreçlerde kullanmak mümkün olacaktır.

Şimdi, anlaşılabilir ve güncellenebilir bir tasarım yaklaşımı için ipuçlarına göz atalım.

İpucu 1 – Layer düzeni
Layer’ları anlamlı bir şekilde sıralama ve isimlendirme.

Artık Photoshop 101 olarak tanımlayabileceğimiz layer isimlendirmenin yanı sıra, layer’ların hiyerarşik düzeni de ekran üzerindeki tasarımı takip eder şekilde, yukarıdan aşağı ve soldan sağa; gruplamaların ise büyük kapsayıcıdan küçük kapsayıcılara doğru olması, kontrolün her zaman sizde kalmasını ve kolay güncelleme yapılabilmesini sağlamaktadır. Aşağıda, en basit hali ile başlangıç seviyesinde bir Photoshop dokümanı yapısını görebilirsiniz.

İpucu 2 – PSD include (Widget yapısı)
Projedeki birçok PSD dosyası içinde tekrarlanan blokların (header, footer, recommendation block vs.) ayrı bir PSD dosyası şeklinde kaydedilerek, ana PSD içine -place linked- olarak çağırılması.

Bu özellik, Photoshop’un arayüz tasarımcılara en büyük armağanlarından biri olabilir. Birden fazla PSD dosyasında kullanılan bir alan için değişiklik yaptığınızda, muhtemelen bunu diğer PSD’lerde değiştirmeye ya üşenirsiniz ya da bunu yapmayı unutursunuz. Place Linked özelliği, bu durumu büyük ölçüde ortadan kaldırarak, tüm dosyalarınızı her zaman yayındaki hali ile senkronize ve tümüyle güncel tutmanızı sağlayacaktır.

Place Linked özelliği ile mevcut PSD dosyanıza eklediğiniz diğer PSD dosyaları, yukarıdaki şekildeki gibi, bir bağlantı ikonuyla görüntülenecektir. Bu durumda, bağlantılanmış herhangi bir PSD dosyasında işlem yaptığınızda, üzerinde çalışmakta olduğunuz PSD dosyanız değişikliği algılayıp, kendi içinde anında güncellenecektir. Eğer dosyanızı birkaç gün sonra açtığınızda include ettiğiniz diğer PSD dosyalarında bir değişiklik varsa, güncelleme inisiyatifini Photoshop size bırakır ve bağlantı ikonu olan yerde sarı bir uyarı ikonu görüntülenir.

İpucu 3 – Snapshots (Anlık kararlar)
Snapshots tam bir “kırmızı mı olsa, mavi mi olsa?”cıları rahatlatma aracıdır. Sizi kırmızı-deneme.psd, mavi-test.psd kirliliğinden kurtarır. Ayrıca kaçımız yeni bir versiyon denerken history sınırını aşıp bir önceki görüntüyü kaybetmedik ki?

Zamanla yarıştığınız, geliştirme için sizden PSD beklenen bir ortamda küçük veya büyük revizyon taleplerine veya denemelere hızlı cevap verebilmeniz için snapshot özelliğini kullanmanızı şiddetle tavsiye ederim. Sadece profesyonel iş yaşamınızda değil kendi deneme çalışmalarınızda da belli noktalarda aldığınız snapshot’lar tasarımın ilerleyişini görmenizi, hızlı kıyaslama yapmanızı sağlar. Tasarımın bir önceki halini görmek için defalarca cmd+alt+z yapmak yerine iki snapshot arasında tek tıkla geçiş yapabilirsiniz.

Not: Snapshot’lar, PSD dosyanız açık olduğu sürece hafızada tutulur. Eğer dosyanızı kapatırsanız tekrar açtığınızda o psd içinde aldığınız snapshot’ları göremezsiniz, silinir. Kaybetmek istemediğiniz bir snapshot varsa dosyanızı kapatmadan önce ilgili snapshot’a sağ tuşla tıklayıp açılan menüden “New Document” öğesini seçmeli ve farklı bir PSD olarak kaydetmelisiniz.

İpucu 4 – Layer comps (All in one psd)
Arayüz geliştiricilerin, “üzerine gelince nasıl olacak?”, “success mesajını nasıl göstereceğiz?” zulmü, Layer Comps özelliği sayesinde yıllar önce bitti. Fakat hâlâ çok yaygın olarak kullanıldığını düşünmediğimden, arayüz tasarımcı ve arayüz geliştirici arasındaki sevgiyi pekiştirecek, iletişim sorunlarını azaltacak ve geliştirmeyi hızlandıracak bu özelliği tekrardan ipucu olarak belirtmeyi uygun görüyorum.

Arayüz tasarımı, grafik tasarımdan farklı olarak interaktif bir yapıya sahiptir. Arayüzün her bir elemanı kullanıcı ile çeşitli etkileşimlere girer. Bu etkileşimi sabit bir arayüz çizerek arayüz geliştiriciye aktarmanız mümkün değildir. “Hatırda kalmaz Layer Comp’ta kalır” mantığıyla ilerlemeniz, verimli ve hızlı bir çalışmanın önünü açacaktır. Arayüz geliştiricinin ihtiyacı, tasarımın tarayıcıya yansıyacak tüm durumlarını bilmek ve ona göre geliştirme yapmaktır.

Yukarıdaki şekilde görüleceği üzere, istediğiniz kadar Layer Comp oluşturabilirsiniz. Layer Comp’lar, mevcut layer düzeninin görünebilirlik (visibility), konum (position), layer stili (appearance) açısından değişimlerini hafızada tutar ve hızlı bir şekilde birbiri arasında geçiş yapılmasını sağlar. Snapshot’ların aksine layer comp’lar psd dosyası içinde kayıtlı tutulur ve dosyayı kapatıp yeniden açtığınızda kaybolmaz.

2. Devredilebilir Tasarım

Artık sıklıkla tüketilen şeyler arasına iş yerlerini de ekleyebiliriz. Birçok nedenden ötürü sık iş değiştirenlere rastlarsınız. Bu durumda, gidenler ve kalanlar açısından en önemli konulardan biri, iş devrinin kolay yapılabilmesidir.

Yeni işe başlayan bir tasarımcı olarak iş yerinizden ilk beklentiniz, çalışacak bir makine ve çalışacağınız dosyalara eksiksiz ulaşmak olacaktır. Aynı şekilde, ayrıldığınız eski iş yeriniz de yerinizi dolduracak yeni çalışanına bu imkânı sağlamak zorundadır. İşte devredilebilir bir tasarım yaklaşımı burada önem kazanır.

Dosyalarımı nasıl saklamalıyım?

Yukarıda bahsettiğim dosya içi hiyerarşik düzeni, dosyaları saklamak için de mutlaka kullanmalısınız. Projenin kapsamına göre belirleyeceğiniz bir klasör yapısı ile tüm karmaşayı ortadan kaldırırken, sizden sonra projeye dahil olacak diğer tasarımcıların işe kolaylıkla adapte olmalarını, işi devam ettirebilmelerini ve geliştirme yapan çalışanların da ihtiyacı olan dosyalara kolay ulaşımını sağlayabilirsiniz. Aşağıdaki görselde, responsive bir web sitesi için oluşturulmuş örnek klasörleme yapısını görebilirsiniz.

Style Guide

Devredilebilir tasarım konusunda ikinci önemli nokta, her projenin bir style guide’a ihtiyacı olduğu; bu style guide’ın projenin başında oluşturulması ve düzenli güncellenmesi gerektiğidir. Karşınızdaki ile aynı dili konuş(a)madığınızda yaşanan hataları, karmaşayı bilirsiniz. Tasarım ve geliştirme arasında dil birliği için atılacak ilk adım, tabii ki bir style guide’dır. Style guide; düzen, birlik ve tutarlılık sağlar. Bu avantajları sayesinde sadece şirket içi değil, şirket adına iş üreten 3. parti ajansların da sizinle uyumlu çalışmasını mümkün kılar.

Eminim style guide kullanımının önemini yukarıdaki imaj yeterince açıklıyordur. Style guide’ı nasıl oluşturacağınızı, bu konuda küçük araştırmalar yaparak çok güzel örnekler bularak öğrenebilir ve bu örneklerden ilham alabilirsiniz. Örneğin, logosunu değiştirmeden önce Medium’un sahip olduğu style guide aşağıdaki gibi.

3. Ön İzlenebilir Tasarım

Sürdürülebilir bir tasarım için son denge ayağı, ön izlenebilir tasarım yaklaşımıdır. Ön izlenebilirliği iki bölüme ayırabiliriz. Bunlardan ilki, hangi cihaz için tasarım yapıyorsanız tasarımı o cihazın ekranında anlık olarak sizin ve ekip arkadaşlarınızın görebilmesi; ikincisi ise tasarım çıktılarını şirket içinde ve dışındaki iş paydaşlarının takip edebileceği ortak bir ön izleme alanı oluşturulmasıdır.

Takım içi ön izleme

Genellikle, telefon, tablet, saat veya herhangi bir cihaz için tasarımı büyük çözünürlüklü masaüstü veya dizüstü bilgisayarlarımızda yaparız ve tasarımın etkisi, tasarımın yapıldığı ekran ile tasarımın görüntüleneceği ekran arasında farklılık gösterir. Bu farklılığın bir sorun oluşturmaması için anlık ön izleme yapabilmek çok önemlidir. Örneğin, seçtiğiniz font büyüklüğünün okunabilir olup olmadığını, renklerin ekran parlaklığı tam açıkken gözleri cayır cayır yakıp yakmayacağını anlamak için ekranlar, geliştirme aşamasına geçmeden önce kontrol edilmelidir. Fakat defalarca çıkış alıp ilgili cihaza gönderip (e-postayla, kabloyla, bluetooth’la vs.) bakmak büyük bir maliyettir.

Tabii ki bu maliyetten bizi kurtaracak ön izleme araçları artık var. Adobe, geçen yıl Preview CC’yi geliştirdi ve Photoshop ile güzel bir entegrasyon sağladı. Adobe Preview CC’den önce Scala Preview aracı vardı. Gayet başarılı bir ön izleme aracı olmasına karşın sadece Mac OS üzerinde çalışması ve Photoshop’a entegre edilmesinde az da olsa sıkıntılar yaşanması dezavantaj olarak değerlendirilebilir. Adobe Preview CC kullanımı göreceli olarak daha kolay: Windows veya Mac OS bağımsız çalışabilirsiniz.

Not: Wireless’ın yoğun kullanıldığı bir ağa bağlı çalışıyorsanız, ön izlemede gecikmeler ve bağlantı sorunları yaşayabilirsiniz. Bunun önüne geçmek amacıyla, ön izleme yapacağınız cihazınızı bilgisayarınıza USB kablo ile bağlamanızı tavsiye ederim. USB kabloyu çıkarsanız da, en son görüntü ekranda kalacaktır. Aktif tasarım yapıyorken Adobe Preview CC açık olursa telefon veya tabletteki görüntü her bir hareketiniz için güncelleneceğinden Photoshop’ta yavaşlama ve takılma olabileceğini de unutmamak gerekir.

Ön izleme araçları hem responsive tasarım, hem de native uygulama tasarımı yapanlar için son derece önemli bir hız kazandırıcıdır. Dolayısıyla sizi e-posta üzerinden alınmaya çalışılan revize onaylarından, sürekli revize dosya ismi üretme eziyetinden ve geliştirme öncesi olası renk, font, kullanılabilirlik vs. hatalarından kurtarır.

İş paydaşları (Stakeholder) için ön izleme

İş taleplerini tasarıma dönüştürdükten sonra çıktılarını sürekli güncel tutarak talep sahiplerine ulaştırmanız ve bir onay sürecinden daha geçirmeniz gereklidir. İşi doğru anlayıp talep sahibini tatmin etmek de sürecin bir parçası. İşin doğası gereği şirket içinde/dışında tüm toplantılara katılamayacağınız ve her toplantıda da daha önce gönderdiğiniz e-postalar arasından güncel tasarım bulunup üzerinde konuşulamayacağı için, bunu bir düzene oturtup paylaşmak en iyi çözümdür.

Devredilebilir tasarım bölümünde bahsettiğim klasör düzenini online bir depolama aracına taşımak ve bilgisayarınızda yaptığınız proje dosya değişimlerini sürekli senkronize etmek, ön izlemeye uygun bir yapı kurmanızı sağlar. Bu sayede sizden herhangi bir ekran görüntüsü için e-posta istenmeyecek, ilgili sayfanın/ekranın klasörü içindeki “Screenshots” bölümünden ön izleme yapılacaktır. Eğer e-posta altyapınız Gmail üzerindeyse, Google Drive kullanmak bu yapı için uygun olacaktır. Yine Creative Cloud üyeliği ile birlikte gelen alanı da paylaşım ve ön izleme için kullanabilirsiniz.

Sonuç

Olabildiğince örnekler ile anlatmaya çalıştığım sürdürülebilir tasarım ve birlikte çalışma prensiplerini benimseyip, uygulamak ve hatta daha da geliştirip ileriye götürmek sizi,— iş ilanlarının değişmez şartı — “takım çalışmasına uygun” ve kolay kolay vazgeçilemeyecek bir tasarımcı yapacaktır. Bu bir klişe gibi gözükse de, kocaman bir organizma olan şirketleri ileri taşıyan, arka plandaki küçük ama birbirine bağlı takımlar; takımları da takım yapan içindeki bireylerdir.

Burada amaç tek tip, aynı şeye inanan ve uygulayan tasarımcılar oluşturmak değil, iletişimin en büyük sorun olduğu günümüzde, tasarım sürecinde oluşturulacak bir disiplinle, kaliteli ve hızlı ürün ortaya çıkarmaktır.

Dünyada her zaman tasarıma ve tasarımcıya ihtiyaç olacaktır. Sürdürülebilir ve güncel kalın, o ana hazır olun.

Sormak ya da eklemek istediklerinizi yorum yazarak bana iletebilirsiniz.