GÖRSEL WEB TASARIMI

Tipografi kavramı en basit açıklamasıyla forma uygun yazmaktır.

Leading: Metindeki satırlar arası boşluğu ifade
eder.

Harf büyüklükleri, yazı karakterleri ve bold, italik gibi
değişkenlikler sayfada hiyerarşik düzeni oluşturmada
önemlidir.

Yazı biçimi: Sayfa tasarımında sadece harflerin
kullanıldığı ve bu kullanımda büyük ve küçük harf
dizisinin sayfa hiyerarşisine göre doğru bir şekilde
kullanılmasıdır.
Yazı karakteri: Metinde kullanılan harflerin, rakamların, işaretlerin,
sembollerin aynı biçimsel özellik ve
oranlara göre seçilerek kullanılmasıdır. Metnin okunurluğu açısından karakterlerin
birbirinden ayırt edilerek algılanması açısından
harflerin oranları önemlidir. Alfabedeki harflere
bakıldığında en dar harfin “I” en geniş harfin ise
“M” olduğu görülmektedir. Bu bağlamda harfler
arasındaki boşlukların da harf genişliklerine göre
düzenlenmesi anlam oluşturmada önemlidir. Metin içerisinde kullanılan yazı tipinin tarihsel süreçte
gelişimi Şekil 5.3’te görülmektedir.

Yazı ailesi: Metni oluşturan karakterlerin anlam oluştururken vurgu yapılmasını sağlamak amacıyla biçimsel özelliklerine dikkat edilmelidir. Yazı ailelerine bakıldığında Serif (Tırnaklı), Sans Serif (Tırnaksız) ve
Typewriter (Daktilo) olarak üç sınıflandırma altında toplandığı görülmektedir. Yazı ailelerinin karakterlerinin biçimsel özelliklerine bakıldığında farklı kalınlıklardaki uyarlamaları extra light (çok ince), light (ince),
book, demi (yarım), medium (orta), bold (kalın), extra bold (çok kalın), heavy (ağır) ve ultra (aşırı)dır.
Farklı kalınlıklara sahip bu uyarlamaların condensed (yoğunlaştırılmış), regular (normal) ve extended (seyreltilmiş) uyarlamaları, farklı açılara sahip roman (dik) ve italik (eğik) uyarlamaları ile işleme seçenekleri
outline (kontür), shaded (gölgeli), decorated (süslü) de bulunmaktadır. Metni oluştururken karakterlerin
biçimsel özelliklerinin ve oranlarının yanı sıra;
• harflerin arasındaki boşluklara,
• sözcüklerin arasındaki boşluklara ve
• satır aralarındaki boşluklara
da dikkat edilmesi gerekmektedir.

Tipografinin doğru şekilde seçimi bir tasarım yaparken görsellerin kullanılması kadar önemlidir. Doğru tipografinin seçilmesi ile metinlerin okunurluğu artar ve okuyucular rahat bir şekilde metinleri okuyabilir

Metni oluşturan sözcükler ve sözcükleri oluşturan harfler arasındaki boşluklar metnin okunurluğunu artırmada ya da azaltmada önemli bir işleve
sahiptir. Harflerin birbirlerinden farklı görsel ağırlık ve biçimlere sahip olmalarından dolayı aralarında bulunan boşlukların düzenlenmesi gerekmektedir. Uçar (2004)’e göre bir metinde;
• Sözcükler arasında bir boşluk bırakılır.
• Noktalama işaretlerinden sonra bir boşluk
bırakılır.
• Harf arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.
• Satır arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.
• Paragraf boşluğu verildiği durumlarda satırların arası ayrıca açılarak paragraf vurgulanmaya çalışılmaz.

Cumhuriyet’in ilk yıllarından itibaren kurulmaya başlanan, sanat ve tasarım eğitimi veren kurumların ders programlarında yazı eğitimi
ağırlıktadır.
Resim öğretmeni yetiştirmek amacıyla 1926
yılında Orta Muallim Mektebi ve Terbiye Enstitüsü olarak kurulan ve 1976 yılında adı Gazi
Eğitim Enstitüsü olarak değişen kurumda yazı
eğitiminin verildiği görülmektedir. Yeni Türk alfabesiyle güzel örnekler vermek ve alfabeyi topluma öğretecek öğretmenler yetiştirmek amacıyla,
kurumun ders programına yazı dersleri eklenmiş
ve derslerin eğitmenliğini Almanya’da eğitim görerek yurda dönen Şinasi Barutçu üstlenmiştir.
1961 yılına kadarenstitüde dersler veren Barutçu,
daha sonra İstanbul Atatürk Eğitim Enstitüsü’ne
atanmış ve burada yazı eğitimi vermeye devam
etmiştir. Yazı derslerinin içeriğini, güzel yazı alıştırmaları ve çocuklar için el yazısı uygulamaları
oluşturmaktadır.

Bootstrap, HTML, CSS ve JavaScript çerçevesi için geliştirilmiş esnek ve mobil cihaz
uyumlu web biçimlendirme çatısıdır (Şekil
5.13). www.getbootstrap.com adresinden .zip
dosyası indirilerek web tasarımı çalışmalarında
kullanılabilir. Bootstrap, tipografi için CSS ön
işlemci olarak Less ve Sass’ı tercih etmektedir.
Less, Bootstrap ile geliştirilecek tasarımlarda
CSS kodları ile kolaylıkla kullanılabilir. Sass
için aynı durum söz konusu değildir. Dosyaları indirip tasarım projesinin içerisine kurmak gerekmektedir.
Bootstrap ile hazırlanan web tasarımlarında tek çerçeve ile bütün cihazlarda uyum sorunu olmadan projeleri yayınlamak mümkündür.

Download Bootstrap düğmesine
tıklandığında indirilebilecek dosya
seçenekleri ekrana gelir. Bu ekranda
Bootstrap dosyalarını, kaynak dosyalarını ve Sass dosyalarını içeren
bağlantı düğmeleri görülmektedir.
Bu ekranda Download Bootstrap düğmesi ile gerekli olan .zip dosyası indirilebilir.

Components (Bileşenler) sekmesinde bulunan bileşenleri kullanarak bir sayfa düzenlemek istenildiğinde,
sayfanın sağındaki bileşenler seçilerek kodları kopyalama yoluyla html uzantılı HTML5 sayfasına eklenebilir. Bu sayede sayfalar kolaylıkla üretilebilir.

Serif: Tırnak demektir. Karakterlerin uç kısımlarındaki tırnaklı kısımları ifade eder.

x-Height: Metni oluşturan küçük harflerin kuyruk ve harfin üst çıkıntısı dışında kalan gövdesinin yüksekliğini ifade eder.

"Eski Biçem - Garamond" yazı tipi 1617 yılında Fransa'da ortaya çıkarak gelişmiştir.

Metnin okunurluğunda öncelikli olarak doğru fontu seçmek önemlidir. Font seçimi aşaması en zor aşamadır. Çünkü bu aşamada metin yazarlarının karşısına yüzlerce font çıkmaktadır.

Dan Mayer (2010) font seçimi için beş kural belirlemiştir. Bu kurallar:

• Duruma uygun seçim

• Font ailelerini bilme

• Arka planın metnin önüne geçmemesi

• Kullanım amacına göre seçim

• Kuralsızlık

Uçar (2004)’e göre bir metinde;

• Sözcükler arasında bir boşluk bırakılır.

• Noktalama işaretlerinden sonra bir boşluk bırakılır.

• Harf arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.

• Satır arası boşluk gereğinden fazla arttırıldığında ya da azaltıldığında okuma güçlüğü doğar.

• Paragraf boşluğu verildiği durumlarda satırların arası ayrıca açılarak paragraf vurgulanmaya çalışılmaz.

Uyarlanabilir (Adaptive) Tasarım: Belirli araç ölçülerine göre tasarım yapılan tasarımdır. Dijital araçlardaki çeşitlilik düşünüldüğünde, ekran boyutu farklı olan her dijital araç göz önünde bulundurulmalıdır.

Esnek (Responsive) Tasarım: Esnek tasarım, sayfa yapılarının bütün dijital araçlarda sağlıklı görüntülenmesi için gerekli olan tasarımdır. Bu tasarım ile sayfa yapıları dijital araçların ekran boyutları ve çözünürlüklerine bağlı kalarak ölçeklendirilmekte ve sayfaların sağlıklı şekilde görüntülenmesi sağlanmaktadır.

Bootstrap, HTML, CSS ve JavaScript çerçevesi için geliştirilmiş esnek ve mobil cihaz uyumlu web biçimlendirme çatısıdır.

Concise, sürdürülebilir CSS yollarından en önemli adımlar olan Sass, Less ve Stylus temelli CSS çerçevesidir. Bunun yanında, istenildiği takdirde basit CSS yapısı da tercih edilebilir. www.concisecss.com adresinden .zip dosyası indirilerek tasarımlarda kullanılabilir.