WEB TASARIM EĞİTİMİ

Modern Responsive Web Sitesi

Web tasarım sadece güzel görünen sayfa demek değildir; kullanıcının amacına hızla ulaşmasını sağlayan, mobilde de masaüstünde de düzgün çalışan, arama motorlarınca bulunabilen ve hızla açılan bir bütün demektir. Bu bütünü kurabilmek için HTML, CSS, JavaScript, UX prensipleri, performans ve SEO bilgisinin bir arada öğrenilmesi gerekir.

Web Tasarım Eğitimi, modern web sitesi geliştirmenin tüm temellerini katılımcıya kazandırır. HTML5 semantik yapı, modern CSS (Flexbox, Grid), JavaScript temelleri, responsive tasarım (mobile-first yaklaşımı), tipografi ve renk dengesi, UX prensipleri, sayfa performansı (Core Web Vitals), SEO uyumlu yapı, alan adı-hosting kurulumu ve site deploy işlenir.

Web Tasarım Eğitimi, web tasarımına başlamak isteyenler, KOBİ sahibi profesyoneller (kendi sitesini kurmak için), grafik tasarımcılar (web'e geçiş yapmak için) ve dijital pazarlama uzmanları için tasarlanmıştır. Eğitim sonunda katılımcı, kendi web sitesini sıfırdan kurabilir ve yayına alabilir.

Ön Koşullar

Web Tasarım Eğitimi için ön koşul, temel bilgisayar ve internet kullanımıdır. Tasarım veya programlama temellerine aşinalık avantajdır.

Kimler Katılmalı

Web Tasarımına Başlayanlar: Sıfırdan web kariyeri kurmak isteyen profesyoneller
KOBİ Sahip-Yöneticileri: Kendi sitesini kurmak isteyen kurucular
Grafik Tasarımcılar: Statik tasarımdan web'e geçiş yapan profesyoneller
Dijital Pazarlama Uzmanları: Landing page ve mikrosite üreten kadrolar
Freelance Çalışmak İsteyenler: Kendi web hizmeti vermek isteyen profesyoneller
İçerik Üreticileri: Kendi blogu veya portföy sitesini kurmak isteyenler
UI/UX Tasarımcıları: Tasarımı geliştiriciye teslim öncesi web kodu öğrenmek isteyenler

Eğitim Yöntemi

Sunum, sıfırdan responsive site tasarım atölyesi, UX prensipleri egzersizi, performans ve SEO denetimi ve katılımcının kendi sitesini hosting'e deploy pratiği ile yürür.

Kazanımlar

HTML5 Semantik Yapı: Erişilebilir ve SEO uyumlu işaretleme
Modern CSS: Flexbox, Grid, responsive prensipleri
JavaScript Temelleri: Site etkileşimini ekleyecek kadar JS
Mobile-First Tasarım: Mobilden başlayıp masaüstüne çıkma
UX Prensipleri: Kullanıcının amacına en kısa yoldan ulaşma
Core Web Vitals: LCP, FID, CLS performans metrikleri
Hosting ve Deploy: Alan adı, hosting, FTP/SFTP ile yayına alma

Eğitim Süresi

4 Gün (32 Saat). Kurumsal talebe göre 3 günlük yoğun veya 5 günlük uygulamalı versiyon olarak planlanabilir.

Web Tasarım Eğitimi İçeriği

1. Web Tasarımın Bütüncül Yaklaşımı

Görünüm, içerik, hız, erişilebilirlik dengesi
İyi tasarımın iş hedefine etkisi
Statik site, CMS ve framework seçimi
Web tasarımcı ve front-end geliştirici farkı

2. HTML5 Semantik Yapı

header, nav, main, section, article, footer
Doğru başlık hiyerarşisi (h1-h6)
Form elementleri ve etiketleme
Media (img, video, picture)
Anlamlı işaretleme ve SEO

3. CSS Temelleri ve Selector'lar

Selector ve specificity hesabı
Pseudo-class ve pseudo-element
Box model ve display tipleri
CSS Cascade ve inheritance
Custom properties (CSS variables)

4. Flexbox ile Modern Layout

Flex container ve flex item
justify-content ve align-items
flex-grow, shrink, basis
Yön ve sarmalama (wrap)
Tek satır navigasyon ve buton grupları

5. CSS Grid Sistem

Grid template rows ve columns
fr birimi ve esnek kolonlar
grid-area ile şablon yerleşimi
auto-fit ve auto-fill ile responsive grid
Flexbox vs Grid seçimi

6. Responsive Tasarım (Mobile-First)

Viewport meta etiketi
Media query ve breakpoint stratejisi
Esnek görseller ve srcset
Container query'lere giriş
Cihaz bağımsız tasarım yaklaşımı

7. Tipografi ve Web Fontları

Web safe fontlar ve fallback
Google Fonts ve self-hosting
Font weight ve italik dengesi
Okunabilir satır uzunluğu ve satır yüksekliği
Türkçe karakter desteği

8. Renk Sistemi ve Erişilebilirlik

Birincil ve ikincil renk paleti
Kontrast oranı (WCAG kuralları)
Dark mode tasarım yaklaşımı
Marka renkleri ve nötr tonlar

9. UI Bileşenleri

Buton, input, kart bileşenleri
Hover, focus ve active durumlar
Modal, tooltip ve dropdown
İkon kullanımı (SVG, icon font)
Tasarım tutarlılığı için bileşen kütüphanesi

10. JavaScript Temelleri

Değişken, fonksiyon ve veri türleri
DOM seçici ve event dinleyici
Sayfa etkileşimi (toggle, scroll, click)
Form doğrulama temelleri
Fetch API ile basit veri çekme

11. Animasyon ve Geçişler

CSS transition ve transform
Keyframe animation
Scroll-triggered animasyon
prefers-reduced-motion ile erişilebilirlik
Mikro etkileşimler ile cilalı arayüz

12. UX Prensipleri

Kullanıcı yolculuğu haritalama
İlk izlenim ve hero alan tasarımı
F ve Z scan deseni
Call to action yerleşimi
Form ve checkout akış prensipleri

13. Erişilebilirlik (a11y)

Semantik HTML ile erişilebilirlik temeli
ARIA rolleri ve attribute'lar
Klavye navigasyonu
Ekran okuyucu uyumu
Renk kontrastı ve focus görünürlüğü

14. Performans ve Core Web Vitals

LCP, INP, CLS metrikleri
Görsel optimizasyonu ve lazy loading
Critical CSS ve resource hint
CDN ve cache stratejisi
Lighthouse ile performans denetimi

15. SEO Uyumlu Yapı

Title, meta description tasarımı
Heading hiyerarşisi ile içerik mantığı
Schema.org structured data
sitemap.xml ve robots.txt
Open Graph ve Twitter Card

16. Tasarım Araçları ile Köprü

Figma'dan koda dönüştürme akışı
Design token ve değişken kullanımı
Tasarımcıyla iletişim kuralları
Component bazlı düşünme alışkanlığı

17. Build Araçları ve Modern Workflow

Vite veya Parcel ile geliştirme
SCSS ve preprocessor temelleri
Git ile sürüm kontrolü
Linter ve formatter (ESLint, Prettier)

18. CMS Entegrasyonu Giriş

WordPress ile statik tasarım entegrasyonu
Headless CMS yaklaşımı
Tasarımcının CMS template yazması
İçerik üreticileri için arayüz kurma

19. Hosting, Domain ve Deploy

Alan adı satın alma ve DNS
Hosting tipleri (paylaşımlı, VPS, JAMstack)
FTP, SFTP ve Git deploy
Netlify, Vercel ve Cloudflare Pages
HTTPS ve SSL sertifika

20. Bitirme Projesi ve Test

Çok sayfalı responsive site kurma
Cross-browser test
Mobil cihaz testi
Erişilebilirlik denetimi
Yayınlama ve sonrası izleme