Web Tasarım Süreci, Adım Adım
Web tasarım, birinin renk seçtiği aşama değildir. "Bu site ne için var" sorusundan "bu düğme, bu boyutta, bu etiketle" cümlesine kadar daralan bir kararlar dizisidir ve her adım bir sonrakinden daha ucuza değişir.
Bu rehber aşamaları sırasıyla, her birinin ne ürettiğini ve tasarım projelerinin düzenli olarak takıldığı iki noktayı ele alıyor.
Keşif: tasarımın neyi başarması gerekiyor#
Görsel hiçbir şeyden önce tasarımcının da geliştiricinin ihtiyaç duyduğu şeylere ihtiyacı var: birincil hedef, kitle, sayfa yapısı ve kısıtlar. Bunlar olmadan başlanırsa portfolyoda iyi duran ve gerçek içerik geldiğinde çöken bir tasarım çıkar.
Bu aşama belge değil mutabakat üretir. İki tarafın da kabul ettiği tek sayfalık bir özet yeterlidir.
- Sitenin sürüklemesi gereken tek eylem ve nasıl ölçüleceği.
- İki üç ziyaretçi grubu ve her birinin geldiği soru.
- Gerçekten var olan marka kısıtları: logo, renkler, yazı tipleri, üslup.
- Teknik kısıtlar: CMS, platform, gerçekten önemli olan cihazlar.
- Müşterinin beğendiği site örnekleri — ve daha da faydalısı, nedenleri.
Yapı ve tel çerçeveler#
Tel çerçeveler, renk tartışması olmadan düzeni ve hiyerarşiyi karara bağlar. Her şablonda ne olduğunu, hangi sırayla ve ziyaretçinin ne yapmasının beklendiğini — değişiklikler hâlâ dakikalarla ölçülürken — cevaplar.
Her sayfayı değil şablonları tel çerçeveleyin. Çoğu sitede dört ile sekiz farklı şablon ve onlarca sayfa vardır.
| Şablon | Cevapladığı soru | Birincil eylem |
|---|---|---|
| Ana sayfa | Bu ne ve bana uygun mu? | Doğru bölüme gitmek |
| Bölüm hubu | Burada ne var? | Bir öğe seçmek |
| Makale / detay | Asıl cevap | Okumak, sonra bir sonraki adım |
| Ürün | Doğru ürün mü ve ne kadar? | Sepete eklemek |
| İletişim / form | Nasıl başlarım? | Göndermek |
| Arama sonucu | Aradığını buldun mu? | Bir sonucu açmak ya da daraltmak |
Tel çerçeveleri gerçekçi içerik uzunluklarıyla yapın. Altı kelimelik bir başlığa göre tasarlanmış bir düzen, gerçek başlık on dört kelime olduğunda kırılır.
Görsel tasarım ve tasarım sistemi#
Görsel tasarım markayı tel çerçevelere uygular: tipografi ölçeği, renk, boşluk, durumlar ve bileşenler. Tanıtım sitesinden büyük her işte, birbiriyle ilgisiz sayfa resimleri yerine küçük bir sistem — durumları tanımlı bir bileşen kümesi — üretmeye değer.
Sebebi düzenlilik değil. Sebebi, sistemin geliştiriciye maketlerin göstermediği durumlarda ne olacağını söylemesi; ve o durumlar sitenin çoğunu oluşturuyor.
- Bir tipografi ve boşluk ölçeği, böylece hiçbir sayı tek seferlik olmaz.
- Gerçek arka planlarına karşı kontrastı ölçülmüş renk token’ları.
- Bileşen durumları: varsayılan, üzerinde, odak, basılı, pasif, yükleniyor, hata, boş.
- Her bileşen için duyarlı davranış, yalnız ana sayfanın mobil hâli değil.
- Çok fazla içerik olduğunda ve hiç içerik olmadığında ne olacağı.
Tasarım projeleri nerede takılır#
Gecikmenin çoğunu iki aksaklık üretir ve ikisi de zevk değil süreç sorunudur.
- Sahipsiz geri bildirim. Altı kişi yorum yapar, ikisi birbiriyle çelişir ve hakemlik tasarımcıya kalır. Geri bildirimi birleştirecek ve son kararı verecek tek bir kişi belirleyin.
- Var olmayan içerik. Tasarımlar yer tutucu metne göre onaylanır, sonra gerçek metin iki katı uzunlukta gelir ve düzen baştan yapılır. Kaba da olsa gerçek içerikle tasarlayın.
- Sınırsız revizyon. Sayıyı baştan anlaşın — genelde iki ya da üç — ve fazladan bir turun ne tuttuğunu. Sınır olmadan projeler bitmez, sürüklenir.
- Onay olmayan onay. Toplantıda "güzel olmuş" onay değildir. Şablon başına, tarihli ve yazılı alın.
Bir incelemedeki en faydalı soru "beğendiniz mi" değil, "bu, ziyaretçinin sitenin var olma sebebi olan işi yapmasına yardım ediyor mu"dur. Zevk tartışmalarının sonu yoktur; hedef tartışmalarının vardır.
Sık sorulan sorular
Kaç revizyon turu beklemeliyim?
Şablon tabanlı bir projede iki ya da üç normaldir. Sayıdan daha önemlisi, fazladan turun maliyetiyle birlikte yazılı olarak anlaşılmasıdır. Sınırsız revizyon cömert görünür ve pratikte projenin bir karara hiç varmaması demektir, çünkü kimseyi taahhüde zorlayan bir şey kalmaz.
Tasarım ve geliştirme aynı kişi mi olmalı?
Küçük projelerde bir kişinin ikisini de yapması verimlidir ve bir devri ortadan kaldırır. Büyük projelerde bunlar gerçekten farklı beceriler ve ayırmak genelde daha iyi iş çıkarır — yeter ki tasarımcı bir dizi resim değil, durumları ve duyarlı kuralları olan bir sistem üretsin. Risk ayrımda değil devirdedir.
Geliştirme başlamadan tasarımın tamamı bitmiş olmalı mı?
Şablonların tasarlanmış olması gerekir, her sayfanın değil. Tasarım sistemi ve en karmaşık iki üç şablon oturduktan sonra geliştirme başlayabilir; gerisi yapım sürerken bitirilir. Hiçbir şey oturmadan geliştirmeye başlamak yeniden iş demek, son sayfaya kadar bitirmeyi beklemek ise boş bekleyen bir ekibe para ödemek.
Sonunda hangi teslimatları almalıyım?
Her şablon ve bileşen için düzenlenebilir kaynak dosyalar, tanımlı bir tipografi ve renk ölçeği, yapımın ihtiyaç duyduğu formatlarda dışa aktarılmış varlıklar ve yazılı duyarlı kurallar. Kaynak dosyaları mı yoksa yalnız çıktıları mı aldığınızı başlamadan sorun — orijinal tasarımcı olmadan küçük bir değişiklik gerektiğinde bu fark önemli olur.
web tasarım süreciwebsite tasarım adımlarıtel çerçevetasarım sistemiwebsite maketiweb tasarım iş akışı
