ha

ka

nb

ab

ac

.n

et

TASARIMIN TEMEL İLKELERİ

Web Tasarımı ve Programlama

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• İçerik

• Tasarım

• İşlevsellik

• Kullanılabilirlik

• Uyumluluk

2

• Hedef Kitle Beklentileri

• Renk Dengesi

• Okunabilirlik

• Hizalama

• Ses ve Görüntü Dosyaları

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• İçerik

3

Tasarımı çok güzel olan bir

sitede içerik yok ise o siteyi

kimse ziyaret etmez ama

tasarımı zayıf olan bir sitede

içerik iyi ise o siteye her zaman

ziyaretçi gelir.

Sitede kullandığımız içerikler,

site ziyaretçilerinin beklentileri

dışında olmamalıdır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Tasarım

4

Web sitesi içeriklerinin

hazırlayacağımız web sayfasının

neresinde ve nasıl görünmesini

planladığımız aşamadır.

Ne, nerede olacak?

sorularının cevaplarını kağıt üzerine

ya da bilgisayara çizeriz.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• İşlevsellik

5

Sitedeki her sayfadan diğer

sayfalara bağlantılar

oluşturmaya çalışmalıyız.

Her sayfadan ana sayfaya ve

sitenin ana bölümlerine de

bağlantı sağlamalıyız.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Kullanılabilirlik

6

Hızlı erişim

Ana sayfaya bağlantı

Site içi kolay gezinti

İletişim sayfası / formu

İçerik yoğunluğuna göre

arama çubuğu

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Uyumluluk

7

Farklı web tarayıcılarında aynı görünüm

Mobil cihazlarla entegrasyon

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Hedef Kitle Beklentileri

8

Hazırlayacağımız web sitesinin kullanıcıları çok önemlidir.

Çünkü web siteleri internet kullanıcıları için hazırlanır.

Bu yüzden kullanıcıların

(ziyaretçilerin) beklentileri ve

yetenekleri doğrultusunda bir

web sitesi hazırlamalıyız.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Renk Dengesi

9

Renkler genel kurumsal

kimlik bütünlüğüne uygun

olmalıdır.

Renkler aşırı kullanıldığında

tasarım dağınık, dikkat

dağıtıcı görünebilir; az

kullanıldığındaysa donuk

görünebilir.

Ayrıntılı bilgi için tıklayın…

http://www.sanalkurs.net/web-tasariminda-renkler-1494.html

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Renk Dengesi

10

Sıcak Renkler

Kırmızı, turuncu, sarı

Soğuk Renkler

Mavi, yeşil, mor

Nötr Renkler

Siyah, beyaz, gri

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Okunabilirlik

11

Doğru / Okunabilir yazıtiplerinin seçimi, içeriğin sunumunu

kolaylaştıracaktır. Uçları çıkıntılı yazı tiplerinin

yerine uçları çıkıntısız

yazıtiplerini kullanmamız

uygun olur.

Başlıkları ve yazıları

yazarken HEPSİ BÜYÜK

ve Sadece İlk Harfleri

Büyük metinler sanıldığı

gibi dikkat çekmez.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Hizalama

• Metin ve Nesneler Arası Boşluklar

12

Metin-nesne / metin-metin arasında okunurluğu arttırmak

için bırakılan boşluğa beyaz boşluk denir.

Beyaz boşluklar nesne ve metinleri algılamayı kolaylaştırır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB TASARIMINDA TEMEL İLKELER

• Ses ve Görüntü Dosyaları

13

Ekleyeceğimiz resimler, web tarayıcılar tarafından

görüntülenebilir formatta olmalıdır (JPG, GIF, PNG).

Aynı durum, ses ve video dosyaları için de geçerlidir.

Ses ve görüntü dosyalarına ait tüm

düzenlemeler, web ortamına uygun

şekilde yapılmalıdır.

Böylelikle; site hızında, bu

dosyaların düzenlenmemesinden

kaynaklanacak yavaşlıklar önlemiş

olacaktır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Bütünlük

• Güncellik

• Bağlantı Hızı

• Sayfa Çözünürlüğü

• Site Haritası

14

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Bütünlük

15

Web sitemiz, ana

sayfasından iç sayfasına,

kullanılan yazı tiplerinden

renklere ve resim

boyutlarına kadar birbirine

benzeyen bir şekilde

olmalıdır.

Site içerisinde kullanılan

dil (üslup) aynı olmalıdır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Güncellik

16

Web sitesindeki bilgiler,

güncel olmalıdır.

Eski kullanılmayan bilgileri

gerekirse sitemizde bir

arşiv bölümü hazırlayarak

orada tutmalıyız.

Bağlantı verdiğimiz

sayfaların çalıştığından

emin olmalıyız.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Bağlantı Hızı

17

Standart dışı yazıtipleri

kullanılmamalıdır.

Harici sayfa / nesne

bağlantıları, sayfa

yüklenmesini geciktirir.

Görseller, uygun şekilde kullanılmalıdır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Sayfa Çözünürlüğü

18

Web tasarımı yaparken dikkat

edeceğimiz noktalardan biri

kullanıcıların ekranında yatay

kaydırma çubuğu oluşturmamaktır.

Grafikte en çok kullanılan ekran

çözünürlüğü 1024x768 olarak

gözükmektedir.

Site genişliğinin de 900-1000 piksel

arasında olması önerilmektedir.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Sayfa Çözünürlüğü

19

Ekran çözünürlüğüne göre değişen (büyüyüp küçülebilen)

web sayfası tasarımları da yapabiliriz. Ama bu durum,

tasarımda farklılıklar oluşturabilir!!!

sabit genişlik değişken genişlik

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

WEB SİTESİ TASLAĞI OLUŞTURMA

• Site Haritası

20

İçerik yönünden zengin,

kategorisi bol bir web

sitesinde kullanıcıların

erişimini kolaylaştırmak için

bir site haritası

hazırlanabilir.

Site haritasının bulunduğu

sayfadaki bağlantılar

sayesinde tüm kategorilere

ulaşım daha kolay

olacaktır.

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

Şimdilik bu kadar…

web tasarımı ve programlamayla ilgili bir sonraki yayın

HTML

21

tasarımın temel ilkeleri

ha

ka

nb

ab

ac

.n

et

İ L E T İ Ş İ M

22

iletisim@hakanbabac.net

hakanbabac.net