---
title: Visual Design Foundations
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/visual-design-foundations/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/visual-design-foundations/
last_updated: 2026-06-20
---

# Visual Design Foundations

> Apply typography, color theory, spacing systems, and iconography principles to create cohesive…

Tipografi, renk, boşluk ve ikonografi temel ilkelerinden tutarlı, erişilebilir görsel sistemler kurmak için bir temel. Tasarımı token odaklı, matematiksel temelli bir sisteme dönüştürür: modüler tip ölçekleri, 8 noktalı boşluk ızgarası, WCAG uyumlu renk ve bölüm yoğunluğu hiyerarşisi, böylece arayüzler rastgele değil bilinçli ve premium hisseder.

## Ne için kullanılır
- Yeni bir proje için tasarım token'ları oluşturmak
- Modüler bir tipografi ölçeği ve font eşleştirmesi kurmak
- Doğrulanmış kontrastla WCAG uyumlu renk paletleri oluşturmak
- 8 noktalı ızgarada boşluk ve dikey ritim tasarlamak
- Uzun bir açılış sayfasında bölüm yoğunluğunu değiştirmek
- Bir tasarımı görsel tutarlılık ve karanlık mod hazırlığı için denetlemek

## Faydalar
- Boşluk ve tipografi gerçek bir ölçeği takip ettiği için arayüzler premium hisseder
- Renk, tahminlerle değil doğrulanmış kontrast oranlarıyla erişilebilirliği geçer
- Uzun sayfalar, bölüm yoğunluğu ve kart türlerini değiştirerek ritim kazanır
- Temalama ve karanlık mod sonradan zorla değil baştan planlanır

## Ne içerir
- Tipografi ölçeği, satır yüksekliği ve akışkan clamp() duyarlı tip token'ları
- Bileşen boşluk kılavuzuyla 8 noktalı boşluk sistemi
- Anlamsal renk token'ları, karanlık mod stratejisi ve kontrast-oranı fonksiyonu
- Çok bölümlü sayfalar için dört seviyeli bölüm yoğunluğu hiyerarşisi
- Bileşen türü çeşitliliği (istatistik, özellik, karşılaştırma, etkileşimli, alıntı kartları)
- İkonografi boyutlandırma sistemi ve yeniden kullanılabilir Icon bileşeni

## Kimler için
Arayüzleri tutarlı ve bilinçli gösteren, token odaklı, erişilebilir bir görsel temel isteyen tasarımcılar ve frontend mühendisleri için.

## Nasıl çalışır
Skill bir görsel sistem kurarken tam olarak bu döngüyü işletir. Kara kutu yok, yaptığı iş budur:
1. Tipografi ölçeğini 16px tabandan matematiksel oranla kurar (Major Third 1.25 veya Perfect Fourth 1.333), başlıklarda clamp() ile akışkan boyutlandırma ve role uygun satır yüksekliği uygular: başlıkta 1.1-1.3, gövdede 1.5-1.7
2. Tüm boşlukları 8 nokta ızgarasına kilitler (4, 8, 12, 16, 24, 32, 48, 64px token'ları): kart iç boşluğu 16-24, bölüm araları 48-96. 13px gibi rastgele değerler bilinçaltı rahatsızlık üretir ve yüksek yoğunluklu ekranlarda bulanık çizilir
3. Renk sistemini semantik token olarak tanımlar (primary, success, error artı 50-900 nötr skalası) ve her eşleşmeyi WCAG'a karşı doğrular: gövde metni 4.5:1, büyük metin ve arayüz bileşenleri 3:1, kontrast programatik olarak hesaplanır
4. 60-30-10 kuralını uygular: nötr arka plan yaklaşık yüzde 60, ikincil ton 30, vurgu rengi CTA'lar ve kritik durumlar için yüzde 10'da tutulur. Karanlık modda oranlar korunur, tonlar ters çevrilir
5. Sayfa boyunca bölüm yoğunluğunu dört seviyede dalgalandırır, hero'dan (160px iç boşluk, en büyük başlık, gradyan zemin) SSS ve footer'a (80px, minimal). Ardışık iki bölüm aynı görsel ağırlığı taşımaz
6. Tek kart tipiyle sayfayı kaplamak yerine en az üç komponent ilkeli karıştırır (istatistik kartı, özellik kartı, karşılaştırma kartı, alıntı kartı) ve ikonografiyi sabit token boyutlarında tek sette tutar

## Sık sorulanlar
### Marka renklerimiz ve fontlarımız zaten var, bu paket yine işe yarar mı?
Evet, elinizdekini değiştirmek yerine sisteme dönüştürür. Marka varlıklarınız anlamsal token olur, tipografiniz modüler ölçek ve akışkan clamp() boyutlandırması kazanır, renkleriniz tahmin yerine doğrulanmış kontrast oranları ve karanlık mod stratejisiyle gelir.

### Boşlukları göz kararı ayarlayabiliyorken matematiksel ölçeğe neden ihtiyacım var?
Göz kararı tek ekranda işler, kırk ekranda dağılır. Modüler tip ölçeği ve 8 noktalı boşluk ızgarası her kenar boşluğuna ve yazı boyutuna savunulabilir tek bir kaynak verir; bu sistem üzerine kurulan arayüzlerin bilinçli görünmesinin nedeni budur. Bölüm yoğunluğu hiyerarşisi de uzun sayfaları tekdüzelikten kurtarır.

### Logo, illüstrasyon veya marka kimliği üretir mi?
Hayır. Kimliğin altındaki görsel sistemi kurar: tipografi token'ları, boşluk düzeni, erişilebilir paletler, ikonografi boyutlandırması ve bileşen türleri. Markanın kendisini, logoyu, sesi ve sanat yönetimini yaratmak ayrı bir yaratıcı iştir.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile tasarım sistemi](https://forgehouse.ai/tr/rehberler/yapay-zeka-ile-tasarim-sistemi/)