YERLEM VE DZENLEME 1.

Tasarm lemi yi Tasarmn Tanm Web Sayfas Anatomisi Izgara Teorisi Denge Teorisi Btnlk Teorisi Vurgular Klasik Tasarmlar Modern Tasarmlar Sabit veya Deiken Sayfa Boyutlar Ekran znrl Tasarm lemi -Keif (Discovery) alan hakknda bilgi edinme Mteri ile toplant yapma -Gerekletirme (Implementation) Site haritas Sayfa yerleimleri Arka plan ve n plan renk emalar CSS ve HTML erik yerletirme yi Tasarmn Tanm -Kullanllk Kriterleri levsellik Bilginin etkili sunumu Kullanm kolayl - Estetik Kriterleri Genel grnm Animasyonlar Grafikler Tasarm bilgi ile kullanc arasnda bir kpr olmal. Ana navigasyon blou sayfada grnr olmal ve her bir linkin aklayc bir etiketi olmal. Kullancya bulunduu sayfa hakknda bilgi veriniz (oryentasyon). Sitenin tamamnda btnlk salanmal.

Web Sayfas Gvde Yaps D ereve (Containing Block) Logo Navigasyon (Navigation) erik (Content) Sayfa Altl (Footer) Boluklar (Whitespace)

YERLEM VE DZENLEME 2. Tasarmda zgara kullanmak, sayfa elemanlarn orantl olarak yerletirmenize yardmc olur. Altn oran (golden ratio - divine proportion) gze estetik olarak ho gzkr (1,618). ler kural (the rule of thirds) altn orann basitletirilmi versiyonudur. Denge Simetrik Denge Yatay (Horizontal): Stunlar arasndaki denge ki ynl (bilateral): Birden ok eksen zerinde denge Merkezi (radial): Merkez nokta etrafnda denge Asimetrik Denge Deiik boyuttaki ve tondaki objeler arasndaki dengedir. Daha esnek ve soyuttur. Web sayfalarnda simetrik dengeden daha ok asimetrik denge kullanlr. Btnlk Sayfann bir btn olarak alglanmas. Sitenin her bir sayfas arasnda da btnlk olmas. Yaknlk (proximity) ve tekrar (repetition) teknikleri ile btnlk oluturulabilinir. Yaknlk Birbirine yakn yerletirilmi nesneler genel grnmde bir btn olarak alglanrlar. Tekrar Benzer ekil, renk ve dokudaki nesnelerin tekrar etmesi btnl salar.

YERLEM VE DZENLEME 3. Vurgular -Vurgu kullancnn dikkatini zel bir elemana ekmek iin kullanlr. -Web sayfalarnda kullanlan balca vurgulama teknikleri: Yerleim (Placement) /Devam Etme (Continuance)/ Yaltm (Isolation) /Ztlk (Contrast)/Orant (Proportion Yerletirme: Vurgulama istediiniz eleman sayfann odak noktasna yerletiriniz (Sayfa merkezi, gridteki kesiim noktalar, sayfann st ksmlar). Devam Etme: Baklarmz bir dorultuda ilerlemeye baladktan sonra, deiik bir figr bulana kadar bu ilerleme devam eder. Yaltm: Dierlerinden ayr olarak duran bir nesne, dikkatleri kendine ekmeye meyillidir. Ztlk: En ok kullanlan metodlardandr. Dierlerinden farkl olan eleman dikkat eker. Renkte, ekilde ve byklkte ztlk yaplarak vurgu oluturulabilinir. Klasik Tasarmlar 1. Sol Stun Navigasyon (Left-column Navigation) 2. Sa Stun Navigasyon (Right-column Navigation) 3. Stunlu Navigasyon (Three-column Navigation)

1. Sol Stun Navigasyonu -En ok tercih edilen sayfa tasarmdr (De facto standard). -Birok site ana navigasyonu sayfann st blmne yerletirse de, sol navigasyonu kullanr. -erik ynetim sitemleri (CMS-Content Managament System) genel olarak hazr deer olarak sol stn navigasyonu kullanr. 2. Sa Stun Navigasyonu -ok fazla tercih edimeyen bir tasarmdr. -Daha ok ikincil navigasyonlar iin kullanlr. -Kullanclar sayfay soldan saa doru taramaya meyillidir. -Farkl ve kullanm kolay sayfa tasarmlar iin kullanlabilir. 3. Stun Navigasyonu -Ortada geni ierik stnu, kenarlarda dar navigasyon stnlar vardr. -ok fazla sayda navigasyon ve kpr (link) ieren sayfalar iin idealdir. -Sayfann kark grlmemesi iin boluklar gereklidir. -Genellikle ana sayfalarda tercih edilir. YERLEM VE DZENLEME 4. Modern Tasarmlar 1 .Geniletilmi Sayfa Altl (Expansive Footer Navigasyon) 2. erik ncelikli Stun (Three Column with Content First) 1. Geniletilmi Sayfa Altl -letiim bilgileri -Geniletilmi site navigasyonu -lave ierikler (blog gnlkleri, linkroll makaleleri, Flickr fotoraflar, twitter yazlar vs.) 2. erik ncelikli Stun -erik ncelikli sayfalarda kullanlr. -Genellikle anasayfa tasarmnda tercih edilir. Dier sayfalarda iki veya tek stunlu tasarma geilir. Sabit veya Deiken Sayfa Genilii Sabit Genilik +Tasarmc metin iindeki grseller zerinde daha ok kontrole sahiptir. +Boluklar tasarmn bir paras olarak planlanabilir. +Dar metin bloklar okunabilirlii artrr. -Geni tarayc penceresinde kk gzkebilir -Kullanc kontrol azdr. Deiken Genilik +Birok ekran znrlne ve cihaza uyumludur +Kaydrma ilemini azaltr. -Geni ekranlarda metin okunurluu dktr. -Grntnn ynetilmesi daha zordur. -Bo alanlar problem olabilir. Kademeli Sabit Sayfa Genilii Belli ekran znrlkleri iin nceden tasarlanm sayfa dzenlerine gei yaplr. Hem sabit hem de deiken sayfa tasarmlarnn avantalarna sahiptir.

Ekran znrl Son kullanclar ve sayfa ierii belirleyici faktrdr. Standard bilgisayar ekranlarnn znrl artmaktadr. Netbook ve mobil cihazlar kk znrlkte almaktadr. Gizlenebilir bir stun ile esnek tasarmlar yaplabilir. RENKLER I 1.Scak ve Souk Renkler -Scak renkler spektrumda krmzdan sarya kadar olan renklerdir. -Scak renkler sayfaya enerji ve hareket kazandrr. -Souk renkler spektrumda yeiden maviye kadar olan renklerdir. -Souk renkler sayfaya sakinlik kazandrr. Arkaalan ve byk nesneler iin uygun renklerdir. 2. Renk Deeri -Bir rengin akl (lightness) veya koyuluu (darkness) o rengin deeri (value) olarak tanmlanr. -Bir renge beyaz ekleyerek renk alr (aklk- tint). Bir renge siyah ekleyerek koyulatrlr (koyulatrma - shade). ki renk kartrlarak tonlama (toning) yaplr. -Bir rengin parlakl (brightness) veya matl (dullness) o rengin doygunluu (saturation/intensity) olarak tanmlanr. 3. Renk Teorisi Eklemeli (Katkl) Renk Modeli (Additive Color Model): Btn renkler krmz (red), yeil (green) ve mavi (blue) renklerin yzdeleri ile temsil edilir. RGB model. Eksiltmeli Renk Modeli (Subtractive Color Model): Btn renkler sayen (cyan), majenta (magenta), sar (yellow) ve siyah (black) renkler kullanlarak elde edilir. CMYK renk modeli. 4. RGB Eklemeli Renk Modeli 5. CMYK Eksiltmeli Renk Modeli

RENKLER II Renk emalar 1. Tek Renkli Bir temel renk alnp, bu renge tint veya shade uygulanr. 2. Renksiz Tasarm Siyah, beyaz ve grinin tonlarndan oluan tasarmlardr. 3. Yakn Renkler Renk emberi zerindeki komu renklerin kullanm ile elde edilir. 4. Tamamlayan Renkler Renk emberinde karlkl renklerin kullanm ile yaplr. Yeil-Krmz, Sar-Mor vs.

4. Ayrk Tamamlayc Renkler: Renk emberindeki iki komu renk ve bu renklerin karsndaki rengin kullanm ile elde edilir.

5. l Renkler: Renk emberinde bir ekenar genin kelerine denk gelen renklerin kullanm ile elde edilir.

6.Drtl Renkler: Renk emberinde komu iki renk ve onlarn karsndaki komu iki rengin kullanm ile elde edilir.

GRSELLER I 1. Genel zellikler -Grselin ierik ile ilgili olmas (relevant). -Grselin ilgin olmas (interesting). -Grselin albenili olmas (appealing) 2. Yasal Grsel Kaynaklar -Fotoraf kendiniz ekebilir, animasyon ve izimleri kendiniz yapabilirsiniz. -Fotoraf arivlerinden satn alabilirsiniz (Stock Phtography). -Profesyonel yardm alabilirsiniz. 3. Fotoraf Arivleri cretsiz grseller (Free images) www.sxc.hu www.morguefile.com Telif hakk satlanlar. DVD veya hard disk, Web ortamnda kredili veya abonelik sistemi www.istockphoto.com www.corbis.com www.jupiterimages.com Kstl kullanm hakk verilenler (Rights-managed images): Belirli bir sre iin belirli kiilere kullanm hakk verilen fotoraflar. Fotolia, istockphoto, stock.xchng, superstock Profesyonel Yardm Fotoraf kiralayan kii ve firmalarn tecrbeleri Fotorafnn biyografisi ve rn dosyas Fotoraflar stdyoda m, darda m ekilecek? Fotorafya deme mesai usul m olacak? Fotoraflarn kullanm hakk kimde olacak?

Bunlar Yapmaynz -Web'te bulduunuz grsellerin kullanm hakkn almadan kullanmaynz. -Kk resim (clipart) ve gif animasyonlar kullanmaynz. -Baka bir sitedeki grsele kpr kurmaynz (Hot linking) <img src= "/images/image.jpg"..(doru) <img src= "http://www.somesite.com/... (yanl)

GRSELLER II Grsel Krpma Grseldeki fazlalklarn kesilmesi. Grseldeki genel mesajn deitirilmesi. Maskeleme ile kombinasyonlar oluturma. Dikdrtgensel olmayan krpmalar ile yaln bir nesneyi elde etme Photshop Dzeltmeleri Levels Brightness/Contrast Hue/Saturation Stroke Filters Dosya Biimleri ve znrlkler JPEG: Resim sktrma format. Renk saysnda snrlama yok. Sktrma oran arttka resim kalitesi der. GIF: 8 bitlik sktrma formatdr. En fazla 256 rengi destekler. Transparent resim oluturulabilir ve animasyon yaplabilir. cretlidir. PNG: GIF'e alternatif olarak gelitirildi. 24-bit resimleri destekler.Transparent resimler iin alpha kanal kullanr. 256 deiik seviyede transparent resim oluturulabilir. TPOGRAF 1.Gvenli Fontlar

2.Metnin Grsel Olarak Sunumu Logo, slogan ve statik metinler iin kullanlr Font snrlamas yoktur.

3.sIFR Scalable Inman Flash Replacement Java ile Flash dosyasndaki karakterlerin kullanm.

4.Harf Anatomisi

1: baseline 2: cap height 3: crossbar 4: serif 5: meanline 6: bowl

5.Yatay Boluklar Kerning: Belirli harfler arasndaki boluklarn ayarlanmas. 'Wa' arasndaki boluk 'WV' arasndaki boluktan daha az olmaldr. Tracking: Metnin tamamnda btn harflar arasndaki boluun ayarlanmas.

6.Dikey Boluklar : ki satr arasndaki boluk ayarlamas (Leading) 7.Hizalama : Sola hizal, saa hizal, ortalanm, iki yana hizal.

8.Satr Uzunluu Ekranda okumak, basl dokmandan okumaktan daha zordur. Basl dokmanlarda normal satr uzunluu 45-75 karakter arasnda olmaldr.

8.Font eitleri 1.Serif Fontlar -Yatay bir referans izgisi zerine yerlemitir. -Basl dkmanlarda tercih edilir. -Times New Roman ilk akla gelen rneidir.

2. Sans Serif Fontlar -Serif fontlara gre daha dz ve modern grnmldr. -Basl serif fontlu metinlerde balk olarak tercih edilir. -Web'te metinler sans serif, balklar serif olarak tercih edilir. nk sans serif fontlar kk boyutlarda daha okunakldr. -Arial ve Verdana en bilinen rnekleridir. 3. El Yazs Fontlar 4. Sabit Genilikli Fontlar -Coruier en bilinen rneidir. -Programclar, muhasebeciler tarafndan ve metin tabanl iletim sistemlerinde kullanlr. 5. Dekoratif Fontlar -Daha ok logo, slogan ve balk resimlerinde kullanlr. -Resim olarak kullanlmaldr.

6. Sembol Fontlar -Vector grafik fontlardr. stenildii kadar bytlebilinir. -Yaz iinde kullanldnda, metin ile birlikte kayar. r:-Wingdings ve Webdings

7. Font Siteleri -cretsiz Font Galerileri http://www.1001fonts.com http://www.datafont.com http://www.wantedfonts.com -cretli Font Galerileri http://fontshop.com http://www.fonts.com http://www.ictfonts.com KULLANILIK Kullanllk Nedir? -Kullanm kolayl renilebilirlik (Learnability) Etkili kullanm (Efficiency) Hatrlanabilirlik (Memorability) Hatalar (Errors) Tatmin (Satisfaction ) Web Sitesi Kullanll Kullanclarn sitede -gezinti (navigasyon) yapma, - bigli bulma ve -site ile etkileimde (interaction) bulunma kolayl. Evrensel Tasarm Prensipleri -Adil Kullanm (Equitable Use) -Kullanmda Esneklik (Flexibility in Use) -Basit ve Sezgisel Kullanm (Simple and Intuitive Use) -Alglanabilir Bilgiler (Perceptible Information) -Eriimde Esneklik (Flexibility) -Kullanc Kontrol (User Control) -Klavye Kullanm (Keyboard Functionality) -Metin Edeerleri (Text Equivalents) Kullanllk Testi -Planlama ve Hazrlk: Testin genel amalar, kullanc profilleri, rnek bilgilendirme yazs, grev listesi, ortamn hazrlanmas, test sonras anketi. -Katlmclarn bulunmas. -Testin uygulanmas. -Verilerin analizi ve sonu raporunun hazrlanmas. Bilgilendirme Metni Teste balamadan nce, katlmclar test hakknda bilgilendirilmelidir. rnek Grevler -Al veri sitesinden bir rnn bulunup sipari edilmesi. -Banka sitesi iin bakasnn hesabna para transfer edilmesi. -Restoran sitesinden meny kontrol etme, sipari verme ve rezervasyon yapma. -Otel sitesinden oda ayrtma, havaalanndan ulam bilgilerine erime.