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

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. 

Son Yazılar
Yorum ( 17 )
  1. Devran Eroğul
    3 Aralık 2012 at 4:52 pm

    Her UI developerin bilmesi gereken şeyleri paylaştığınız için teşekkür ediyorum size. Çünkü bir çok projede UI developerlara sinirlenmemize :) neden olan maddeleri harika toparlamışsınız. Herkesle paylaşacağım.

  2. Oğuzhan Aslan
    3 Aralık 2012 at 5:17 pm

    Arayüz Tasarımcıları bu tavsiyeleri kesinlikle dikkate almalı ve her maddesini uygulamalıdır diye düşünüyorum. Özellikle gruplandırılmamış ve isimlendirilmemiş layer topluluğu insanın gözünü gerçekten korkutuyor. Çalışma süresinide uzatıyor.

  3. Mehmet ALP
    3 Aralık 2012 at 7:37 pm

    UI Designer arkadaşlarıma, bir projeden önce mutlaka bu yazıyı okutacağım, ayrıca olası bir tartışma sırasında da kanıt olarak gösterilebilecek güzel bir yazı :)

    teşekkürler

  4. Sercan Murad
    3 Aralık 2012 at 7:48 pm

    Gerçekten çok başarılı harika bir yazı olmuş, hemen arşivime alıyorum elinize sağlık. Özellikle notes kısmı çok işime yarayacak.

  5. Orhan
    3 Aralık 2012 at 8:05 pm

    Emeğinize sağlık
    eklemek istediğim ufak bir nokta daha var. yuvarlak kenar kullandığınız shapelerin veya layerların radius değerlerini layer ismine yazarsanız o da süper olur

  6. Oğuzcan Şahin
    3 Aralık 2012 at 9:51 pm

    Hadi style guide tarafını geçtim (onun olmayışına artık alıştım) ama gerçekten grid kullanımı, font kullanımı, piksel ve renk değerlerinin belirtilmesi gerçekten bizim için hayatı inanılmaz kolaylaştıran maddeler. 10. madde için içimde kalıyor hep öyle şeyler ama yapılacak bir şey yok :) bu arada yazı harika olmuş. her şey anlatılmış. elinize sağlık :)

  7. muhammet
    3 Aralık 2012 at 11:45 pm

    güzel bi yazı olmuş faydalı ve yol gösterici

  8. Coşkun Soysal
    4 Aralık 2012 at 8:54 am

    Web dünyası hızlı büyümesine devam ettikçe işin sürdürülebilirliği açısından farklı çalışma grupları arasında bu tarz standartların oluşmasını kaçınılmaz.

    O anlamda çok güzel bir araştırma ve özetleme olmuş.

  9. Ömür Yanıkoğlu
    4 Aralık 2012 at 9:53 am

    Harika bir yazı olmuş, keyifle okudum :)

    Bir projenin en önemli kısmının tasarım olduğuna inanıyorum ve tasarımcıyım diyen pek çok kişinin bunların dörtte birinden bile haberdar olmadığını düşünerek biraz da hayıflanıyorum :(

  10. Naim
    4 Aralık 2012 at 11:31 am

    Olayı çok güzel özetlemişsiniz hocam yol gösterici bir çalışma olmuş tebrikler.

  11. Orkun Çaylar
    10 Aralık 2012 at 6:33 pm

    Ellerine sağlık çok faydalı bir yazı olmuş.

  12. Şahin
    3 Ocak 2013 at 2:49 pm

    Çok yararlı bi döküman olmuş. UID ve FED’lerin arasındaki yaşanan/yaşanacak şeyler güzel bi şekilde derlenmiş :)

    Layer comps, ve renklerin hexlerini belirtmek hiç aklımda yoktu. Gayet iyi oldu bu :)

  13. fatihvural
    24 Şubat 2014 at 1:00 pm

    Yazı için teşekkürler..
    Daha önceden okuduğum bir yazıydı. Şimdi faydalı olacağını düşündüğüm konuyla alakalı bir şeyden bahsetmek istedim.

    Photoshopta katmanlar panelini düzenlemek eğer sona bıraktıysanız çok sıkıcıdır. Ancak şimdilerde kullanmaya başladığım eklenti toplu isim verme konusunu zevkli hale dönüştürdü.. ilgililere tavsiyemdir: Renamy

  14. Hasan Yalcin
    24 Şubat 2014 at 1:59 pm

    Gerçekten çok iyimiş, linkini de verelim .. Teşekkürler Fatih
    http://www.renamy.com/

  15. Oğuzhan Akman
    24 Şubat 2014 at 4:24 pm

    Harika bir yazı olmuş. İşlerin gecikmesinde sadece Fed’leri suçlamamak gerek tabi. :)

  16. Serkan Azeri
    19 Nisan 2014 at 9:25 pm

    Çok güzel bir yazı olmuş teşekkürler, inşallah tasarımcılar bu konulara dikkat eder, tasarımı müşteriye beğendirelim de front-end in ne hali varsa görsün :) zihniyeti umarım değişir, yukarıda anlatılan kriterlerin çoğu maalesef psdlerde olmuyor, onların hızlı ve özensiz yaptığı iş bizi yavaşlatıyor.

  17. Kerem Yiğit
    14 Temmuz 2015 at 9:38 am

    Merhabalar, yazı için herkes gibi bende çok minnettarım ve sormak istediğim bir konu var.
    Photoshop üzerinde ya da başka bir tasarım veya mockup aracında yaptığımız tasarımı HTML ya da CSS olarak dönüştürdüğümüzde bunun web, android ya da IOS yazılımcıya kolaylık açısından faydası nasıl olur? Yazılım hakkında bir bilgim yok, araştırdığım kadarı ile de html i java ya da php ye dönüştürebiliyoruz, burdan yola çıkarak onların işlerinde kullanabilecekleri bir kendi tabirim ile yazılım kütüphanesi yaratmış olabilir miyiz.
    Şimdiden çok teşekkür ederim.

Bir cevap bırakın
Captcha Captcha güncellemek için resime tıkla