Web tasarımcısı nasıl olunur?
Diploma şart mı, hangi araçlar öğrenilmeli, portfolyo nasıl kurulur? İşe alırken baktığımız beceriler ve bugün öğrenilmesi boşa giden konular.
Yazan: OSBSA Bilişim
Bu soruyu bize genellikle iki grup soruyor: üniversite tercihi yapan öğrenciler ve meslek değiştirmeyi düşünenler. İkisine de aynı şeyi söylüyoruz. Diploma kapıyı açar, portfolyo işi alır.
Aşağıdaki liste, işe alırken gerçekten baktığımız şeylerden çıktı. Sektörün tamamını temsil etmez, ama küçük ve orta ölçekli bir ajansta çalışmak istiyorsanız ihtiyacınız olan asgari set budur.
Web tasarımcısı tam olarak ne yapar?
Terim biraz bulanık, çünkü iki ayrı iş için kullanılıyor.
Arayüz tasarımcısı ekranı kurar: düzen, tipografi, renk, bileşen sistemi, akış. Çıktısı tasarım dosyalarıdır.
Önyüz geliştirici o tasarımı tarayıcıda çalışır hale getirir. Çıktısı koddur.
Büyük ekiplerde bu ikisi ayrı kişidir. Küçük ajanslarda genellikle aynı kişi yapar ve "web tasarımcısı" denilen rol de budur. Hangi tarafa yatkın olduğunuzu erken anlamak, öğrenme sıranızı belirler.
Diploma gerekli mi?
Hayır. İşe alırken diplomaya bakmıyoruz, çalışan iş istiyoruz.
Bunun anlamı eğitimin değersiz olduğu değil. Bilgisayar mühendisliği, grafik tasarım ya da ilgili bir bölüm size iki şey kazandırır: yapılandırılmış bir temel ve zaman. Kendi başınıza öğrenirken en zor kısım, neyi hangi sırayla öğreneceğinizi bilmemektir.
Sertifika kurslarının durumu daha karışık. Kısa kurslar genellikle bir aracı kullanmayı öğretir, sorun çözmeyi öğretmez. Kurs bitiminde elinizde üç bitmiş proje varsa değerlidir. Sadece katılım belgesi varsa, işe alırken hiçbir ağırlığı yok.
Bugün ne öğrenilmeli?
Sıralama önemli. Aşağıdakileri bu sırayla öğrenmenizi öneririz.
| Sıra | Konu | Neden |
|---|---|---|
| 1 | HTML, semantik etiketler | Her şeyin temeli. Yanlış etiket erişilebilirliği ve SEO'yu bozar |
| 2 | CSS, flexbox ve grid | Düzen kurmayı öğrenmeden çerçeve öğrenmek işe yaramaz |
| 3 | Duyarlı tasarım | Mobil öncelikli düşünme alışkanlığı |
| 4 | Erişilebilirlik temelleri | WCAG 2.2, klavye gezinimi, kontrast, form etiketleri |
| 5 | JavaScript temelleri | DOM, olaylar, asenkron işlemler |
| 6 | Sürüm kontrolü (Git) | Ekip içinde çalışmanın ön şartı |
| 7 | Tasarım aracı (Figma) | Tasarımcıyla ortak dil |
| 8 | Bir çerçeve (React) | İş ilanlarının çoğunda isteniyor |
| 9 | TypeScript | Orta ölçekli projelerde artık standart |
| 10 | Bir uygulama çatısı (Next.js) | Sunucu tarafı render ve yönlendirme |
| 11 | Temel SEO ve performans | Core Web Vitals, sayfa başlığı yapısı, görsel optimizasyonu |
| 12 | Temel arka uç bilgisi | Veritabanı, API, kimlik doğrulama mantığı |
İlk beş maddeyi atlayıp doğrudan sekizinci maddeden başlayan çok kişi görüyoruz. Sonuç genellikle şu oluyor: çerçeveyle çalışan ama basit bir düzen sorununu çözemeyen bir geliştirici.
Bugün öğrenmeye değmeyen şeyler
Bu bölümü yazmamızın bir sebebi var. Kendi eski sitemizde, ziyaretçilere Flash, FrontPage, Dreamweaver ve Fireworks öğrenmelerini tavsiye eden bir sayfa yıllarca yayında kaldı. O tavsiyeyi verdiğimiz için özür dileriz ve düzeltiyoruz.
| Araç | Durum |
|---|---|
| Adobe Flash | Desteği 31 Aralık 2020'de sona erdi, tarayıcılar 2021 Ocak'ta içeriği engellemeye başladı |
| Microsoft FrontPage | Geliştirilmesi 2006'da durduruldu |
| Adobe Fireworks | Son sürümü CS6, 2013'te geliştirilmesi bırakıldı |
| Klasik ASP | Yerini ASP.NET ve ardından ASP.NET Core aldı |
| Tablo ile sayfa düzeni | CSS grid ve flexbox varken kullanılmıyor |
| jQuery ile başlamak | Öğrenmesi zararlı değil ama yeni projelerde başlangıç noktası değil |
Eski araçlarla üretilmiş bir siteyi devralırsanız bunları tanımanız işinize yarayabilir. Kariyerinize bunlardan başlamak ise zaman kaybı.
Portfolyo nasıl kurulur?
Üç bitmiş iş, on yarım işten daha değerli. İşe alırken baktığımız şey, projenin ne kadar gösterişli olduğu değil, bitmiş olup olmadığı.
Portfolyoda olması gerekenler:
- Gerçekten yayında olan, tıklanabilir adresler
- Her proje için ne yaptığınızın kısa açıklaması: hangi kısmı siz yazdınız
- Kod deposu bağlantısı
- Karşılaştığınız bir sorun ve nasıl çözdüğünüz
Son madde en çok okuduğumuz kısım. "Ürün listesi filtrelemesi mobilde yavaştı, sunucu tarafında sayfalama yaptım" cümlesi, on ekran görüntüsünden fazla şey anlatır.
Kendi siteniz de portfolyonun parçasıdır. Mobilde bozuluyorsa ya da beş saniyede açılıyorsa, diğer projelerinize bakılmaz.
Uydurma proje koymayın. "Örnek e-ticaret sitesi" diye konan şablon işler, bir ajansın göreceği ilk şeydir.
Kendi başına öğrenirken ne yapmalı?
Kurs izlemekle öğrenilmiyor, kurstakini kapatıp yeniden yazmakla öğreniliyor. Pratik bir yol şu: sevdiğiniz bir sitenin bir sayfasını, koduna bakmadan sıfırdan yapmaya çalışın. Takıldığınız her nokta, öğrenmeniz gereken konunun adıdır.
İkinci öneri, gerçek bir müşteri bulmak. Mahalledeki bir esnafa ücretsiz ya da düşük bedelle site yapmak, on kişisel projeden daha öğretici. Çünkü ilk kez kendi zevkinize göre değil, başkasının ihtiyacına göre karar vermek zorunda kalırsınız. Geri bildirim almak, kapsamın büyümesiyle baş etmek ve teslim etmek de mesleğin parçası.
İşe alırken neye bakıyoruz?
Sıralamayla:
- Bitmiş ve yayında olan iş
- Kodun okunabilirliği
- Sorunu nasıl anlattığı
- Erişilebilirlik ve performans konusunda farkındalık
- Git kullanımı
- Öğrenme hızı
Diploma bu listede yok. Ama ilk maddeyi karşılamayan bir başvuruyu diploma da kurtarmıyor.
Kısa yol yok
Web tasarımcısı olmak için bir okuldan mezun olma şartı yok. Temelleri sırayla öğrenmek, bitmiş iş üretmek ve o işi anlatabilmek gerekiyor. Öğrenme listenizi yaparken de kaynağın tarihine bakın: 2015 öncesi yazılmış bir rehber, size bugün kimsenin kullanmadığı araçları öğretebilir.
Bizim bugün hangi teknolojilerle çalıştığımızı merak ederseniz web yazılım hizmet sayfamızda yığının tamamı yazılı.
- web tasarımcısı
- kariyer
- öğrenme yolu
- portfolyo