Arayüz Geliştiricilerin Hayalindeki Tasarımcı

Arayüz geliştirici Adem İlter, website tasarımında arayüz geliştiricilerle, tasarımcılar arasındaki iletişimin güçlendirilmesini hedefleyen başarılı bir konu hazırlamış.

İki farklı mesleğin nasıl bir bütün olarak çalışacağını anlatan bu konu, hem eğitici hemde keyifli bir konu olmuş.

Arayüz Geliştiricilerin Hayalindeki Tasarımcı

Yakın bir arkadaşımın doğum gününde Ikea’dan ona güzel bir hediye aldım. Paketi teslim ederken yapıp yapamayacağına dair hiç endişem yoktu. Çünkü o kutunun içinde kullanım kılavuzundan en ufak bir vidasına kadar eksiksiz herşeyin olduğunu biliyordum. Ortaya çıkacak ürünün de benim görüp beğendiğimin aynısı olacağına emindim.

Bir tasarımcıyla bir geliştirici arasındaki ilişki de tıpkı bu örnekteki gibi olmalı. Tasarımcı hazırladığı tasarımı eksiksiz bir paketle geliştiriciye teslim etmeli ki; hem tasarımcı rahat etsin (sürekli kapısı çalınmasın), hem geliştirici rahat etsin (hızlı ve doğru ilerleyebilsin), hem de ortaya çıkan son ürün tam da istenildiği gibi olsun.

Bu yazının konusu da, biz geliştiricilere göre paketin içinde neler olması gerektiği.

Font font-face

Artık siteleri tasarlarken varsayılan fontlar (arial, georgia vs) dışında dilediğimiz fontları kullanma olanağı sunuldu. CSS3’ün getirdiği en güzel özelliklerinden biri hiç şüphesiz font-face’dir.

Nedir bu font-face;
Seçtiğimiz font dosyalarını sitemize giren kişinin bilgisayarına yüklüyoruz ve yüklenen font dosyasının çalışmasını sağlıyoruz.

Tabi kullanacağınız font sayısının site hızıyla orantılı olduğunu unutmayın. Yani; her bir font dosyasının 50kb olduğunu ve 5 farklı font kullandığınızı varsayalım. Site açılırken 250kb’lık (50×5) bir dosyanın yüklenmesinden bahsediyoruz.

Google fonts sitesinden font beğenmeniz, geliştiricinin gözünde +1 puan kazanmanızı sağlayacaktır.

Hatırlatma: Seçmiş olduğunuz fontların tümünü proje dosyalarını gönderirken yanına iliştirmeniz, sizi “fontları günder hacıto” mailinden kurtaracaktır.

Ikon font-icon

Kullandığınız ikonların shape/vektör olmasına dikkat etmelisiniz. Retina ekranlar ve yüksek çözünürlüklerin yaygınlaşmasıyla ikonların artık çamur gibi göründüğüne şahit olmuşsunuzdur.

Bu kötü görüntüyü ortadan kaldırmak için projede kullandığınız ikonların vektör dosyalarını vermeniz gerekiyor. Biz geliştiriciler bu dosyaların svg formatında kullanıp cam gibi ikonlar çıkmasını sağlayacağız.

Yine biz geliştiricilerin hoşuna gidecek ve sizi de gerçek bir yükten kurtaracak önerimiz var. Gelin bu ikonları Font Awesome, fontello, entypo veya benzer font-icon desteği veren font-face servislerinden seçin, hem bizi hem kendinizi mutlu edin.

[fresh_video url=”http://www.youtube.com/watch?v=k0g6dW1oVhE”]

Nedir bu font-icon;
Aslanda böyle bir terim yok. font-icon dediğim şey font-face’in aynısı yani bir font dosyasıdır. Daha iyi anlaşılması ve birbirinden ayrılması için bu ismi ben verdim.

Sıfırdan bir font tasarladığınızı düşünün. Font yapmak icin harf, rakam ve semboller (,];=@ vs) gibi olmazsa olmazlar ile başlarsınız. İşte bunlar yerine A alanına menu, B alanına search gibi sitenizde kullanacağınız ikonları çizdiğinizi düşünün. Bu fontu kullanırken A’ya bastığınızda menu ikonu gelecektir. Fontlar vektor oldukları için hem tasarım yaparken hem de geliştirme aşamasında büyüklüğü ve rengini istediğiniz gibi kolaylıkla ayarlayacaksınız. Kalitesiz görünmesinin de önüne geçmiş olacaksınız.

Style Guide

Daha yolun başındayken tasarımı belli bir standarda oturtmak, hem tasarımcıların hem de geliştiricilerin hızlı ve doğru şekilde yolun sonuna ilerlemesinde en önemli faktörlerden biridir.

Style Guide’da olmazsa olmazlar;
Yapacağınız tasarımı bir puzzle’a benzetirsek; Grid belirlendikten sonra çıkarılacak her bir style guide elemanı puzzle’in parçasıdır diyebiliriz. Bu parçalarin bütünü ise tasarimin kendisidir.

Renkler:
Projede kullanılan tüm renkler belirtilmelidir.

Tipografi:
Projede kullanılan fontlar ve bu fontların tipografik bilgileri belirtilmelidir. En çok kullanılan font ölçüleri, renkleri, satır yükseklikleri ve tipografiye ait diğer özellikleri belirtecek örnekler yapılmalıdır.

Form elemanları:
‘Bu elemanların varsayılan görüntüsünü olduğu gibi kabul etmek zorundasınız’ diyip geçmek isterdim. Form elemanlarını saymak gerekirse textbox, textarea, button, radio button, checkbox ve select (dropdown list)’den ibarettir. Bu elemanların varsayılan tasarımını beğenmeyip ille de değiştirmek isterseniz;

Form elemanları için hal durumları (normal, hover, focus, active, disable, doğru alan, hatalı alan) ve kullanılacak farklı boyutları (küçük, normal, büyük) tasarlanmalı.

Uyarı mesajları:
Ziyaretçiye gösterilecek uyarı mesajlarının renkleri, ikonları ve ölçüleri belirtilmeli. Gösterilecek bütün durumlar (doğru, hata, bilgi vs) tasarlanmalı.

Bilgi balonları:
tipsy varken bilgi balonlarını çok fazla özelleştirmenizi tavsiye etmem ama illa tasarım yapacaksanız css ile halledilecek sade bir tasarım yapmanızı öneririm.

Bunların dışında; hover, active, focus veya disable gibi durumlarında farklılık gösteren bütün elementlerin style guide sayfasında yer alması gerekmektedir.

Örnekler:

Layer isimsiz layer’lar

Bize samanlıkta iğne aratarak vakit kaybettirmeyin lütfen. Hayır tek tek tabiki uğraşın demiyoruz ama header, navigation, liste, ürün-x, footer gibi gruplamalardan kaçmayın.

Şu makaleden (türkçe) sonra bu konu hakkında benim çok fazla bişey söylememe gerek kalmıyor. Hangi tasarım programını kullanıyorsanız kullanın burada bahsedilen iyileştirme önerileri işe yarayacaktır.

Bu konuda işinize yarayacak bir uygulama renamy

Son söz

Yazıyı okuyan tasarımcı arkadaşlar ‘zorunda mıyım?’ diyebilir; biz (arayüz geliştiriciler) nasıl ki yazılımcı arkadaşlara arayüz kodlarını (html, css, js vs) eksiksiz vermek zorundaysak, evet siz de zorundasınız.

Konu Yazarı: Adem İlter
Kaynak: http://ademilter.com/arayuz-gelistiricinin-hayalindeki-tasarimci/