Web tasarimi ilkeleri

Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü
Öğr. Gör. Altay Subutay Kaya
Mart, 2020
KONYA
Necmettin Erbakan Üniversitesi
Ahmet Keleşoğlu Eğitim Fakültesi
EĞİTSEL WEB TASARIMI

HAZIRLAYANLAR
Huriye Melike İNCE 17310131009
Huriye Tozar 16310131033

1. Web Tasarım İlkeleri
2. İçerik
3. Tasarım
4. İşlevsellik
5. Kullanılabilirlik
6. Web tarayıcılarıyla uyumluluk
7. Hedef Kitle Beklentileri
8. Biçimsel Özellikler
9. Renk Dengesi
10. Okunabilirlik
11. Hizalama Metin ve Nesne Arası Boşluklar
12. Ses ve Görüntü Dosyaları
13. Bütünlük
14. Güncellik
15. Bağlantı Hızı
16. Sayfa Çözünürlüğü
17. Site Haritası
18. Değerlendirmeler
19. Kaynakça
İÇİNDEKİLER

KONU BAŞLIĞIWeb Tasarım İlkeleri
Web tasarımı yapılırken dikkat edilmesi gereken ilkeler;
1. İçerik
2. Tasarım
3. İşlevsellik
5. Web tarayıcılarıyla uyumluluk
Bu ilkeler, hazırlanacak web sitesinin alt yapısının düzgün kurulmasını,
daha az hata yapılmasını ve kullanıcıların siteye daha fazla ilgi göstermesini
sağlayacaktır.
Web Tasarım İlkeleri

1. İçerik
Web tasarımı yapılırken kullanılacak en
önemli şey içeriktir. Çünkü web sayfası hazırlamanın
başlıca amacı, bilgilere başkalarının ulaşmasını
sağlamaktır.
İçerikte; uzun cümleler yerine basit ve sade
anlatımlar kullanılmalıdır. Tasarımı zayıf olan bir
sitede içerik iyi ise o siteye her zaman ziyaretçi gelir.
Sitede kullanılan içerikler, ziyaretçilerin beklentileri
dışında olmamalıdır.

2. Tasarım
Hazırlanan web sayfasında içeriklerin nerede ve nasıl görüntüleneceğinin
planlandığı bölümdür.
Tasarımda sayfa logosu, yazılar, menüler kağıt üzerinde veya bilgisayar ortamında
planlanır.

3. İşlevsellik
Kullanıcılar sitenin ana sayfasından site içindeki her sayfaya erişmek ister. Öte
yandan iç sayfalardan da diğer sayfalara erişmek ister. Bunun için mümkün oldukça her
sayfadan diğer sayfalara bağlantı verilmelidir.
Site haritası
oluşturulmalı, site içi bağlantılar
düzgün yapılmalı ve site ana
sayfası ile sık kullanılan
sayfalarına her sayfadan bağlantı
verilmelidir.

 Kullanımı kolay ve anlaşılır bir tasarım yapılmalıdır.
 Yazı tipi, rengi, büyüklüğü iyi seçilmeli ve uygun zemin üzerine konulmalıdır.
 Sayfalar hızlı yüklenmelidir.
 Sayfa logosu ve menüler kullanıcıların alışık olduğu yerde konumlandırılmalıdır.
 Site içi bağlantılar düzgün ve aktif olmalıdır.
 İletişim formu ve iletişim bilgileri olmalıdır.
 Vurgulanmak istenen kelimeler özel renkte veya kalın olmalıdır.

5. Web Tarayıcılarıyla Uyumluluk
Tasarlanan web sayfasının bütün web tarayıcılarda
aynı görünmesinin sağlanması çalışılmalıdır.
Web tarayıcılar hazırlanırken W3C
(Web standartlarını belirleyen topluluk)
tarafından konulan kurallara göre sayfa kodlarının
istediklerini yaparlar fakat yeni kurallara, her firma anında yeni program sürümü
çıkaramayabilir.
Bu da kurallara uygun hazırlanan sayfanın bazı tarayıcılarda düzgün
bazılarında ise düzgün görünmemesine neden olabilir.

KONU BAŞLIĞIHedef Kitle Beklentileri
Hedef Kitle Beklentileri
Web siteleri internet kullanıcıları için hazırlanır. Bu yüzden web sitesi
kullanıcılarının beklentileri ve yetenekleri doğrultusunda bir web sitesi hazırlanmalıdır.
Anaokuluna giden çocuklar için hazırlanacak sitede beklenti farklı, üniversite
öğrencileri için hazırlanacak bir forum sitesinde ise beklenti daha farklı olacaktır.
Anaokulu sitesinde çok renkli sayfalar kullanılabilirken, kurumsal bir sitede daha sade
sayfalar kullanmak gerekir.

KONU BAŞLIĞIBiçimsel Özellikler
Biçimsel Özellikler
Web sitesi tasarımı yaparken en önemli şeylerden biri sitenin
görüntüsüdür. Bunun için site görüntüsünü hazırlarken gerekli olan temel biçim
özelliklerine dikkat edilmesi gereklidir.
• Renk Dengesi
• Okunabilirlik
• Hizalama
• Metin ve Nesne Arası Boşluklar
• Ses ve Görüntü Dosyaları

Tasarım yaparken renklerin insanlara
çağrıştırdığı duygulara dikkat edilebilir.
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.
Renk Dengesi

Sıcak renkler: Kırmızı, turuncu, sarı
Sıcak renkler diğer renklere göre gözü daha önce etkiler. Bu yüzden hazırlanan
sayfalarda az kullanmak daha iyi bir etki bırakır.
Soğuk renkler: Mavi, yeşil, mor, mavi-yeşil
Soğuk renkler sakinleştirici ve yatıştırıcı renklerdir ve çok kullanılır.
Nötr renkler: Beyaz, siyah, gri
Nötr renkler arka planlar ve soğuk renklerin etkilerini artırmak için idealdir.

Okunabilirlik
Başlıklar ve yazılar düzenli tutularak
kısa özetler oluşturulabilir.
İçerikte dikkat çekilmesi istenen yerler
vurgulanmalıdır.
Times New Roman, Times vb. uçları
çıkıntılı yazı tiplerinin yerine
okunurluğu kolay olan uçları çıkıntısız
Arial, Helvetica vb. yazı tipleri
kullanılmalıdır.
Birçok internet kullanıcısı sayfaya önce göz atar, sonra okur. Bu
yüzden hazırlanan sayfa göz atmaya uygun olmalıdır.

Hizalama
Metin ve Nesneler Arası Boşluklar
Beyaz boşluklar nesne ve metinleri algılamayı kolaylaştırır.
Metin-nesne / metin-metin arasında okunurluğu arttırmak için
bırakılan boşluğa beyaz boşluk denir.

Ses ve Görüntü Dosyaları
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.

KONU BAŞLIĞIWeb Sitesi Taslağı Oluşturma
• Bütünlük
• Güncellik
• Bağlantı Hızı
• Sayfa Çözünürlüğü
• Site Haritası
Web Sitesi TaslağıOluşturma

Bütünlük
 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.

Güncellik
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.

Bağlantı Hızı
Görseller, uygun şekilde kullanılmalıdır.
Standart dışı yazı tipleri kullanılmamalıdır.
Harici sayfa / nesne bağlantıları, sayfa
yüklenmesini geciktirir.

Sayfa Çözünürlüğü
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

Sayfa Çözünürlüğü
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

Site Haritası
İç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.

1) Aşağıdakilerden hangisi web tasarımı yapılırken dikkat edilmesi
gereken ilkelerden değildir?
A. Yol Haritası
B. Tasarım
C. İşlevsellik
D. Kullanılabilirlik
E. İçerik
Değerlendirmeler

2) Aşağıdakilerden hangisi renk dengesi açısından doğrudur?
A. Site logosunda bulunan renk ana renk olamaz.
B. En fazla 3 renk yoğun kullanılmalıdır.
C. Ne kadar çok renk kullanılırsa o kadar dikkat çekici olur.
D. Yazı renkleri önemli değildir.
E. Tasarım yaparken renklerin insanlara çağrıştırdığı duygulara dikkat
edilebilir.
Değerlendirmeler

3) Aşağıdakilerden hangisi sıcak renktir?
A) Sarı
B) Mavi
C) Gri
D) Mor
E) Yeşil
Değerlendirmeler

4) Aşağıdakilerden hangisi web sitesi taslağı oluşturmak için
önemli değildir?
A) Bütünlük
B) Güncellik
C) Bağlantı Hızı
D) Bağlanma saati
E) Site Haritası
Değerlendirmeler

5) Aşağıdaki hangisi kullanılabilirlik ilkesine uygun değildir?
A) Kullanımı kolay ve anlaşılır bir tasarım yapılmalıdır.
B) Yazı tipi, rengi, büyüklüğü iyi seçilmeli ve uygun zemin üzerine
konulmalıdır.
C) İletişim formu ve iletişim bilgileri olmalıdır.
D) Vurgulanmak istenen kelimeler özel renkte veya kalın olmalıdır.
E) Sayfa logosu ve menüler kullanıcıların alışık olduğu yerde
konumlandırılmamalıdır.
Değerlendirmeler

Dersin Adı bu köşeye
❑ https://www.pcnotlari.com/2017/10/18/web-tasariminda-temel-ilkeler/
❑ http://zinzinzibidi.com/web_tasarim/web_tasarimi/web_tasarim_ilkeleri
❑ https://www.slideshare.net/hakanbabac/tasarimin-temel-
ilkeleri?from_action=save
KAYNAKÇA

Web tasarimi ilkeleri

Recommended

Recommended

More Related Content

Similar to Web tasarimi ilkeleri

Similar to Web tasarimi ilkeleri (20)

Web tasarimi ilkeleri