Bir ürün çizimi küçük bir menüde ve büyük bir rehber başlığında kullanılacak. Kalın geometrik çizgiler iki boyutta da okunabilir, fakat ince çizgiler küçük ekranda kaybolabilir. Dosya biçimini seçmeden önce çizimin hangi boyutlarda ve hangi amaçla kullanılacağını yazın.

Vektör kaynağı ne zaman işe yarar?

Şekil, çizgi ve düz renklerden oluşan bir işte vektör kaynak farklı ölçülere uyum sağlar. Web sitesi güvenli SVG kabul ediyorsa sade bir çizim için bu biçimi değerlendirin. Fotoğraf ağırlıklı veya yoğun dokulu bir çalışma piksel tabanlı bir dosyada daha doğal olabilir. Düzenlenebilir orijinali her durumda ayrı saklayın.

Piksel çıktısını hedefe göre hazırlayın

Sayfa SVG kabul etmiyorsa PNG veya uygun bir WebP kopyası oluşturun. Şeffaflık varsa açık ve koyu zeminde sınayın. Çok küçük simgede ince çizgileri kalınlaştırmanız gerekebilir. Büyük bir dosyayı CSS ile küçültmek çizginin okunaklı olacağını tek başına garanti etmez.

Metni ve bilgiyi erişilebilir tutun

Bir diyagramdaki sayı ve etiketler önemliyse bunları resmin yakınında metinle de verin. Önemli başlıkları fotoğrafın içine gömmek yerine sayfa metni olarak sunabilirsiniz. Resimdeki bilginin ne kadarını alternatif metinde, ne kadarını yakın açıklamada vereceğinizi kullanımına göre seçin.

Küçük ve büyük yerleşimi karşılaştırın

Önce menüdeki gerçek ölçüyü, sonra başlıktaki büyük görünümü açın. Kontrast, kenar netliği, metin ve dosya boyutunu kaydedin. Çizim bir düğmeyse odağın ve erişilebilir adın çalıştığını da kontrol edin. Nihai dosyayı görevini belirten bir adla kaydedin.

Bir dosyayı üç kullanım boyutunda hazırlayın

Bir otobüs güzergâhı için çizdiğiniz yön işaretini düşünün. Büyük bir sayfa başlığında çizgilerin inceliği güzel durabilir. Telefon ekranındaki küçük bir düğmede aynı çizgiler birbirine karışabilir. Bir sunumda ise metinler yakından okunacağı için küçük işaretten daha fazla ayrıntı taşımak gerekir. Kaynak çiziminizin bir kopyasını alıp bu üç boyutta açın. Kenarlardaki boşluğu, çizgilerin ayrımını ve işaretin ne kadar hızlı tanındığını karşılaştırın. Küçük sürümde ayrıntıları kaldırabilir veya çizgi kalınlığını artırabilirsiniz. Bu, sadece dosyanın ölçüsünü küçültmekten farklı bir tasarım kararıdır. Büyük sürümde gereksiz kalınlaşma olmaması için küçük sürümün ayarlarını ana kaynağa taşımayın. Grafik belirli bir durumu anlatıyorsa yalnız renk değiştirmeye güvenmeyin. Şekil, yazı veya konum gibi ikinci bir ayrım da kullanın. Bu sayede soluk ekran, karanlık tema veya küçük boyut işaretin anlamını tümüyle ortadan kaldırmaz.

Gerçek sayfada arka plan ve metinle birlikte deneyin

Çiziminizi düzenleyicinin boş zemininde görmek kolaydır. Web sayfasında altında renkli bir kutu, yanında bir başlık veya üstünde başka bir simge bulunabilir. Önce grafiğin etrafındaki zeminle kontrastını ve küçük boyutta hangi çizgilerin kaybolduğunu kontrol edin. Piksel dosyası hazırladıysanız kenarlarda beklenmedik bir mat çizgi olup olmadığına bakın. Vektör sürümü kullanıyorsanız yazı tipinin nasıl gösterildiğini ve görselin yüklenmediği durumda hangi bilginin kalacağını değerlendirin. Grafikteki bütün metin sadece resimde duruyorsa bir telefon kullanıcısının onu büyütmek zorunda kalabileceğini düşünün. Önemli bilgiyi sayfanın metninde de verin. Dışa aktarımları dosya adında kullanım amacıyla ayırın. Bir ekip arkadaşı bir yıl sonra küçük düğme sürümünün neden sade olduğunu anlayabilsin. Son olarak sayfanın dar ve geniş yerleşimlerini açın. Birinde anlam kayboluyorsa bunu daha büyük bir dosya göndererek çözmeden önce çizimin kendisini sadeleştirmeyi deneyin.