Web Tasarımı Hakkında Bilgiler & Püf Noktaları

Web tasarımınızın akıllı olması için aşağıdaki kodu Web sayfanızın kaynak kodundaki head bölümüne yerleştirmeniz yeterlidir:
Tabii ki böyle bir şey henüz icat olmadı . Zaten konumuz da bu, sadece kodları, programları iyi bilmek yetmiyor. Onları nasıl kullandığımız daha da önemli aslında. Görsel anlamda iyi bir tasarım ile ‘Akıllı Tasarım’ farklı şeylerdir. Önemli olan bu ikisini ortak bir noktada birleştirebilmektir. Örneğin; görsel anlamda harika bir giriş sayfası yapabilirsiniz. Ama bunu yaparken Web’in sınırlamalarını göz ardı ederseniz, sayfanızın yüklenmesi için ’sizin dışınızda’ kimse ekrana yarım dakika boyunca bakmaz ve siteyi terk ederler! Şimdi işimizi akıllıca yapmak için nasıl bir yol izlemeliyiz bir göz gezdirelim isterseniz. Her ne kadar akıllı tasarımı kodlarda olduğu gibi kategorize edip, ‘bunu şöyle yaparsan, böyle olur’ gibi net reçeteler sunulamasa da en azından çalışmamızı bir sisteme oturtmak için genel bazı doğruları gözden geçirmekte fayda olduğunu düşünüyorum. Yaratıcı Olun Ama Aşırıya Kaçmayın… Şimdi bu ne demek diyeceksiniz! Internet’e bir kitle iletişim aracı olarak bakarsak, onu kullanan insanların da zaman içinde alıştıkları kullanım standartları olduğunu rahatlıkla görebiliriz. Yani nasıl ki telefonu kulağınıza götürüp sonra numaraları tuşlarsanız, sitenize giren insanlar da sitenizi böylesi standart davranışlarla kullanırlar. Eğer ’sıradışı’ olmak adına çok farklı bir uygulama yaparsanız, sitenize girenlerin kafasını karıştırmaktan başka bir şey elde edemezsiniz.
Internet’teki çoğu sitenin gerek navigasyon, gerekse sayfa öğelerinin yerleşimi olarak birbirine benzemesinin nedeni işte budur… Örneğin, insanlar sayfa linklerini görmek için alışkanlık olarak ilk önce sitenin tam tepesine ya da sol kolonuna bakarlar. Sonuç olarak ‘başkalarından farklı’ olmaya çok fazla çalışmayın, bazen yerleşmiş standartları kullanmak çok daha hayırlıdır. ‘Etkileyeceğim’ Derken Can Sıkıcı Olmayın. Macromedia firması Flash’ı ilk satışa sunduğunda, Flash’ın sunduğu hareketlilik büyük bir coşku yaratmıştı. Bir anda Flash ana sayfalı sitelerde bir patlama oldu. O kadar ki insanlar neredeyse ‘iyi sitenin girişi Flash ile yapılır’ diye düşünmeye, hatta Flash girişli siteler bazı ajanslar tarafından ayrı ücretlendirilmeye başladılar. Sonuçta ortaya yine ‘yanlış kullanımdan’ dolayı bir sürü can sıkıcı site çıktı. Siteye giriyorsunuz ve karşınızda bir yazı ‘lütfen bekleyiniz… animasyon yükleniyor’ yazıyor, sonra…. ‘Yükleniyor…. yükleniyor’ ve ‘yükleniyor’. …Pekiyi yüklene yüklene ne yükleniyor? Genellikle ekranın ortasından döne döne gelip, iki takla attıktan sonra parlayarak karşımızda duran şirketin logosu ve gelmesi yarım dakika süren birkaç resim! Siteyi ilk kez ziyaret ederken diyelim ki bu logodan en az şirketin kurucusu kadar etkilendik! İkinci, üçüncü girişlerimizde oturup baştan izlemeyi ister miyiz? Sizi duyar gibiyim.. ‘eh skip intro linkine tıkla!’ diyorsunuz. Pekiyi söyler misiniz her seferinde ’skip’ edeceğim gün gibi ortada olan bir introyu neden yaparlar?? Yani logo zıplamasa ne olur? İşte anahtar kelime bu ‘olmasa ne olur?’. Belki daha iyi bile olur diyorsanız, o zaman bu tür bir uygulamayı hiç kullanmayın. Flash da dahil olmak üzere sitenizde kullandığınız her öğenin mantıklı bir işlevi olmalı. İşlevi olmayan her öğe size, dolması gereken ilave kilobaytlar ve siteden kaçan ziyaretçiler olarak geri döner. Flash’ı tabii ki de kullanacağız ama akıllı bir şekilde ve yerinde. 5 saniye içinde dolan, sadece vektörel çizimleri içeren bir Flash uygulamasına hiç bir itirazım yok. Ama bir Flash uygulaması ön yükleme gerektiriyorsa baştan diyebilirim ki sitenizin yarıdan fazla ziyaretçisini kaçırıyorsunuz! (Flash’ın olağanüstü akılcı bir şekilde kullanıldığı bir site var: EYE4U active media web design (Shockwave Flash) eğer daha önce görmediyseniz bir ziyaret edin, ne demek istediğimi anlayacaksınız).
Flash, bence devrim yaratan bir uygulama. Ama her yeniliği olduğu gibi onu da yerinde ve tabiri caizse ‘görgülü’ bir şekilde kullanmak lazım. Dikkatinizi çekerim… Flash’ın yaratıcısı Macromedia bile kendi sitesinde Flash’ı gayet temkinli kullanıyor ( Adobe ). Amacınızı doğru tespit edin ve uygulamalarınızı buna göre yapın…
Ciddi bir endüstri kuruluşunun sitesine giriyorsunuz, o da ne! Tam tepesinde yanıp sönen bir link (Ziyaretçi Defteri!) ya da sitenin üstünde kocaman bir sayaç, sanki bir kişisel Web sayfasına geldik… Oldu mu yani şimdi? Sitenin yapısını, neyi temsil ettiğini ve hangi amaca hizmet ettiğini düşünerek tasarıma başlamalıyız. Kullandığımız renklerden, font gruplarına ve site içindeki uygulamalara kadar her şey bu anlam bütünlüğüne uygun olmalı. Gelinlik satan bir şirket sitesinin zemininde ancak rock music sitelerine yakışabilecek simsiyah bir zemin kullanmak, ya da gayet ciddi içerikli bir sitede düz bir verdana ya da helvetica yerine ‘comic sans’ karakterini tercih etmek pek mantıklı değildir!
En İyi Site En Karışık Site Değildir… Orta yaşta olanlar hatırlar, eskiden bir Gırgır dergisi vardı, Gırgır’ın yönetmeni Oğuz Aral, çiçeği burnunda karikatüristlere hep ‘Gereksiz taramalardan kaçının.’ derdi. Bu söz, günümüzün dijital ortamında aynen ve hatta daha da fazla geçerlidir. Dikkat ettiniz mi? Dünyanın en çok ziyaret edilen ve tanınan sitelerinin hemen hepsinin sayfa zemini beyazdır, zeminde koyu bir renk ya da bir resim kullanmazlar… Emin olun ki nasıl yapılacağını bilmediklerinden değil . Yaptığınız her şeye, sayfaya eklediğiniz her yeni öğeye soruyla yaklaşın: ‘Bu, gerçekten gerekli mi? Bunun bir işlevi var mı?’ Bu ayrıma varmanın en kolay yolu, sitenize bir ‘ziyaretçi’ gözüyle bakmaktır. Internet’in sınırlarını bilin, yaratıcılığınızın sınırlarını da ona göre çizin. Internet’te ‘hız’ anahtar kelimedir. Sayfaya eklediğiniz her öğe bu hızı biraz daha yavaşlatan bir etkendir. Bu nedenle doğru amaçlar için doğru yöntemler kullanmalıyız. Birkaç örnek vermek gerekirse; Bir ya da birkaç renkten oluşan grafik görüntüler için gif, fotoğraflar için jpeg formatını kullanın. Kullandığınız resimleri kaydederken jpeg görüntü kalitesini maksimum yerine medium yapmak, kullandığınız resimin toplam boyutunu %50 azaltırken, görüntü değerinde ancak dikkatle bakınca fark edebileceğiniz kadar bir kayıba yol açar. Dolayısı ile daha az yer tutan resim ayarını tercih edin. Photoshop’un ’save for the Web’ opsiyonu size farklı format ve kalitede resimlerin hem boyut hem de görüntü kalitesi olarak ne olacağını baştan görmenize olanak sağlıyor. Rollover denilen, mouse ile üzerine gidince yanıp sönen linkleri tasarlarken, eğer amacınız sadece rengi değişen bir link ise, dolması gereken resimler yerine hazırladığınız style sheet’te (css) hover özelliğini kullanın.
Sayfalarınızı onlarca javascript ve java applet ile doldurmayın. Bir paragraf yazıyı sadece güzel görünsün diye resim olarak kaydedip sayfaya koymayın. Alta doğru tren gibi uzayan sayfalar yapmayın… Bunun yerine ileri oklarıyla ziyaretçinin içeriği görüntülemeye devam etmesine sağlayın. Örnekler çoğaltılabilir ama sanırım ne demek istediğimi anlıyorsunuz. Her şeyden Önce İçerik Gelir… Özellikle Web tasarımına yeni başlayanların sıkça içine düştüğü bir yanılgı var ‘Site güzel görünsün de, içine de bir şeyler yazarız!’. Ancak Internet öncelikle bir bilgi kaynağıdır. Internet’e giren insanlar da çabuk ulaşabilecekleri ve kendileri için bir değeri olan bilginin peşindedir.Sitenizin görsel tasarımı içeriğini destekleyen bir yardımcı olmalıdır. Görsel tasarıma ‘esas oğlan’ muamelesi yapıp, içeriği baştan savmak, sadece şekli güzel diye yanınızda bozuk bir cep telefonu taşımakla aynı şeydir. İçeriği oluştururken yine kendimize soru sormakta fayda var. İnsanlar benim siteme neyi bulmak için girecek? Onların beklentisi olan bilgiler neler olabilir? Bu bilgilerden hangileri ziyaretçiler için daha önceliklidir?. Bu sorulardan çıkan sonuçlara göre içeriğinizi önem sırasına koymalı ve bu sıraya göre içeriği Web sitenize yerleştirmelisiniz.Bu şekilde bakıldığında, sitenin en can alıcı bölümü olan ana sayfaya uzunca bir ‘SİTEMİZE HOŞ GELDİNİZ’ yazısı koymak oldukça anlamsız olacaktır. Çünkü büyük ihtimalle sitenize uğrayan kişi bir ‘HOŞGELDİNİZ’ mesajı aramamaktadır! Bunun yerine ana sayfaya yukarıdaki soruların sonuçlarına göre ziyaretçinin en çok ilgi duyup, aradığı konulara ait birkaç satır ve detaylar için birer link koymak akıllıca bir yaklaşım olacaktır. Ve görsel tasarımda dikkat etmemiz gereken bazı noktalar…Ne yaparsak yapalım insanların gözlerini yormaktan kaçınmalıyız. Bilgisayar ekranı zaten insanın gözünü yoran bir yapıya sahip. Bunu karışık renkler, okunması zor yazılar ile daha da kötüleştirmekten kaçınmamız gerekiyor.Sitenizin genel tasarımında, önceden belirlediğiniz bir ana renk ve bu renk ile uyumlu bir ya da iki yardımcı renk kullanmak yeterli olacaktır. Onlarca renk kullanıp, sayfalarınızı panayır yeri’ne çevirmeyiniz! Ana tasarım dışında siteye içerikle birlikte eklediğiniz resimler zaten diğer bütün renkleri sayfalarınıza yeterince ekleyecektir.Yanar döner gifleri, animasyonları yerinde ve sınırlı kullanınız. Eğer bir sayfada özellikle dikkat çekmek istediğiniz bir konu varsa ona dikkat çekmek için yanıp sönen bir link koyabilirsiniz. Ama sayfadaki hemen her linke bunu uygularsanız, sayfanız bir anda 10 tane trafik lambasının bulunduğu bir yaya geçidine benzeyebilir. Sayfalarınızı ferah tutmak için elinizden geleni yapmaya çalışın. Sayfalarınız ziyaretçiye ‘Oku Beni’ demeli. Kullandığınız resimler gereksiz detaylardan arınmış, net ve ilgi çekici olsun. Çok uzun yazılar kullanmamaya gayret edin. Karışık fon resimleri ve göz yorucu fon renkleri ile yazıları okunmaz hale getirmeyin. Tıkış tepiş içerik dolu sayfalar yapmayın, sayfa içinde dengeli boş alanlar bırakarak görüntüde rahatlık sağlayın. Son Olarak…
Web tasarımı özellikle ülkemizde bazen biraz hafife alınmakta ve bu işin sadece bir iki program bilmekten ibaret olduğu yanılgısına düşülmektedir. Halbuki görüldüğü gibi gerçek anlamda Web tasarımı, bütün iletişim bilimlerinin buluştuğu en son nokta konumunda. Bu noktada pazarlama stratejileri, halkla ilişkiler, grafik altyapı, metin yazarlığı ve daha bir çok farklı etken aktif rol üstleniyor. Bunlardan yoksun bir tasarıma ‘Web Tasarımı’ demekten çok ‘HTML Sayfası’ demek daha doğru olur. Unutmayalım ki Word’de yazdığımız her yazı bir edebi eser olamayacağı gibi, Dreamweaver, Flash ya da Frontpage ile yapılan her sayfa da bir ‘tasarım’ olamaz.Internet gerçekten çok keyifli ve bir o kadar da kullanışlı bir iletişim aracı. Onun bu özelliğini ozmamak ve zenginleştirmek de bize düşüyor.
Tasarımın akıllıca kullanıldığı sitelerden küçük örnekler: Google Herkesin bildiği bir arama sitesi. Tasarımı da bu amacına tamamıyla kilitlenmiş durumda. Ne yapacaksınız? Internet’te arama… İşte karşınızda aradığınız kelimeyi yazacağınız kutu, ütünde ne şekilde arama yapacağınıza dair seçenekler ve bir de sade logo. Sitede görsel anlamda başka hiçbir şey yok. Zaten gerek de yok. Ama altyapı müthiş… Şu an Internet’in en iyi işleyen arama motorlarından birisi. EYE4U active media web design (Shockwave Flash) Site tasarımı, yapan bu firmanın sitesi baştan aşağı Flash. Ama 1,2,3 sayıyorsunuz ve sayfa karşınızda! Hem de rnklerin, grafik yerleşimlerin ve müzik-ses efektlerinin mükemmel uyumu ile. Site tamamen Flash olmasına rağmen sizde hiçbir bekleme rahatsızlığı uyandırmıyor. Aksine, geçip karşısına televizyon gibi introyu izliyorsunuz. Yahoo! Bilmeyen var mı? Yahoo’nun içinde onlarca fonksiyon, yüzlerce link var. Ama bunlardan ziyaretçilerin en sık ihtiyaç duyduğu ve kullandığı 6 link, en tepeye kocaman butonlar halinde yerleştirilmiş. Diğer fonksiyonlar da bir güzel kategorize edilip sayfaya dizilmiş. Arama motoru görmeye alışkın olduğumuz yerinde sayfanın üstünde bizi bekliyor (yani arama motorunu aramak zorunda kalmıyoruz!). Ve İşte size pek akıllıca olmayan ve sık karşılaştığımız Internet geyikleri!Bu siteyi izlemek için Internet Explorer 5.0 ve üstü gereklidir, siteyi izlemek için lütfen yükleyiniz!? Eğer bunu söyleyen siteye gerçekten ihtiyacınız yoksa, yani geçerken uğradıysanız ve ilaç siparişi falan vermeyecekseniz… gerçekten bu söyleneni yapar mısınız? Bir pop up penceresi ‘Lütfen adınızı yazınız’ diyor. Adınızı yazıyorsunuz ‘Aycan’ ve ana sayfada bir yazı ‘Hoşgeldiniz Aycan!’ Ne numara ama değil mi? Yani ille şapkadan tavşan çıkaracaksanız, ben adımı yazmadan bilsenize? Siteye giriyorsunuz ve iki tane kocaman bayrak, bir Türk bir İngiliz bayrağı. Bir an Nato karargahına geldim diye düşünürken bakıyorsunuz ki aslında klima satan bir şirketin sitesi! Yani dümdüz ‘Türkçe - İngilizce’ yazsanız olmuyor mu?’