Web Sitesinde İllüstrasyon Ne Zaman Güçlü, Ne Zaman Zayıf?

Web sitesinde illüstrasyon, doğru yerde kullandığınızda markaya kendine ait bir ses verir; yanlış yerde kullandığınızda ise güveni zayıflatır ve sayfayı oyuncak gibi gösterebilir. Bu rehberde Talha Aslan ve ekibi olarak sahada gördüğümüz kalıpları paylaşıyoruz: hangi sayfada çizim işe yarar, hangisinde fotoğraf şarttır, stil nasıl tutarlı kalır ve dosya biçimi ile erişilebilirliği nasıl ele alırsınız.

Bu ayrım basit görünse de projelerin çoğunda karışıyor. Örneğin bir hukuk bürosu, ekibini gösteren fotoğraf yerine soyut karakter çizimleri koyduğunda ziyaretçi "burada gerçekten kim var?" diye sorar. Öte yandan bir yazılım firması, ekran görüntüsüyle anlatması zor bir veri akışını sade bir çizimle saniyeler içinde anlatabilir. Dolayısıyla soru "illüstrasyon güzel mi?" değil, "bu görsel bu sayfada hangi işi yapıyor?" olmalı.

Biz yeni bir projede görsel planı çıkarırken her bölüm için tek bir cümle yazarız: bu görsel ziyaretçiye neyi gösterecek? Cümle "güven" ya da "gerçeklik" içeriyorsa fotoğraf, "nasıl çalışır" ya da "ne anlama gelir" içeriyorsa illüstrasyon öne çıkar. Bu küçük alışkanlık, tasarım tartışmalarını zevk meselesinden çıkarıp amaca bağlar.

İllüstrasyon ile fotoğraf arasındaki temel fark nedir?

Fotoğraf belgeler; illüstrasyon yorumlar. Fotoğraf, bir anın ya da nesnenin var olduğunu gösterir ve bu yüzden kanıt değeri taşır. İllüstrasyon ise tasarımcının seçtiği ayrıntıları bırakıp gerisini atar, böylece mesajı sadeleştirir. Nielsen Norman Group, görsel tasarımda imge kullanımı üzerine yazısında fotoğrafları ürün, ortam ve insan göstermek için; illüstrasyonları ise iş akışı, süreç ve kavram anlatmak için uygun bulur.

Bu farkın pratik bir sonucu var. Fotoğraf her zaman "bu gerçek mi?" sorusunu doğurur; stok görsel olduğu belli olan bir fotoğraf bu yüzden güven kaybettirir. İllüstrasyonda ise ziyaretçi zaten bir yorum gördüğünü bilir, dolayısıyla gerçeklik beklentisi düşer. Ancak bu avantaj, kanıt gereken yerde dezavantaja döner.

Ayrıca illüstrasyon, kontrol edebileceğiniz bir görsel dildir. Renk paletini, çizgi kalınlığını, karakterlerin oranını siz belirlersiniz. Fotoğrafta ışık, mekân ve kişiler her çekimde değişir; çizimde ise bütün site boyunca aynı dünyayı koruyabilirsiniz. Bu nedenle illüstrasyon, marka kimliği güçlü olmak isteyen ama elinde düzenli fotoğraf çekimi bütçesi olmayan işletmeler için cazip bir araçtır.

Web sitesinde illüstrasyon hangi sayfalarda en çok işe yarar?

Saha tecrübemize göre web sitesinde illüstrasyon en çok, ziyaretçinin bir şeyi "anlaması" gereken sayfalarda değer üretir. Aşağıdaki liste, çizimin fotoğraftan genellikle daha iyi iş çıkardığı yerleri özetliyor:

• Süreç ve "nasıl çalışır" bölümleri: Adım adım akışı, oklar ve sade simgelerle göstermek fotoğraftan daha nettir.
• Soyut hizmetler: Danışmanlık, yazılım, finansal planlama gibi dokunulamayan işleri fotoğrafla anlatmak zordur.
• Boş durum ekranları: Arama sonucu çıkmadığında ya da sepet boşken küçük bir çizim, sert bir hata mesajını yumuşatır.
• Hata sayfaları: Kaybolan ziyaretçiye markanın tonunu koruyarak yol gösterir.
• Eğitim ve rehber içerikleri: Kavram şemaları, karşılaştırma çizimleri ve şematik anlatımlar öğrenmeyi hızlandırır.
• Lansman öncesi ürünler: Lansman öncesi bir uygulamanın fikrini gerçek ekran yokken anlatabilirsiniz.

Bu sayfaların ortak noktası, ziyaretçinin kanıt değil açıklama aramasıdır. Örneğin bir muhasebe yazılımının "faturanız nasıl otomatik eşleşir?" bölümünde gerçek bir ofis fotoğrafı hiçbir şey anlatmaz; üç adımlı bir çizim ise sorunun cevabını doğrudan verir.

İllüstrasyon hangi durumlarda siteyi zayıflatır?

İllüstrasyonun zayıf kaldığı yerler de en az güçlü olduğu yerler kadar nettir. Bu durumları erken fark ederseniz, sonradan pahalı bir görsel değişikliğinden kurtulursunuz:

• Ekip ve hakkımızda sayfaları: Ziyaretçi gerçek yüz görmek ister; çizgi karakter burada mesafe yaratır.
• Fiziksel ürün satışı: Kumaşın dokusunu, mobilyanın rengini, yemeğin porsiyonunu ancak fotoğraf gösterir.
• Mekân işletmeleri: Restoran, otel, klinik gibi yerlerde ziyaretçi gideceği yeri görmek ister.
• Yüksek güven gerektiren kararlar: Sağlık dışı alanlarda bile büyük tutarlı hizmet alımında ziyaretçi ciddiyet arar; aşırı oyunbaz çizimler bu algıyı bozar.
• Trend kopyası stiller: Herkesin kullandığı hazır karakter stilini aldığınızda, site diğer yüzlerce siteye benzer.

Bir de görünmeyen bir zayıflık var: aşırı yük. Her bölüme büyük bir çizim koyduğunuzda göz nereye bakacağını bilemez ve asıl mesaj kaybolur. Bu konuyu web sitesinde görsel ağırlık dengesi yazımızda ayrıntılı anlattık; illüstrasyon da sayfadaki ağırlığın bir parçasıdır ve aynı kurala uyar.

Web sitesinde illüstrasyon marka dilini nasıl etkiler?

Web sitesinde illüstrasyon, marka dilinin görsel tarafını taşır. Çizginin yumuşaklığı, renklerin canlılığı, karakterlerin yüz ifadesi ziyaretçiye markanın kişiliği hakkında sözsüz bir mesaj verir. Örneğin kalın, yuvarlak hatlı ve parlak renkli çizimler samimi ve genç bir ton üretir. İnce çizgili, sınırlı paletli ve geometrik çizimler ise daha kurumsal, sakin bir izlenim bırakır.

Bu yüzden illüstrasyon stilini metin tonundan ayrı düşünmemek gerekir. Metinleriniz ciddi ve teknikse, çocuk kitabı havasındaki karakterler okurda çelişki yaratır. Tersi de geçerlidir: esprili bir metin, soğuk ve teknik bir çizimle desteklendiğinde mesajın sıcaklığı kaybolur. Metin ve görsel tonunu birlikte kurmak için web sitesinde marka dili oluşturma rehberimize göz atabilirsiniz.

Renk tarafında da benzer bir bağ kurarsınız. İllüstrasyon paleti, marka renklerinden türemeli ve bu renklerin ne çağrıştırdığını bilmelisiniz. Web tasarımında renk psikolojisi yazımız bu seçimin arka planını anlatıyor. Kısacası illüstrasyon, logo ve tipografi kadar kimliğin bir parçasıdır; bir kez belirlendiğinde her yeni çizim aynı dili konuşmalıdır.

Fotoğraf ve illüstrasyon aynı sayfada nasıl birlikte kullanırsınız?

Fotoğraf ile çizimi aynı sayfada kullanmak mümkündür, ancak rastgele karıştırmak sayfayı dağınık gösterir. Bizim uyguladığımız temel ilke şu: her görsel türüne bir rol verin ve o rolü sayfa boyunca koruyun. Örneğin fotoğraf "kanıt" rolünü (ekip, müşteri ortamı, ürün), illüstrasyon ise "açıklama" rolünü (süreç, kavram, simgeler) üstlenir.

Karışımı yumuşatmanın birkaç pratik yolu vardır:

1. Fotoğraflara illüstrasyon paletinden gelen ince bir renk filtresi ya da çerçeve uygulayın.
2. Fotoğrafın üzerine marka çizgisinde küçük grafik öğeler (ok, vurgu çizgisi, şekil) ekleyin.
3. Aynı bölümde iki türü yan yana koymak yerine, bölümler arasında dönüşümlü kullanın.
4. Köşe yuvarlaklığı, gölge ve kenar boşluğu gibi ortak kuralları her iki görsel türüne de uygulayın.

Öte yandan bazı karışımlar neredeyse her zaman sorun çıkarır. Gerçekçi üç boyutlu çizimlerle düz vektör simgeleri aynı ekranda kullandığınızda göz iki farklı dünyayı birden işlemek zorunda kalır. Benzer şekilde, farklı kaynaklardan gelen iki ayrı illüstrasyon paketi yan yana durduğunda çizgi kalınlığı ve oranlar uyuşmaz. Bu durumda tek bir stile karar verip diğerini kaldırmak, iki stili uzlaştırmaya çalışmaktan daha hızlı sonuç verir.

Tutarlı bir illüstrasyon stilini nasıl kurarsınız?

Tutarlılık, illüstrasyonu profesyonel gösteren asıl unsurdur. Nielsen Norman Group da aynı sayfadaki çizimlerin palet ve çizgi işleyişi bakımından uyumlu olmasını önerir. Biz bu uyumu yazılı bir stil rehberiyle güvenceye alırız. Rehberde şu kararlar yer alır:

1. Palet: Ana renkler, vurgu rengi ve gölge tonları. Sınırlı bir palet, yeni çizimlerin de aynı aileden görünmesini sağlar.
2. Çizgi: Kontur var mı, yok mu; varsa kalınlığı ve uç biçimi.
3. Perspektif: Düz (iki boyutlu), izometrik ya da hafif derinlikli; ancak tek bir seçim.
4. İnsan figürü: Yüz ayrıntısı, vücut oranı, çeşitlilik ilkesi ve ten tonları.
5. Doku ve gölge: Düz renk mi, gren dokusu mu, yumuşak geçiş mi.
6. Boyut ve boşluk: Simge, bölüm görseli ve kahraman alanı için ayrı ölçüler.

Bu rehber, ileride farklı bir tasarımcı çalıştığında bile stilin kaymamasını sağlar. Üstelik yeni bir sayfa eklerken "hangi çizimi yapalım?" sorusunun cevabını hızla bulursunuz, çünkü kurallar zaten bellidir. Biz rehberin sonuna, doğru ve yanlış örnekleri yan yana gösteren bir sayfa da ekleriz; böylece yazılı kuralın görsel karşılığı tartışmaya yer bırakmaz.

Stil rehberinin bir diğer faydası da onay sürecini kısaltmasıdır. Yeni bir çizim geldiğinde ekip içinde "beğendik mi?" diye tartışmak yerine, rehberdeki maddeleri tek tek kontrol edersiniz. Palet doğru mu, çizgi kalınlığı aynı mı, figür oranları tutuyor mu? Bu sorular öznel zevki değil, yazılı kuralı ölçer. Dolayısıyla karar hızlanır ve farklı kişilerin onayladığı çizimler bile aynı aileden görünür. Ayrıca rehberi tasarım dosyası olarak değil, ekipteki herkesin açabileceği basit bir belge olarak saklamanızı öneririz; böylece içerik yazan kişi de doğru görseli talep edebilir.

Hangi görsel türü hangi amaca uyar?

Aşağıdaki karşılaştırma tablosu, sık karşılaştığımız görsel türlerini amaç, güçlü yan ve dikkat noktası açısından özetliyor. Bunu saha tecrübesine dayalı bir başlangıç rehberi olarak görün; her marka kendi bağlamına göre ayar yapar.

Tablodaki en önemli satır, çoğu zaman göz ardı edilen "dikkat noktası" sütunudur. Örneğin izometrik çizimler masaüstünde etkileyici dururken mobil ekranda okunaksız kalabilir; bu yüzden aynı çizimin sadeleştirilmiş bir mobil sürümünü planlamak gerekir.

Neden SVG çoğu illüstrasyon için doğru dosya biçimidir?

SVG (ölçeklenebilir vektör grafik), görseli piksel yerine şekil tanımlarıyla saklayan bir biçimdir. Bu yüzden her ekran boyutunda ve yakınlaştırmada keskin kalır. web.dev, doğru görsel biçimini seçme rehberinde logo, simge ve metin gibi basit şekiller için vektörü önerir ve mümkün olduğunda vektör görseli tercih etmeyi tavsiye eder.

Düz renkli, sınırlı ayrıntılı illüstrasyonlar bu tanıma çok iyi oturur. Ayrıca SVG metin tabanlı olduğu için birkaç avantaj daha getirir:

• Renkleri CSS ile değiştirebilir, örneğin koyu temada paleti otomatik uyarlayabilirsiniz.
• Tek tek parçaları canlandırabilir, böylece ayrı bir video dosyasına ihtiyaç duymazsınız.
• Sıkıştırıldığında genellikle çok küçük boyutlara iner; ancak bu, çizimin karmaşıklığına bağlıdır.
• Yüksek çözünürlüklü ekranlar için ayrı ayrı dosya üretmeniz gerekmez.

Google da SVG'yi desteklediği görsel biçimleri arasında sayar. Google Görseller için en iyi uygulamalar sayfası, satır içi SVG kullanıyorsanız açıklamayı alt niteliği yerine title öğesiyle verebileceğinizi belirtir. Kısacası iyi hazırladığınız bir SVG, hem hız hem netlik hem de arama görünürlüğü açısından sağlam bir temel sunar.

SVG ne zaman doğru seçim değildir?

SVG her çizim için ideal değildir. web.dev aynı rehberde, karmaşık sahneleri tanımlamak için gereken SVG kodunun aşırı büyüyebileceğini hatırlatır. Fırça dokusu, binlerce küçük şekil, gerçekçi ışık ve gölge geçişleri içeren illüstrasyonlarda SVG dosyası bir fotoğraftan bile ağır hale gelebilir. Üstelik tarayıcı bu şekillerin hepsini çizmek için işlemci harcar.

Bu durumda çizimi raster biçime, örneğin WebP ya da AVIF'e dönüştürmek daha mantıklıdır. Raster görselde ise farklı ekran genişlikleri için birden fazla boyut sunmanız gerekir; bunun yolunu web sitesi görsel optimizasyonu yazımızda adım adım anlattık.

Peki kararı nasıl verirsiniz? Biz basit bir test uygularız: çizimi tasarım aracından hem SVG hem WebP olarak dışa aktarır, sıkıştırılmış boyutları karşılaştırırız. Ardından düşük donanımlı bir telefonda sayfanın akıcılığına bakarız. Hafif ve akıcı olan kazanır. Ayrıca tasarım aracından gelen SVG dosyaları çoğu zaman gereksiz katman adları, gizli öğeler ve meta veriler içerir; bunları temizlemek dosyayı belirgin biçimde küçültür.

İllüstrasyonlarda erişilebilirliği nasıl sağlarsınız?

Erişilebilir bir illüstrasyon, görme engelli bir ziyaretçinin de aynı bilgiye ulaşmasını sağlar. İlk adım, çizimin bilgi taşıyıp taşımadığına karar vermektir. Bilgi taşıyorsa ekran okuyucunun okuyacağı kısa ve anlamlı bir açıklama gerekir. Satır içi SVG için MDN, title öğesinin öğeye erişilebilir kısa bir açıklama verdiğini belirtir.

İkinci adım kontrastır. WCAG'nin 1.4.11 numaralı metin dışı kontrast ölçütü, içeriği anlamak için gerekli grafik parçaların komşu renklere karşı en az 3:1 kontrast oranına sahip olmasını ister. Örneğin bir süreç çiziminde adımları ayıran oklar açık gri zemin üzerinde soluk griyse, düşük görüşlü bir ziyaretçi akışı takip edemez. Renk çiftlerinizi renk kontrast kontrolü aracımızla hızlıca ölçebilirsiniz.

Üçüncü adım, çizimin içindeki metindir. Görselin içine gömülü yazı ekran okuyucuya ulaşmaz, çevrilemez ve büyütüldüğünde bozulabilir. Bu yüzden önemli metni HTML olarak sayfaya yazın, çizimde yalnız destekleyici etiketler bırakın. Genel çerçeve için web erişilebilirliği ve WCAG standartları yazımıza da bakabilirsiniz.

Süs illüstrasyonu ile bilgi taşıyan illüstrasyonu nasıl ayırırsınız?

Bu ayrım hem erişilebilirlik hem de içerik kararları için önemlidir. W3C'nin süs görselleri öğreticisi, sayfaya bilgi eklemeyen, yakındaki metni tekrarlayan ya da yalnız görsel ilgi katan görselleri süs olarak tanımlar. Bu görsellerde boş alt niteliği kullanmanızı, alt niteliğini tamamen silmemenizi söyler; aksi halde bazı ekran okuyucular dosya adını okuyabilir.

Pratikte kendinize şu soruyu sorun: bu çizimi kaldırsam ziyaretçi bir bilgiyi kaybeder mi? Cevap evetse çizim bilgi taşır ve açıklama ister. Cevap hayırsa çizim süstür ve ekran okuyucudan gizlenmelidir. Örneğin "üç adımda kurulum" bölümündeki adım çizimleri bilgi taşır; başlığın yanındaki dekoratif dalga çizgisi ise süstür.

Bu soru aynı zamanda tasarım için de bir filtredir. Nielsen Norman Group'un göz izleme çalışmalarına göre kullanıcılar göreve ilişkin bilgi taşıyan görsellere dikkat eder, yalnız süs olanları ise çoğunlukla görmezden gelir. Dolayısıyla sayfanızdaki illüstrasyonların büyük kısmı süs kategorisine düşüyorsa, belki de o alanı daha işlevsel bir içerikle değerlendirmenin zamanı gelmiştir.

Animasyonlu illüstrasyonlarda nelere dikkat etmelisiniz?

Hareketli çizimler dikkati yönlendirmek için etkili bir araçtır, ancak ölçüsüz kullanıldığında rahatsız edici hale gelir. Bazı kullanıcılar ekrandaki hareketten fiziksel rahatsızlık hisseder ve bu yüzden işletim sisteminde hareketi azaltma ayarını açar. WCAG'nin 2.3.3 numaralı etkileşimden kaynaklanan animasyon ölçütü bu ayara saygı göstermeyi yeterli teknikler arasında sayar.

Bizim animasyonlu illüstrasyon için uyguladığımız kurallar şunlardır:

• Hareketi yalnız bir anlam taşıdığında kullanın: bir durum değişimi, bir adım geçişi ya da bir onay.
• Sonsuz döngüde dönen kahraman animasyonlarından kaçının; okurken göz sürekli oraya kayar.
• Hareketi azaltma tercihi olan kullanıcılara durağan bir sürüm gösterin.
• Animasyonun ilk karesinin tek başına da anlamlı olmasını sağlayın.

Performans da ayrı bir konudur. Büyük bir animasyon kütüphanesini yalnız tek bir çizim için yüklemek, sayfanın açılışını yavaşlatabilir. Küçük hareketler için CSS genellikle yeterlidir. Bu dengeyi web sitesinde mikro animasyon kullanımı yazımızda daha ayrıntılı ele aldık.

Web sitesinde illüstrasyon SEO'yu nasıl etkiler?

Web sitesinde illüstrasyon, sıralamayı doğrudan yükseltmez; ama dolaylı olarak üç noktada fark yaratır. Birincisi hızdır. Hafif bir SVG, ağır bir kahraman fotoğrafına göre sayfanın ana içeriğini daha çabuk gösterebilir. Ancak aşırı karmaşık bir SVG tam tersi etki yapar, dolayısıyla her dosyayı ölçmeniz gerekir.

İkincisi anlaşılabilirliktir. Google, Görseller rehberinde alt metni görsele meta veri eklemenin en önemli yolu olarak anar ve görselin konusunu anlamak için bilgisayarla görme ile sayfa içeriğini birlikte kullandığını belirtir. Bu yüzden bilgi taşıyan bir çizime anahtar kelime doldurmadan, doğal ve açıklayıcı bir alt metin yazın.

Üçüncüsü kullanıcı davranışıdır. Karmaşık bir süreci tek bakışta anlatan bir çizim, ziyaretçinin sayfada kalıp okumaya devam etmesini kolaylaştırır. Öte yandan anlamsız süs çizimleri içeriği aşağı iter ve ziyaretçinin aradığı bilgiye ulaşmasını geciktirir. Kısacası SEO açısından iyi illüstrasyon, sayfanın amacına hizmet eden ve hızdan ödün vermeyen illüstrasyondur.

Hazır illüstrasyon paketleri mi, özel çizim mi?

Hazır paketler hızlı başlangıç sağlar ve küçük bütçeli projelerde mantıklı olabilir. Ancak aynı paketi kullanan yüzlerce site olduğunu unutmayın; ziyaretçi bu karakterleri başka bir sitede de görmüş olabilir. Bu durum, markanın ayırt edici olma çabasını zayıflatır. Ayrıca paketler genellikle sınırlı sayıda sahne içerir, siteniz büyüdükçe ihtiyaç duyduğunuz yeni çizimi aynı stilde bulamayabilirsiniz.

Özel çizim ise başlangıçta daha fazla zaman ve emek ister, ama size ait bir görsel dil üretir. Orta yol olarak, hazır bir paketi temel alıp palet, çizgi ve figür oranlarını markaya göre yeniden düzenlemek de mümkündür; bu durumda paketin lisans koşullarını mutlaka okuyun.

Hangi yolu seçerseniz seçin, kararın temeli aynı kalır: stil rehberi. Bu tercih, aslında daha büyük bir sorunun parçasıdır; hazır tema mı, özel web tasarım mı yazımızda bu dengeyi bütün site ölçeğinde tartıştık. İllüstrasyon sistemini sitenizle birlikte sıfırdan kurmak isterseniz, web tasarım hizmetimiz kapsamında stil rehberini ve ilk çizim setini biz hazırlarız.

Yapay zeka ile üretilen illüstrasyonları kullanmalı mısınız?

Yapay zeka görsel araçları hızlı taslak üretmek için faydalıdır. Ancak yayına girecek illüstrasyonlarda üç sorun sık karşımıza çıkar. Birincisi tutarlılık: her üretimde çizgi, oran ve palet biraz değişir, bu da stil rehberini korumayı zorlaştırır. İkincisi ayrıntı hataları: eller, metin ve küçük nesneler çoğu zaman bozuk çıkar. Üçüncüsü hak durumu: ticari kullanım koşulları araçtan araca değişir ve güncel koşulları sağlayıcının resmi sayfasından kontrol etmeniz gerekir.

Bu yüzden biz yapay zekayı daha çok fikir aşamasında kullanırız. Örneğin bir kahraman alanı için birkaç farklı kompozisyon fikrini hızla görür, seçtiğimiz yönü ardından vektör olarak elle temizleriz. Böylece hız avantajını alırken tutarlılığı kaybetmeyiz.

Bir başka pratik not: yapay zeka çıktısı genellikle raster olur. Bunu doğrudan sayfaya koymak yerine, vektöre çevirip sadeleştirmek hem dosya boyutunu düşürür hem de koyu tema gibi renk uyarlamalarına izin verir. Kısacası yapay zeka bir başlangıç noktasıdır; son kararı stil rehberi ve insan gözü verir.

Örnek senaryo: Bir yazılım firmasının ana sayfası

Bu bölümdeki durum bir örnek senaryodur ve gerçek bir müşteriyi anlatmaz. Küçük bir yazılım firması, stok fotoğraflarla dolu bir ana sayfaya sahip olsun. Gülümseyen iş insanları, el sıkışmalar ve dizüstü bilgisayar başında oturan modeller. Ziyaretçi ürünün ne yaptığını ancak sayfanın ortasında anlıyor.

Böyle bir projede biz önce her bölümün görevini yazarız. Kahraman alanının görevi "ürünün ne yaptığını tek bakışta göstermek" olduğu için buraya ürünün sadeleştirilmiş bir arayüz çizimini koyarız. "Nasıl çalışır?" bölümüne üç adımlı bir akış illüstrasyonu ekleriz. Ekip bölümündeki stok fotoğrafları ise gerçek ekip fotoğraflarıyla değiştiririz, çünkü burada görev kanıt sunmaktır.

Ardından bütün çizimleri tek bir paletle, aynı çizgi kalınlığıyla hazırlar ve SVG olarak sayfaya koyarız. Süs çizimlerini ekran okuyucudan gizler, bilgi taşıyanlara açıklama ekleriz. Son olarak kontrastı ölçer ve hareketi azaltma tercihine uygun durağan sürümleri hazırlarız. Bu senaryodaki asıl kazanç estetik değil, netliktir: ziyaretçi ne aldığını sayfanın başında anlar.

İllüstrasyonu yayına almadan önce kontrol listesi

Aşağıdaki listeyi her yeni çizim setini yayına almadan önce gözden geçiriyoruz. Siz de kendi sitenizde aynı kontrolü yapabilirsiniz:

• Her illüstrasyonun bu sayfadaki görevi tek cümleyle yazılı mı?
• Kanıt gereken yerlerde (ekip, ürün, mekân) gerçek fotoğraf var mı?
• Palet, çizgi ve perspektif stil rehberine uyuyor mu?
• Basit çizimler SVG, karmaşık çizimler uygun boyutlu raster mi?
• SVG dosyaları gereksiz katman ve meta verilerden temiz mi?
• Bilgi taşıyan çizimlerin kısa ve anlamlı açıklaması var mı?
• Süs çizimleri ekran okuyucudan gizli mi (boş alt ya da eşdeğeri)?
• Gerekli grafik parçalar komşu renklere karşı yeterli kontrastta mı?
• Önemli metin çizimin içinde değil, HTML olarak sayfada mı?
• Animasyonların hareketi azaltma tercihine uygun durağan sürümü var mı?
• Mobil ekranda küçük ayrıntıları hâlâ seçebiliyor musunuz?
• Hazır paket kullandıysanız lisans koşullarını okudunuz mu?

Bu listedeki maddeler birbirinden bağımsız görünse de hepsi aynı hedefe hizmet eder: illüstrasyonun güzel görünmesi değil, işe yaraması. Özellikle mobil kontrolü atlamayın, çünkü masaüstünde zarif duran ince çizgiler küçük ekranda kaybolabilir.

İllüstrasyon sistemini sitenize kim kurmalı?

İllüstrasyon, tek başına bir çizim işi değil; marka, içerik, erişilebilirlik ve performans kararlarının kesiştiği bir sistemdir. Bu yüzden çizimi yapan kişi ile sayfayı kurgulayan ekip arasında yakın bir iş birliği gerekir. Aksi halde güzel çizimler, sayfanın akışına oturmayan bağımsız parçalar olarak kalır.

Biz bir web projesinde görsel dili, sayfa yapısıyla aynı anda kurarız. Önce hangi bölümde fotoğraf, hangisinde çizim kullanılacağına karar verir, ardından stil rehberini yazar ve ilk çizim setini üretiriz. Sade bir görsel dil hedefliyorsanız, minimalist web tasarım ve beyaz alan kullanımı yazılarımız illüstrasyonla birlikte nasıl bir denge kuracağınızı gösterir.

Sitenizin görsel dilini illüstrasyon ve fotoğraf dengesiyle yeniden kurmak istiyorsanız, web tasarım hizmetimiz sayfasından teklif isteyebilirsiniz. Mevcut sitenizi, hedef kitlenizi ve sayfa yapınızı inceleyip size özel bir kapsam ve teklif hazırlarız.