tasarımın temel İlkeleri
DESCRIPTION
Web tasarımında dikkat edilmesi gereken temel noktalar...TRANSCRIPT
![Page 1: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/1.jpg)
ha
ka
nb
ab
ac
.n
et
TASARIMIN TEMEL İLKELERİ
Web Tasarımı ve Programlama
![Page 2: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/2.jpg)
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ı
![Page 3: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/3.jpg)
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.
![Page 4: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/4.jpg)
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.
![Page 5: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/5.jpg)
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.
![Page 6: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/6.jpg)
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
![Page 7: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/7.jpg)
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
![Page 8: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/8.jpg)
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.
![Page 9: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/9.jpg)
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
![Page 10: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/10.jpg)
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
![Page 11: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/11.jpg)
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.
![Page 12: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/12.jpg)
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.
![Page 13: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/13.jpg)
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.
![Page 14: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/14.jpg)
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
![Page 15: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/15.jpg)
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.
![Page 16: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/16.jpg)
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.
![Page 17: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/17.jpg)
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.
![Page 18: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/18.jpg)
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.
![Page 19: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/19.jpg)
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
![Page 20: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/20.jpg)
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.
![Page 21: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/21.jpg)
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
![Page 22: Tasarımın Temel İlkeleri](https://reader034.vdocuments.net/reader034/viewer/2022052223/5597ebc51a28abe92b8b45a1/html5/thumbnails/22.jpg)
tasarımın temel ilkeleri
ha
ka
nb
ab
ac
.n
et
İ L E T İ Ş İ M
22
hakanbabac.net