WEB TASARIM EĞİTİMİ
Neden aynı sitenin iki sayfası iki farklı görsel dilde olur? Cevap genelde tasarımcının takdirine bırakılmış grid, rastgele seçilmiş tipografi ve component dizini olmayan bir proje. Web tasarımı disiplinini kuran ekip her sayfayı baştan tasarlamaz; sistem üzerine inşa eder, mobil deneyim yama değil temel olur.
Grid ve layout sistemleri (12-column, modular), tipografi hiyerarşisi ve okunabilirlik, renk teorisi ve kontrast, component-driven design, responsive yaklaşım, erişilebilirlik (WCAG), tasarım-kod köprüsü (Figma → kod), user flow ve wireframe disiplini ele alınır. Web geliştirme öğrenimi için MDN Learn Web Development birincil kaynaktır.
Katılımcı Profili
Web tasarımı yapan profillere yöneliktir:
- UI/UX Tasarımcıları: Figma ile arayüz tasarımı ve prototyping yapar
- Web Tasarımcıları: Landing page, kurumsal site ve e-ticaret tasarlar
- Front-end Geliştiriciler: Tasarımı koda dönüştürür ve handoff yönetir
- Tasarım Stüdyoları: Çoklu müşteri web projesi teslim eder
- Freelance Tasarımcılar: Portföy ve client work üretir
Ön Gereklilikler
Aşağıdaki temellerin oturmuş olması eğitimden alacağınız verimi artırır:
- Bilgisayarda dosya yönetimi ve klasör mantığında rahatlık
- Tarayıcı kullanımında akıcılık ve temel internet kavramları
- HTML etiketlerini bir kez görmüş olmak
- CSS seçicilere giriş seviyesi farkındalık
- VS Code benzeri bir kod editörü kullanmaya açık olmak
Süresi ve Tarihi
Süre: 3 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, katılımcı grubunun uygunluğuna göre birlikte planlanır.
Kazanımlar
Eğitim sonunda web arayüzü tasarımı daha sistematik bir karar alma sürecine kavuşur:
- Sayfa hiyerarşisini kullanıcı hedeflerine göre kurgular
- Grid, flex ve boşluk yönetimiyle tutarlı düzen kurar
- Responsive kırılımları planlayarak taşmaları azaltır
- Erişilebilirlik ilkelerini bileşen seviyesinde uygular
- Tipografi ve renk kullanımında okunabilirlik standardı oluşturur
- DevTools ile stil, layout ve performans sorunlarını ölçer
- Tasarım sistemi yaklaşımıyla yeniden kullanılabilir bileşenler tanımlar
- SEO ve içerik yapısını sayfa tasarımına doğru entegre eder
Web Tasarım Eğitimi Konuları
1. UX/UI Temelleri ve Tasarım Prensipleri
- UX ve UI arasındaki fark ve ortak alan
- Gestalt prensipleri: proximity, similarity, closure
- Hick's Law, Fitts' Law, Jakob's Law
- Cognitive load ve simplicity
- Visual hierarchy ve scanning patterns
2. Bilgi Mimarisi (IA) ve Wireframe
- Sitemap ve content inventory
- User flow ve task flow ayrımı
- Card sorting ve tree testing
- Low-fi wireframe ve mid-fi mockup
- Whimsical, Balsamiq, Figma araçları
3. Renk Teorisi ve Palette Üretimi
- Color wheel, complementary, analogous
- HSL ve HEX renk sistemleri
- Primary, secondary, accent palette
- 60-30-10 renk kuralı
- Coolors, Adobe Color, Realtime Colors araçları
4. Tipografi ve Web Font'lar
- Serif, sans-serif, monospace family
- Type scale: modular, golden ratio
- Google Fonts ve Adobe Fonts kullanımı
- Variable font ve performans
- Line-height, letter-spacing, x-height
5. 12-Column Grid ve Responsive Layout
- 12-column grid sistemi
- Gutter, margin, container ayarları
- F-pattern ve Z-pattern okuma yönü
- Whitespace ve breathing room
- CSS Grid ve Flexbox layout farkı
6. Component Design ve Tasarım Sistemleri
- Atomic Design: atoms, molecules, organisms
- Button, input, card component standardizasyonu
- Material Design, Apple HIG, Carbon
- Token tabanlı tasarım sistemi
- Storybook ile component documentation
7. Responsive ve Mobile-First Yaklaşım
- Mobile-first vs desktop-first
- Breakpoint stratejisi: 640, 768, 1024, 1280
- Fluid typography ve clamp()
- Touch target boyutu (44x44 px min)
- Container query ile component responsive
8. Erişilebilirlik (WCAG 2.1)
- WCAG 2.1 AA/AAA seviyeleri
- Color contrast: 4.5:1 ve 7:1 oranı
- Keyboard navigation ve focus management
- Screen reader ve semantic HTML
- WAVE, axe DevTools ile audit
9. Figma ile Tasarım Üretimi
- Figma arayüzü: frame, group, component
- Auto Layout ile responsive component
- Variants ve component properties
- Styles: color, text, effect, grid
- Variables ve tema yönetimi
10. Prototyping ve Interactive Demo
- Figma Prototype: interaction ve animation
- Smart Animate ve transition
- Overlay ve modal flow
- Hover, press, click state'leri
- Framer, ProtoPie alternatifleri
11. Design Handoff ve Developer Communication
- Figma Dev Mode ile inspect
- Zeplin ve Avocode alternatifleri
- Asset export: SVG, PNG, WebP
- Design token export: Style Dictionary
- Annotation ve spec sharing
12. Web Performance ve LCP, CLS
- Core Web Vitals: LCP, INP, CLS
- Image optimization: WebP, AVIF, lazy loading
- Font loading stratejisi: swap, optional
- Critical CSS ve render blocking kaynaklar
- Lighthouse ve PageSpeed Insights
13. SEO Friendly Tasarım Pratikleri
- Semantic HTML ve heading hierarchy
- Image alt text ve descriptive filename
- İç link yapısı ve breadcrumb
- Above-the-fold içerik önceliği
- Schema.org markup ile structured data
14. Design Critique ve Test Yöntemleri
- Design review oturumu yönetimi
- Heuristic evaluation (Nielsen 10 kuralı)
- Usability testing: moderated ve unmoderated
- A/B test ve multivariate test
- Hotjar, Microsoft Clarity ile heatmap
Web Tasarım Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Web tasarımında tipografi ve hiyerarşi nasıl doğru kurulur?
Okunabilirlik, satır uzunluğu, font ölçeği ve başlık seviyeleri birlikte ele alınır. Eğitimde pratik kurallar ve örnek şablonlarla metin hiyerarşisi kurmayı ve tutarlı hale getirmeyi çalışırız.
Flexbox ve Grid’i hangi senaryolarda tercih etmeliyiz?
Tek boyutlu hizalama ve dağılımlarda Flexbox, iki boyutlu sayfa düzenlerinde Grid daha etkilidir. Eğitimde her iki yaklaşımı aynı ekran üzerinde karşılaştırarak doğru seçim alışkanlığı kazandırırız.
Responsive tasarımda kırılımlar nasıl belirlenmeli?
Kırılımlar cihaz markasına göre değil, içerik ve düzenin bozulduğu noktalara göre seçilir. Eğitimde mobil öncelikli yaklaşım ve ölçümleme ile kırılım kararlarını nasıl netleştireceğinizi gösteririz.
Erişilebilirlik için en kritik kontroller nelerdir?
Semantik yapı, klavye gezilebilirliği, odak yönetimi ve kontrast temel kontrollerdir. Eğitimde hızlı kontrol listeleri ve tarayıcı araçlarıyla uygulanabilir bir rutin oluştururuz.
Eğitim içeriğini ihtiyaçlarımıza göre özelleştirebilir misiniz?
Evet. Eğitim öncesinde ihtiyaç analizi yaparak içerik ve örnekleri kurumun hedeflerine göre uyarlıyoruz. Modüller eklenebilir, bazı başlıklar derinleştirilebilir veya sadeleştirilebilir.
Eğitim yeri, yöntemi ve sertifikasyon süreci nasıl ilerliyor?
Eğitim online (canlı) veya yerinde gerçekleştirilebilir; tarih ve saatleri katılımcı grubunun uygunluğuna göre planlıyoruz. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
