SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

5 creating meaningful graphics, icons and images
5 creating meaningful graphics, icons and images5 creating meaningful graphics, icons and images
5 creating meaningful graphics, icons and imagesZen Pao Javier
 
Introduction to Adobe Illustrator
Introduction to Adobe IllustratorIntroduction to Adobe Illustrator
Introduction to Adobe IllustratorJin Castor
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Wunderman
 
Photoshop CC
Photoshop CCPhotoshop CC
Photoshop CCRazwan2
 
E ball technology
E ball technologyE ball technology
E ball technologyA B
 
Information Visualisation – an introduction
Information Visualisation – an introductionInformation Visualisation – an introduction
Information Visualisation – an introductionAlan Dix
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosUTFPR
 
Planejamento Cartaz - Computação Gráfica 2022
Planejamento Cartaz - Computação Gráfica 2022Planejamento Cartaz - Computação Gráfica 2022
Planejamento Cartaz - Computação Gráfica 2022Renato Melo
 
Intro to Adobe Illustrator
Intro to Adobe IllustratorIntro to Adobe Illustrator
Intro to Adobe IllustratorDUSPviz
 
Adobe illustrator cs6
Adobe illustrator cs6Adobe illustrator cs6
Adobe illustrator cs6Ila Azmil
 
Sistem analizi-1
Sistem analizi-1Sistem analizi-1
Sistem analizi-1warlock76
 

Tendances (20)

Fundamentos da grid
Fundamentos da gridFundamentos da grid
Fundamentos da grid
 
5 creating meaningful graphics, icons and images
5 creating meaningful graphics, icons and images5 creating meaningful graphics, icons and images
5 creating meaningful graphics, icons and images
 
Introduction to Adobe Illustrator
Introduction to Adobe IllustratorIntroduction to Adobe Illustrator
Introduction to Adobe Illustrator
 
Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.Introdução a Projeto Gráfico.
Introdução a Projeto Gráfico.
 
Photoshop CC
Photoshop CCPhotoshop CC
Photoshop CC
 
E ball technology
E ball technologyE ball technology
E ball technology
 
Information Visualisation – an introduction
Information Visualisation – an introductionInformation Visualisation – an introduction
Information Visualisation – an introduction
 
Seminer dersi
Seminer dersiSeminer dersi
Seminer dersi
 
Arquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e ExercíciosArquitetura da Informação: Estudos de Caso e Exercícios
Arquitetura da Informação: Estudos de Caso e Exercícios
 
Planejamento Cartaz - Computação Gráfica 2022
Planejamento Cartaz - Computação Gráfica 2022Planejamento Cartaz - Computação Gráfica 2022
Planejamento Cartaz - Computação Gráfica 2022
 
SMART NOTE TAKER
SMART NOTE TAKERSMART NOTE TAKER
SMART NOTE TAKER
 
Intro to Adobe Illustrator
Intro to Adobe IllustratorIntro to Adobe Illustrator
Intro to Adobe Illustrator
 
Grid
GridGrid
Grid
 
E-Ball Technology.pptx
E-Ball Technology.pptxE-Ball Technology.pptx
E-Ball Technology.pptx
 
Adobe illustrator cs6
Adobe illustrator cs6Adobe illustrator cs6
Adobe illustrator cs6
 
typography
 typography typography
typography
 
Sistem analizi-1
Sistem analizi-1Sistem analizi-1
Sistem analizi-1
 
printer
printerprinter
printer
 
UML ile Modelleme
UML ile ModellemeUML ile Modelleme
UML ile Modelleme
 
Presentation1
Presentation1Presentation1
Presentation1
 

En vedette (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