Front-end developer dostu UI Designer nasıl olmalı?

Daha önce Gold Fish UI Kit (PSD) ile sizlerle olan  meslektaşım Serkan Avcı, konuk yazar koltuğunda bu kez Front-end developer dostu UI Designer nasıl olmalı? konusunu sizler için inceledi. Bana da Serkan’ın keyifli yazısı ile sizi baş başa bırakmak kalıyor.

İster front-end developer olun ister ui designer, bir sistemin, tek bir amaca hizmet eden farklı ve önemli parçalarıyız. Birbirimizden beklentilerimiz ve işleri zamanında bitirmek gibi sorumluluklarımız var. Bu noktada işin front-end developer kısmındaki beklentilerin karşılanması, iş akışında aksaklık yaşanmaması ve aynı zamanda yapılan işten keyif alınması adına ui designer üzerine düşen görevlere, birkaç ipucuna ve yönteme değineceğim.

Deneyimli front-end developer arkadaşlarım ile yaptığım küçük bilgi alışverişleri sonucu elde ettiğim FED beklentilerini aşağıda maddeler halinde inceleyebilirsiniz. Genelde aynı konu başlıkları altında birleştik. Birbirinden çok farklı, kişiye özel  değil, tamamen işin daha hızlı yapılabilmesi ve iş gücünün efektif kullanılabilmesine yönelik beklentiler bunlar.

Bakalım FED’ler UID’lerden neler bekliyor;

1. Photoshop’da layer’ları anlamlı bir biçimde isimlendirin ve klasörleyin,

UID’ler çeşitli programlar kullansa da arayüz tasarımı için ağırlıklı olarak Photoshop programı kullanılmaktadır. FED’lerin uzayıp giden karma karışık Photoshop layer’ları arasında kaybolmamasını sağlamanız için en önemli adım kullandığınız her layer’a anlamlı bir isim vermek ve onu da yine anlamlı bir isme sahip klasörün içine koymaktır. Layer’lara renk vermeniz yine ayırt etmede fazlaca kolaylık sağlayacaktır.

2. Layer’ları gerekmedikçe merge etmeyin,

FED’lerin tasarım içindeki metinleri tekrardan yazmak yerine kopyalayarak HTML’e aktarabilmesi veya kullanılan layer efektlerinin değerlerini rahatlıkla görebilmeleri için layer’ları merge (birleştirme) etmemekte fayda vardır. (Merge edilen layer’larda text veya efekt varsa bunlar düzenlenme özelliğini kaybeder, düz bir resim halini alır.)

3. Bir elementin olası tüm senaryolarının tasarlanması ve Layer Comps mucizesi,

Bir UID olarak tasarımınıza ait elementler için olası tüm senaryoları eksiksiz olarak FED’lere teslim etmelisiniz. Örneğin form içindeki bir input’un “focus”, “error”, “valid” durumdaki görüntüsü, menü elemanlarının “hover action”ları gibi. Eğer bu senaryoların görsel inisiyatifini FED’lere bırakırsanız hoşunuza gitmeyen sonuçlarla karşılaşabilirsiniz.

Siz üzerinize düşeni yaptınız ve tüm senaryoları eksiksiz tasarladınız, peki FED’ler elementlerin bu değişik hallerini psd dosyanızda uğraşmadan nasıl bulacak ve uygulayacak?

İşte Layer Comps mucizesi burada devreye giriyor. Siz FED’lere, ‘şu layer’ı aç, şunu kapat, şunu da o layer’ın üstüne al o zaman menünün açık hali oluyor’ derseniz ortamda bir Southpark sessizliği ile karşılaşırsınız. Bunun olmaması için yapmanız gereken şey Photoshop’ta layer comps panelini açıp elementlerinizin değişik hallerini ayrı ayrı layer comp olarak kaydetmek. Böylelikle FED’ler menünün açık halini görmek için layer’ları gizlemek veya görünür yapmak için uğraşmayacak sadece sizin kaydettiğiniz layer comp’un solundaki ikona tıklaması yeterli olacaktır.

Layer comps ile ilgili detaylı bilgi için, http://adobe.ly/TCAzBK

4. UI Kit ile gönülleri fethetme,

UI Kit, tasarımcının, tasarımla ilgilenenlerin ve geliştiricilerin ilk yardım çantasıdır. İhtiyacımız olan tüm tasarım bileşenlerine çabuk bir şekilde ulaşmamızı ve kullanmamızı sağlar. Renk/boyut/stil gibi parametrelerin rahat bir şekilde değişimine de elverişlidir. Her bir proje için UI Kit oluşturulması bu bakımdan önemlidir. UI Kit tasarımda standartlaştırmayı ve sürdürülebilirliği sağlar. FED’ler açısından önemi ise, ihtiyaç duyduğu tasarım elementini dosya dosya arayarak harcayacağı gereksiz zamandan kurtulmaktır.

5. Daha çok CSS daha az imaj,

FED’lerin en çok hoşuna gidecek şeylerden biri de yapılan tasarımı minimum imaj kullanılarak geliştirebilmektir. Bunun nedeni kabaca, geliştirme kolaylığı yanı sıra sunucu tarafında bağlantı sayısını minimum tutmaktır; yoğun ziyaret alan siteler düşünüldüğünde bu hareket çok daha anlamlı olacaktır. Tekil ziyaretçi bazında her bir css, her bir js ve her bir imaj dosyası için sunucuya ayrı ayrı bağlantı açıldığını akıldan çıkarmamak gerekir. CSS3 ile birlikte gelen birçok özellik (border-radius, drop-shadow…) ile imaj kullanımı artık minimuma indirilebiliyor olsa da gereksiz gölgeler ve imaj kesmeye sebep olacak tasarımlardan kaçınmak çok mantıklı olacaktır. Tabii bu kararları verirken içinde bulunduğunuz projenin ihtiyaçları ve dinamikleri etkili olacaktır. Bir e-ticaret sitesi ile bir ürüne özel tasarlanmış mikro sitelerdeki tasarım esnekliği çok farklıdır.

6. Font seçimi,

Artık yeni popüler özellikler (@font-face) ve eklentiler (cufon) ile web sitelerinde çok daha zengin bir font kullanımı söz konusu. UID’ler web tasarımı konusunda daha yaratıcı işler çıkarabiliyorlar. Ama konu yine performansa gelince FED’lerin sazı eline alarak UID’i varsayılan sistem fontlarını kullanmaya ikna etmesi kuvvetle muhtemel. Aşağıdaki birkaç örnekle haklı olduklarına siz de ikna olabilirsiniz.

• Google web fonts kullanımında, kullanmak istediğimiz fontun her bir varyansını (Bold, italic, latin karakterler, vb.) ekledikçe yüklenme süresi ciddi bir şekilde artım gösterir.
• Cufon avantajları ve dezavantajları olan bir eklenti. JS tabanlı bir eklenti olduğundan her ne kadar son kullanıcının browser’da js özelliği sürekli aktif olsa da deaktif edilebildiğinden, site sizin isteğiniz dışında kullanıcı tarafından değişik bir görünüme sahip olacaktır. Yazılan metin seçilemiyor, dolayısıyla kopyala/yapıştır yapılamıyor. Geç yüklendiğinde site üzerinde ilk sistem fontu görünüyor.
• Başlıklar için imaj kesme. Tabii ki “Daha çok CSS daha az imaj” maddemizle çelişmemek için farklı font kullanabilmek adına FED’lere gereksiz imaj kestirmiyoruz.

7. Boyut tutarsızlıklarından kaçınmak,

Bir UID’nin işinden en çok keyif aldığı an yaptığı tasarımı pixel perfect olarak html sayfasında canlı canlı gördüğü, kullandığı andır. UID’nin pixel perfect beklentisine karşılık FED’ler de layout’ta boyutların tutarlı olmasını bekler. Bu beklenti, hem görsel bütünlük hem de gereksiz/ekstra CSS yazılmaması, daha sonradan yapılacak değişikliklerde kolaylık olması açısından önemlidir. Örneğin, sitenin bir sayfasında içeriğin genişliği 960px iken diğer bir sayfasında 958-959px olmamalıdır. Bu, tasarımınız ne kadar güzel olursa olsun kabul edilemez bir hatadır. Eskiler pantolonlarında sökük olduğu zaman “neyse uçaktan belli olmaz” diye kendilerini avuturlarmış, ama hepimizin bildiği gibi ekranlara en fazla 30-40cm uzaktayız ve o 1-2px her şekilde belli oluyor.

Boyut tutarlılıklarının önemi ve ziyaretçilerin ekran çözünürlüklerinin standart olmayışı grid sistemlerin gelişmesine sebep olmuştur. Şu an internet üzerinde birçok grid sistem mevcut. Grid sistemler ile geliştirilen veya grid sistem kullanılmasa da bu prensibe göre boyutlandırılan siteler hem göze güzel görünmekte hem de uygulamada çok büyük kolaylıklar sağlamaktadır. Ayrıca responsive design için de grid sistemler geliştirilmiştir. http://960.gs/  http://goldengridsystem.com/

8. Interaksiyonlar ve animasyonlar için not kullanımı,

UID dinamik düşüncesini ekrana statik olarak yansıtır. Fakat tasarım elemanlarının birbirleri ile olan etkileşimini de en doğru, en kolay ve en kalıcı yol ile FED’e aktarmak zorundadır. Bunun için yine akılda kalmaz satırda kalır prensibi ile çokça kullanılmadığını düşündüğüm Photoshop’un “Notes” aracından yararlanılabilir. Böylelikle FED aynı anda tasarımı incelerken onunla ilgili düşünülen dinamik hareketin de nasıl olacağını notlardan anlamış olacaktır.

9. Piksel ve Renk değerlerinin belirtilmesi,

FED’lerin işlerini hızlandıracak önemli adımlardan biri de UID’nin kullandığı piksel ve renk değerlerini FED’in rahatlıkla ulaşabileceği ve anlayabileceği şekilde psd dosyasının içinde bulundurmasıdır. Bir önceki maddede bahsettiğimiz “Notes” yine bu adımda işe yarayacağı gibi bu değerleri görsel olarak dosyaya koymak algı ve uygulama hızını arttıracaktır.

Piksel değerlerini elementin genişliğini/yüksekliğini gösterecek şekilde “ölçüler” adlı bir layer’a koyarak görselleştirebilirsiniz. Renk değerlerinin hızlıca elde edilebilmesi için ise rengi belirten şeklin olduğu layer’ın ismini rengin hex koduyla değiştirmeniz çok olumlu tepkiler alacaktır.

10. Bitiriyoruz son sözlerinizi alalım,

FED’lerin en çok çektiği konuları biraz daha derinde detaylandıracak olursak, büyük arkaplan imajlarının ve üst üste binen içeriklerin konumlandırılması, anlamsız ve gereksiz gölgeler, cross-browser (özellikle IE) sorunları, form elemanı giydirme (select, radio, checkbox), grid-guide kullanılmamasından dolayı kesilecek alanın seçiminde zorluk ve blend mode uygulanmış butonların zeminden transparan olarak ayrılıp kaydedilememesi… diye uzayan bir listemiz var.

Son olarak; kaliteli ve bittiğinde keyif aldığınız işler ortaya çıkarmak istiyorsanız, işinize, kendinize ve takım arkadaşlarınıza her zaman saygı duyun, onların isteklerini göz ardı etmeyin.