Bundan tam 15 yıl önce kullanıcı arayüz tasarımcısı olarak çalışmaya başladığımda hem tasarım yapıyor hemde HTML, CSS ve birazda Javascript yazarak eski adıyla hurriyetemlak.com şimdiki adıyla hepsiemlak.com’da iş hayatına merhaba dedim.

Çalıştığım projelerde daima düzenli, temiz, bakımı ve ürün geliştirmesi kolay ve de developer friendly olması konusunda deneyimler elde ettim. Yaklaşık son 8 yıldır ise kullanıcı arayüz tasarım sistemleri konusunda çalışıyor ve aylık trafiği +250M ziyaretçisi olan projelerde deneyimleme fırsatlarım oldu. İşte deneyimlediğim projeler şöyle;

Bahsettiğim projelerde, kullanıcı arayüzü tasarım sistemleri inşa ederek, ürün geliştirme süreçlerinde zaman tasarrufu sağladım ve insan kaynağının eforunu azalttım. Ayrıca, kullanılabilirlik ve tutarlılığı artırarak ürünlere katkıda bulundum. Çalıştığım bu projelerden elde ettiğim deneyimlerle “Tasarım dosyalarınızı düzenli ve temiz tutmanın yolları” adlı bu yazımda ele almak istedim.

Öncelikle temiz tasarım dosyasının faydalarından bahsetmek istiyorum.

Büyük ekipler içerisinde dosyanız bir başka tasarımcıya devrinde veya ortak dahil ettiğinizde dosyanıza oryantasyonu kolaylaşacaktır.

Projenize uzun bir süre ara verdikten sonra geri döndüğünüzde aradığınızı kolayca bulabilirsiniz.
Bir düzene bağlı kalmak zor gibi gözüksede aslında çok kolaydır. Yanlış da olsa bir düzen olması kolayca plug-in desteği veya yazılımlar ile değişimi ve gelişimi kolaydır. (İstisnalar hariç)
Paydaşlarınız dosyalarınız içerisinde gezerken rahatlıkla anlayabilir ve size soracağı basit soruların cevabını sormadan almış olacaktır. Bu da zaman kaybının önüne geçecektir.
Developer’ların geneli düzeni severler. Böylece geliştirme süreçlerine onlara bu yönde katkıda bulunmuş olursunuz.
Çok daha fazla uzatmadan düzen ve temizlikte anlaştığımızı düşünüyorum. O halde hemen başlayalım…

1. Objelerinize isim verin
Sayfa, layer, component vb objelerinize daima kısa ve anlamlı isimler verin. CMD + R kombinasyonunu kullanmayı alışkanlık haline getirin. (Figma Config 2024’de layer isimlendirme için AI kullanarak gerçekleştireceğini bildirmesiyle oldukça heyecanlıyım. 🥳 )

2. Obje, Layer, Component isimlendirmelerinize dikkat edin
Dosyanız içinde bulunan objelerde veya layer isimlerinde “01.00.01_Ana Sayfa_Online Odeme Form_M” gibi isimlendirmeler vermekten kaçının. Bilgisayar dilinde nokta(.) kullanımı bir dosya uzantısını ifade eder. Export aldığınızda her ne kadar sisteminizde formatı doğru okusada Windows gibi işletim sistemlerinde çıkışını aldığınız dosya açılmaması gibi aynı zamanda URL olarakta karşılığı olmayacak ve problem çıkaracaktır. Hızlıca bunlara bir bakalım.

• “.” dosya formatını ifade eder.

• “_” birleşik kelimeleri ifade eder. Örnek: “Ana_Sayfa — Guest”

• “-” veya “boşluk” ayrı kelimeleri ifade eder. Örnek: “Odeme-Sayfa 1” veya “Odeme Sayfa 1”

3. Auto-Layout kullanın
Daima Auto-Layout kullanın ve properties’lerinize dikkat edin. Böylece responsive ekranlarınızda veya diğer ölçülerde işinize çok yarayacaktır. SHIFT + A kombinasyonu kullanmayı alışkanlık haline getirin.

4. Section kullanın
Geliştirdiğiniz ekranları veya geliştirmekte olduğunuz ekranları organize etmek için Section’a alarak düzeni sağlamakta oldukça işinize yarayacaktır. Özellikle developer’lar ile çalışırken bu özellik çok işinize yarayacaktır. Layer’ları seçin ve CMD + S kombinasyonunu kullanmayı alışkanlık haline getirin.

5. Dosyanızı organize edin
Daha önceki yazılarımda bahsetmiştim Figma’da performans oldukça önemli. İlgili yazıma buradan ulaşabilirsiniz. Çalışmalarınızı dosya içerisinde tek bir sayfada tutmak yerine daima farklı sayfalara ayırarak çalışın. Böylece dosyanızda otomatik olarak düzen oluşmaya başlayacaktır.

6. Divider kullanın
Sayfalarınızı ayırırken divider kullanmayı ihmal etmeyin. Divider için “ — ” yada “space” kullanabilirsiniz.

7. Buçuklu pixel’lerden korunun
Photoshop’tan Sketch’e, Sketch’den Figma’ya dönem değişsede bu tavsiyem her dönemde ve her tool’da geçerli. Buçuklu pixel kullanmaktan kaçının. (Auto-layout kullandığınız müddetçe bunun önüne önemli derecede geçmiş olursunuz.)

8. Eklentiler ve data dillerini kullanın
Figma eklentilerini veya JSON, XML gibi data dillerine aşina olmaktan çekinmeyin. Bu diller tasarımlarınızda ve tasarım sisteminizde operasyonel anlamda oldukça işinizi kolaylaştıracaktır.

9. Component optimizasyonu
Component’lerinizi daima en aza indirerek ayrı sayfada/dosyada konumlandırın böylecek core componentleriniz ile ekranlarınız arasında ayrım olacak ve proje paydaşlarınıza fresh bir görüntü göstermiş olacaksınız.

10. Dosya hakimiyetine önem verin
Ekranlarınızı tasarlarken kullanıcı deneyimini ifade etmek adına her aşamayı çizmek ve proje paydaşlarına veya müşterilere anlatırken işimizi kolaylaştırabilir ancak unutmayın ki bu aşamaları ekran bazında çoğaltmamız dosya kontrolüne olan hakimiyetinizide zayıflatacağını unutmayın. Gösterimleriniz bittikten sonra bu ekranları ayrı bir yerde konumlandırmanın ve ana akışınızda component bazlı göstermeniz daha doğru olacaktır.

11. Unutma! Tekrar eden her şey, çözülmesi gereken bir problemdir
Çalıştığım projelerde takım arkadaşlarıma ve ürün sahiplerine daima söylediğim bir söz vardır. “Bir şey tekrar ediyorsa orada problem vardır” yaklaşımımla süreçleri daima optimize etmeye odaklanırım. Bir effect, renk, tip vs birden fazla kez tekrar ediyorsa bilinki bu objeniz bir stili hak ediyor.

12. Sıralama ve aradığını bulma
Layer’larınızı ve sayfalarınızı daima alfabetik sıraya göre sıralamanız aradığınızı bulmanızda fayda sağlayacağı gibi sayfanızın görünümünde de fayda sağlayacaktır.

13. Bahaneler üretmek yerine düzen kurun
Birçok tasarımcıdan proje devraldım. Ve bu devir esnasında çok kullanılan bir söz olan “ben en son stilleri ayarlıyorum” cümlesi projelerin altına fitili yanmış dinamit koymak gibiydi. Stilden bağımsız ekranlar, objeler daima ürün geliştirme süreçlerinizi aksatacak ve ürünlerinizin geliştirme maliyetlerini arttıracaktır. Stiller, sistemler sonradan oluşamaz baştan oluşur ve inşa edilir.

14. Sistematik, esnek ve gelişime açık olun
Tasarım dosyalarınızda tüm olasılıkları düşünerek çalışmalı ve daima geliştirmek yükümlü olacağınızı bilerek kararlar almalısınız. En ufak olasılıkları tahmin ederek çalışmaktan çekinmemelisiniz.

Bahsettiğim bu deneyimler benim için ilk etapta tavsiye edeceğim deneyimler diyebilirim. Tüm tasarımcıların eşsiz özelliklere sahip olduğunu düşünüyorum ve bu konuda tasarımcıların deneyimlerini de oldukça merak ediyorum. Sizlerinde bu doğrultuda yorumlarda tavsiyelerini duymayı çok isterim. 🥰