Arayüz Tasarım Sistemi Oluşturma
Yeni proje oluşturmanın verdiği heyecan ile her şeyin piksel piksel ilerlemesini ümit ettiğimiz projelerde nerede hata yapıyoruz da ilerleyen süreçler tam bir kabusa dönüşüyor?
Temellerde bir sorun olduğunu söyleyebilir miyiz?
Eğer benim gibi yıllardır sektörün içinde ve birçok projede yer aldıysanız, yeni projeye başlarken çok özenli ve düzgün ilerlemeye çalışıldığının farkındasınızdır. Ancak süreç ilerledikçe sorunlar büyümeye başlayabiliyor. Baktığımızda, bu sebepler arasında proje yöneticilerinin baskısından tutun, Türkiye’de çalışan ve tasarım sektörü hakkında en ufak fikri olmasa da müdahil olmaya çalışan müşterilerin yer aldığı bir dünyada yaşıyoruz. Bunun yansıması olarak da, biz tasarımcılar ruh halimiz hangi yöne evriliyorsa yaptığımız tasarım da ona göre şekilleniyor. Hal böyle olunca proje ilerledikçe kalite yüksek bir hızla düşmeye başlıyor.
Bu yüzden, ilerleyen süreçlerde temelde ne tür değişiklikler yaptığımızda profesyonel ve bizim (tasarımcılar) için hastalık olan düzeni nasıl sağlayabiliriz ona bakalım.
Araştırma
Okuduğum bir kitapta aynen şu cümleler yazıyordu; “Hiçbir şey orijinal değil, öyleyse etkileşimi kucaklayın, başkalarının çalışmalarından öğrenin, hepsini harmanlayıp kendi yolunuzu keşfetmeyi yeniden düşleyin”. Bu cümleler beni çok etkiledi. Çünkü yeni başladığım bir projede ilk yaptığım iş, proje ile ilgili fikir verebilecek tasarımları incelemek. Buna da verilen isim Benchmark çalışması olarak değerlendiriliyor zaten. Yani doğru yoldaydım ve bu zamana kadar bu sayede başarılı olmuştum. Hatta yine aynı kitapta sanatçılara “Fikirlerinizi nereden alıyorsunuz?” diye sormuşlar ve bu soruya dürüst bir sanatçının cevabı “Çalıyorumdur. İlk olarak neyin çalmaya değer olduğunu çözmeniz gerekiyor” olmuş.
Çok iddialı bir cevap değil mi sizce de? Bir çoğumuz çalma kelimesini “esinlenmek” olarak kendince yumuşatacaktır ama biz son kullanıcıyı düşünerek bir tasarım hazırlıyorsak uymamız gereken ve kendini tekrar eden yapılar üzerinden ilerlemek zorunda kalıyoruz.
Şimdi, bu konuda anlaştıysak araştırma sürecinde Dribbble ve Behance gibi siteler üzerinden proje ile alakalı diğer tasarımcıların hazırladığı çalışmaları incelemeli ve Dropmark benzeri bir araç üzerinde ilgi çekici bulduğumuz linkleri saklamalıyız. Daha sonrasında müşterinize ya da ekip arkadaşlarınıza sunabileceğiniz bu fikirler üzerinden ilerleyebilirsiniz. Böylelikle kafanızda nasıl bir proje şekillendireceğinizi oluşturabilir ve müşterinin hayal ettiği ile sizin hayal ettiğiniz kısmen ortak noktada buluşmaya başlar. Bu ilerleyen süreçlerde kullanabileceğiniz bir argüman haline gelir ve müşteri tarafında bir fikir oluşmasını sağlarsınız.
Tasarım Sistemi Oluşturmak
Eğer iyi bir tasarımcı veya yazılımcı ekibine sahipseniz, Style Guide’ın ne kadar önem arz ettiğini az çok biliyorsunuzdur. Hatta kötü hazırlanmış bir Style Guide ekip içerisinde çatırdamalara ve görüş ayrılıklarına, bunun sonucunda da projenin sarpa sarmasına neden olabilir. Hayal gücünüzü ve tasarım yeteneğiniz ile oluşturacağınız bir proje için düzgün bir döküman hazırlamazsanız hayal gücünü kullanmaya başlayan 2. bir kişiyi (yazılımcılar) projeye dahil etmiş olursunuz. Yazılımcıların yaptığı bu değişiklikler sizi rahatsız ederse projeye ilk darbeyi vurmuş olursunuz.
Bunu engellemenin basit bir yolu var; bir metodolojiye bağlı kalarak ve ihtiyaçları iyi analiz ederek projeye başlamak. Metodoloji dediğim an zaten bir çoğunuz fark etmiştir konuyu nereye getirmek istediğim; Atomik Tasarım Metodolojisi. Metodoloji dediğime bakmayın, aslında bu bir tasarım sistemi ve bu sistemi oturtabilmek için kullandığımız arayüz tasarlama programları sürekli komplike yapılar üzerinde bize yeni araçlar sunmaya devam ediyorlar. Sketch’te Symbol dediğimiz, Figma’da ve Adobe XD’de Component adı verdiğimiz bu yapılar sayesinde Atomik tasarımın nimetlerinden yararlanabiliyoruz. Ancak tüm programları deneyimleyen ben, bu yapıları Pages tarafında derlemekte hep zorlanıyorum. Bu yüzden kendimce bir yöntem geliştirdim ve böylece aşağıda yer alan yapı şekillenmiş oldu.
Atomik Tasarım aslında 5 ayrı yapıdan oluşuyor; Atomlar, Moleküller, Organizmalar, Şablonlar, Sayfalar. Ancak benim yaptığım işler için bu Atomik Tasarım Sistemi’ni projelere göre daha da basitleştirmenin, yaptığım işler için daha verimli olduğunu fark ettim.
Foundations / Temeller
Renk paletlerinden, yazı tiplerine kadar en temel bilgileri bu sayfalarda topluyorum ve çalışacağım projenin aslında temel kurallarını belirlemiş oluyorum. Bu aşamada Figma ve Sketch programlarında bu çalıştığım renk ve yazı stillerini tanımlamış, eğer ikon set belirlenmiş ise onları symbol/component olarak ilgili programa tanımlıyorum.
Components
Tek başına kullanılan yapılara component diyoruz. En basitinden bir buton gibi ya da input gruplarının tüm varyasyonlarını oluşturduğumuz tasarım yapılarını örnek gösterebiliriz.. Tabii burada da belli başlı kurallar oluşturuluyor ve projemizde ilk somut olmayan ama somut gibi düşünebileceğimiz tasarımlar ortaya çıkmaya başlıyor. Tabii ki tüm elementleri bir Kullanıcı Deneyim Tasarımına (UX) sahipseniz oluşturabilirsiniz. Eğer süreç, sıfırdan ve UI/UX tasarımı bir arada oluşturulacak şekilde ilerliyorsa başlangıçta tüm elementleri oluşturmanızın mümkünatı olmayacaktır ve aslında işin rengide biraz burada değişebiliyor. Projede ilerleyen zamanlarda motivasyon kaybı yaşarsanız component oluşturmaya üşenebilir ve yine projenin ilerleyen safhalarında tasarım kurallarından uzaklaşabilirsiniz.
Daha önce deneyimlemiş biri olarak şunu söyleyebilirim; bu şekilde proje yönetimi ve süreç minimum 2 kat uzayabiliyor. Dikkat etmekte büyük fayda var.
Sketch’te ve Figma’da herhangi bir component oluştururken düzenli bir yapıya sahip olmak için mini bir yol haritası oluşturabilirsiniz. Böylece yapılarınız düzenli bir şekilde görünecek ve kullanırken zorluk yaşamayacaksınız.
Symbol adını aşağıda gösterdiğim şekilde yaparsanız yapınızı klasörlemiş olur ve yukarıda yer alan görseldeki gibi bir yapı oluşmaya başlar. (Sketch ve Figma bu şekilde çalışıyor.)
- Birincil Buton: Components/Buttons/Primary
- İkincil Buton: Components/Buttons/Secondary
Modules
Modules dediğimiz -Türkçe anlamıyla modüller- zaman, bunun bize olan faydası gerçekten tartışılmayacak kadar önemli. Şöyle düşünelim; bir footer tasarladık ve projenin son aşamalarına geldik. Müşteri footerda ufak bir değişiklik istediği takdirde tek tek sayfaları gezerek bu güncellemeyi yapmak ve bunu özellikle büyük bir projede yapmak, sizin için eziyete dönüşebilir. Bu yüzden bu konularda dikkat etmekte fayda var. Burada da birkaç püf nokta var aslında; Symbol içinde Symbol ya da Component içinde Component diyebiliriz. Bunun sağladığı fayda da şudur; footer içinde bir buton var diyelim ve butonun ikincil butona dönüşmesini istiyorsak herhangi bir müdahale gerekmeden sağ tarafta yer alan katman özellikleri kısmından diğer tanımladığımız butonu seçerek tasarımda güncelleme yapmamız sadece 1, 2 saniyemizi alacaktır.
Auto Layout
Figma’da çok beğendiğim bu sistem sayesinde oluşturduğum yapılarda belli bir düzen ve kural oluşturmak fazlasıyla keyifli. Başta öğrenmekte biraz zorlanabileceğiniz ama sistemini oturttuğunuzda kusursuz çalışan bu yapı sayesinde yapılarınızı çok daha esnek tasarlayabilirsiniz.
İkon Sorunsalı
Eğer iyi bir yazılımcı ekibine sahipseniz eminim ki düzen hastası ve bir ikonun eksik olması durumunda ortalığı ayağa kaldırabilecek potansiyelde ve yaptığınız işin kalitesini sorgulayacak insanlarla karşılaşmanız çok mümkün. Bunun çözümü; aslında yukarıda da belirttiğim gibi oluşturduğumuz tasarım sistemine kullandığımız tüm ikonları, daha ekleme aşamasındayken Symbol / Component olarak tanımlamak. Böylelikle tasarım sürecinde uygulayacağınız efor azalacak ve yazılımcı dostlarınız ile keyifli bir kahve içme fırsatı bulacaksınız. Diğer tasarımcıları çekiştirmeye vaktiniz bile kalabilir. 😅
İşin Özü…
Biz tasarımcılar ruh halimize ve motivasyonumuza çok bağlı yaşayan bireyleriz. Yaptığımız bir işi sıkıcı olsa dahi baştan sağlam tutarsak ilerleyen süreçlerde yaptığımız sistemin bize sağladığı kolaylıktan keyif alacağımızı çok iyi biliyorum. Düzene olan aşkımızı yansıtabileceğimiz kusursuz projelere adım atmak için umarım bu yazdığım yazı sizin için çok faydalı olur.
Başka bir yazıda görüşmek üzere…
