Up next in 10
Auzef Grafik Tasarım -II 2025-2026 Vize Soruları
https://lolonolo.com/2026/05/06/grafik-tasarim-ii-2025-2026-vize-sorulari/
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Her gün kullandığımız o yağ gibi akan
0:02
dijital uygulamaların arkasında nasıl
0:03
bir mimari yatıyor hiç düşündünüz mü?
0:05
Yani o minik butonların yerleşimi,
0:07
seçilen renkler hatta aralardaki o
0:09
boşluklar bile aslında zihnimizle
0:11
oynayan ince hesaplanmış birer
0:13
mühendislik harikası. Bu incelememizde
0:15
tam da bunu grafik tasarım ve kullanıcı
0:17
deneyiminin o görünmez şifrelerini
0:18
deşifre edeceğiz. Aslında görünüşte
0:20
basit olan bu taslakların ne kadar derin
0:22
olduğunu görünce gerçekten çok
0:24
şaşıracaksınız. Başlayalım mı? Pekala.
0:27
Hemen bugünkü yol haritamıza bir göz
0:28
atalım. Önce arayüz ve kullanıcı
0:30
deneyimi diyerek insan psikolojisine
0:32
ineceğiz. Sonra mizampaj ve tasarım
0:34
sistemleri ile işin matematiğine
0:36
bakacağız. En sona düzenleme ve görsel
0:39
ilkelerle konuyu toparlayacağız. Hadi
0:41
lafı uzatmadan ilk bölüme geçelim. 1inci
0:44
bölüm arayüz ve kullanıcı deneyimi. Yani
0:47
tasarım daha ortada yokken kullanıcının
0:50
zihni nasıl çalışıyor? Önce onu bir
0:52
haritalandıralım. Şimdi telefonunuzu
0:54
elinize aldığınızı hayal edin. Tek elle
0:55
tutarken baş parmağınız ekranın
0:57
neresinde duruyor? Genelde en altta
0:59
değil mi? Telefonlar dev ekranlı
1:01
tabletlere dönüştükçe parmağımızı en
1:03
tepeye uzatmak kelimenin tam anlamıyla
1:05
bir mesai haline geldi. İşte bu yüzden
1:07
ekranın alt kısmı bizim baş parmak
1:09
erişim bölgesi dediğimiz o altın alan.
1:11
Yani favori uygulamalarınızda o ana
1:12
menülerin alt kısma çakul olmasının
1:14
estetikle falan alakası yok. Tamamen
1:16
ergonomi. Tasarımcılar sizin
1:18
parmağınızın rahatını sizden önce
1:19
düşünüyor diyebiliriz. Peki her şeyin en
1:22
başına yani tasarımın sıfır noktasına
1:24
dönelim. Tel kafes yani wireframe
1:27
dediğimiz o ilk çizimlerde her şey çok
1:29
basittir. Hani şu meşhur içine köşeden
1:32
köşeye bir X çizilmiş dikdörtgenler
1:34
vardır ya işte onlar en temel yapı
1:36
taşlarıdır. Tasarımcı aslında o çarpı
1:39
işaretli kutuyu oraya koyarak günün
1:41
birinde buraya bir fotoğraf gelecek ama
1:43
şu an estetik falan umrumda değil.
1:45
Sadece yeri belli olsun der. İş menüleri
1:48
oluşturmaya geldiğinde ki burası çok
1:50
kritik kimse oturup tahmin yürütmez.
1:52
Neden riske atalım ki? Ağır işi doğrudan
1:54
kullanıcının kendisine yaptırırız. Bunun
1:56
adı açık kart sıralama. Çok basit bir
1:58
mantığı var. Kullanıcılara içeriklerin
2:00
yazılı olduğu kartları veriyorsunuz.
2:02
Önce kendi mantiklerine göre
2:03
grupluyorlar. Sonra da işte can alıcı
2:05
nokta burası. Bu gruplara kendileri isim
2:07
veriyorlar. Sonuç, navigasyon menüleri
2:10
tamamen sizin zihninizin doğal
2:11
işleyişine göre kendiliğinden
2:13
şekillenmiş oluyor. Harika bir yöntem
2:15
gerçekten. Kategorilerimiz bu şekilde
2:17
netleşince ortaya site haritası çıkıyor.
2:19
Bunu bir nevi organizasyon şeması veya
2:22
sitenin soyağacı gibi düşünebilirsiniz.
2:24
Ana sayfa nerede, alt kategoriler
2:26
birbiriyle nasıl konuşuyor? Hepsi burada
2:28
kuş bakışı bir şekilde karşımızda. Şunu
2:31
özellikle belirteyim. Bu aşamada hala
2:33
renk yok, font yok, animasyon yok.
2:35
Sadece çıplak saf bir hiyerarşi var.
2:38
Şimdi asıl acayip olan kısma geldik.
2:41
Gözlerimizin bizi nasıl ele verdiğine.
2:44
Nelson Norman Group'un araştırmaları
2:45
gösteriyor ki özellikle çok fazla metin
2:48
olan sayfalarda kimse oturup kelime
2:50
kelime okumuyor. Sayfayı resmen
2:52
tarıyoruz ve bu tarama hiç de rastgele
2:54
değil. Göz önce üst kısmı yatay olarak
2:57
bir tarıyor. Biraz aşağı inip daha kısa
2:59
bir yatay okuma yapıyor. Sonra da sol
3:01
kenardan dikey olarak hızla aşağı kayıp
3:03
gidiyor. İngilizce F harfini çizer gibi
3:06
tam olarak böyle. Tasarımcılar da bunu
3:08
bildiği için en hayati bilgileri bu
3:11
görülmez F harfinin rotasına
3:12
yerleştiriyorlar. Ama tabii bazen işler
3:15
kontrolden çıkabilir. Arayüz tasarımında
3:18
en korktuğumuz iki şey vardır. Görsel
3:20
gürültü ve değişim körlüğü. Görsel
3:23
gürültü malum. Devasa butonlar, çığlık
3:25
atan renkler, her yerden fırlayan
3:27
yazılar aynı anda bana bak derse beyin
3:30
kısa devre yapar. Hiçbir şeye
3:32
odaklanamazsınız. Değişim körlüğü ise
3:35
çok daha sinsi bir psikolojik oyun.
3:37
Dikkatiniz o an başka bir yerdeyse veya
3:39
dikkatiniz dağıldıysa arayüzün göbeğinde
3:42
beliren koskoca bir uyarıyı kelimenin
3:44
tam anlamıyla görmeyebilirsiniz. Çünkü
3:47
beynimiz her saniye her detayı
3:49
kaydedemez. O zaman dikkati nasıl canlı
3:52
tutacağız? Burada evrimsel biyoloji
3:55
devreye giriyor. İnsan beyni sabit duran
3:58
şeylerden ziyade hareket eden şeylere
4:00
karşı inanılmaz hassastır. Arayüzlerdeki
4:03
o minik animasyonların, mikro
4:05
etkileşimlerin sırrı da bu. Bir butona
4:07
dokunduğunuzda hafifçe küçülmesi falan
4:10
sadece görsel bir şov değil. Bu bir
4:13
sistem geri bildirimi. Sistem size
4:15
anında tamamdır dokunuşunu hissettim ve
4:17
işleme aldım diyor. Dikkatinizi
4:19
yakalıyor ve işlemi zihninizde
4:21
mühürlüyor. Harika. Şimdi ikinci bölüme
4:24
mizampaj ve tasarım sistemlerine
4:26
geçiyoruz. Yani kullanıcı
4:28
psikolojisinden çıkıp ekran yerleşimini
4:30
yöneten o yapısal ve matematiksel
4:32
kurallara dalıyoruz. Web tasarımının
4:35
tarihine bakmak aslında biraz komik.
4:37
1995'lerden 2005'lere kadar o erken
4:40
dönem web sitelerini hatırlayanınız var
4:42
mı? Tasarımcılar bir şeyleri hizalamak
4:44
için bildiğiniz HTML tablolarını
4:46
kullanıyordu. Yani aslında sadece
4:48
verileri sıralamak için icat edilmiş
4:50
tablolarla tasarım yapmaya
4:52
çalışıyorlardı. İnanılmaz hantal, sıfır
4:54
esneklik. Ama bugün akışkan yani
4:57
responsive tasarım çağındayız.
4:59
Sınırların, katı kuralların tamamen
5:01
ortadan kalktığı o özgürlük dönemi. Peki
5:03
bizi bu akışkan sisteme mecbur bırakan
5:05
şey neydi? Etrafınıza bir bakın.
5:07
Cebinizde farklı bir ekran, masanızda
5:09
farklı, kolunuzdaki saatte bambaşka bir
5:12
ekran var. Eskiden tek tip ekranlar
5:14
vardı. O yüzden pikseli pikseline sabit
5:16
tasarımlar yapılırdı. Bugünse cihaz
5:18
sayısı ve ekran boyutu kelimenin tam
5:20
anlamıyla sonsuz. Yani o eski statik
5:23
yaklaşım tarihi oldu. Tasarımların artık
5:25
yüzdelik değerlerle çalışması ekranın
5:27
boyutuna göre tıpkı bir sıvı gibi
5:29
bulunduğu kabın şeklini alması mecburi.
5:32
Başka çaremiz yok. Ve bu akışkanlığı
5:35
kontrol eden ekran yerleşimlerinin
5:36
arkasındaki o sihirli sayıyla tanışın
5:39
12. Modern web tasarımında 12 sütunlu
5:42
ızgara yani grid sistemi altın
5:44
standarttır. Neden 10 değil de 12 peki?
5:46
Aslında tamamen matematiksel bir de
5:48
örneği. 12 sayısı 1 2 3 4 ve 6'ya tam
5:53
bölünür. Bu da tasarımcıya inanılmaz bir
5:55
manevra alanı sağlar. Sayfayı simetrik
5:57
olarak ortadan 2'ye bölebilirsiniz, 3'e
5:59
bölebilirsiniz ya da asimetrik bir
6:01
şekilde 8'e 4 dağıtabilirsiniz. Her
6:04
seferinde tam sayı elde edersiniz. 12
6:06
kelimenin tam anlamıyla bir tasarımcının
6:09
en iyi dostudur. Tabii ekranların sadece
6:11
boyutu değil teknolojisi de değişti.
6:13
Modern telefonlara veya monitörlere bir
6:15
bakın. Standart bir ekranın alanına 2
6:17
bazen 3 kat daha fazla piksel
6:19
sıkıştırıyorlar. Retina veya high apı
6:21
dediğimiz yüksek yoğunlukla ekranlar
6:23
bunlar. Eğer bu ekranlara standart
6:25
çözünürlükte yani 1x boyutunda bir
6:27
görsel koyarsanız sistem o aradaki boş
6:30
pikselleri zorla doldurmaya çalışır.
6:32
Sonuç gibi bulanık bir görüntü. O yüzden
6:35
tasarımcılar aynı görselin 1x, 2x ve 3x
6:38
versiyonlarını dışa aktarmak zorunda. İş
6:40
yükü artıyor evet ama pürüzsüz bir
6:42
deneyim için bu şart. Şimdi
6:44
incelememizin o meşhur aha dedirten
6:46
noktalarından birine geldik. Ekranda
6:48
derinlik hissi yaratmak. Aydınlık modda
6:50
her şey çok kolay. Bir nesnenin
6:52
diğerinden üstte durduğunu göstermek
6:54
için altına hafif siyah bir gölge
6:56
atarsınız biter. Peki arka planın zaten
6:58
zifiri siyah olduğu koyu modda yani dark
7:01
modda ne yapacağız? Siyahın üstüne siyah
7:03
gölge mi atacaksınız? İmkansız
7:05
göremezsiniz. İşte buradaki zekice çözüm
7:07
şu: koyu modda derinlik hissi nesnenin
7:10
kendi rengi açılarak verilir. Yüzey ne
7:12
kadar yukarıdaysa yani bize ne kadar
7:14
yakınsa rengi o kadar açık bir griye
7:16
döner. Tıpkı gerçek hayatta ışığın
7:18
yüksekteki nesnelere daha fazla vurması
7:20
gibi. Çok mantıklı değil mi? Hadi şimdi
7:22
tüm bu yapıların nasıl işlendiğine
7:24
bakalım. 3ün bölüm. Düzenleme ve görsel
7:27
ilkeler. Artık işin o teknik ve görsel
7:29
cilasını atma vakti geldi. Eğer
7:32
profesyonel anlamda bir grafik veya
7:33
arayüz işine giriyorsanız duvara asmanız
7:35
gereken altın kural şudur: Tahribatsız
7:38
düzenleme. Bu ne demek biliyor musunuz?
7:40
Orijinal piksel verisini asla ama asla
7:43
silmemek kalıcı olarak bozmamak demek.
7:46
Çünkü tasarım süreci düz bir çizgi
7:48
değildir. Her an fikirler değişebilir.
7:50
Müşteri ya o eski haline dönsek
7:52
diyebilir. Siz bir sabah uyanıp her şeyi
7:54
baştan almak isteyebilirsiniz. İşte
7:56
böyle anlarda ta en başa hasarsız bir
7:59
şekilde dönebilmeniz hayati önem taşır.
8:01
Peki bu tahribatsız çalışmanın sihirli
8:04
değneği nedir? Katman maskeleri.
8:06
Maskeler aslında bildiğimiz silginin tam
8:08
zıttıdır. Çünkü pikselleri gerçekten yok
8:10
etmezler. Çok basit evrensel bir ikili
8:13
mantıkla çalışırlar. Maskenin üzerinde
8:15
siyah renkli boyadığınız her yer
8:17
şeffaflaşır yani gizlenir. Beyaz renkli
8:20
boyadığınız yerler ise tekrar görünür
8:21
olur. Yani bir silme işleminden pişman
8:24
olursanız tek yapmanız gereken fırçanın
8:26
rengini siyah yerine beyaz yapmaktır.
8:29
Orijinal veriniz hala oradadır. Hiçbir
8:31
şey kaybolmamıştır. Bu tahribatsız
8:33
evrenin bir diğer kahramanı da akıllı
8:35
nesnelerdir. Sıradan piksellerden oluşan
8:38
bir logonuz var diyelim. Bunu çok fazla
8:40
büyütürseniz kenarları tırtıklı olur.
8:42
Piksel piksel dağılır. Ama siz o logoyu
8:45
bir akıllı nesne formatına
8:46
dönüştürürseniz işin içine anında
8:48
vektörel matematik girer. Artık o
8:50
nesneyi isterseniz bir göktelem
8:52
boyutunda büyütün kenarları her zaman
8:53
jilet gibi keskin kalır. Çünkü artık
8:55
sabit piksellerle değil esnek
8:57
matematiksel formüllerle
8:58
çalışıyorsunuzdur. İşin mutfağını
9:01
hallettik. Peki işin vitrini zihnimize
9:03
nasıl hitap ediyor? Geştalt psikolojisi
9:05
sağ olsun burada benzerlik ilkesini
9:07
kullanıyoruz. Dikkat etmişsinizdir. Bir
9:09
arayüzdeki satın al veya onayla gibi tüm
9:12
birincil eylem butonları genelde hep
9:14
aynı renktedir. Boyutları ve köşeleri
9:16
aynıdır. Tasarımcılar burada insan
9:18
beyninin birbiriyle aynı görünen şeyleri
9:21
anında aynı mantıksal gruba dahil etme
9:23
huyundan faydalanır. Sizin oturup
9:25
düşünmenize gerek kalmaz. Beyniniz
9:26
sadece renge ve şekle bakarak ha bunlar
9:29
aynı işi yapıyor der geçer. Aslında
9:31
bütün bu anlattıklarımızın temelinde çok
9:33
net bir dönüşüm yatıyor. Yüzyıllar
9:35
boyunca tasarım dediğimiz şey statikti.
9:38
Kağıtlar, dergiler, posterler hiçbiri
9:40
kıpırdamıyordu. Ama bugün ekranlar
9:42
kilimenin tam anlamıyla her yerde.
9:44
Cebimizden devasa reklam panarına kadar
9:46
ekranlarla kuşatılmış durumdayız. İşte
9:48
bu basılı tasarım geleneğinin bugün o
9:51
yaşayan, hareket eden etkileşimli
9:53
arayüzlere dönüşmesi bir tercih değil.
9:55
Bu dijitalleşmenin kaçınılmaz sonucuydu.
9:58
Tüm bunları düşününce size şu provokatif
10:01
soruyu sormadan edemeyeceğim. Tüm bu
10:03
incelediğimiz psikolojik tuzakları, o
10:05
kusursuz matematiksel ızgaraları ve
10:07
gizli hiyerarşiları gördükten sonra
10:10
favori uygulamanızı bir sonraki
10:12
açışınızda ekrana hala aynı gözle
10:14
bakabilecek misiniz? Yoksa o görünmez F
10:16
desenini, başparmağınızın çekildiği o
10:19
konfor alanını, arka planda tıkır tıkır
10:21
işleyen 12 sütunlu yapıyı anında fark mı
10:24
edeceksiniz? Umarım bu incelememiz
10:26
dijital dünyanın arkasındaki o kusursuz
10:29
görünmez taslağı görmenizi sağlamıştır.
10:31
Tasarımın şifrelerini çözmeye ve her
10:33
zaman merak etmeye devam edin.
#Jobs & Education