2025 için pratik web tasarımı temellerini öğrenin—bölümlerin nasıl yapılandırılacağı, boşluk kullanımı ve okunaklı font seçimi—tasarım eğitimi gerektirmeden.
“Modern” demek gösterişli animasyonlar veya tamamen benzersiz bir görünüm demek değildir. 2025'te modern web sitesi tasarımı çoğunlukla açıklık, hız, okunabilirlik ve tutarlılık ile ilgilidir—ziyaretçiler ne sunduğunuzu ve bir sonraki adımın ne olduğunu hızlıca anlayabilsin diye.
Modern bir site önemli olanları göz önüne çıkarır:
Eğer biri ana sayfanıza gelip “anlamaya çalışmak” zorunda kalıyorsa, tasarım modern değil—sadece kafa karıştırıcıdır.
Siteyi profesyonel göstermek için sanatsal bir içgüdüye ihtiyacınız yok. Tek ihtiyacınız tekrarlanabilir, basit bir sistem:
Bu yaklaşım her sayfayı sıfırdan tasarlamaktan daha iyidir; o yol genellikle uyumsuz fontlar, dengesiz dolgu ve rastgele hisseden sayfalarla sonuçlanır.
Modern sitelerde genellikle birkaç pratik desen görülür:
Sonuç: Tasarımcı olmadan da şık görünebilirsiniz. Modern tasarım süslemelerden ziyade iyi kararlar almaktır—ve bunu tekrarlanabilir şekilde yapmak.
Yerleşim, renkler veya fontları düşünmeden önce sayfanın amaç ne olduğunu belirleyin. Çoğu “dağınık” sayfa tasarımdan değil, aynı anda beş iş yapmaya çalıştığı için dağınıktır.
Ziyaretçiden beklediğiniz tek bir ana eylemi seçin. Yaygın örnekler:
İkincil eylemleri destekleyebilirsiniz (ör. “daha fazla bilgi”), ama ana hedefle rekabet etmemelidir. Hızlı bir test: biri sadece başlığı ve ana butonu okusa, ne yapması gerektiğini anlar mı?
Boş bir belge açın ve sayfa yapısını düz metin olarak yazın. Basit tutun. Amaç zekâ gösterisi değil, açıklık.
Pek çok küçük işletme sayfası için işe yarayan temel taslak:
Ürün sayfası yapıyorsanız “Nasıl çalışır” yerine “Neler dahil” koyun. Hizmet sayfasıysa “Neler alacaksınız” ve “Tipik zaman çizelgesi” ekleyin.
Çoğu insan yukarıdan aşağı ve (İngilizce için) soldan sağa tarar. En yüksek değere sahip bilgiyi önce koyun: ne olduğu, kim için olduğu ve neden önemli olduğu. Ayrıntıyı daha sonra verin.
Basit bir kural: bölüm başına bir ana mesaj. Bir bölümde iki farklı nokta varsa, bölmeyi bölün. Bu sayfayı okumayı kolaylaştırır—ve ileride tasarlamayı da kolaylaştırır.
Tasarımcı değilseniz (veya zamanınız kısıtlıysa) tutarlı bir bölüm ve bileşen setiyle başlamak doğrudur.
Koder.ai gibi araçlar burada yardımcı olabilir: sohbetle sayfanızı tanımlayabilir (“hero + faydalar + referanslar + SSS + CTA”), çalışan bir React tabanlı düzen üretebilir ve sonra boşluk, tipografi ve metin üzerinde yineleme yapabilirsiniz—tutarlılığı kaybetmeden. Daha fazla kontrol isterseniz kaynağı dışa aktarabilir ve geleneksel akışa devam edebilirsiniz.
Hedefiniz ve taslağınız net olduğunda tasarım kararları açıktır: her bölüm yerini hakeder ve ana buton kaybolmaz.
Görsel hiyerarşi, sayfanızın bir bakışta “nasıl okunduğudur”—insanların ilk, ikinci ve üçüncü fark ettikleri şeyler. Her şey eşit önemde görünüyorsa, ziyaretçiler ne yapmaları gerektiğini anlamak için daha fazla çaba harcarlar (çoğu zaman vazgeçerler).
Çoğu insan taahhüt etmeden önce tarar. Aradıkları:
Bunu birkaç basit kaldıraçla kontrol edebilirsiniz: boyut (büyük olan daha önemli görünür), yerleşim (üst ve sol öne çıkar), kontrast (daha güçlü renk veya koyu metin öne çıkar), ve boşluk (etrafında daha fazla alan bir şeyi “birincil” hissettirir).
İyi okunan bir sayfa genellikle iyi taranan bir sayfadır.
Bir bölümün en üstünde güçlü bir başlık kullanın, ardından destekleyici noktaları alt başlıklar ve kısa paragraflara bölün. Paragrafları mümkün olduğunca 2–4 satırda tutun ve bir blokta birden fazla fikir sıkıştırmaktan kaçının.
Eğer kilit bir cümleniz varsa—garanti, vaat veya farklılaştırıcı—ona nefes alacak alan verin. Fazladan boşluklu tek bir satır, içi kalın kelimelerle serpilmiş bir paragraftan daha çok dikkat çekebilir.
Güvenceleri dipte saklamayın. Birinin tereddüt edebileceği yere kanıt koyun.
Örneğin:
Bu, hiyerarşinin uygulamasıdır: soruları ortaya çıktıkları anda cevaplıyorsunuz.
Her şey aynı ağırlıkta. Başlıklar benzer boyuttaysa, butonlar aynı görünüyorsa ve her bölüm aynı yoğunluktaysa, hiçbir şey öne çıkmaz.
Uzun metin blokları. Harika yazı bile duvar gibi görünürse görünmez olur. Alt başlıklar, boşluk ve kısa paragraflarla bölün.
Çok fazla “birincil” eylem. Her buton parlak ve gürültülü ise hiçbirisi öne çıkmaz. Bölüm başına bir ana eylem seçin ve diğerlerini daha sessiz yapın.
Çoğu modern sayfa küçük bir tekrar kullanılabilir bölüm setinden oluşur. Yenisini icat etmenize gerek yok—ziyaretçinin anlamasına, güvenmesine ve harekete geçmesine yardımcı olanları seçmeniz yeterli.
Hero: İlk ekran. Ne yaptığınızı, kim için olduğunu ve ana faydayı söyleyin. Bir net ana buton ekleyin.
Özellikler / Faydalar: Ne sunduğunuzu (özellikler) ve bunun neden önemli olduğunu (faydalar) açıklayın. Her öğeyi kısa ve taranabilir tutun.
Sosyal kanıt: İncelemeler, referanslar, müşteri logoları, vaka çalışması özetleri veya sayılar (örn. “2.000 ekip tarafından güveniliyor”). Bu, “güvenebilir miyim?” şüphesini azaltır.
SSS: Ziyaretçilerin zaten düşündüğü itirazları cevaplayın: fiyatlandırma, süre çizelgesi, destek, iadeler, uyumluluk, teslimat alanları.
Altbilgi: “her şeyin geri kalanı” alanı: iletişim, adres, önemli bağlantılar, yasal bilgiler, sosyal profiller. Bu aynı zamanda bir güven işaretidir.
Hero → Hızlı faydalar → Sosyal kanıt → Detaylar (nasıl çalışır / neler dahil) → SSS → Son çağrı eylemi → Altbilgi.
Hizmetler için “nasıl çalışır” yerine “süreç” (Adım 1, Adım 2, Adım 3) kullanın. Ürün sayfaları için kanıttan sonra “kutunun içindekiler” veya “özellikler” ekleyin.
Bir bölümü sadece açıklık katıyorsa (bir şeyi açıklıyorsa) veya şüpheyi azaltıyorsa (bir korkuyu/itirazı gideriyorsa) ekleyin. Aksi takdirde genellikle gereksizdir.
Hızlı test: bölümü kaldırırsanız biri daha mı çok kafa karışıklığı yaşar—yoksa daha mı az ikna olur? Eğer hayırsa, kesinlikle kesebilirsiniz.
Bölüm başına bir vaat, bir kanıt, bir eylem hedefleyin.
Örnek: “Hızlı kurulum” bölümü tek bir iddia yapar (“Bir günde yayına alın”), bunu destekler (kısa açıklama veya mini referans), sonra bir sonraki adımı sunar (“Kurulum kılavuzunu gör” veya “Ücretsiz başla”). Bu sayfayı sakin tutar, kalabalık hissettirmez.
“Izgara” karmaşık bir tasarım aracı değil—öğeleri hizalamanıza yardımcı olan görünmez kılavuz çizgileridir. Öğeler aynı sol ve sağ kenarları paylaştığında sayfa sakin ve kasıtlı hisseder. Kenarlar kaydıkça, nedenini açıklayamıyor olsanız bile dağınık hissedilir.
Sütunlar, içeriğin oturabileceği dikey şeritlerdir. Birçok site altında 12 sütunlu bir ızgara kullanır çünkü kolay bölünür (1/2, 1/3, 2/3, vb.). Matematik yapmanız gerekmez—sadece bir yapı seçin ve kullanmaya devam edin.
Hizalama, tasarımınıza verilen en büyük “ücretsiz yükseltmedir.” Başlıklar, metin blokları, butonlar ve resimler aynı başlangıç kenarını paylaşıyorsa sayfa anında daha temiz görünür.
Tasarımcı olmayanlar için bu iki desen neredeyse her şeyi kapsar:
Emin değilseniz, varsayılan olarak tek sütuna dönün. İlgiyi boşluk, başlıklar ve birkaç iyi yerleştirilmiş görselle ekleyebilirsiniz.
Çok geniş paragraflar yorucudur çünkü gözleriniz çok uzak yol kat eder. Ana metin alanınızın genişliğini sınırlayın—yaklaşık 60–80 karakter satır başına iyi bir hedeftir.
Pratikte bu genellikle masaüstü gövde metni için 600–750px civarında bir içerik konteyneri anlamına gelir; tam genişlik arka planları veya genişletilmiş bölümleri istediğinizde kullanabilirsiniz.
Bazı sorunlar renkler ve fontlar iyi olsa bile sayfayı bozar:
Küçük bir yerleşim kural seti seçin ve tekrarlayın. Tekrar, bir siteyi tasarlanmış değil de monte edilmiş göstermeyip tasarlanmış hissettiren şeydir.
Boşluk, basit bir siteyi kasıtlı gösterecek “sessiz tasarım aracıdır.” İyi beyaz alan boş veya israf değil—içeriğin nefes alması için alan verip insanların tarayıp, anlamasına ve tıklamasına izin vermektir.
Bir elementi çerçeveli resim gibi düşünün:
Kısa bir mental kısayol: padding = iç rahatlığı, margin = dış mesafe.
Tutarlılık “mükemmel” sayıdan daha önemlidir. Bir ölçek seçin ve her yerde tekrar kullanın, örn:
4 / 8 / 16 / 32 / 64 (piksel)
4–8 küçük boşluklar için, 16 normal aralık (paragraflar), 32 bloklar arası ve 64 ana bölüm ayırıcıları için.
Alan ekleyin:
Yaygın hata: bir bileşenin içinde çok fazla boşluk, sonra bileşenler arasında çok az—her şey düzensiz hisseder.
30 saniyelik bir tarama yapın:
Şüphede, ölçeğinizde tek adım değiştirin. Bu bile bir acemi sitesini cilalı gösterebilir.
İyi tipografi çoğunlukla konforla ilgilidir. İnsanlar içeriğinizi kolayca okuyabiliyorsa, siteniz anında daha derli toplu görünür—karmaşık numaralara gerek yok.
Paragraflarda kullanacağınız fontla başlayın. Ziyaretçiler en çok burada zaman geçirir; küçük boyutlarda bile net görünmeli.
Gövde metni için genellikle 16–18px hedefleyin. Eğer font bu boyutta sıkışık veya “ince” görünüyorsa farklı bir font seçin. Basit sans-serifler başlangıç için iyi çalışır; en önemlisi telefonda okunaklı kalmasıdır.
On farklı başlık stiline ihtiyacınız yok. Küçük, tekrarlanabilir bir sistem kurun:
Pratik başlangıç: H1 36–48px, H2 28–32px, H3 20–24px, Gövde 16–18px, Küçük 12–14px. His ile ayarlayın, ama adımlar tutarlı olsun.
Paragrafları daha okunaklı yapan iki kural:
Metin tüm ekranı kaplıyorsa yorulur—daha dar içerik genişlikleri kullanın.
Dikkat edin:
Bir sağlam gövde fontu, net bir ölçek ve konforlu boşlukla tipografiniz “tasarlanmış” gibi görünür.
Fontlar bir siteyi kendinden emin ve net ya da dağınık ve okunması zor yapabilir. İpucu: fontları süsleme olarak değil, basit bir sistem olarak düşünün.
Kolay bir varsayılan isterseniz: başlıklar için bir font, gövde için bir font kullanın.
Hiç eşleştirmek istemezseniz, iyi bir fontu her yerde kullanın ve kontrastı boyut, aralık ve ağırlık ile yaratın.
Tasarımcı olmayanlar için çoğunlukla modern sans-serifler güvenlidir. Ekranlarda temiz, cihazlar arası uyumlu ve pek çok sektör için uygun olurlar.
Güvenilir yaklaşım:
Fontu tek bir kelimeye bakarak yargılamayın. Gerçek içerikle test edin:
Başlıkta iyi ama paragraflarda zorlanıyorsa, sadece başlıklarda kullanın.
Profesyonel görünmek gösterişten değil ölçülü kullanımdan gelir. Basit sınır:
Çok fazla ağırlık (Light–Black arası) sitenizi tutarsız hissettirebilir.
Kural: küçük bir font seti seçin ve tüm sayfalarda tekrarlayın.
Renk, sayfa boyunca insanların ilerlemesine yardımcı olduğunda en faydalıdır. Her şey renkli ise hiçbir şey öne çıkmaz—ziyaretçiler tereddüt eder.
Rengi bir fosfor kalem gibi düşünün: önemli yerlere kullanın.
Basit kontrol: rengi kaldırdığınızda sayfa karışıyorsa düzeniniz netleştirilmeli. Rengi kaldırdığınızda hâlâ çalışıyorsa, doğru kullanıyorsunuz demektir.
Ana çağrı eylemi için tek bir birincil renk seçin.
Tutarlılık zihinsel yükü azaltır: insanlar tıklanabilir öğeleri saniyeler içinde öğrenir. Her bölüm yeni bir buton stili icat ederse, kullanıcı arayüzünü tekrar tekrar öğrenmek zorunda kalır.
İyi kontrast “gözüktüğü kadar cesur olmak” değil, okunaklı olmak demektir.
Emin değilseniz hızlı bir test: sayfanızı telefonunuzda dışarıda görüntüleyin veya ekran parlaklığını azaltın. Zayıf kontrast hemen ortaya çıkar.
Çok fazla vurgu rengi: Üç “birincil” renginiz varsa hiçbiriniz olmaz. Aksan renklerini sınırlayın ve her birine bir iş atayın (birincil eylem, başarı, uyarı).
Düşük kontrastlı gri metin: Modern görünebilir ama genellikle okunaksız olur. Griyi altyazılar ve meta için kullanın, paragraflar için değil.
Renk kısıtlı ve kontrast güçlü olduğunda, içerik daha net olur—tasarım anında daha profesyonel görünür.
Eğer bir "tasarımcı" işi yapacaksanız, arayüzünüzün kasıtlı olarak kendini tekrar etmesini sağlayın. Yeniden kullanılabilir küçük bir bileşen seti—butonlar, kartlar, form alanları, rozetler—içeriğin değişse bile siteyi sakin ve kasıtlı gösterir.
Her yerde tekrar kullanabileceğiniz 4–6 temel ile başlayın:
Amaç çeşitlilik değil—öngörülebilirlik.
Birkaç varsayılan seçin ve bunlara bağlı kalın:
Bu detaylar eşleştiğinde, ekstra süslemeye gerek kalmadan site uyumlu görünür.
İkonları tarama hızını artırdığında (arama, menü, indirme) veya anlamı pekiştirdiğinde kullanın (uyarı, başarı). Etiket açıklama gerektiriyorsa ikon kullanmaktan kaçının. “Contact” veya “Solutions” genelde metinle daha açıktır; ikon kullanıyorsanız yanında kelime de olsun.
Ana sayfalarınızı açın ve uyumsuzluk arayın:
Bu küçük tutarsızlıkları düzeltmek, yeni tasarım öğeleri eklemekten daha büyük fark yaratır.
Bir site dizüstü bilgisayarda “tamamlanmış” görünebilir ama telefonda kullanışsız hissedebilir. Duyarlı tasarım ikinci bir site yaratmak değil—aynı içeriğin uyum sağlayarak açık, okunaklı ve kullanılabilir kalmasını sağlamaktır.
Önce telefonda kaydırmadan önce görünmesi gerekenleri belirleyin:
Bu üçü zor bulunuyorsa, mobil deneyim kırık hissedecektir.
Mobilde uzun satırlar ve sıkışık bölümler yaygın sorunlardır.
Biraz daha büyük gövde metni kullanın (genellikle 16–18px) ve yan yana düzenleri azaltın: masaüstünde iki veya üç sütun olan içerikler genellikle mobilde bir sütuna yığılmalıdır.
Boşlukta çok büyük aralıklardan kaçının ama her şeyi sıkıştırmayın. Kart ve bölüm içlerinde tutarlı dolgu mobilde sayfayı kasıtlı gösterir.
Dokunma, fareden farklıdır:
Buradaki küçük düzeltmeler genellikle tam bir görsel yeniden tasarımdan daha fazla dönüşüm iyileştirir.
Erişilebilirlik sadece "iyi olur" meselesi değil. Genellikle sitenizi herkes için—özellikle küçük ekranlarda, parlak ışıkta veya yorgunken okuyanlar için—daha net ve kolay kullanılır kılar.
Temel ile başlayın: gövde metni rahatça okunabilecek boyutta, yeterli satır yüksekliğiyle ve güçlü kontrasta sahip olsun. İnsanlar gözlerini kısmak zorunda kalırsa ayrılırlar.
Yapı da aynı derecede önemlidir. Hem insanlar hem de ekran okuyucular sayfayı anlayabilsin diye başlıkları sıralı kullanın:
Sadece kalınlaştırılmış büyük metinlerle “sahte başlık” yapmaktan kaçının—gerçek başlık seviyeleri gezinme ve tarama için yardımcı olur.
Eğer bir resim bir şeyi açıklıyorsa (ürün fotoğrafı, diyagram, anlam taşıyan ikon), amacını tarif eden alt metin ekleyin. Sadece dekoratifse boş alt metin kullanın ki gürültü oluşturmasın.
Butonlar ve linkler insanların ne olacağını anlamasını sağlamalı. “Buraya tıkla” ve etiketsiz ikonlar kolayca kaçırılabilir veya yanlış anlaşılabilir.
İyi örnekler:
İyi değil:
Yayınlamadan önce hızlı bir geçiş yapın:
Taslağı ve kontrol listesini netleştirdikten sonra, Koder.ai'de sohbet istemiyle sayfayı prototipleyebilir, hızlıca yineleyebilir ve hazır olduğunuzda kodu dışa aktararak yayınlayabilirsiniz—tutarlılığı kaybetmeden modern görünümü koruyarak.
2025'te “modern” genellikle açıklık, hız, okunabilirlik ve tutarlılık anlamına gelir.
Modern bir site hızla cevaplar:
Sayfa başına bir birincil hedef seçerek başlayın (satın alma, çağrı rezervasyonu, abone olma, iletişim).
Sonra hızlı bir test yapın: biri sadece başlığı + ana butonu okursa, sonraki adımı anlayabiliyor mu? Eğer hayırsa, ana eylem bariz olana kadar sadeleştirin.
Yazı tiplerine veya renklere dokunmadan önce düz metin bir taslak yazın.
Güvenilir bir yapı:
Bu, her bölümün bir işi olduğu için tasarım kararlarını kolaylaştırır.
Görsel hiyerarşi, insanların bir bakışta hangi sırayla şeyleri fark ettiğidir.
Bunu kontrol edebilirsiniz:
Kanıtı karar noktasına yakın koyun, dipte saklamayın.
Örnekler:
Tekrar kullanılabilir bölüm türleri kullanın:
Bir bölümü ancak veya ekleyin. Kaldırdığınızda kimse daha az anlayacaksa, muhtemelen işe yarıyordur.
Hizalamak en hızlı “ücretsiz yükseltme”dir. Sol/sağ kenarlar uyumluysa sayfa sakin ve kasıtlı hisseder.
İki güvenli desen:
4+ küçük sütundan kaçının—mobilde bozulma olasılığı yüksek.
Metin genişliği için maksimum belirleyin:
Arka planları tam genişlik yapabilir, ama paragrafları dar tutun.
Basit bir boşluk ölçeği seçin ve her yerde kullanın, örn 4 / 8 / 16 / 32 / 64 px.
Kılavuz:
Ölçeğinizde bir adım atarak aralıkları ayarlayın; bu, rastgele boşluklardan daha iyi görünür.
Tipografiyi basit tutun:
Ayrıca düşük kontrasttan kaçının (ör. beyaz üzerinde açık gri gövde metni).
Her şey eşit görünüyorsa, ziyaretçiler daha çok uğraşır ve çoğu ayrılır.
