live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Auzef Grafik Tasarım -II Ünite 6 Web Tasarımında Görsel Tasarım: Estetik, Fonksiyon ve Kod,
Auzef Web Tasarım ve Kodlama
https://lolonolo.com/2026/03/14/grafik-tasarim-ii-unite-6/
https://lolonolo.com
Show More Show Less View Video Transcript
0:00
Selamlar. Hani böyle bazı web siteleri
0:02
vardır girersiniz ve her şey tıkır tıkır
0:04
işler, değil mi? Telefonunuzdan da
0:06
baksanız, bilgisayardan da girseniz
0:08
sanki tam size göre yapılmış gibi. İşte
0:10
bu hiç de sihir değil. Bugün modern web
0:13
tasarımının o görünmez kurallarını yani
0:16
işin mutfağını deşifre ediyoruz. Hadi
0:18
başlayalım. Yani hiç merak ettiniz mi
0:21
nasıl oluyor da en iyi siteler hangi
0:23
cihazı kullanırsanız kullanın bu kadar
0:26
düzenli ve sezgisel hissettiriyor? Sanki
0:29
aklınıza okuyorlar gibi değil mi? İşte
0:31
işin sırrı da bu. Bu kesinlikle bir
0:33
tesadüf değil. Aksine arkasında gizli
0:36
bir plan, bir kurallar bütünü var. Gelin
0:39
şimdi hep birlikte bu planı deşifre
0:41
edelim. Ve her şeyin başlangıç noktası
0:44
önce mobil devrimi. Modern tasarımın
0:47
adeta temel taşı. Bu duyarlı tasarım
0:49
dediğimiz şey aslında bir felsefe. Şöyle
0:52
düşünün. Tek bir web sitesi yakıyorsunuz
0:54
ama bu site adeta bir Bukalemon gibi
0:56
girdiği ekranın şeklini alıyor. İster
0:59
ufacık bir telefon olsun ister dev bir
1:01
masaüstü monitörü içerik her zaman akıcı
1:03
bir şekilde uyum sağlıyor. Peki bu nasıl
1:06
mümkün oluyor? Yani hem küçücük bir
1:08
telefon hem de dev gibi bir ekran için
1:10
aynı anda nasıl tasarım yaparsınız?
1:13
Cevap aslında çok mantıklı. İşe en
1:15
zorundan, en küçüğünden başlarsınız.
1:18
İşte önce mobil yaklaşımının en büyük
1:20
avantajı bu. En küçük ekranla başlamak
1:23
sizi ister istemez bir disipline
1:25
sokuyor. Bu ekrana ne sığar diye
1:27
düşünmek zorunda kalıyorsunuz. Bu da ne
1:29
demek? En baştan bütün gereksiz
1:31
kalabalıktan kurtulup sadece ve sadece
1:34
en kritik içeriğe odaklanmak demek.
1:36
Sonra büyük ekranlara geçtikçe bu sağlam
1:39
temelin üzerine yeni şeyler eklemek çok
1:41
daha kolay oluyor. Tamam. Büyük resmi
1:44
yani felsefeyi anladık. Peki bu
1:45
felsefeyi hayata geçiren iskelet ne?
1:48
İşte şimdi o iskelete yani ızgaranın
1:50
sihrine dalıyoruz. Bakın web'in ilk
1:53
zamanlarına gittiğimizde yani şöyle
1:55
90'ların sonu 2000'lerin başına düzenler
1:58
bildiğiniz Excel tabloları gibi
2:00
yapılıyordu. Evet yanlış duymadınız. Bu
2:03
da yaratıcılığı inanılmaz kısıtlıyordu.
2:05
Ama bugün bugün elimizde CSS Grid ve
2:08
Flexbox gibi o kadar güçlü araçlar var
2:11
ki hayal gücümüz neredeyse tek
2:12
sınırımız. Peki bu modern ve esnek
2:15
dünyada web tasarımcılarının ve
2:17
geliştiricilerin bir takıntısı var. Bir
2:19
sayıya resmen aşıklar. O da 12. Neden 10
2:23
değil? 15 değil de ille de 12. Evet 12.
2:27
Bütün o gördüğünüz düzenli web sitelerin
2:29
arkasındaki o sihirli sayı. Peki 12'nin
2:32
sihrine cevap aslında çok basit.
2:35
Bölünebilirlik. Bakın 12 sayısını hem
2:37
2'ye hem 3'e hem 4e hem de 6'ya tam
2:41
olarak bölebiliyorsunuz. Bu basit
2:42
matematiksel gerçek tasarımcılara
2:44
inanılmaz bir esneklik sunuyor. Sayfayı
2:47
2'ye, 3'e, 4e bölmek hepsi mümkün.
2:50
Mesela sayfayı tam ortadan 2'ye mi
2:52
bölmek istiyorsunuz? Alın size 6 sütun +
2:55
6 sütun ya da fiyat tabloları gibi üç
2:58
eşit parça mı lazım? Hemen 4 4 4
3:00
yapıyorsunuz. Kenara bir menü, yanına da
3:02
ana içeriği mi koyacaksınız? 3e 9
3:05
bölünme işinizi görüyor. İşte her gün
3:08
gezindiğiniz o sitelerin arkasındaki
3:09
düzenin matematiği bu kadar basit ve
3:12
etkili. Hazır konusu açılmışken şu iki
3:14
modern aracın farkını da netleştirelim.
3:17
Flexbox ve CSS Grid. Flexbox'ı tek bir
3:20
çizgi üzerindeki boncuklar gibi düşünün.
3:22
Ya yatay ya da dikey olarak dizersiniz.
3:25
Tek boyutlu işler için mükemmeldir. Ama
3:27
CSS grid o bir dama tahtası gibidir. Hem
3:30
satırlara hem de sütunlara aynı anda
3:32
hükmedersiniz. Yani iki boyutlu daha
3:34
karmaşık düzenler için biçilmiş kaftan.
3:37
Büyük ölçekli iskeleti yani ızgarayı
3:40
hallettik. Şimdi biraz daha yakına
3:43
gelelim. Büyüteci elimize alalım ve işin
3:46
mikro detaylarına yani hassas tasarıma
3:49
bakalım. Sütunları yerleştirdik. Güzel.
3:51
Peki bir butonun yüksekliği ne olmalı?
3:54
İki paragraf arasındaki boşluk ne kadar
3:56
olmalı? İşte bu gibi detaylarda da bir
3:58
kural var. 8 noktalı ızgara sistemi. Bu
4:01
sistemde tasarımdaki bütün boyutlar ve
4:03
boşluklar 8 pikselin katları olmak
4:06
zorunda. Yani bir tasarımcı asla butonun
4:09
yüksekliği 42 piksel olsun demez. Ya 40
4:12
der ya da 48. Aradaki boşluk 15 piksel
4:15
olmaz. 16 olur. 22 olmaz 24 olur. Neden?
4:19
Çünkü kural basit. Her şey 8'in katı
4:22
olacak. Bu tahmin yürütmeyi tamamen
4:24
ortadan kaldırıyor ve ekranda göze hoş
4:26
gelen tutarlı bir ritim yaratıyor. Ve bu
4:29
hassasiyet sadece boşluklarda da
4:31
bitmiyor. Mesela tipografinin yani
4:33
yazıların bile kuralları var. İnternette
4:35
bir metni rahatça okuyabilmeniz için
4:37
ideal satır uzunluğunun 45 ilile 75
4:40
karakter arasında olması gerektiği
4:41
hesaplanmış. Yani ne gözünüz sürekli
4:44
satır atlamak zorunda kalsın ne de bir
4:46
sonraki satırın başını bulmak için
4:48
kaybolsun. Gördüğünüz gibi iyi tasarımda
4:51
hiçbir şey şansa bırakılmıyor. Peki tüm
4:53
bu kuralları, felsefeleri ve sistemleri
4:56
bir araya getirdiğimizde ne görüyoruz?
4:58
Tasarımın aslında kodla konuştuğu bir
5:00
dünya ve işte bugünün ana fikri bu.
5:04
Modern web'de en iyi tasarım sadece
5:07
estetik bir kaygı gütmez. O estetiğin,
5:10
fonksiyonun ve kodun bir araya geldiği
5:12
bir diyalogtur. Bu üçü birbiriyle uyum
5:15
içinde çalışmadığı sürece ortaya çıkan
5:17
iş asla tam olmaz. Şimdi size bir soru.
5:20
Bir dahaki sefere favori web sitenizde
5:22
gezinirken bir anlına durup piksellerin
5:25
altına bakmayı deneyecek misiniz? Eminim
5:27
ki artık oradaki gizli planı, o görünmez
5:29
iskeleti çok daha net göreceksiniz.