Tasarımcı Olmayanlar İçin Modern Web Sitesi Tasarımı: Bölümler, Boşluklar ve Yazı Tipleri

2025'te “Modern Web Sitesi Tasarımı” Ne Demek

“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 = karmaşık değil, net

Modern bir site önemli olanları göz önüne çıkarır:

• Bu ne (bir cümlede)
• Kim için olduğu
• Sonraki adım (tek bir birincil eylem)

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.

Tasarımcı olmayanlar için en önemli olanlar

Siteyi profesyonel göstermek için sanatsal bir içgüdüye ihtiyacınız yok. Tek ihtiyacınız tekrarlanabilir, basit bir sistem:

• Yeniden kullandığınız küçük bir bölüm seti (hero, özellikler, referanslar, SSS)
• Başlıkları, gövde metnini ve butonları stilize etmek için tutarlı bir yol
• Her şeyin kasıtlı hissetmesi için öngörülebilir boşluklar

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.

Tanıdık modern kalıplar

Modern sitelerde genellikle birkaç pratik desen görülür:

• Bir net hero: bir başlık, kısa açıklama ve bir ana buton
• Taranabilir bölümler: belirsiz etiketler yerine açıklayıcı alt başlıklar
• Güçlü tipografi: okunaklı boyutlar, konforlu satır aralığı
• Birbiriyle uyumlu görünen kartlar ve formlar gibi basit, tutarlı bileşenler

Sonuç: Tasarımcı olmadan da şık görünebilirsiniz. Modern tasarım süslemelerden ziyade iyi kararlar almaktır—ve bunu tekrarlanabilir şekilde yapmak.

Hedeflerle ve Basit Bir İçerik Taslağıyla Başlayın

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.

Sayfa başına birincil hedef seçin

Ziyaretçiden beklediğiniz tek bir ana eylemi seçin. Yaygın örnekler:

• Bir ürün satın almak
• Bir çağrı rezervasyonu yapmak
• Güncellemeler için abone olmak
• İletişime geçmek

İ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ı?

Önce taslağı yazın (evet, fontlardan önce)

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:

1. Tek cümlelik değer beyanı (ne sunduğunuz + kime yönelik olduğu)
2. Kanıt (logolar, rakamlar, kısa referanslar)
3. Faydalar (müşteri için ne iyileşir)
4. Nasıl çalışır (3–5 adım)
5. Detaylar / SSS (itirazlara yanıt)
6. Birincil çağrı eylemi (açıkça tekrarla)

Ü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.

Bilgiyi önemine göre sırala

Ç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.

Pratik bir kısayol: tekrarlanabilir bir şablondan inşa edin

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: Önemli Kısımları Kolayca Görünür Kılın

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).

İnsanların ilk fark ettiği şeyler (ve bunu nasıl yönlendirirsiniz)

Çoğu insan taahhüt etmeden önce tarar. Aradıkları:

• Doğru yerde olduklarını doğrulayan net bir başlık
• Değeri belirgin yapan kısa bir açıklama (bir veya iki satır)
• Birincil eylem (ana buton)
• Güvenilirlik kanıtı (puanlar, logolar, referanslar)

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).

Tarama için başlıklar, alt başlıklar ve kısa paragraflar kullanın

İ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.

Kararların yanına kanıt koyun

Güvenceleri dipte saklamayın. Birinin tereddüt edebileceği yere kanıt koyun.

Örneğin:

• Fiyatlandırma yanında referanslar ("değer mi?" şüphesini azaltır)
• Bir kayıt/formun hemen altında SSS (itirazları önceden ele alır)
• Ödeme yakınında güven/iade notları (risk kaygısını azaltır)

Bu, hiyerarşinin uygulamasıdır: soruları ortaya çıktıkları anda cevaplıyorsunuz.

Kaçınılması gereken ortak hatalar

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.

Web Sitesi Bölümleri 101: Her Zaman İşe Yarayan Yapı Taşları

Ç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.

Temel bölüm türleri (ne işe yaradıkları)

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.

Güvenilir bir sayfa akışı (küçük işletme + ürün sayfaları)

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.

Gerçekten bir bölüme ihtiyaç var mı?

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.

Her bölümü odaklı tutun

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.

Yerleşim Temelleri: Jargondan Uzak Izgaralar, Sütunlar ve Hizalama

“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 gerçekte nedir (ve neden yardımcı olurlar)

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.

Kopyalayabileceğiniz basit bir düzen yaklaşımı

Tasarımcı olmayanlar için bu iki desen neredeyse her şeyi kapsar:

• Tek sütun: metin ağırlıklı sayfalar için (hakkında, SSS, blog, dokümantasyon)
• İki sütun: pazarlama blokları için (özellik + resim, fiyat vurguları, referanslar yanında logo duvarı). İki ile sınırlayın, dört değil.

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.

Maksimum metin genişliği belirleyin (okuyucularınız minnettar kalacak)

Ç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.

Kaçınılması gereken ortak yerleşim tuzakları

Bazı sorunlar renkler ve fontlar iyi olsa bile sayfayı bozar:

• Hizalanmamış kenarlar: kartlar, butonlar ve metin blokları aynı sol/sağ çizgiyi paylaşmıyor.
• Çok fazla sütun: dört küçük sütun genellikle okunaksız ve mobilde garip çöküşlere neden olur.
• Nedensiz karışık genişlikler: bir bölüm dar, bir sonraki tam genişlik, sonra yine dar—açık bir neden yoksa kafa karıştırır.

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 ve Beyaz Alan: En Hızlı Yolu Profesyonel Görünmeye

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.

Dolgu vs. marjin (iç vs. dış)

Bir elementi çerçeveli resim gibi düşünün:

• Padding (dolgu), içerikle sınır arasındaki iç alanıdır. Örnek: bir butonun içindeki metin kenarlara çok yakın olmadığında daha hoş görünür.
• Margin (marjin), elementler arasındaki dış boşluktur. Örnek: bir başlık ile altındaki paragraf arasındaki boşluk.

Kısa bir mental kısayol: padding = iç rahatlığı, margin = dış mesafe.

Basit bir boşluk ölçeği kullanın (ve ona sadık kalın)

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.

Boşluğun en çok fark yarattığı yerler

Alan ekleyin:

• Bölümler arasında (her bölüm ayrı bir bölüm gibi hissetsin)
• Butonlar ve form alanları çevresinde (mobilde dokunması kolay olsun)
• Başlık ve gövde metni arasında (başlık altındaki içerikle ait olsun)

Yaygın hata: bir bileşenin içinde çok fazla boşluk, sonra bileşenler arasında çok az—her şey düzensiz hisseder.

Hızlı gözden geçirme: az vs çok boşluk

30 saniyelik bir tarama yapın:

• Eğer sıkışmış hissediyorsa, az boşluk var (ölçekte bir adım artırın).
• Eğer bağımsız hissediyorsa—parçalar yüzüyor gibi—çok boşluk var (ilgili öğeler arasındaki boşluğu azaltın).

Şüphede, ölçeğinizde tek adım değiştirin. Bu bile bir acemi sitesini cilalı gösterebilir.

Tipografi Temelleri: Boyut, Satır Yüksekliği ve Okunabilirlik

İ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.

1) Önce gövde fontunu seçin (okunabilirlik kazandırır)

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.

2) Basit bir tip ölçeği kullanın

On farklı başlık stiline ihtiyacınız yok. Küçük, tekrarlanabilir bir sistem kurun:

• H1: sayfa başlığı (genellikle sayfada bir kez)
• H2: ana bölümler
• H3: alt bölümler
• Body: paragraflar
• Small: altyazılar, yardımcı metin (az kullanın)

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.

3) Satır yüksekliği ve satır uzunluğu

Paragrafları daha okunaklı yapan iki kural:

• Satır yüksekliği: gövde metni için yaklaşık 1.5–1.7
• Satır uzunluğu: 50–75 karakter satır başına hedefleyin

Metin tüm ekranı kaplıyorsa yorulur—daha dar içerik genişlikleri kullanın.

4) Kaçınılması gereken yaygın hatalar

Dikkat edin:

• Çok küçük metin (özellikle mobilde)
• Düşük kontrast (beyaz üzerinde açık gri sık görülen sorun)
• Çok fazla stil (birden fazla font, birçok ağırlık, rastgele italikler)

Bir sağlam gövde fontu, net bir ölçek ve konforlu boşlukla tipografiniz “tasarlanmış” gibi görünür.

Font Seçimi ve Eşleştirme (Çok Düşünmeden)

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.

En basit eşleştirme kuralı

Kolay bir varsayılan isterseniz: başlıklar için bir font, gövde için bir font kullanın.

• Başlık fontu: biraz daha kişilik olabilir
• Gövde fontu: uzun paragraflar için okunabilirlik öncelikli

Hiç eşleştirmek istemezseniz, iyi bir fontu her yerde kullanın ve kontrastı boyut, aralık ve ağırlık ile yaratın.

Çoğu site için güvenli seçimler

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:

• Başlıklarda sans-serif + gövdede sans-serif (aynı aile veya birbirine yakın hisseden iki font)
• İki “gürültülü” display fontu bir arada kullanmaktan kaçının

Bir fontu hızlıca test etme (karar vermeden önce)

Fontu tek bir kelimeye bakarak yargılamayın. Gerçek içerikle test edin:

1. Gerçek bir paragraf (3–5 cümle). Okurken yoruluyor musunuz?
2. Rakamlar ve semboller: 0123456789, $99.00, 10–12, 5%.
3. Noktalama: "tırnaklar", apostrof, virgül, parantez.
4. Sık kullanılan UI metni: Butonlar “Get started”, “Contact”, “Learn more”.

Başlıkta iyi ama paragraflarda zorlanıyorsa, sadece başlıklarda kullanın.

Tutarlılık için ağırlıkları sınırlayın

Profesyonel görünmek gösterişten değil ölçülü kullanımdan gelir. Basit sınır:

• Gövde: Regular (400)
• Başlıklar: Semibold veya Bold (600–700)
• Opsiyonel: Italik sadece anlam kattığında

Ç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.

İçeriği Destekleyen Renk ve Kontrast

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.

Dikkati yönlendirmek için renk kullanın (her şeyi süsleme yapmayın)

Rengi bir fosfor kalem gibi düşünün: önemli yerlere kullanın.

• Arka planlar ve metin için nötr tonlar (beyaz, açık gri, antrasit)
• Ana eylemleri, başlıkları veya önemli UI durumlarını vurgulamak için bir güçlü renk
• Görselliği tipografi ve boşlukla yapın; renk yönlendirme işini yapsı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.

Birincil eylem rengini seçin ve tutarlı kullanın

Ana çağrı eylemi için tek bir birincil renk seçin.

• Birincil butonlar her yerde bu rengi kullansın
• Linkler tutarlı bir renk kullanmalı (çoğunlukla aynı tonun koyu bir versiyonu)
• İkincil butonlar daha sessiz görünmeli (çerçeve ya da muted dolgu)

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.

Kontrast temelleri: okunabilirlik önce gelir

İyi kontrast “gözüktüğü kadar cesur olmak” değil, okunaklı olmak demektir.

• Gövde metni açık arka planda yeterince koyu olmalı (veya koyu arka planda yeterince açık)
• Butonların hem arka plandan farkı hem de buton içi metinle kontrastı olmalı
• Anlam iletmek için sadece renge güvenmeyin (ör. zorunlu alanlar sadece kırmızı olmamalı—yazı veya ikon da kullanın)

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.

Kaçınılması gereken hatalar

Ç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.

Tutarlılık İçin Bileşenler: Butonlar, Kartlar ve Formlar

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.

Küçük bir bileşen seti oluşturun

Her yerde tekrar kullanabileceğiniz 4–6 temel ile başlayın:

• Butonlar: birincil (ana eylem) ve ikincil (daha az önemli)
• Kartlar: önizlemeler, özellikler, fiyatlandırma, blog yazıları için basit kutu
• Formlar: metin girişi, açılır menü, onay kutusu, hata mesajı, yardımcı metin
• Rozetler: “Yeni”, “Popüler”, “Stokta” gibi küçük etiketler

Amaç çeşitlilik değil—öngörülebilirlik.

Hemen yardımcı olacak basit tutarlılık kuralları

Birkaç varsayılan seçin ve bunlara bağlı kalın:

• Köşe yarıçapı: tek bir değer seçin (örn. 8px) ve butonlar, inputlar, kartlarda kullanın
• Gölge stili: ya gölge yok ya da her yerde kullanılan tek bir hafif gölge
• Boşluk ölçeği: aynı boşluk değerlerini (örn. 8/16/24/32) kullanın
• Durumlar: hover, aktif, devre dışı tüm bileşenlerde ilişkili görünsün

Bu detaylar eşleştiğinde, ekstra süslemeye gerek kalmadan site uyumlu görünür.

İkonlar: faydalı ama her zaman daha açık değil

İ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.

Hızlı bileşen denetimi (10 dakika)

Ana sayfalarınızı açın ve uyumsuzluk arayın:

1. Tüm birincil butonlar aynı mı (renk, boyut, yarıçap)?
2. Form alanları her yerde aynı yükseklik ve dolguya sahip mi?
3. Kartlar aynı kenarlık/gölge ve boşluğu kullanıyor mu?
4. Birbirine çok benzeyen birden fazla gri ton var mı?

Bu küçük tutarsızlıkları düzeltmek, yeni tasarım öğeleri eklemekten daha büyük fark yaratır.

Duyarlı Tasarım: Yeniden Tasarlamadan Mobilde Çalıştırın

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.

Mobil öncelikli düşünün (masaüstünde tasarlasanız bile)

Önce telefonda kaydırmadan önce görünmesi gerekenleri belirleyin:

• Ana mesajınız (ne sunduğunuz)
• Bir birincil eylem (Rezervasyon, Fiyat al, Satın al)
• Navigasyonu bulmayı kolaylaştıran bir yol (menü butonu, ana bağlantı)

Bu üçü zor bulunuyorsa, mobil deneyim kırık hissedecektir.

Küçük ekranlar için boşluk ve tipi ayarlayın

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.

Başparmakla kullanılabilir eylemler yapın

Dokunma, fareden farklıdır:

• Butonlar ve linkler kolayca dokunulabilmeli (yaklaşık 44×44px bir rehber vardır)
• Form alanları mümkünse tam genişlikte olsun, etiketler belirgin
• Dokunma hedefleri arasında boşluk bırakın, yanlış tıklamaları azaltın

Basit duyarlı kontroller (özel araç gerektirmez)

• Tarayıcı penceresini yavaşça küçültün: bir şey üst üste biniyor, garip atlıyor veya küçülüyor mu?
• Siteyi kendi telefonunuzda açın: ana eylemi bir dakika içinde tamamlayabiliyor musunuz?
• Menü, butonlar ve formlar: yanlış dokunuş veya okunması zor metin var mı?
• Telefonu döndürün: yerleşim hala mantıklı mı?

Buradaki küçük düzeltmeler genellikle tam bir görsel yeniden tasarımdan daha fazla dönüşüm iyileştirir.

Erişilebilirlik Dostu Tasarım ve Son DIY Kontrol Listesi

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.

Okunabilir metin + net yapı

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:

• Sayfa konusu için bir H1
• Ardından H2 bölümler
• Gerekirse H3 alt bölümler

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.

Alt metin ve etiketler: eylemleri açıkça belirtin

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:

• “Fiyatlandırma PDF'sini indir”
• “Danışma randevusu al”

İyi değil:

• “Gönder” (ne gönderiliyor?)
• “Daha fazla bilgi” (hangi öğe hakkında?)

Son DIY kontrol listesi (10 dakika)

Yayınlamadan önce hızlı bir geçiş yapın:

• Hedef + akış: Her sayfanın bir net hedefi ve basit bir akışı var mı (giriş → kanıt → detay → CTA)?
• Başlıklar: H1 bir kez, sonra H2/H3 sıralı; başlıklar bölümü açıklar mı?
• Boşluk: Tutarlı dolgu ve marjin; sıkışmış paragraflar yok; ilgili öğeler gruplanmış mı?
• Fontlar: Gövde okunaklı, küçük metin yok, satır yüksekliği rahat mı?
• Kontrast: Metin/butonlar arka plandan ayrılıyor; linkler link gibi görünüyor mu?
• Formlar: Her girişin görünür etiketi var; hatalar nasıl düzeltileceğini açıklıyor mu?
• Görseller: Anlamlı görsellerin yardımcı alt metni var mı?
• Mobil inceleme: Telefonunuzda test edin—dokunma hedefleri kolay, taşma yok, ana bilgi erkenden görünüyor mu?

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.