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

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

Tasarıma ön ek olarak kullanıldığına çok fazla rastlamadığımız “sürdürülebilirlik” kavramı, Agile – Scrum ile ilerleyen bir projede, tasarımın diğer bileşenlere adaptasyonu, yönetilebilmesi ve sunumu ile ilgili olarak ön plana çıkar. Adaptasyon, yönetim ve sunum süreçleri için birtakım disiplinler oluşturmak ve uygulamak sürdürülebilirlik açısından önemlidir.

Peki, sürdürülebilirliği mümkün kılan bir tasarım disiplini nasıl oluşturulabilir? Konuk yazarımız, deneyimli kullanıcı deneyimi tasarımcısı Serkan Avcı, sürdürülebilirliği mümkün kılan önerilerini SHERPA Blog için yazdı.

Bu disiplinler, scrum gibi belirli sürelere (genelde 2-4 hafta, nadiren 1 hafta) bölünmüş proje geliştirme yöntemlerinde tasarımın, kendinden sonraki süreci aksatmayacak şekilde yapılmasını, revizyon isteklerine hızlı cevap verebilmesini, iş paydaşları tarafından ön izlenebilir, kolay devredilebilir olmasını ve canlı ortamla senkronize edilebilmesini sağlar.

Bir disiplin oluşturmak, kabul ettirmek, uygulamak her ne kadar karmaşık ve sancılı bir süreç olsa da, sonunda sürdürülebilir ve birlikte çalışmaya elverişli bir tasarım ortaya çıkmış olacaktır.

Sürdürülebilirlik nedir?

Basit tanımıyla sürdürülebilirlik, belirsiz bir süre boyunca bir durum veya sürecin sürdürülebilme kapasitesini ifade eder (wordNet 2008). Bir projenin sürdürülebilirliğinden bahsetmek için temel olarak çevre, toplum ve ekonomiye etkileri açısından değerlendirme yapmak gerekir. Benzer bir değerlendirmeyi, proje süreçlerinde tasarımdan doğrudan etkilenen bileşenler için yaparak, sürdürülebilir tasarım tanımına ulaşabiliriz.

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)
Sürdürülebilir Tasarım
Sürdürülebilir Tasarım

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.

Yukarıdan aşağı temel bir layer yapısı
Tasarımı takip eden temel bir layer yapısı

İ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
Place Linked özelliği kullanılmış basit bir psd include örneği

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.

Photoshop snapshots
Photoshop snapshots

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.

Photoshop layer comps
Photoshop’ta layer comp kullanımı

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.

Responsive site tasarımı için klasör yapısı
Responsive site tasarımlarını saklamak için örnek klasör yapısı

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.

Style Guide

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.

Medium Style Guide
Medium Style Guide

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.

Adobe Preview CC ile ön izleme
Adobe Preview CC ile ön izleme

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.

%20 indirim fırsatı! Girişimciye Dönüş, SHERPA Blog okurlarına %20 indirimli! 2 ay sürecek online girişimcilik eğitimleriye problemi gözlemekten fikir bulmaya, müşteriyi doğrulamaktan yatırımcı sunumuna kadar tüm girişimcilik adımlarını video ve araçlarla adım adım öğren. İndirim kodunu almak için giriş yap ya da kayit ol.

Sormak ya da eklemek istediklerinizi yorum yazarak bana iletebilirsiniz.

  • mehmet

    Tasarim konusunda otomatizasyon korku filmlerinde hep ilk olen gozluklu sisman eleman gibi geliyor bana. hikayenin sonunda ondan soz eden hic olmuyor.

    • Serkan Avcı

      Merhaba Mehmet, yukarıda bahsettiklerim tamamen deneyimler bütünüdür. Herhangi bir şeyi otomatize etme amacıyla değil, pratikte başarılı olmuş yöntemleri faydalı olmasını umarak paylaştım. Standartlar oluşturulmadan ve bunlara uyulmadan kaliteden söz etmek mümkün değil. Tek tipçilik yapmak istemediğimi, sadece birlikte çalışma adına oluşturulacak disiplinlerin size, çevrenizdekilere ve içinde bulunduğunuz yapıya nasıl katkı sağlayacağını anlatmaya çalıştım. Tasarımcının başarısını ölçümlemek ancak işine verdiği değerin karşıda yarattığı etki ile mümkün. Bu etki hikayenin sonunda unutulmanız yerine arkanızda kocaman bir patlama ile kameraya doğru ağır ağır yürüyebilmenizi sağlıyor, kesin bilgi.

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

İLGİNİ ÇEKEBİLİR
Girişimciler için ilham verici TED konuşmaları girisimciler-icin-ted

Girişimciler için ilham verici TED konuşmaları

Gizle
KEŞFETMEYE DEVAM ET
Biz deneyim üretiyoruz, peki ya siz?

Biz deneyim üretiyoruz, peki ya siz?

Gizle