Arayüz Tasarlarken Bilmek İsteyeceğiniz Şeyler
Arayüz tasarımını meslek olarak edinmiş ve kendini geliştirmek isteyenlere ufak bir harita.
Mockup ve Prototip Kullanın
Front-end ve back-end developerlar ile uyumlu çalışabilmek için onlara tasarımı “olması gerektiği gibi” vermelisiniz. Bunun ilk aşamaları mockup ve prototiplemeden geçmektedir.
Mockup’lar yaratın ve prototipler oluşturarak programlamacıların yorumlamasını, çalışmayacak yerlerin alternatiflerinden bahsetmelerini isteyin.
En çok kullanılan mockup ve prototype sitelerini, eklentilerini aşağıda bulabilirsiniz. Bu tip araçların çoğu belirli bir proje kotası sonrası (5 aktif proje sonrası gibi) ücretlidir. Kazanacağınız ekstra zaman ve iletişim kolaylığı için bu küçük meblağları ödemekten asla kaçınmayın.
Yaptığınız Tasarımı Neden Birebir Programlayamıyorlar?
Mobil, web ve dijital saat arayüzlerini tasarlayanların en çok karşılaştığı durum budur sanırım. Bunun bir çok detaylı sebebi mevcut ve ben kısaca aklıma gelenlerden bahsetmek istiyorum.
1-Yarattığınız/Kullandığınız GUI standartlara uyumlu mu?
Örnek olarak iOs da çalışacak bir uygulama tasarlıyorsunuz ve ayarlar bölümünde kullanacağınız detaylar iOs’un kendi gui’ına uyumlu olsun istiyorsunuz. Peki iOs gui detaylarına bakarak butonların ne kadar round değeri var, padding değerleri nasıl, hangi fontu hangi ölçülerde başlık olarak kullanılmış?… Tüm bunları her yeni sürümde ezbere bilmeniz tabiki zor fakat google’da “ios 8 gui elements” ya da “ios 8 gui guideline” gibi aramalar yaparak inceliyor musunuz?
Sadece dribble ve behance gibi platformlarda vakit geçirerek doğru tasarım yapabileceğinizin tam karşılığı var mıdır bunu düşünmenizi istiyorum.
2-Katmanların Overlay özelliği programlanabilir mi?
Tasarım ve programlama prensiplerinin uyumu hakkında az bilgisi olan, programlamacılar tarafından uyarılacak kadar takım çalışmasına dahil olmayan ya da freelance çalışan tasarımcıların düştüğü hatalardan birisi de her yerde overlay kullanmaları. Overlay olayının web ya da mobilde görüntülenebilmesi için teknik birkaç işlem gerekmektedir. Yaptığınız arayüzdeki overlay kısımlarının düzgün çalışıp çalışmayacağını öğrenmeden tasarımı sunuma göndermemelisiniz. İlk önce geliştirmeyi yapacak programlamacıların onayını almalı ya da ona göre revize ya da overlay’i iptal etmenin ardından sunuma koymalısınız.
Mobil uygulamalarda android ve ios’a göre farklı işlemler ile uygulanabiliyor fakat web ayağında Cross-Browser yani tüm tarayıcılara uyumlu olarak çalışıp çalışmadığını öğrenmek için biraz araştırma yapmanız gerekmektedir.
Özellikle web kısmında Internet Explorer’ın modern olmayan sürümleri (Edge öncesi) overlay’i desteklemediği/çalıştıramadığı için kullanılma taraftarı değiliz.
Arayüz programlamanın basılı iş gibi birebir basılamayacağını bilmeli ve ona göre sürekli araştırma yapmalısınız.
Özellikle tarayıcılarda hangi özelliklerin desteklenip desteklenmediğini bu siteden sorgulayabilirsiniz :
Kaynak olarak okuyabileceğiniz bazı dökümanlar:
http://caniuse.com/#feat=canvas-blending
http://caniuse.com/#feat=css-mixblendmode
http://caniuse.com/#feat=css-backgroundblendmode
https://robots.thoughtbot.com/designing-for-ios-blending-modes
http://stackoverflow.com/questions/25667981/how-to-design-and-display-a-uiview-overlay
http://stackoverflow.com/questions/8758965/android-how-to-create-overlay-blend-like-photoshop
https://css-tricks.com/basics-css-blend-modes/
3-Grid sisteme göre programlama yaptığınızdan emin misiniz?
Daha önce grid’i duymuş ve hiç oturup araştırmamış tasarımcılara en kolay yoldan anlatmama izin verin. Daha sonra neden grid’e bu kadar önem verildiğini anlatacağım.
1440 x 750px bir boş şablon yarattığınız diyelim. Sitenin sağında solunda mutlaka boşluk olacak diyelim o yüzden ortada kullanacağımız alanı 1170px olarak varsayalım. Şimdi blog kutucuklarının, kullanacağımız imajların, butonların, menülerin birbirine uyumlu gözükmesi için uyumlu ölçülerde tasarlamak zorundayız. Grid sistemi bu yüzden kullanıyoruz aslında.
Peki grid sistem mantık olarak nasıl çalışır? Nasıl grid sisteme uygun tasarım yaparım derseniz onun cevabı da şu olacak:
Grid sistemde en fazla kullanılan sayı 12lik grid sistemidir. Bunun ana sebebi 2 ve katlarına bölünebilen, ux prensiplerine göre hiç zorluk çıkarmadan programlanabilen ve altın orana en yakın sistem olması.
1230px kullanacağımız alanı (buna genelde container denir) 12 dik eşit parçaya bölelim, bu parçalar tasarımın 12 katmanı olacağı için aralarında mutlaka boşluk olacaktır. Ortalama 15px boşluk verelim (birbirlerine 15px boşluk olacağı için 30px). Aşağı yukarı üst kısımda gördüğünüz görsel karşınıza çıkacaktır.
Sıcaklık Haritaları ve A/B Testlerini Araştırın
Kullanıcıların ya da kullanıcı gruplarının projenizde nasıl davranışlar sergilediğini heatmap (sıcaklık haritası) ve a/b testing yöntemleri ile ölçümleyebiliyoruz. Tasarladığınız projenin beta kısmında bu yöntemlerden faydalanarak daha faydalı hale getirebilirsiniz. Kullanıcı deneyimi (ux) maksimum olan projeler size daha faydalı olacağı için bunu alışkanlık haline getirmek kazancınız olacaktır.
Kullanıcıların projenizi gezerken (web ya da mobil) nasıl davrandığını ölçümleyen sitelerden örnek vermek gerekirse;
Photoshop & Illustrator Dışındaki Yeni Dünya
Adobe Illustrator ve Photoshop kullanarak istediğimiz projeleri hayata geçirebiliyoruz. Son zamanlar da programlamacıların da tasarım dünyasına dahil olmasından kaynaklanan girişimler sayesinde Sketch gibi programlar ortaya çıkmıştır. Adobe da, Adobe Experience Design’ı duyurarak müşterilerinin elinden kaçmaması için elinden geleni yapacağının sinyallerini vermeye devam ediyor.
Adobe Experience Design
Basit arayüzler ve prototyping yaparak video çıktısı alabileceğiniz bir uygulama/program. Şu an için epey eksiği bulunuyor fakat adobe geliştirmeye devam ediyor.
Sketch
Vektörel olarak arayüz tasarlayabileceğiniz ve photoshop ile illustrator’e rakip olarak ortaya çıkan bir uygulama. Tüm görselleri vs tek seferde çıktı olarak alabilme, mobile özel 1x-2x-3x çıktıları alabileceğiniz güzel bir uygulama.
Artboard mantığı ile çalışabileceğiniz sketch, adobe ürünlerinin yanında çok hızlı kullanımı ile tam bir kullanıcı deneyimi dostu. Ayrıca geliştiriciler tarafından sürekli ek uygulamalar geliştirildiği için sketch’e her gün yeni bir özellik eklenmekte.
Craft
Photoshop ve Sketch için dummy yazı ve imajları çok hızlı şekilde tasarıma entegre etmemizi sağlayan müthiş bir ek uygulama (extention). Örnek olarak 12 adet shape’imize turizm ile ilgili görseller giydirmemiz gerekiyor, bunu craft ile 2–3 butona tıklayarak sağlıyoruz. Normalde bu işlem dakikalarımıza mal olurken craft bunu birkaç saniyede hallediyor.
Zeplin
Türk geliştiriciler tarafından ortaya çıkan uygulama; vektörel arayüzleri, programlamacıların anlayacağı dile çeviriyor. Tasarımda kullanılan tüm görselliğin assets olarak developerlara sunan bir araç aslında. Üstelik tasarımda kullanılan butonların 1x,2x,3 olarak çıktısının da alınmasının yanısıra, tasarımcı-programlamacı arasındaki revize haberleşmelerini de üstelenerek mail kirliliğinin önüne geçiyor.
Psikolojik ve Nörolojik Araştırmalar Yapın
Kullanıcı deneyimi kavramını detaylarıyla bilmiyorsanız öncelikle öğrenmeniz gerekiyor. Kullanıcı deneyimi yani UX (user experience), kullanıcıların, yaptığınız tasarımı nasıl kullanacağını ve nasıl fayda alacağını belirleyen faktörlerdir. Kullanıcının projenizi kullanırken neyi deneyimlemesini istiyorsanız tasarımı da o yönde yapmalısınız. Font yaratıcısı Frutiger’ın “eğer öğle yemeğindeki kaşığın şeklini hatırlıyorsanız, şekli yanlış demektir.” sözünü düşünerek, tasarımlarınızda da gereksiz şatafata girmeden, amaç odaklı çalışmayı prensip edinin. Kullanıcıların arayüzü anlamaya çalışırken yorulması mı amacınız, yoksa rahat bir şekilde arayüzün her bölümünde gezinirken zorluk çekmeden işini halletmesi mi?
Projenin hedef kitlesinin psikolojisi de çok önemlidir. 30 yaş üzeri kullanıcıyı hedefleyen bireysel emeklilik projesi için; simsiyah arkaplanın üzerinde sliderda piercingli bir dedeyi hayal edin ve tüm fontların times olduğunu. Böyle bir tasarım fikri ne kadar uyumsuz ise, yapacağınız yanlış tasarım da hedef kitlenin gözünde aynı olumsuzluğu uyandıracaktır.
Programlamacıların Neler Yaptığına Bakın
Tasarlanan ve hayata geçirilen; slider’lar, tab menüler, açılır menüler, hareketli alanlar, sayfa geçişleri hakkında internet gezintileri yapmanız size fikir verebilir. Slider daha şaşalı görünsün diye göz yorucu ve kullanışsız tasarımlar yapmak size hiçbir şey kazandırmayacağı gibi, projelerin amacına ulaşmasındaki en büyük engel bile olabilir.
Kullanılan bu özel alanlar genelde Jquery ve Java Script ile programlandığı için, o yönde aramalar yapabilirsiniz. Örnek olarak “jquery slider plugins” araması yaptığınızda google size daha önce programlanan slider’ları getirecektir.
Tasarımlarınızı Eleştirin
Tasarım yaparken, section’lar (bölümler) bittikçe monitörden biraz uzaklaşarak tasarımınızı değerlendirip not alın. Kendinize revize verin nasıl daha iyi yapılabileceğini sorgulayın. Tasarımsal gözü olmayan birinin “bu slider’daki oklar niye solda? sağda olsa daha iyi durmaz mı?” gibi soruları olduğunu düşünerek kendinize sorun ve ikna olamıyorsanız tasarımı değiştirin. Tüm section’larda kullanılan özelliklerin aynı tasarımsal disiplinde olduğundan emin olun. Gradient ile flat katmanları birlikte kullanmak zordur ve göz yorar, zorunda kalmadıkça aynı tasarımda kullanmayın.
Okuyun, Denemekten Korkmayın
Bazı raporlara göre okuma yazma oranı gün geçtikçe düşmekte hatta “hayatımda hiç kitap okumadım” diyenlerin oranı %32 gibi ciddi bir rakam. Bunda eğitim sisteminin pragmatist yapıda olmasının ne kadar zararı olduğu tartışılır. Fakat günün neredeyse 0n saatini tüm dünyaya bağlı halde geçiren bir mesleğe sahip insanların, okumama gibi bir eylemi kabul edilemez. Sadece fakültede alınan bilgiyle emekli olunduğu zamanlar çok gerilerde kaldı ve güncelliğinizi koruyamazsanız maksimum 2–3 yıl sonra işsiz kalmanız su götürmez bir gerçek.
Makale okuyacak kadar diliniz yoksa dil öğrenin ve kendinize hedefler koyarak makaleler/kitaplar okuyun. Öğrendiğiniz her yeni şeyi denemeye çalışın, arşivler oluşturun ve zamanla tasarım zevkinizin nasıl çok hızlı şekilde evrildiğini gözlemleyin.
Ürün tasarımı (product design) prensipleri gibi mesleğinize yakın konuları da araştırarak fayda sağlayabilirsiniz.
Yanlışım olduğu noktalar var ise affola.
