Tema Tasarım Rehberi

[husmen73 (Gulhin)]

Merhaba,
bu dökümanda sizlere tema tasarımı hakkında bazı basit yönergeler sunacağım ancak uzun yazıları okumaktan sıkılıyorsanız ve kısa olsun diyorsanız hemen şimdi CTRL + W tuşlarına aynı anda basınız.

! İstekler doğrultusunda daha fazla bilgi ekleyebiliriz.

İçerik;
- Kodlama hataları ve öneriler
- Basite indirgenmiş kodlama
- Tasarım yönergeleri

Kodlama hataları ve öneriler
1- Öncelikle dikkat edilmesi gereken en önemli noktalardan biri XHTML hatalarıdır. Bu hataların doğrularını öğrenmek için XHTML Hataları ve Çözümleri isimli dökümana gözatabilirsiniz. Sitenizdeki XHTML hatalarını en yukarıdan çözmeye başlayın çünkü üstte kalan hatalar alttakileri tetikliyor olabilir . XHTML hatalarını Mozilla Firefox'un HTML Validator eklentisi ile öğrenebilirsiniz. Bu hatalar bulunduğu sürece Simple Machines Tema Sitesine kesinlikle temalarınızı ekleyemezsiniz.
2- Gerektiği yerde gerekli kodları kullanmaktan kaçınmayın. table etiketi yerine div etiketini kullanmanın arama motorları tarafından daha iyi olduğu söylenir ancak yanlış bir bilgidir. Hangi kodların site düzenine uygun olduğunu seçerek kodlamaya başlayın. table etiketi ile düzenlenmesi gereken yerde div etiketleriyle uğraşmayın. Ayrıca arama motorlarına yardımcı olmak için dl, dt ve dd etiketlerinide kategorileri düzenlemek için kullanabilirsiniz. dl etiketi ile listeyi açıyoruz, dt etiketi ile kategori ismini (başlık) ekliyoruz ve dd etiketi ile de kategori açıklamamızı ekliyoruz. Bu şekilde düzenleme yapılan sitede bir nebzede olsa arama motorları için faydalı olacaktır. Bu konuda da hemen örnek olarak dl dt ve dd etiketlerini kullanalım.

Code Select Expand

<dl>
<dt>Genel Kategori</dt>
<dd>Genel Kategori içeriğini anlatan açıklamamız</dd>
<dt>Sıradan Kategori</dt>
<dd>Sıradan Kategori içeriğini anlatan açıklamamız</dd>
</dl>


Basite indirgenmiş kodlama
1- Bu konuyu örneklerle açıklarsam daha iyi olacaktır. Hemen basit bir kodlama yazalım.
Örnek 1:
Bir adet değişkenimiz olsun; $gelendeger

Code (Uzun yazılımı) Select Expand

<?php
if(empty($gelendeger))
echo 'Gelen deger bos';
else
echo 'Gelen deger bos degil';
?>


Code (Önerilen basit kısa yazılımı) Select Expand


<?php
echo empty($gelendeger) ? 'Gelen deger bos' : 'Gelen deger bos degil';
?>



Örnek 2:
İki adet değişkenimiz olsun; $gelendeger, $birsey

Code (Uzun yazılımı) Select Expand

<?php
if(empty($gelendeger))
$birsey = 1;
else
$birsey = 2;
?>


Code (Önerilen basit kısa yazılımı) Select Expand


<?php
empty($gelendeger) ? ($birsey = 1) : ($birsey = 2);
?>

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select Expand


<?php
$birsey = empty($gelendeger) ? 1 : 2;
?>


Örnek 3:
Üç adet değişkenimiz olsun; $giris, $ziyaretci_adi, $kullanici_adi

Code (Uzun yazılımı) Select Expand

<?php
if(empty($giris))
echo 'Merhaba' . $ziyaretci_adi;
else
echo 'Merhaba' . $kullanici_adi;
?>


Code (SiNaN tarafından önerilen basit kısa yazılımı) Select Expand


<?php
echo 'Merhaba ', empty($giris) ? $ziyaretci_adi : $kullanici_adi;
?>


Örneklerdeki kodun mantığını açıklayayım;
($koşul == 1) ? '1. deger' : '2. deger';
 
Eğer $koşul değişkeni 1'e eşit olursa 1. deger gösterilecek, aksi durumunda 2. deger gösterilecek

Sözlü olarak;	$koşul	soru işareti	$değişken1	iki nokta üst üste	$değişken2	noktalı virgül
Basit örnek olarak;	($kosul == 1)	?	Koşul 1e eşit	:	Koşul 1e eşit değil	;

Bu tür kodlamalarda değişkenleride kullanmak isterseniz noktalara ve virgüllere dikkat etmelisiniz, hemen örnek veriyorum.

Yanlış: ($gelendeger == 1) ? 'Gelen deger ', $gelendeger : 'Gelen deger ',$gelendeger;
Doğrusu: ($gelendeger == 1) ? 'Gelen deger '. $gelendeger : 'Gelen deger '.$gelendeger;

Yanlış: echo 'Sonuçlardan ' , ($gelendeger == 1) ? 'Gelen deger ', $gelendeger : 'Gelen deger ',$gelendeger , ' e eşitmiş';
Doğrusu: echo 'Sonuçlardan ' , ($gelendeger == 1) ? 'Gelen deger '. $gelendeger : 'Gelen deger '.$gelendeger , ' e eşitmiş';



Sözlü olarakta kısaca şöyle anlatabilirim; bu tür kodlamayı kullanırken echo içinde yazdırmak için virgülle başlayıp virgülle kapatacaksınız. Eğer koşul için herhangi bir değişken kullanılacaksa bunlarıda nokta işareti ile yazmalısınız.

Parse error: syntax error, unexpected ',' in C:\Documents and Settings\husmen73\Desktop\xampp-win32-1.6.3a\xampp\htdocs\test6.php on line 2

Tasarım Yönergeleri
1- Öncelikle yapmak istediğiniz temanın hedef kitlesini ve tasarımda kullanacağınız renk tonlarını belirleyin. Bunun için Color Schemer veya Colour Lovers adresini kullanabilirsiniz.

Örnek bir renk şablonu göstermek istiyorum;

3 tane ana renk ve tonlarını hazırladık. Renk paleti tasarımda çok yardımcı olacaktır.

2- Tasarımda kullanacağınız renkleride sınırlamayı unutmayın. Gereksiz fazla çeşit renkli tasarımlar göze hoş gelmez. Renk uyumuna bu nedenle dikkat etmeliyiz. Sıcaklık yelpazesine uymayı unutmayın. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

Şu örneğimizi inceleyelim;

Ne kadar kötü görünüyor değil mi? Sürekli bu resme bakarak gözlerimizi yorarız, haliylede tasarımımızda bir anlam kazanmaz. Bu nedenle şu tarzda renk tonlarında hazırlanmış uygulamalar yapın;


3- Tasarımda watermark tarzı arkaplanı şeffaf olan bir resim kullanmak istiyorsanız saydamlık değerlerini %10-15 arası yapabilirsiniz. Örneğimizi inceleyelim;

Arkaplan konsantrat değeri %15 olan bir resim


Arkaplan konsantrat değeri %100 olan bir resim

Aradaki farkı şimdi daha iyi anlamış olmalısınız. Yapacağımız tasarımlarda renk konsantratı çok önemlidir. Eğer, ziyaretçinin dikkatini tasarımınızdaki önemli bir alana çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz alanı karartabilirsiniz.

4- Şimdi objelerin büyüklüğünün nasıl derinlik katabileceğine bir bakalım. Bu ilk örnek çok basit, sadece bir sürü daire var. Burada bir şeyin boyutunu ayarlamak gibi basit bir işlemle nasıl derinlik katabileceğimizi görüyoruz.

Her birinin boyutu bir öncekinden daha küçük. Boyutlarındaki değişikliğin nasıl derinlik hissi verdiğini görün. Hangi daire size daha yakın görünüyor? Tabi ki en büyük olan daire.

5- Renkler bile derinlik katmamıza yardımcı olabilir. Bu genellikle büyük uzaklıklarda söz konusudur. Bir dış sahne için renk seçerken, önplandaki nesnelerin güçlü, enerjik renklere sahip olması gerekir. Daha uzaktaki nesnelerin ise daha az canlı renklere sahip olmalıdır. Örneğimizi inceleyelim;

Görüldüğü gibi yeşil ağaçlık alan daha uzak görünüyor ve bize yakın olan kayalıklar ve insanlar daha canlı renklere sahip.

6- Yazılarınızda ve resimlerdeki nesnelerinizde gölgelendirme efekti kullanın. Tasarımınızın daha profesyonel ve daha güzel görünmesini sağlayacaktır. Gölgelendirme kullanırken gölgeyi hafif saydam olarak yaparsanız daha iyi görüntü elde edebilirsiniz. Örneklerimizi inceleyelim;

%30'luk gölgelendirmek efekti kullanılmış bir yazı


%30'luk gölgelendirmek efekti kullanılmış bir yazı


Gölgelendirme kullanışmamış bir yazı

Aradaki farkı açıkça görebiliyoruz. Hafif gölgelendirme efekti kullanılmış nesne daha iyi görünmekte ve tasarıma derinlik vermektedir.

7- Yazı tiplerinizi sınırlayın ve daha iyi görünüm elde edin. Bir tasarımda çok fazla yazı tipi kullanmak en büyük hatalardan birisidir. Broşüründe 8 farklı yazı tipi kullanan birinden daha kötü görünen bir şey yoktur. Bu konuda bir sitede yayınlanmış olan birkaç resimi göstereceğim;

Gördüğünüz gibi, burada sadece iki adet yazı tipi kullanıldı. Süslü yazı tipi, üst kısım için ve basit yazı tipi de genel metin için kullandık. Temiz ve tutarlı görünüyor.


Burada da yazı tiplerinin kötü kullanımı söz konusu. Bu durumda, bir çok süslü yazı tipi kullandım ve sadece tasarımı tutarsız gösteriyor. Alt kısım, ana başlıkla uyuşmuyor bile.


Daha da kötüsü genel metinleriniz için çok süslü bir yazı tipi kullanmanızdır

Eğer süslü yazı tipiniz modern veya çağdaş görünüyorsa, o halde basit yazı tipiniz bir sans-serif yazı tipi olmalıdır. Eğer süslü yazı tipiniz eski moda görünüyorsa, o zaman ikincil yazı tipi olarak serif kullanın.


8- Taracıyıya ve içeriğe göre genişlik ve yüksekliğini otomatik ayarlayan tasarımlar hazırlayalım. Örnekle genel olarak açıklayayım;


Büyük boyutta bakmanızı öneririm: http://www.gulhin.com/cokluortam/resimler/741e35125a9c10d666b33e6bf5370cd2.png

1, 3, 6 ve 8 numaralı köşelerin sabit genişlik ve yükseklikleri olmalıdır.
2 ve 7 numaralı resim x ekseninde (yatay) tekrar eder.
4 ve 5 numaralı resim y ekseninde (dikey) tekrar eder.

Bu taslağı kullanarak şöyle bir tablo oluşturabiliriz;

Büyük boyutta bakmanızı öneririm: http://www.gulhin.com/cokluortam/resimler/3592ea4bea1fa252e163c6ee6d75e74a.png

Görüldüğü gibi yazımızın uzunluğu arttıkça sayfa aşağı doğru kayıyor aynı zamanda da ekran çözünürlüğü arttıkça sayfada onun kadar genişliyor.

Kodlamaya geçelim;

Code Select Expand


<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="ustsol">1</td>
<td class="ustorta">2</td>
<td class="ustsag">3</td>
</tr>
<tr>
<td class="ortasol">4</td>
<td class="ortaicerik">İÇERİK</td>
<td class="ortasag">5</td>
</tr>
<tr>
<td class="altsol">6</td>
<td class="altorta">7</td>
<td class="altsag">8</td>
</tr>
</table>
Kodlamada hangi resim hangi alana geleceğini yazdım. Bu yazımız eğitim amaçlı olduğu için td etiketleri arasına rakamları yazdım, tasarıma uygularken bu rakamları yazmayın aksi takdirde tasarımda da bu rakamlar çıkacaktır. Rakamların yerine td etiketinin boş kalmaması için şu kodu ekleyebilirsiniz;  
  kullanımına bir örnek vereyim;

Code Select Expand


<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="altsol">&nbsp;</td>
<td class="altorta">&nbsp;</td>
<td class="altsag">&nbsp;</td>
</tr>
</table>


Stil kodları için tekrar tanımlama yapmak istiyorum;
1 = ustsol
2 = ustorta
3 = ustsag
4 = ortasol
İÇERİK = ortaicerik
5 = ortasag
6 = altsol
7 = altorta
8 = altsag

Stil dosyası içinde şunları eklemeliyiz;

Code Select Expand


/* Üst Kısım için Stil Kodları */
.ustsol
{
background: url('ustsol.png') no-repeat;
width: 20px;
height: 20px;
}
.ustorta
{
background: url('ustorta.png') repeat-x;
height: 20px;
}
.ustsag
{
background: url('ustsag.png') no-repeat;
width: 20px;
height: 20px;
}

/* Orta Kısım için Stil Kodları */
.ortasol
{
background: url('ortasol.png') repeat-y;
width: 20px;
}
.ortaicerik
{
padding: 10px; /* İçeriğin kenarlardan 10 pixel uzaklaşmasını sağladık */
}
.ortasag
{
background: url('ortasag.png') repeat-y;
width: 20px;
}

/* Alt Kısım için Stil Kodları */
.altsol
{
background: url('altsol.png') no-repeat;
width: 20px;
height: 20px;
}
.altorta
{
background: url('altorta.png') repeat-x;
height: 20px;
}
.altsag
{
background: url('altsag.png') no-repeat;
width: 20px;
height: 20px;
}

repeat-x = x eksininde tekrarlar.
repeat-y = y eksininde tekrarlar.
no-repeat = tekrarlama yapmaz.

Genişlik (width), yükseklik (height) ve tekrarlama (repeat) ibarelerine dikkat etmeliyiz. Bu tür kodlamalarla tarayıcıya ve içeriğe göre genişlik ve yüksekliğini otomatik ayarlayan tasarımlar hazırlayabiliriz.

Kaynak: Tema Tasarım Rehberi

[MadBlazer]

husmen73 mükemmel bir konu, Tema tasarım öğrenmek isteyenler için (benim gibi ) çok faydalı olucak. 

[#Serseri]

Eline sağlık. Bu aralar Türkçe bölümüne renk geldi

[Alpay]

Ellerine sağlık Hüsmen =) Aynen serseri daha neler olucak bakalım hep birlikte

[BuЯЯЯЯaK]

Vay Hüsmen'imede böyle bi döküman yakışırdı

Eline sağlık .

[[SiNaN]]

Örnek 1:
Bir adet değişkenimiz olsun; $gelendeger

Code (Uzun yazılımı) Select Expand

<?php
if(empty($gelendeger))
echo 'Gelen deger bos';
else
echo 'Gelen deger bos degil';
?>


Code (Önerilen basit kısa yazılımı) Select Expand


<?php
empty($gelendeger) ? 'Gelen deger bos' : 'Gelen deger bos degil';
?>
Üssteki haliyle bir çıktı alamazsınız.

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select Expand


<?php
echo empty($gelendeger) ? 'Gelen deger bos' : 'Gelen deger bos degil';
?>

Örnek 2:
İki adet değişkenimiz olsun; $gelendeger, $birsey

Code (Uzun yazılımı) Select Expand

<?php
if(empty($gelendeger))
$birsey = 1;
else
$birsey = 2;
?>


Code (Önerilen basit kısa yazılımı) Select Expand


<?php
empty($gelendeger) ? ($birsey = 1) : ($birsey = 2);
?>

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select Expand


<?php
$birsey = empty($gelendeger) ? 1 : 2;
?>

Örnek 3:
Üç adet değişkenimiz olsun; $giris, $ziyaretci_adi, $kullanici_adi

Code (Uzun yazılımı) Select Expand

<?php
if(empty($giris))
echo 'Merhaba' . $ziyaretci_adi;
else
echo 'Merhaba' . $kullanici_adi;
?>


Code (Önerilen basit kısa yazılımı) Select Expand


<?php
empty($giris) ?  'Merhaba' . $ziyaretci_adi : 'Merhaba' . $kullanici_adi;
?>
Üsttekinde herhangi bir çıktı alınmaz.

Code (SiNaN tarafından önerilen basit kısa yazılımı) Select Expand


<?php
echo 'Merhaba ', empty($giris) ? $ziyaretci_adi : $kullanici_adi;
?>

Bunlar dışında harika olmuş Aslanbac, özellikle renklerle alakalı kısmın kendi adıma çok faydalı olduğunu söylemeliyim.

[husmen73 (Gulhin)]

Seninkileride ekleyeyim Sinan, yazdıkların daha iyi

[jOkErGuEsT]

Çok faydalı olmuş, teşekkürler
Hatta gaza gelip temayapmaya başlayabilirim

Temada dil butonları yerine poll'lar içinde linkleri nasıl yapabiliriz?

[husmen73 (Gulhin)]

Nereyi değiştirmek istediğiniz anlamadım. Resim ile anlatırsanız daha iyi olabilir.

[jOkErGuEsT]

Şöyle açıklayayım:
tema/images/english gibi klasörlerdeki resimler yerine butonları link olarak nasıl atarız?

[husmen73 (Gulhin)]

index.template.php dosyanızı açın,

$settings['use_buttons'] = true;

Bulun ve true değerini false yapın.

$settings['use_buttons'] = false;

eğer temanız bunu destekliyorsa tüm butonlar normal yazı şeklini alacaktır. Desteklemiyorsa tüm butonları ilgili sayfalarına göre düzenlemeniz gerekecek.

[jOkErGuEsT]

index.template.php dosyanızı açın,

$settings['use_buttons'] = true;

Bulun ve true değerini false yapın.

$settings['use_buttons'] = false;

eğer temanız bunu destekliyorsa tüm butonlar normal yazı şeklini alacaktır. Desteklemiyorsa tüm butonları ilgili sayfalarına göre düzenlemeniz gerekecek.

Çok teşekkürler

Peki tema yaparken, bunu direkt kullanırsak sorun çıkar mı?

[husmen73 (Gulhin)]

Sorun çıkmaz.

[deejayss]

emeğine sağlık usta sağolasın

[Mert Öz]

çok iyi bir konu tebrikler emeğine sağlık

[AkceO]

ett gzl bı dokuman olmus elıne saglık

[VaTaN84]

faydalı bilgiler. teşekkürler hüsmen.

[#Serseri]

2- Gerektiği yerde gerekli kodları kullanmaktan kaçınmayın. table etiketi yerine div etiketini kullanmanın arama motorları tarafından daha iyi olduğu söylenir ancak yanlış bir bilgidir. Hangi kodların site düzenine uygun olduğunu seçerek kodlamaya başlayın. table etiketi ile düzenlenmesi gereken yerde div etiketleriyle uğraşmayın.

Ne gibi durumlarda Table veya Div kullanmalıyız?

[husmen73 (Gulhin)]

S e r s e r i, bu dökümanı biraz genel olarak yazdım. Yani normal web sitesi kodlamasında da işe yarayacaktır. SMF Temaları için table'nin uygun olduğu bir yer şuan aklıma gelmiyor. Tamamı div ile yazılabilir. Tamamı div ile yapılacaksa da bir sürü div kullanmayın, bunları mümkün olduğunca azaltarak yazın. Kodlamaya başlamadan önce taslak oluşturmak faydalı olacaktır. Daha sonradan kodlamanız eksik olabilir. Tekrar düzenleme yapmanız gerekebilir.

[Paragaya]

Çok Güzel aslında anlatım

[[masteRy]]

Teşekkürler harika bir rehber olmuş ellerinize sağlık.. !

[Deli-Divane]

elinize sağlık

[Death Note]

Çok Güzel Ellerine Sağlık.

[Alpay]

43 Tasarım Hatası diye bir başlık var sanırsam gidebilir bu başlıga =)

1.Ziyaretçi sitenizin içeriğini saniyeler içerisinde anlayabilmeli.
2. Uzun yazılardan kaçının .İçeriğiniz başlık,alt başlık ve listelerden oluşsun.İçerik ,okuyucu tarafından kolayca taranabilmeli ve istediğini rahatlıkla bulması sağlayın.
3.Okunaksız ve süslü bir yazı tipi kullanmayın.
4.Ufak yazı tiplerini kullanmayın.İçeriğiniz kolayca okunabilmelidir.
5. Sitenizden verilen linkleri yeni bir pencerede açmayın.Kontrolün kullanıcıda olmasını sağlayın.
6. Kullanıcının tarayıcı pencerisini yeniden boyutlandırmayın.Kontrolün kullanıcıda olmasını sağlayın.
7. Gerekli olmadıkça ziyaretçileri üye olmaları için zorlamayın.
8. Sitenize üye olan bir kullanıcıya otomatik olarak haber bildirimlerini göndermeyin.
9. Websitenizin yüklenişini geciktirmesi haricinde, Flash'ın aşırı kullanımı ziyaretçileri kızdırabilir.
10. Müzik kullanmayın.
11. Eğer bir audio dosya kullanmak zorundaysanız bunu ziyaretçinin başlatmasını sağlayın.
12. Sitenizi rozetlerle doldurmayın. Ağ(Network) ve Komünite rozetleri siteleri profosyonel olmayan bir görünüme sokarlar. Tanımlama ve ödül rozetlerini ise hakkımızda sayfasına yerleştirin.
13. Anasayfayı esas site arayüzünü başlatan sayfa olarak kullanmayın. İçeriğinize birkaç adımda ulaşılmasını sağlayın.
14. İletişim bilgilerini eklediğinizi emin olun.Aksi takdirde geribeslemeyi zaten kaybetmiş olursunuz.
15. Kullanabilirliğin temel bir ilkesi olan ''Geri'' butonunu unutmayın.
16. Parıldayan link kullanmayın(bazı forumlarda mevcut).
17. Karışık URL yapılarından kaçının.
18. HTML tablolarında CSS kullanın.
19. Kullanıcılarınızın sitenizin tamamını araştırabildiğinden emin olun.
20. Açılır menülerden sakının.
21. Tekst yönlendirmeyi kullanın.
22. PDF dosyalarının linklerini açık olarak belirtin. Çünkü Acrobat Reader başlayana kadar belirli bir süre geçecek ve bu da ziyaretçiyi rahatsız edecektir.
23. Sitenizde bağlantı hızı, flash veya html seçenekleri sunarak ziyaretçinin kafasını karıştırmayın.
24. Adsense reklamlarını içeriğinize gömmek kısa vadede tıklanma oranınızı arttırabilir. Uzun vadede bu okuyucu kitlenizin azalmasına neden olacaktır. Kızmış bir ziyaretçi kaybedilmiş bir ziyaretçidir.
25. Basit bir navigasyon(yönlendirme,dolaşma) yapısına sahip olun. Ziyaretçiler istediklerine kolayca ulaşabilsin.
26. Giriş animasyonlarından sakının.
27. Frontpage kullanmayın. Bu tip HTML editörleri site oluşturmayı kolay hale getirirler fakat kod yönünden zayıf,diğer tarayıcılarla uyumsuz ve çeşitli hatalarla dolu sitelerin ortaya çıkmasına neden olurlar.
28. Sitenizin çapraz tarayıcı desteği(cross-browser) ile uyumlu olduğundan emin olun.
29. Linklere Çapa(Anchor) tekst dahil ettiğnizden emin olun.
30. Linklerinizi gizlemeyin(cloaking link). Ayrıca, kullanıcı tarayıcı durum çubuğunda linkin nereye gittiğini görebilmesini sağlayın.
31. Linkleri farkedilebilir yapın. Ziyaretçi hangisinin tıklanabilir hangisinin tıklanamaz olduğunu kolayca anlayabilmelidir. Linkleriniz yazıdan farklı bir renkte olduğuna emin olun. Linklerinizi altı çizili olarak da sunabilirsiniz.
32. Gerekli olmadıkça normal yazıyı altı çizili veya arka planı renkli olacak şekilde yayınlamayın.
33. Tıklanan linklerin renginin değişmesine dikkat edin.Bu sitenin kulllanılabilirliği açısından önemlidir.
34.Animated gif kullanmayın çünkü izleyicinin dikkatini dağıtırlar ve profosyonel olmayan bir görünüm sunarlar.
35. Resimler için ALT ve TITLE özniteliklerini(attribute) kullandığınızdan emin olun.
36. Uyumsuz ve göze batan renkler kullanmayın.
37. Beliren(pop-up) pencere veya mesaj kullanmayın.
38. Javascript linklerinden sakının. Bu linkler kullanıcı tıkladığında ufak bir js uygulamaya koyarlar. Kullanıcılar için sorun teşkil ettiklerinden dolayı kullanmayın.
39. Sayfa altlığına(footer) fonksiyonel linkler dahil edin. Buradan Anasayfaya ve İleitişim bölümüne link verebilirsiniz.

40. Uzun sayflardan dolayısıyla uzun yazılardan kaçının.Bunu yapmazsanız okuyucu yazınızın büyük kısmını atlayacaktır.
41.Yatay kaydırma(scrolling) kullanmayın. Dikey kaydırma kabul edilebilr ama yatay kaydırma hakkında aynı şey söylenemez.
42. Heceleme ve grammer hatası yapmamaya özen gösterin. Bu bir dizayn hatası değildir fakat toplamda bir sitenin kalitesini etkileyen önemli faktörlerden birtanesidir.
43. Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) kullanıyorsanız rakamların ve harflerin okunabilir olmasına dikkat edin.


Kaynak : http://www.bildirgec.org/yazi/43-tasarim-hatasi

[Özgür]

Döküman harika olmuş yahu. Ellerinize sağlık.

[Hayalet Sürücü]

Bu kod ', empty($giris) ? bug olmasina yol acmaz mi ?

[husmen73 (Gulhin)]

Bu kod ', empty($giris) ? bug olmasina yol acmaz mi ?

Ne gibi bir hatadan bahsediyorsunuz?

[...ycLmeN...]

çok faydalı bilgiler teşekkürler..

[mavikaplan]

Teşekkürler...

[bulutum]

tema yapımını videolu bir şekild çiziminden style eklemeye kadar kısaca sıfırdan bir tema yapım videolu su yapsanız daha güzel olur bence

[yusuf34]

teşekkürler. yararlı bir kaynak olmuş .