SlideShare una empresa de Scribd logo
1 de 35
Kapaklar ve içerik sayfalarını çizebilmek
için Grid sistemi kullanılır
• Grid kelime anlamı olarak belli bir hat, izlek,
ızgara anlamındadır.
• Bir başka deyişle grid, sayfa tasarımında
kullanılacak elemanların düzenlenmesinde
yardımcı yatay ve dikey çizgilerdir.
• Bu çizgiler kendi içinde bir sistem ve oransal
ilişki içinde hazırlanırlar.
(Tevfik Fikret Uçar, Görsel iletişim ve grafik tasarım, İstanbul, 2004, Inkılap kitabevi, s.147)
Sayfa tasarımında da sayfa üzerine yerleştirilecek her
elemanın sayfa yüzeyi ile olan ilişkisi dışında diğer
elemanlarla olan ilişkisi de düşünülmeli ve ona göre
tasarlanmalıdır.
“Elemanları sayfa üzerinde konumlandırırken, herhangi
bir formül yoktur, fakat mantıklı bir sonuca ulaşmak için
grid (ızgara) kullanılabilir”* (Solomon, 1986, s.42).
Çünkü gridler sayfa üzerinde kullanılacak yazı, resim
gibi elemanların yerleştirileceği yeri belirlemeye
yardımcı olurlar.
Grid sistemi
2
Grid kullanımının bazen tasarımcıyı katı formlara uymak
zorunda bıraktırıp, kısıtladığı düşünüldüğünden kimi
çevrelerce eleştirilse de sayfa düzenine birçok faydası
vardır:
 Grid bir alan üzerinde elemanları düzenlemede en
kullanışlı yöntemdir.
 Grid tasarıma düzen, sadelik ve plan aşamasında
çeşitlilik sağlar, elemanlar ve sayfalar arası uyumu
destekler.
 Grid tasarım aşamasında bir ise zaman kazandırır.
Özellikle çoklu sayfaların tasarımında tek yada karşılıklı
sayfalarda bir grid yapısı oluşturup, diğer sayfalarda bu
grid yapısını devam ettirmek tasarımcının işini
kolaylastırır.
Grid sisteminin faydaları
2
Grid sayesinde temiz ve düzenli oluşan sayfalar, göze
estetik açıdan daha hoş görünür.
 Grid sayesinde bütünlük kazanan tasarımlarda okuyucu
neyin nerede olduğunu daha iyi kavrar. Fikret Uçar
(2004, s.149)’a göre, okuyucu pek farkında olmasa
da grid sistemini tanımlar ve takip amaçlı kullanır, grid
adeta görsel bir şifre gibi bilginin iletim dilini tanımlayan
bir sisteme dönüşür.
Grid özellikler
2
Bir gridi oluşturan bölümler: marjlar, sütunlar, sütun
arası boşluklar, grid çizgileri, modüller, akış çizgileridir
Bir grid oluşturmaya genellikle ‘marj’ denilen içerik ve
sayfa kenarları arasındaki boşlukları belirlemekle
başlanır.
Dıs kenarda, üst kenarda, alt kenarda ve iç kenarlarda
bırakılan bu boşluğun oranları kompozisyonun
genel görünümü açısından büyük önem taşır.
Genellikle üst ve alt kenarlarda daha fazla boşluk
bırakılır. Bu sayfaya daha düzenli ve dengeli bir görünüm
sağlar. Marjlar, gözün dinlenebilecegi alan olmasının
yanında, dikkati çekmek için ikincil bilgilerin
yerleştirildiği alan olarak da kullanılabilir.
Grid’in bölümleri
2
Örnek grid
2
Manuskript grid adından da
anlaşılacağı üzere, el yazması
kitapların grid anlayışıdır.
Sayfanın genis bir alanını
kapsayan tek bir sütun ile en
basit grid yapısıdır. Tek bir
metin bloğu ve marjları ile ilkel
bir yapısı olsa da, sayfa
numaraları, bölüm baslığı, alt
yazı, üst yazı, dipnotlar gibi
diğer önemli detaylar için daha
fazla alan kullanımına olanak
sağlar
Manuskript Grid
2
Alex W. White (2002, s.29)’a göre, sayfa tasarımında
bosluk kullanımının en eski örneklerinden biri olan bu
grid yapısında, sayfa dıs kenarlarındaki genis alanlar
“bilgin marjı (scholar’s margin)” olarak adlandırılmıstır.
Genis kenar boslukları sayesinde sayfada dingin bir
görünüm saglanırken, kitap sayfaları yıpransa dahi,
yazılar zarar görmeden korunabilmektedir.
Bu tasarımlarda karsılıklı sayfalardaki metin blokları
daha fazla birbiriyle baglantılıdır, çünkü iç kenarlardaki
bosluklar dıs kenarlara göre daha azdır.
Gotik Grid
2
2
Daha çok kitap gridi olarak düşünülen gotik gridde sayfa
kenar boşlukları 2, 3, 4 ve 6 sayılarıyla doğru orantılı
olacak şekilde bırakılır.
Sütun grid, farklı bilgi
gruplarını aktarmada
sütunların birbirinden
bağımsız olmalarından
dolayı daha elverişlidir.
Dergi ve broşür
gridlerinde çoğunlukla 3
sütunlu grid yapısı
hakimdir.
Sütun Grid
2
Modüllerden oluşan grid
yapısıdır. Bazı tasarımcılar
alanı çoklu parçalara bölen bu
karmaşık grid yapısını,
elemanları hizalayabilecekleri
daha fazla alan kullanımına
olanak sağladığından daha
kullanışlı
bulurlar. Modüler gridde
yanıltıcı bir unsur her bir alanı
doldurma gereksinimidir. Oysa
profesyonel tasarımcılar
bilirler ki, tasarımda dolu
alanlar kadar bos alanlara da
ihtiyaç vardır.
Modüler grid
2
Bazen görsel elemanlar ve içerik hiçbir kategoriye
uymayan bir grid yapısını gerektirirler. Bu tarz grid
yapısında sütun genişlikleri ve aralarındaki boşluklar
değişmeye eğilimlidirler ve sabit bir orandan söz edilemez
Hiyerarşik Grid
2
Diyagonal Grid, bundan önceki grid yapılarından farklı olarak
elemanları düzenlemede eğimlerden yararlanır. Bu eğim,
tasarıma normal yatay ve dikey düzenlemelere göre görsel
bir farklılık katar. Görsel bir vurgu yaratmada etkili olan
diyagonal grid yapısı genel kural olarak pek tercih edilmez.
Bunda insan gözünün yatayda daha rahat bir algılama
sağlaması en önemli etkendir.
Diyagonal Grid
2
Gridi bozmanın amacı, grid sayesinde akıllıca
oluşturulmuş boşluğu yeniden şekillendirerek, boşluk ve
elemanlar arasında yeni bir ilişki kurmaktır
Anti Grid
2
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi
Kapaklar ve grid sistemi

Más contenido relacionado

La actualidad más candente

Perkütan Endoskopik Gastrostomi
Perkütan Endoskopik GastrostomiPerkütan Endoskopik Gastrostomi
Perkütan Endoskopik Gastrostomiendohem
 
Kalp yetersizliği(fazlası için www.tipfakultesi.org)
Kalp yetersizliği(fazlası için www.tipfakultesi.org)Kalp yetersizliği(fazlası için www.tipfakultesi.org)
Kalp yetersizliği(fazlası için www.tipfakultesi.org)www.tipfakultesi. org
 
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)www.tipfakultesi. org
 
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )www.tipfakultesi. org
 
Analjezik antipiretik (fazlası için www.tipfakultesi.org )
Analjezik antipiretik (fazlası için www.tipfakultesi.org )Analjezik antipiretik (fazlası için www.tipfakultesi.org )
Analjezik antipiretik (fazlası için www.tipfakultesi.org )www.tipfakultesi. org
 
Gorsel Tasarim Ilkeleri Sunum
Gorsel Tasarim Ilkeleri   SunumGorsel Tasarim Ilkeleri   Sunum
Gorsel Tasarim Ilkeleri Sunumramazan
 
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇Çilem MEYDAN
 
Fundamentos do Grid - parte 1
Fundamentos do Grid - parte 1Fundamentos do Grid - parte 1
Fundamentos do Grid - parte 1renatamruiz
 
Bilimsel Makale Nasıl Yazılır?
Bilimsel Makale Nasıl Yazılır?Bilimsel Makale Nasıl Yazılır?
Bilimsel Makale Nasıl Yazılır?Ali Osman Öncel
 
Beyin firtinasi
Beyin firtinasiBeyin firtinasi
Beyin firtinasimassive501
 
Vazodilatör (fazlası için www.tipfakultesi.org )
Vazodilatör (fazlası için www.tipfakultesi.org )Vazodilatör (fazlası için www.tipfakultesi.org )
Vazodilatör (fazlası için www.tipfakultesi.org )www.tipfakultesi. org
 
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )www.tipfakultesi. org
 
Antiagregan ve trombolitikler son hanife
Antiagregan ve trombolitikler son hanifeAntiagregan ve trombolitikler son hanife
Antiagregan ve trombolitikler son hanifeturkann
 
Kardiyopulmoner resüsitasyonda etik
Kardiyopulmoner resüsitasyonda etikKardiyopulmoner resüsitasyonda etik
Kardiyopulmoner resüsitasyonda etikSULE AKIN
 

La actualidad más candente (20)

Perkütan Endoskopik Gastrostomi
Perkütan Endoskopik GastrostomiPerkütan Endoskopik Gastrostomi
Perkütan Endoskopik Gastrostomi
 
Kalp yetersizliği(fazlası için www.tipfakultesi.org)
Kalp yetersizliği(fazlası için www.tipfakultesi.org)Kalp yetersizliği(fazlası için www.tipfakultesi.org)
Kalp yetersizliği(fazlası için www.tipfakultesi.org)
 
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)
çOcuklarda kan gazları(fazlası için www.tipfakultesi.org)
 
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )
ventilasyon perfüzyon ilişkisi (fazlası için www.tipfakultesi.org )
 
Analjezik antipiretik (fazlası için www.tipfakultesi.org )
Analjezik antipiretik (fazlası için www.tipfakultesi.org )Analjezik antipiretik (fazlası için www.tipfakultesi.org )
Analjezik antipiretik (fazlası için www.tipfakultesi.org )
 
Gorsel Tasarim Ilkeleri Sunum
Gorsel Tasarim Ilkeleri   SunumGorsel Tasarim Ilkeleri   Sunum
Gorsel Tasarim Ilkeleri Sunum
 
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇
Blockchain ve Tedari̇k Zi̇nci̇ri̇ Yöneti̇mi̇
 
Grafik Tasarım Temelleri Sunumu
Grafik Tasarım Temelleri SunumuGrafik Tasarım Temelleri Sunumu
Grafik Tasarım Temelleri Sunumu
 
Fundamentos do Grid - parte 1
Fundamentos do Grid - parte 1Fundamentos do Grid - parte 1
Fundamentos do Grid - parte 1
 
Bilimsel Makale Nasıl Yazılır?
Bilimsel Makale Nasıl Yazılır?Bilimsel Makale Nasıl Yazılır?
Bilimsel Makale Nasıl Yazılır?
 
Araştirma sunumu-makale
Araştirma sunumu-makaleAraştirma sunumu-makale
Araştirma sunumu-makale
 
Beyin firtinasi
Beyin firtinasiBeyin firtinasi
Beyin firtinasi
 
Sınıf yönetimi
Sınıf yönetimiSınıf yönetimi
Sınıf yönetimi
 
İlaç ilaç etkileşimi
İlaç ilaç etkileşimiİlaç ilaç etkileşimi
İlaç ilaç etkileşimi
 
Vazodilatör (fazlası için www.tipfakultesi.org )
Vazodilatör (fazlası için www.tipfakultesi.org )Vazodilatör (fazlası için www.tipfakultesi.org )
Vazodilatör (fazlası için www.tipfakultesi.org )
 
Asilar
AsilarAsilar
Asilar
 
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )
Akut Böbrek Yetmezliği (fazlası için www.tipfakultesi.org )
 
Antiagregan ve trombolitikler son hanife
Antiagregan ve trombolitikler son hanifeAntiagregan ve trombolitikler son hanife
Antiagregan ve trombolitikler son hanife
 
Yeni̇doğan sorunlari ve bakimi
Yeni̇doğan sorunlari ve bakimi   Yeni̇doğan sorunlari ve bakimi
Yeni̇doğan sorunlari ve bakimi
 
Kardiyopulmoner resüsitasyonda etik
Kardiyopulmoner resüsitasyonda etikKardiyopulmoner resüsitasyonda etik
Kardiyopulmoner resüsitasyonda etik
 

Destacado (9)

Dergicilikte renk kullanimi
Dergicilikte renk kullanimiDergicilikte renk kullanimi
Dergicilikte renk kullanimi
 
Mitanox Kurumsal Katalog
Mitanox Kurumsal KatalogMitanox Kurumsal Katalog
Mitanox Kurumsal Katalog
 
Ceres Yayınları Dijital Katalog
Ceres Yayınları Dijital KatalogCeres Yayınları Dijital Katalog
Ceres Yayınları Dijital Katalog
 
Dergide görsel kimlik oluşturma
Dergide görsel kimlik oluşturmaDergide görsel kimlik oluşturma
Dergide görsel kimlik oluşturma
 
Soc 399-1
Soc 399-1Soc 399-1
Soc 399-1
 
Soc 399-2
Soc 399-2Soc 399-2
Soc 399-2
 
Soc 399 3.ders
Soc 399 3.dersSoc 399 3.ders
Soc 399 3.ders
 
Designing Grid Systems @media2010
Designing Grid Systems @media2010Designing Grid Systems @media2010
Designing Grid Systems @media2010
 
Architectural Poster Presentations
Architectural Poster PresentationsArchitectural Poster Presentations
Architectural Poster Presentations
 

Kapaklar ve grid sistemi

  • 1. Kapaklar ve içerik sayfalarını çizebilmek için Grid sistemi kullanılır • Grid kelime anlamı olarak belli bir hat, izlek, ızgara anlamındadır. • Bir başka deyişle grid, sayfa tasarımında kullanılacak elemanların düzenlenmesinde yardımcı yatay ve dikey çizgilerdir. • Bu çizgiler kendi içinde bir sistem ve oransal ilişki içinde hazırlanırlar. (Tevfik Fikret Uçar, Görsel iletişim ve grafik tasarım, İstanbul, 2004, Inkılap kitabevi, s.147)
  • 2. Sayfa tasarımında da sayfa üzerine yerleştirilecek her elemanın sayfa yüzeyi ile olan ilişkisi dışında diğer elemanlarla olan ilişkisi de düşünülmeli ve ona göre tasarlanmalıdır. “Elemanları sayfa üzerinde konumlandırırken, herhangi bir formül yoktur, fakat mantıklı bir sonuca ulaşmak için grid (ızgara) kullanılabilir”* (Solomon, 1986, s.42). Çünkü gridler sayfa üzerinde kullanılacak yazı, resim gibi elemanların yerleştirileceği yeri belirlemeye yardımcı olurlar. Grid sistemi 2
  • 3. Grid kullanımının bazen tasarımcıyı katı formlara uymak zorunda bıraktırıp, kısıtladığı düşünüldüğünden kimi çevrelerce eleştirilse de sayfa düzenine birçok faydası vardır:  Grid bir alan üzerinde elemanları düzenlemede en kullanışlı yöntemdir.  Grid tasarıma düzen, sadelik ve plan aşamasında çeşitlilik sağlar, elemanlar ve sayfalar arası uyumu destekler.  Grid tasarım aşamasında bir ise zaman kazandırır. Özellikle çoklu sayfaların tasarımında tek yada karşılıklı sayfalarda bir grid yapısı oluşturup, diğer sayfalarda bu grid yapısını devam ettirmek tasarımcının işini kolaylastırır. Grid sisteminin faydaları 2
  • 4. Grid sayesinde temiz ve düzenli oluşan sayfalar, göze estetik açıdan daha hoş görünür.  Grid sayesinde bütünlük kazanan tasarımlarda okuyucu neyin nerede olduğunu daha iyi kavrar. Fikret Uçar (2004, s.149)’a göre, okuyucu pek farkında olmasa da grid sistemini tanımlar ve takip amaçlı kullanır, grid adeta görsel bir şifre gibi bilginin iletim dilini tanımlayan bir sisteme dönüşür. Grid özellikler 2
  • 5. Bir gridi oluşturan bölümler: marjlar, sütunlar, sütun arası boşluklar, grid çizgileri, modüller, akış çizgileridir Bir grid oluşturmaya genellikle ‘marj’ denilen içerik ve sayfa kenarları arasındaki boşlukları belirlemekle başlanır. Dıs kenarda, üst kenarda, alt kenarda ve iç kenarlarda bırakılan bu boşluğun oranları kompozisyonun genel görünümü açısından büyük önem taşır. Genellikle üst ve alt kenarlarda daha fazla boşluk bırakılır. Bu sayfaya daha düzenli ve dengeli bir görünüm sağlar. Marjlar, gözün dinlenebilecegi alan olmasının yanında, dikkati çekmek için ikincil bilgilerin yerleştirildiği alan olarak da kullanılabilir. Grid’in bölümleri 2
  • 7. Manuskript grid adından da anlaşılacağı üzere, el yazması kitapların grid anlayışıdır. Sayfanın genis bir alanını kapsayan tek bir sütun ile en basit grid yapısıdır. Tek bir metin bloğu ve marjları ile ilkel bir yapısı olsa da, sayfa numaraları, bölüm baslığı, alt yazı, üst yazı, dipnotlar gibi diğer önemli detaylar için daha fazla alan kullanımına olanak sağlar Manuskript Grid 2
  • 8. Alex W. White (2002, s.29)’a göre, sayfa tasarımında bosluk kullanımının en eski örneklerinden biri olan bu grid yapısında, sayfa dıs kenarlarındaki genis alanlar “bilgin marjı (scholar’s margin)” olarak adlandırılmıstır. Genis kenar boslukları sayesinde sayfada dingin bir görünüm saglanırken, kitap sayfaları yıpransa dahi, yazılar zarar görmeden korunabilmektedir. Bu tasarımlarda karsılıklı sayfalardaki metin blokları daha fazla birbiriyle baglantılıdır, çünkü iç kenarlardaki bosluklar dıs kenarlara göre daha azdır. Gotik Grid 2
  • 9. 2 Daha çok kitap gridi olarak düşünülen gotik gridde sayfa kenar boşlukları 2, 3, 4 ve 6 sayılarıyla doğru orantılı olacak şekilde bırakılır.
  • 10. Sütun grid, farklı bilgi gruplarını aktarmada sütunların birbirinden bağımsız olmalarından dolayı daha elverişlidir. Dergi ve broşür gridlerinde çoğunlukla 3 sütunlu grid yapısı hakimdir. Sütun Grid 2
  • 11. Modüllerden oluşan grid yapısıdır. Bazı tasarımcılar alanı çoklu parçalara bölen bu karmaşık grid yapısını, elemanları hizalayabilecekleri daha fazla alan kullanımına olanak sağladığından daha kullanışlı bulurlar. Modüler gridde yanıltıcı bir unsur her bir alanı doldurma gereksinimidir. Oysa profesyonel tasarımcılar bilirler ki, tasarımda dolu alanlar kadar bos alanlara da ihtiyaç vardır. Modüler grid 2
  • 12. Bazen görsel elemanlar ve içerik hiçbir kategoriye uymayan bir grid yapısını gerektirirler. Bu tarz grid yapısında sütun genişlikleri ve aralarındaki boşluklar değişmeye eğilimlidirler ve sabit bir orandan söz edilemez Hiyerarşik Grid 2
  • 13. Diyagonal Grid, bundan önceki grid yapılarından farklı olarak elemanları düzenlemede eğimlerden yararlanır. Bu eğim, tasarıma normal yatay ve dikey düzenlemelere göre görsel bir farklılık katar. Görsel bir vurgu yaratmada etkili olan diyagonal grid yapısı genel kural olarak pek tercih edilmez. Bunda insan gözünün yatayda daha rahat bir algılama sağlaması en önemli etkendir. Diyagonal Grid 2
  • 14. Gridi bozmanın amacı, grid sayesinde akıllıca oluşturulmuş boşluğu yeniden şekillendirerek, boşluk ve elemanlar arasında yeni bir ilişki kurmaktır Anti Grid 2