Grafik tasarım; bir mesajı iletmek, bir görsel geliştirmek
veya bir düşünceyi görselleştirmek için metnin ve
görsellerin algılanabilir ve görülebilir bir düzlemde, iki
boyutlu veya üç boyutlu olarak düzenlenmesini içeren
yaratıcı bir süreçtir.

• Çizgi; bir noktanın birbirini izleyen hareketle
meydana gelen geometrik bir ifadedir. Çizgiler
karakterlerine göre ve konumlarına bağlı olarak
bazı mesajlar da iletirler.
• Biçim-form; Biçim iki boyutlu düzlem üzerinde
genellikle çizgilerin kullanılmasıyla, şekil
almasıyla oluşur. Biçimler üçgen, kare,
dikdörtgen gibi geometrik biçimler ve taş,
yaprak, bulut gibi organik biçimler olarak ikiye
ayrılır. Form ise bu biçimlerin üç boyutlu olarak,
derinlik hissinin verilmesiyle bizlere
yansıtılmasıdır.
• Ton(Değer); Genel olarak tonlama grinin
çeşitlenmesi ya da siyah rengin kullanılmasıyla
ilgilidir.
• Renk; Renkler, ışıkla birlikte var olurlar ve
izleyen üzerinde değişik etkiler uyandırırlar.
• Doku; Doku, bir nesnenin yüzeyinde çizgilerin
bir araya gelmesiyle oluşan tasarım elemanıdır.
• Ölçü; bir tasarım elemanı olmaktan ziyade, çizgi,
renk, doku ve biçim gibi tasarım elemanlarının
birbirleri arasındaki büyüklükler ve tasarımda
kapladıkları alanla ilişkilidir.
• Yön: Bir tasarım üzerindeki çizgiler ve noktalar,
değişik noktalara yönelerek bir hareket
oluştururlar.

Tasarımcı renk seçerken; Rengin kültürel
çağrışımına, hedef kitlenin renk tercihine, firma ya da
ürünün karakterine, tasarımdaki yaklaşım biçimine dikkat
etmelidir.

Rengin üç boyutu bulunmaktadır: Uzunluk
(rengin türü), genişlik (rengin tonu), derinlik (rengin
yoğunluğu).

Sıcak renkler, izleyeni uyarır ve neşelendirir.

Soğuk renkler izleyeni sakinleştirir ve
dinlendirir.

Hypertext Markup Language (Zengin Metin
İşaretleme Dili)

Web sayfaları hazırlamak için kullanılan bir
işaretleme dilidir.

Web tarayıcısı (browser) web sayfalarında
gezinmek için kullanılır.

HTML 1.0: Çok seviyeli baslıklar, paragraflar ve
maddelenmiş listeler için özel formatlamadır.
• HTML 2.0: Doldurulabilir web formlarının
oluşturulabilmesini sağlayan bu sürüm 1994
yılından önce web dokümanlarında kullanılan
eklenti ve özelliklere kaynak olarak çıkartılmıştır.
• HTML 3.2: Sayfa görünümü üzerinde ileri
derece kontrol, manşetlerin yönetilmesi, dinamik
dokümanlar, matematik dokümanlar, CSS
(Cascading Style Sheet-Basamaklı Stil
Şablonları) bunlardan bazılarıdır.
• HTML 4.1: Şu an kullandığımız HTML
standardıdır.
• HTML 5: Günümüzde kullanılan HTML 4.1
sürümü, CSS desteğiyle ne kadar düzenli ve
sağlam bir yapıda kodlanırsa kodlansın, yine de
fazladan yazılan kodların işlevselliği bozduğu
bilinmektedir. Bu yüzden HTML 5 bu ihtiyaçları
karşılamak adına geliştirilmeye başlanmıştır.

Web 1.0’da kullanıcılar web tasarımcısı
tarafından sadece HTML dili ile hazırlanan sitelere erişip
bilgiyi sadece okuyabilirler.

Web 2.0 olarak nitelendirilen sitelerin temel
özellikleri şu şekilde sıralanabilir:
• Kullanıcılar web ortamında okur/yazar
rolündedir. Yani, kullanıcılar önceden hazırlanıp
sunulmuş içeriği okumakla kalmayıp bu çerge
katkıda bulunma hakkına da sahiptir. Böylece
kullanıcılar iş birliği içinde içerik geliştirip
paylaşabilirler. Bu içeriklere katkıda
bulunabilirler. Sosyal medya araçlarının
gelişmesiyle kullanıcılar arasındaki bu içerik
paylaşımı, iş birliği ve etkileşim en üst seviyeye
çıkmış durumdadır.
• Kullanıcılar içerikleri etiketler kullanarak
sınıflandırabilirler bu işleme de etiketleme
denilmektedir. Bu sayede içerikleri kullanıcıların ortak katılımıyla kategorilere ayrılır ve bu da hem
içerik ararken kullanıcıların işini kolaylaştırır
hem de kullanıcılara içerikler daha düzenli bir
şekilde saklama imkânı sunar.

Web 3.0, kullanıcı tarafından sağlanan içeriğin
arama motorları tarafından anlamlandırılması, kullanıcının
istediği bilgiye ve sağladığı ipuçlarına göre blogunun
yorumlanıp kullanıcının özel ihtiyaçlarına uygun bir şekilde
sunulması anlamına gelmektedir. Web 3.0 yapısına
bakıldığında kişiselleştirme, yapay zeka ve hareketlilik
başlıkları öne çıkar.

Kullanıcıların internet üzerinden yaptığı
aramalardan ve paylaşımlardan anlam çıkarıp kullanıcının
neler yapmak isteyeceğini tahmin etme çabasıdır. Örnek
olarak bir alışveriş sitesinden bir ürünü inceleyen bir
kullanıcıya bir dahaki ziyaretinde o ürüne ait ya da benzer
ürünler tavsiye eden web sayfaları verilebilir.

• HTML
• Flash
• CSS
• JavaScript
• PHP
• ASP
• ASP.NET
• JSP

yaygın olarak web tarayıcılarında kullanılmakta
olan dinamik bir programlama dilidir.

• HTML
• Flash
• CSS
• JavaScript

• PHP
• ASP
• ASP.NET
• JSP

HTML’e ek olarak metin ve format biç-
imlendirme alanında fazladan olanaklar sunan bir web
teknolojisidir.

PHP ile veritabanı uygulamaları, e-ticaret siteler,
forum, e-posta gönderme vb. birçok etkileşimli
uygulamanın geliştirilmesini sağlayan dildir.

Web sayfalarında Java dilini kullanarak dinamik
web sayfaları oluşturmayı sağlayan bir Java teknolojisidir.

Dinamik web sayfaları, web uygulamaları ve
XML tabanlı web hizmetleri geliştirilmesine olanak
sağlar. ASP teknolojisinin devamını teşkil etmiştir.

Ön-yüz geliştirici (front-end developer)
kullanıcının etkileşime girdiği web tarayıcıda yan istemci
(ön-yüz) tarafında web uygulamaları geliştiren kişidir.

Ön-yüz geliştiricilerin bilmesi gereken temel
diller:
• HTML
• CSS
• JavaScript

Arka-yüz geliştiriciler bir web sitesinin arka
planında bulunan dışarıdan baktığımızda göremediğimiz
kodlama ve veritabanı mimarisini inşa eden kişidir.
HTML ve CSS gibi dilleri bilirler fakat daha çok MySQL,
PostgreSQL, SQL Server, Ms-Access, Oracle, DB2,
Sybase vb. veritabanı teknolojileri ile PHP, ASP, JSP,
Ruby, Python, ASP.Net vb. programlama dilleri üzerinde
uzmandırlar.

• Müşteri analizi; tasarıma başlamadan önce
müşteri analizinin gerçekleştirilmesi
gerekmektedir.
• Renk seçimi; Tasarımın kalitesini ortaya koyan
en önemli noktalardan biri de seçilen renkler ve
renk uyumudur.
• Özgün tasarım; İyi bir web sitesi için, yapılan
web tasarımı özgün olmalıdır. Hazır web
temalarından kaçınılmalıdır.
• Taslak oluşturma; Tasarımda ilk oluşturulması
gereken şey web sayfasının taslak yapısıdır.
Müşteri ile görüşmede taslak oluşturulmalı, bu
taslak tasarıma dökerken geliştirilmelidir.
• Web tarayıcıları ile uyumluluk; Web tasarımının
tüm web tarayıcıları le uyumlu olup olmadığı
kontrol edilmeli, hepsinde aynı görünmesi
sağlanmalıdır.

Duyarlı web tasarımı arayüzün, siteye girilen
cihazların ekran tanımlarına göre otomatik olarak
uyarlandığı tasarım anlayışıdır.

Duyarlı tasarım yaklaşımının tanımlamaları iki
farklı yaklaşımla oluşturulabilir:
• Uyarlanabilir tasarım: Sınırlı sayıda ekran
ölçüsüne göre uyarlanmış düzenlemeler;
• Akışkan tasarım: Her türlü olası ekran genişliğine
göre sürekli kendini uyarlayabilen düzenlemeler.

Duyarlı web tasarımın faydaları şu şekilde
sıralanabilir;
• Kolay Kullanım: Kullanıcısına ekranı
büyütmeden sadece aşağı ve yukarı parmak
hareketleriyle gezinme olanağı sağlar.
• Kolay bakım: Her çözünürlük için ayrı bir site
tasarımı yaptırmak yerine, oluşturulmuş olan tek bir
duyarlı web tasarım sayesinde, tek bir tasarım
altında tüm cihaz çözünürlüklerine hizmet
verilebilir. Bu sayede web sitenin bakımı da daha
kolay olacaktır.
• Arama Motoru Optimizasyonu: Arama motorları
optimizasyonu için önemli olan duyarlı web
tasarım ile siteye değer katıp arama motorlarının
istediği yapıya kavuşturulmasıdır. Site URL
yapısı aynı kalacağından arama motorları
tarafından bulunması daha hızlı gerçekleşecektir.
• Düşük Maliyet: Birden fazla site oluşturmak
yerine duyarlı web tasarımı sayesinde daha az
maliyetle bir web tasarımına sahip olunabilir.

Mobil cihazlar için tasarımda;
• Tipografi; Tasarımda sunulacak metinlerin rengi,
büyüklüğü, kalınlığı ve font tipi kullanıcının
okumasını kolaylaştıracak bir şekilde olmalıdır.
• Kullanışlı menüler; sunulan içeriğe göre en uygun
yapıda menü ve düğme yapısını oluşturmak,
kullanılabilirlik açısından çok önemlidir.
• İçerik kullanımı; Eğer uzun bir metin sunulacaksa
bunu tek bir sayfada uzunca sunmak yerine
paragraflara ayırıp parça parça göstermek daha
uygundur. Bir paragraftan başka bir paragrafa
geçmek için de iler ve geri butonları oluşturulabilir.
Böylece hem web sitesi fazla ağırlaşmamış olur
hem de okunabilirlik rahat olur.
• Görseller; Görsellerin kullanımında görsellerin
boyutu ve çözünürlüğüne dikkat edilmelidir.
• Animasyonlar; Mobil cihazlarda animasyonların
kullanımı hem işlemciyi yoracak hem de sitenin
kullanılabilirliğini düşürecektir. Eğer zorunlu
olarak kullanılması gerekiyorsa da çok hızlı
geçişler olmayan, kare tabanlı animasyonlar
yapılmalıdır.

Arama motoru optimizasyonu (SEO-Search
Engine Optimization) arama motorlarının web sayfalarını
daha kolay bir şekilde taramasına olanak sağlayan teknik
düzenlemelerdir.

SEO için yapılması gerekenler;
• Başlık: Sitenin her sayfasının kendisine özel bir
başlığı olmalı ve bu başlık içeriği açıklayacak
şekilde seçilmelidir.
• Anahtar kelimeler: Anahtar kelimeler, her sayfa
için ayrı belirlenirse çok daha başarılı sonuçlar
alınacaktır.
• Açıklama: Sayfa içeriğinin bir cümlelik
tanımıdır. Yine her sayfa için ayrı
tanımlanmasının önemi büyüktür.
• İndeksleme: Sitede php, ajax v.b. yapılar ya da
bağlantısı olmayan gizli sayfalar var ise arama
motoru her sayfaya ulaşamayabilir. Bunun için site
hartası tanımlamak indekslemeyi kolaylaştıracaktır.

Photoshop
• Fireworks
• Flash
• Dreamweaver

Photoshop, web ve baskı için gelişmiş grafikler
oluşturmayı isteyen profesyonel tasarımcılara yönelik,
güçlü ve endüstri standardı hâline gelmiş piksel tabanlı bir
resim işleme düzenleme programıdır.

Photoshop ile;
• Özgün tasarımlar oluşturulabilir,
• Bir fotoğraf taranarak o fotoğraf işlenebilir,
• Bir video görüntüsü yakalanabilir ve işlenebilir,
• Sayısallaştırılmış resimler bilgisayara aktarıp
işlenebilir,
• Bir negatif taranıp işlenebilir.

rollever web sayfasında yer alan ve fareyle
üzerine gelindiğinde değisen bir düğme veya görüntüdür.

Photoshop rollover görüntüler oluşturmaya
yönelik bir dizi kullanışlı araç sağlar:

• Birincil ve ikincil görüntüler oluşturmak için
katmanları kullanın. Bir katmanda içerik
oluşturun, sonra katmanı çoğaltın ve benzer bir
içerik oluşturmak için katmanlar arasında
hizalamayı koruyarak bu ikinci katmanı
düzenleyin. Rollover efekt oluştururken,
katmanın stilin, görünürlüğünü veya konumunu
değiştirebilir, renk ve ton ayarlamaları yapabilir
ya da filtre efektler uygulayabilirsiniz.
• Ayrıca, birincil katmana renk kaplamaları, alt
gölgeler, ışıma veya kabartma gibi efektler
uygulamak için de katman stillerini
kullanabilirsiniz. Rollover çifti oluşturmak için,
katman stilin açın veya kapatın ve görüntüyü her
iki durumda da kaydedin.
• Normal, fare üzerinde ve fare düğmesine basılı
durumlarda rollover düğmelerin hızla
oluşturmak için Stiller panelindeki hazır ayar
düğme stillerin kullanın. Dikdörtgen aracıyla
temel bir şekil çizin ve sonra dikdörtgen otomatik
olarak düğmeye dönüştürmek için Eğimli Normal
gibi bir stil uygulayın. Ardından, ek düğme
durumlarını oluşturmak için katmanı kopyalayın
ve Eğimli Fare Üstünde gibi değer hazır ayar
stillerini uygulayın. Tamamlanmış bir rollover
düğme kümesi oluşturmak için her katmanı ayrı
bir görüntü olarak kaydedin.

Dilimlerle çalışırken şu temel noktalara dikkat
edilmelidir?
• Dilim oluşturmak için Dilim aracını kullanabilir
veya katman tabanlı dilimler oluşturabilirsiniz.
• Dilim oluşturduktan sonra, Dilim Seçimi aracını
kullanarak dilim seçebilir.ve ardından bunu
taşıyabilir, yenden boyutlandırabilir veya değer
dilimlerle hizalayabilirsiniz.
• Dilim seçenekleri iletişim kutusunda her dilim
için dilim türü, ad ve URL gibi seçenekler
ayarlayabilirsiniz.
• Web ve Aygıtlar İçin Kaydet iletişim kutusunda
her dilimi farklı en iyileştirme ayarları kullanarak
en y duruma getirebilirsiniz.

Bir görüntüyü dilimleme, üç ana avantaj sağlar:
• Blok hâlinde büyük ve tek bir görüntü yerine
dilimlenmiş görüntü daha hızlı iner.
• Etkileşim ekler, böylece görüntüler fare
olaylarına karşılık verebilir.
• Güncellemeleri kolaylaştırır. Web sayfalarının
sık değişen bölümleri için (örneğin, ayın elemanı
sayfasındaki fotoğraflar ve adlar)

En iyi web tasarım programlarından biri olan
Fireworks, Photoshop programına benzer fakat sadece
web tasarım yapmak, web grafikler oluşturmak,
düzenlemek ve iyileştirmekte kullanılan çok yönlü bir
programdır.

Flash etkileşimli web siteleri ve dijital
animasyonlar oluşturmak için gelişmiş bir ortam
sunmaktadır. Flash; videolar, grafikler ve animasyonlarla
desteklenen ilgi çekici uygulamalar oluşturmak için
yaygın bir şekilde kullanılmaktadır.

Zaman çizelgesi, bir belgenin içeriğin zaman
içerisinde, katmanlar ve kareler hâlinde, organize ve
kontrol eder. Filmler gibi, Flash Pro belgeler de zaman
aralıklarını karelere böler. Katmanlar birbirinin üzerine
yığılmış birden çok film şeridi gibidir, her bir Sahne
Alanı’nda görünen farklı bir görüntü içerir.

Sahne (Scene) Alanı Flash Professional belgeler
oluştururken grafik içeriği yerleştirilen dikdörtgen alandır.
Geliştirme ortamındaki Sahne Alanı, Flash Player’da veya
bir web tarayıcısında oynatma sırasında belgenin içinde
görüntülendiği dikdörtgen boşluğu temsil eder.

Dreamweaver, web sitesi ve sayfalarını
oluşturmayı ve yönetmeyi sağlayan bir programdır. Basit
HTML olayları olarak nitelendirebilecek tablo, resim,
metin fash (swf) ve her türlü HTML bileşen sayfalara
görsel bir arayüz ile ekleyebilme imkânı sağlamaktadır.
Arka-yüz geliştiriciler ilgili kodları HTML etiketlerinin
içine Dreamweaver kullanarak rahatlıkla entegre edebilir.

• Uygulama çubuğu
• Belge araç çubuğu
• Standart araç çubuğu
• Kodlama araç çubuğu
• Stil oluşturma araç çubuğu
• Özellik denetçisi
• Etiket seçici
• Paneller
• Ekle paneli
• Dosyalar paneli

­­­Grafik tasarım; bir mesajı iletmek, bir görseli geliştirmek veya bir düşünceyi görselleştirmek için metnin ve görsellerin algılanabilir ve görülebilir bir düzlemde, iki boyutlu veya üç boyutlu olarak düzenlenmesini içeren yaratıcı bir süreçtir.

Grafik tasarımda eser, sanatçının elinden özgün biçimlendirmesiyle çıkar ve özgün çoğaltılmayla elde edilir.

Tasarımın temel elemanlarından biri olan çizgi, mağara resimlerinden bu yana insanların görsel iletişimini sağlamada büyük rol oynamıştır. Çizgi bir noktanın birbirini izleyen hareketi ile meydana gelen geometrik bir ifadedir.

Biçim iki boyutlu düzlem üzerinde genellikle çizgilerin kullanılmasıyla, şekil almasıyla oluşur.

Renkler, ışıkla birlikte var olurlar ve izleyen üzerinde değişik etkiler uyandırırlar. Bunların bir bolümü kişisel, bir bölümü ise genellenebilir duygulardır. Örneğin, sıcak renklerin uyarıcı, soğuk renklerin ise gevşetici olması verilebilir.

Kırmızı, sarı ve mavi ana renklerdir.

Web tasarımında dikkat edilmesi gereken hususlar şunlardır:

• Müşteri analizi
• Renk seçimi
• Özgün tasarım
• Taslak oluşturma
• Web tarayıcıları ile uyumluluk