bildirgec.org

Sitenize yeni bir ziyaretçi geldiğinde sitenize dair ilk izlenimi çabuk bir şekilde oluşacaktır. İyi bir ilk izlenim, ziyaretçinizin sitenize yeniden gelmesini sağlayabilecek önemli faktörlerden biri iken, kötü bir ilk izlenimin bıraktığı izlerin üstesinden gelmek zordur.

Yazının devamında bulacağınız liste sitenizi ziyaret eden ziyaretçilerin ilk izlenimlerini etkileyen 21 faktörü listelemektedir. Bu listenin faktörlerin sadece bir kısmı olduğunu ve tüm faktörleri oluşturmadığını unutmayın. Eğer istersiniz sizce önemli olan faktörleri de yorumlarınızla paylaşabilirsiniz.

1. Açılma Süresi
Pek çoğumuz yavaş açılan web sitelerine karşı sabırsızızdır. Diğer yandan hızlı açılan web siteleri ziyaretçileri siteniz üzerinde gezinmeye teşvik edecektir, zira her bir sayfanın açılması için uzun süre beklemeyeceklerini bilirler.

2. Hata Mesajları
Eğer sitenizi ziyaret eden ziyaretçiler hata mesajları alıyorlarsa ve sitenize erişmede sıkıntı yaşıyorlarsa, sitenizden etkilenmeyeceklerdir ve sitenizi bir kez daha ziyaret etmeyeceklerdir. Sitenizde oluşabilecek pek çok hata bulunmaktadır. BlogStorm‘un yayımladığı şu makale bir adet başarısız siteyi ele alıyor ve problemlerini irdeliyor.

Bir web sitesini tasarlarken ve geliştirirken göz önünde bulundurmak gereken pek çok ayrıntı vardır. Gerçekte bu ayrıntılar sonsuz bir listenin birer parçası gibi görünebilirler ancak listeye dikkatli bakıldığında bu elementlerden birkaçının diğerlerinden daha önemli olduğu ve bu elementlerin de en başarılı web siteleri tarafından kullanıldığı gözlenir.

Web sitenizin planlama aşamasını tamamladığınızda geriye kalan elementler Kullanıcı Arayüzü Tasarımı’ndan İçerik Oluşturmaya, oradan da geliştirme aşamasının kendisine kadar değişen geniş bir kategori yelpazesine yayılır. Elbette Arama Motoru Optimizasyonu (SEO) için de dikkat edilmesi gereken bazı ayrıntılar var ama şimdilik onu bir kenara bırakalım.

İşte en iyiyi hedefleyen her web sitesinin sahibi olması gereken 15 anahtar element.

1. İyi Görsel Tasarım
İlk olarak… Görsel tasarım. Sizi bilmem ama ben bir web sitesini ziyaret ettiğimde eğer site beni görsel olarak tatmin etmiyorsa o siteyi kısa sürede terk ederim.

Bunu derken her iyi web sitesinin görsel olarak güzel görünmesi gerektiğini söylemeye çalışmıyorum, ama eğer bir web sitesi 1994’ten beri güncellenmemiş gibi görünüyorsa, diğer mükemmel web sitelerinin yanında sönük kalacağı aşikardır.

Temiz ve sade bir tasarım genellikle ihtiyacınız olan tek şeydir. Sitenizdeki parıltılı nesneler de güzeldir ancak ben “az ama öz” teorisine inanlardanım. Tasarımınızın kalabalık olmasını istemezsiniz. Onun sadece güzel görünmesini, böylece rakiplerinizin önüne geçerek potansiyel müşterilerinizin dikkatini çekmesini istersiniz.

İlk izlenim önemlidir. Her ne kadar tek başına iyi bir tasarım bir kişiyi sitede tutmaya yetmese de, göz alıcı tasarımlar ziyaretçinin sitenizde daha uzun süre kalmasını sağlayacak, en sonunda da aradıkları içeriğe ulaşabilmek için daha fazla çaba sarfetmiş olacaklardır.

Web tasarımcıların öğrenmesi bilmesi gereken programlar hangileridir?ama sadece tasarım alanında işe yarıyabilecek programlar (web programlama olarak algılanmasın) teşekkürler.

Herhangi bir proje üzerinde ya da bir başka şey üzerinde çalıştığım çoğu zaman, web üzerinden kullandığım ve kullanışlı bulduğum pek çok araç bulunuyor. Bu araçlar hem tasarımcıların ve geliştiricilerin üzerinde çalıştıkları proje için harcadıkları zamanı kısaltmaya yarıyor, hem de bazı durumlarda tamamlaması sıradan araçlarla oldukça uzun sürecek pek çok işlemi bizler için kolaylaştırıyor. Sözü daha fazla uzatmadan gelin, web tasarımcılarının işlerini kolaylaştırmayı hedefleyen bu 6 önemli araca hep beraber bir göz atalım:

4096 Color Wheel: Web üzerinde pek çok çeşit renk küresi (color wheel) bulunmaktadır. Ben bu renk küresinin kullanımını oldukça kolay buluyorum. Jemima Pereira tarafından hazırlanan bu renk küresi, üzerindeki renkleri web safe, web smart, ve web unsafe olarak gösteriyor. Sırf bu özelliği ile bile bu ilgili araç renk seçimi sırasında web tasarımcıları için oldukça yararlı hale geliyor.

internette site tasarımını kolaylaştıran birçok araç mevcut. bu araçlardan birkaçı şurada listelenmiş.

kuler create

kuler bildiğiniz gibi renk temaları oluşturup paylaşabileceğiniz, diğer kullanıcılar tarafından oluşturulan renk temalarını inceleyebileceğiniz bir araç. benzer bir araç da wellstyled color scheme generator. daha önce yazdığım renk seçimleri ve kombinasyonları yazısı da belki bu konuyla ilginizi çekebilir.

Pretty Loaded web tasarımcılar için ilham kaynağı olabilecek bir flash preloader arşivi. onlarca preloader örneğinin yıllara göre sınıflandırılmış olarak yayınlandığı Sitede gördüğünüz her preloader kendinden bir sonrakini yüklüyor.

Biliyorum, biliyorum… Tasarımcıların hiçbiri kodlarla boğuşmak istemez ve tasarımlarını doğrudan geliştiricilere devretmek ister.

Geliştirme işi programlama kurtları, kodlama hastaları ve bilgisayar manyaklarının işidir.

Peki o zaman neden biz tasarımcılar Photoshop fırçalarımız, akşamüstü çaylarımız ve Mac Prolarımız ile mutlu mesut yaşarken kendimizi kodlama dünyasının içine atmalıyımız? Çünkü eğer bunu yaparsanız daha iyi bir tasarımcı olursunuz.

Kuşkullandınız mı? O zaman yazının devamını okuyarak tasarımcıların neden kodlaması gerektiğine yönelik 6 maddeyi okuyun…

1. Daha iyi XHTML
Bugüne kadar, Photoshop tasarımlarının web biçimine dönüştürülmesi için gereken kodlama elementlerine dair çok az bilgisi olan tasarımcılarla çalışma fırsatı buldum hem de onlara kendimi tanıttım. Genellikle bu tasarımcılar, SiteGrinder gibi programları kullanıyorlar. Bu programlar her ne kadar günden güne daha iyi hale gelseler de, insanların yazdığı kodların çeşitliliğine ve öznelliğine ulaşamıyorlar.

Kendi standartlarla uyumlu XHTML kodunuzu yazabilmeyi bilmek, herhangi bir web takımında bir adım öne çıkmanızı sağlayacaktır (standartlarla uyumlu bölüme dikkat). PHP, ASP.NET, Ruby ve diğer pek çok dilin karmaşıklığı ile insanlar bir süre sonra öyle ya da böyle tüm web progrlama dillerinin HTML ile sonlandığını unutmuş görünüyorlar, çünkü bu dil, tarayıcınızın işin en sonunda sayfayı işlemesi için gereken dil. Çalıştığınız işin merkezi hakkında daha fazla şey bilirseniz, o işin merkezinde daha iyi olursunuz.

Bu bildiride hem kendi kullandığım hemde referansta anlatılan eklentileri tanıtacağım.

Firefox için eklentiler:

1- Firebug
Formatlanmış bir şekilde web sayfalarının html kaynak kodlarının görüntülenmesini sağlayan muhteşem bir eklenti.

Örnek Firebug görüntüsü

Herhangi web sayfasında bulun CSS, HTML ve JavaScript kodlarını görüntüleyebilir, değiştirebilir ve yaptığınız değişiklikleri görüntülemekte olduğunuz sayfaya etkisini hemen görebilirsiniz.

2- MeasureIt
Seçtiğiniz alanın pixel cinsinde en ve boyunu göstere kullanışlı ve basit bir eklenti

MeasureIt

şirket sitelerini bilirsiniz. çoğu sıkıcı, görsel güzellikten uzak, kullanışsız olur. ama bazıları gerçekten iyi tasarımcıların elinden çıkmıştır ve ürüne, markaya olan sempatiyi artırır. stylesinspiration, 2008’in en iyi 25 şirket sitesini seçmiş.

profission

profission

concentric studio

concentric studio

Bir web sitesinde çalışmaya başlamadan önce daima üzerinde çalışacağım bir renk şemasına sahip olmak isterim. Bu sadece estetik sebepler yüzünden değil, ayrıca tutarlılık ve websitesine alışılabilirlik gibi sebepler yüzünden önemlidir. Bazen müşterileriniz iki yta da üç renk şeması ile size geleceklerdir (diyelim iki ya da üç renk), ya da en azından web sitesinin üzerine inşa edileceği bir rengi size bildireceklerdir. Eğer emin değillerse o zaman bana sundukları grafik içeriğe (logo, resimler, simgeler vs.) bakar ve onlar ışığında kendi renk şemamı oluşturmaya çalışırım.

Internet üzerinde, tasarımlarınızın piksel mükemmeliğinde olmasına yardımcı olacak renk kaynakları bulunuyor.

İster aklınızda bir renk şeması olsun, ya da size ilham verecek ve rehber olacak kaynaklar arıyor olun, bu yazımda sizlerle bir dizi renk şeması oluşturmanıza yardımcı olacak kaynakları listelemeye çalıştım.

Color Blender
Renk kaydırma çubuğunu kullanarak ya da doğrudan renginizin RGB değerini girerek site size renk şemasını sunacaktır. Bu sitenin sunduğu bir güzel özellik, oluşturduğunuz renk şemasını photoshop ya da illustrator için indirebilmeniz, ya da kendinize elektronik posta olarak gönderebilmeniz.

Color Schemer Online V2
Şema doğrudan girilen RGB veyea HEX değerine göre oluşturuluyor. Sitenin ayrıca Windows ve Mac üzerinde çalışan yazılım sürümü de bulunuyor.

Color Scheme Genarator V2
Önerilen renk şeması görüntülendikten sonra tek bir değr girn. Şemalar Pastel, Karanlık/Aydınlık, Kontrast ve Solgun olabilir. Sitenin sunduğu bir diğer güzellik de (her ne kadar kaç kişinin işine yarayacağını tam olarak kestiremesem de) görüntülene renk şemasının çeşitli bakış açılarında nasıl görüntüleneceğini de size sunabilmesi (örneğin renk körleri için).