ndCrea® / Student / Resources / RS / 015

DİJİTAL MECRALAR

Dijital görsel iletişimi kanal, duyarlı tasarım varlığı, performans, hareket, commerce, içerik üreticisi, erişilebilirlik, measurement, A/B test ve yönetişim sistemi olarak öğren.

Dijital görsel iletişimi kanal, duyarlı tasarım, format, performans, motion, erişilebilirlik, ölçüm ve yönetişim sistemi olarak öğretir.

DOĞRULUKKaynak + bağlam
DERİNLİKLisans + ileri katman
GÖRSELKonuya özgü örnek
REFERANSGeri dönülebilir bilgi
ÖĞRENME HARİTASI20 konu başlığı / 8 ana adım
01

Dijital mecra yalnız sosyal medya değildir.

Owned web/app/email, social/içerik üreticisi, paid display/search, video/streaming, commerce, digital OOH ve platform-native formats farklı attention, format ve measurement koşulları taşır.

OWNEDOwned

Web, app, email ve CRM üzerinde marka daha fazla kontrol taşır.

SOCIALSocial / içerik üreticisi

Platform UI, feed behavior ve içerik üreticisi conventions formatı şekillendirir.

PAIDücretli medya

Placement, policy, targeting ve measurement reklam sistemiyle bağlıdır.

VIDEOVideo / streaming

Autoplay, sound-off, duration ve playback bağlam yaratıcı kararı etkiler.

COMMERCECommerce

Product information, trust, variant ve purchase flow birlikte çalışır.

DOOHDigital OOH

Mesafe, dwell time, ambient ışık ve hareket limits önemlidir.

02

Dijital kampanya tek ana dosya dosya değil, kontrollü tasarım varlığı sistemidir.

kanal, placement, oran, duration, dil, CTA, legal, caption, tracking ve sürüm matrix üretim öncesi kurulmalıdır.

tasarım varlığı matrix: oran değişince kompozisyon yeniden kurulur GÖRSEL ÖRNEK
1:1
HEADCTA
4:5
HEADCTA
9:16
HEADCTA
16:9
HEADCTA
Tek master'ı kırpmak yerine type, focal point, CTA ve platform UI'ı her placement için yeniden test edin.
Görsel — Oran değişince kompozisyon yeniden kurulurORANLAR
1:1
4:5
9:16
16:9
CHANNELKanal

Her placement gerçek teknik spec ile eşleştirilir.

RATIOOran

1:1 / 4:5 / 9:16 / 16:9 aynı kompozisyonun kırpma'ı değildir.

DURSüre

6s, 15s, 30s veya loop formatlarında mesaj sırası yeniden kurulabilir.

LANGDil

Text expansion ve locale formats tasarım varlığı varyantını etkiler.

LEGALLegal

Disclaimer veya mandatory copy placement'a göre değişebilir.

VERSIONVersiyon

Onay durumu ve publish history izlenebilir olmalıdır.

03

duyarlı tasarım breakpoint listesi değil, içerik ve hiyerarşinin koşula göre yeniden davranmasıdır.

Fluid grid, duyarlı type, sanat yönetimi, image kaynak, bileşen reflow ve input modality birlikte düşünülür.

GRIDFluid grid

Sabit canvas yerine available space ile çalışan yapı.

YAZIduyarlı type

Scale, measure ve line-height viewport/içerik ile dengelenir.

ARTsanat yönetimi

Farklı oranlarda farklı kırpma veya image kullanılabilir.

REFLOWReflow

içerik sırası ve group ilişkisi dar/geniş görünümde değişebilir.

INPUTInput

Mouse, touch, keyboard ve TV remote aynı interaction varsayımını taşımaz.

TESTDevice test

Emulator yanında gerçek device ve network koşulu test edilir.

04

Dosya formatı yalnız uzantı değil kalite, alpha, animation ve çözümleme kararıdır.

JPEG, PNG, WebP, AVIF, SVG ve video formats kullanım bağlamına göre seçilir; her yeni format her durumda en iyi değildir.

Formatı içeriğe göre seçin GÖRSEL ÖRNEK
JPEGfotoğraf

lossy · alpha yok

PNGkeskin grafik / alpha

lossless · fotoğrafta ağır olabilir

WebPweb genel kullanım

lossy/lossless · alpha

AVIFyüksek sıkıştırma verimi

tooling/decode koşulunu test et

SVGvektör

logo · icon · çizgisel grafik

VIDEOzaman tabanlı

codec · autoplay · data cost

‘Yeni = daha iyi’ değildir; kalite/byte, alpha, tarayıcı ve üretim zinciri birlikte değerlendirilir.
JPEGJPEG

Fotoğraf için yaygın lossy format; alpha yok.

PNGPNG

Lossless ve alpha için kullanışlı; fotoğrafta dosya büyük olabilir.

WEBPWebP

Lossy/lossless ve alpha desteği; broad web use.

AVIFAVIF

Yüksek compression verimi; encode/decode ve tooling koşulları kontrol edilir.

SVGSVG

Logo, icon ve vector grafik için ölçeklenebilir; erişilebilirlik/security düşünülür.

VIDEOVideo as tasarım varlığı

Kısa hareket için codec, autoplay ve data cost still image alternatifleriyle kıyaslanır.

05

Dijital görsel kullanıcıya zamanında ulaşmıyorsa tasarım kalitesi eksiktir.

Image dimensions, compression, duyarlı srcset, lazy yükleniyor, preload, font yükleniyor ve Core Web Vitals kullanıcı deneyimini etkiler.

BYTEByte size

Görsel ağırlığı yalnız pixel dimension ile belirlenmez.

SRCSETduyarlı images

Cihaz ihtiyacına göre uygun çözünürlük gönderilir.

LAZYLazy yükleniyor

Viewport dışı assetler gerektiğinde yüklenebilir; hero için yanlış kullanımı LCP'yi bozabilir.

LCPLCP

Hero image ve font yükleniyor largest içerik paint'i etkileyebilir.

CLSdüzen shift

Image dimensions ve fallback yanlışsa düzen kayabilir.

MOBILEMobile network

Yavaş ağ ve data cost gerçek kullanıcı koşulu olarak ele alınır.

06

Video ve hareket placement'ları ilk saniyeler, sound-off ve loop davranışıyla tasarlanır.

Hook, message order, captions, safe areas, bitrate, autoplay, küçük taslak ve platform duration limitleri tasarım varlığı planına girer.

Görsel — Dijital hareket saniye, oran ve platform davranışıyla tasarlanırZAMAN
YAZI
HOOKİlk an

İlk frame/seconds temel marka veya mesaj ilişkisini kurmalıdır.

SOUNDSound-off

Anlam yalnız sese bağlı kalmamalı; caption veya visual redundancy gerekebilir.

LOOPLoop

Başa dönüş veya seamless loop mesajı bozmamalıdır.

SAFEgüvenli alan

Platform chrome ve subtitles için gerçek preview ile test edilir.

THUMBküçük taslak

Video başlamadan önceki cover ayrı hiyerarşi problemidir.

COMPCompression

Text/gradient/detail compression sonrası gerçek çıktı'ta kontrol edilir.

07

Sosyal medya tasarımı platform şablonu değil, içerik ve dağıtım davranışı problemidir.

Feed, stories/reels, carousel, profile, caption, comments, içerik üreticisi remix ve erişilebilirlik platform UI ile birlikte okunur.

FEEDFeed

küçük taslak-level recognition ve first-line hierarchy önemlidir.

STORYStory / Reel

System UI overlay ve top/bottom güvenli alan dikkate alınır.

CAROUSELCarousel

Slide sequence poster serisi değil, temporal information design'dır.

CAPTIONCaption

Visual ile caption birlikte anlam üretir; kritik içerik tek kanala bırakılmaz.

COMMENTSbağlam

Comments ve surrounding UI görselin algısını değiştirebilir.

REMIXRemix

İçerik yeniden paylaşım/kırpma/remix bağlamında da marka ve hak riskleri taşır.

08

ücretli medya creative hem platform policy hem iletişim verimliliği ile çalışır.

Banner, native, duyarlı display, search visual tasarım varlığı, retargeting ve dynamic creative farklı text/image limits ve tracking sistemi taşır.

PLACEMENTPlacement

Gerçek ad slot boyutu ve surrounding içerik test edilir.

RESPduyarlı ad

Platform aynı tasarım varlığı setinden farklı düzen üretebilir.

DYNAMICDynamic creative

Feed/data ile headline, image, price ve CTA varyantları otomatik üretilebilir.

LEGALLegal

Claim, disclaimer ve category restriction placement'a göre değişebilir.

TRACKTracking

UTM/pixel/event setup gizlilik ve measurement planıyla eşleşir.

FREQFrequency

Aynı creative yüksek frequency'de wear-out yaratabilir.

09

e-posta tasarımı web sayfasının küçültülmüş kopyası değildir.

Client support, table/düzen limitations, image blocking, karanlık mod, subject/preheader, alt text ve deliverability birlikte düşünülür.

CLIENTClient compatibility

Email CSS desteği browser web'den daha parçalıdır.

SUBJECTSubject + preheader

Inbox deneyimi açılmadan önce başlar.

BLOCKImage blocking

Mesaj yalnız görsel içine gömülmemelidir.

DARKkaranlık mod

Logo/tasarım varlığı ve colors client-specific dönüşümlerde test edilir.

ALTAlt text

Anlamlı görseller için text alternative planlanır.

DELIVDeliverability

Ağır tasarım varlığı, spam-like içerik ve broken markup teslimi etkileyebilir.

10

E-ticaret tasarımı tanıtım kadar karar ve güven bilgisini düzenler.

Product image, variant, price, availability, shipping, reviews, comparison, returns ve checkout ilişkisi görsel sistemde açık olmalıdır.

PDPProduct detail

Hero image yanında detail, scale, texture ve use-bağlam görselleri gerekir.

VARVariant

renk/size selection ile image/durum ilişkisi senkron olmalıdır.

PRICEPrice / promotion

Discount hierarchy yanıltıcı urgency veya fake reference price üretmemelidir.

TRUSTTrust

Returns, teslim, payment ve review bilgisi hiyerarşinin parçasıdır.

CHECKCheckout

Form, hata, payment durum ve security cues interaction design ile birlikte çalışır.

ACCESSerişilebilirlik

Zoom, keyboard, alt text ve form access purchase funnel'ı etkiler.

11

içerik üreticisi işbirliği marka sistemi'i tamamen kontrol etmek değil, birlikte üretilebilir çerçeve kurmaktır.

Brief, must-have/must-not, disclosure, usage haklar, edit onay, format, safe claims ve marka cues dengeli tanımlanır.

VOICEiçerik üreticisi voice

İçerik üreticisinin doğal dili yok edilirse güven ve performans düşebilir.

BRIEFiçerik üreticisi brief

Mesaj hedefi net; ifade alanı yeterince esnek olmalıdır.

DISCDisclosure

Reklam/sponsorluk işaretleme kuralları pazara göre uygulanır.

RIGHTSUsage haklar

Organic post ile paid usage/whitelisting aynı hak değildir.

EDITonay

Hukuki doğruluk ile içerik üreticisi authenticity arasında süreç kurulmalıdır.

ARCHtasarım varlığı arşiv

nihai içerik üreticisi tasarım varlığı, onay ve usage term kayıt altında tutulur.

12

Dijital tasarım varlığı erişilebilirlik yalnız web geliştiricisinin işi değildir.

Contrast, alt text, captions, text-in-image, hareket, flashing, okuma sırası ve zoom/reflow tasarım varlığı tasarımından itibaren düşünülür.

ALTAlt text

Görselin işlevi ve bağlama göre yazılır; exhaustive description değildir.

CAPCaptions

Video konuşma ve anlamlı sesleri erişilebilir hale getirir.

TEXTIMGText in image

Kritik metni görsele gömmek zoom/localization ve erişilebilirlik sorunları yaratır.

CONTRASTContrast

Text ve essential graphics yeterli ayrışma sağlamalıdır.

HAREKEThareket

azaltılmış hareket ve flashing riskleri desteklenir.

ORDERReading order

Carousel/email/web içerik semantic sıra ile uyumlu olmalıdır.

13

Metrik tasarım hedefinden türemelidir; yüksek etkileşim her zaman başarı değildir.

Reach, görüntülenebilirlik, CTR, completion, conversion, elde tutma, bounce, task başarılı ve marka lift farklı sorular cevaplar.

EXPOSUREExposure

Reach/impression görülme fırsatını gösterir, etkiyi değil.

VIEWgörüntülenebilirlik

Placement teknik olarak görüntülenebilir miydi sorusuna yaklaşır.

EYLEMAction

CTR veya conversion hedefe göre anlam kazanır.

VIDEOVideo

View definition ve completion platforma göre farklı olabilir.

RETelde tutma

Repeat use veya continued viewing bazı ürünlerde daha anlamlıdır.

BRANDmarka effect

Kısa vadeli click ile uzun vadeli marka etkisi aynı ölçüt değildir.

14

A/B testi ‘hangisi daha güzel?’ oylaması değil, kontrollü hipotez testidir.

Bir varyantta mümkün olduğunca tek temel varsayım değiştirilir; örneklem, duration, atama, metric ve durdurma kuralı önceden planlanır.

HYPHipotez

‘Daha görünür CTA conversion'ı artırır’ gibi test edilebilir önerme kurulur.

CONTROLKontrol

Diğer değişkenler mümkün olduğunca aynı tutulur.

RANDOMatama

Kullanıcıların varyantlara dağılımı sistematik önyargı yaratmamalıdır.

SAMPLEörneklem

Küçük örneklem rastgele farkı gerçek etki gibi gösterebilir.

STOPdurdurma kuralı

Sonuç iyi görünür görünmez testi durdurmak yanlış pozitif riskini artırır.

ETHICEtik

Kullanıcıyı riskli davranışa yönlendiren testler yalnız performans adına yapılmamalıdır.

15

Dijital tasarım varlığı üretiminde adlandırma, sürüm ve kaynak-of-truth hata oranını düşürür.

kampanya, kanal, oran, dil, pazar, sürüm, date, onay durum ve tracking metadata tanımlı sistemle yönetilir.

NAMEadlandırma

Dosya adı insan ve automation tarafından anlaşılır olmalıdır.

SOTtek doğruluk kaynağı

Onaylı ana dosya ve varlık kütüphanesi tek yerde sürümlenir.

APPonay

Draft/review/approved/live/retired durumları izlenebilir olur.

RIGHThaklar

Stock, içerik üreticisi, font ve müzik kullanım süreleri tasarım varlığı metadata'sında tutulabilir.

TRACKTracking

kampanya URL/event/tag planı sürüm ile birlikte yönetilir.

ARCHarşiv

kampanya kapanınca nihai tasarım varlığı ve performance bağlam arşivlenir.

16

Dijital kampanya tek bir ‘sosyal medya postu’ değildir; sahip olunan, ücretli, sosyal, commerce, video ve dijital açık hava kanallarında farklı davranır.

Aynı ana fikir, kanalın izleme süresi, oranı, UI katmanı, ölçüm ve interaction koşuluna göre yeniden kompoze edilir.

Owned web/e-posta: marka daha fazla düzen ve data kontrolüne sahiptir; performance, duyarlı ve accessibility doğrudan sorumluluğundadır.

Social/içerik üreticisi: platform kültürü, comments, remix, sound-off, short-form ve içerik üreticisi voice görsel sistemi etkiler.

ücretli medya: placement, platform policy, targeting, legal text ve measurement kreatif kararın parçasıdır.

Commerce: ürün görseli, variant, fiyat, availability, review, shipping ve checkout güven bilgisi aynı kullanıcı yolculuğunda çalışır.

Digital OOH: uzak mesafe, kısa dwell time, çevresel ışık, pixel pitch ve loop süresi belirleyicidir.

17

Web/dijital format seçimi uzantı ezberi değil; içerik türü, alpha, sıkıştırma, browser/device desteği ve decode maliyetidir.

‘Yeni format = her zaman daha iyi’ yaklaşımından kaçının; gerçek kullanım hedefi ve fallback'i doğrulayın.

JPEG: fotoğraf için yaygın lossy sıkıştırma; alpha yoktur. Çok keskin type/flat graphic için artifact üretebilir.

PNG: lossless ve alpha destekler; fotoğraf için gereksiz büyük olabilir ama UI tasarım varlığı, screenshot ve sharp graphic için güçlüdür.

WebP: lossy/lossless ve alpha desteğiyle web'de geniş kullanılır; kalite/byte oranı içeriğe göre test edilir.

AVIF: yüksek sıkıştırma verimi ve HDR/alpha olanakları sunabilir; encode/decode ve üretim tool desteği kontrol edilir.

SVG: logo, icon ve çizgisel grafikte ölçeklenebilir; embedded text/accessibility, filters, security ve complexity göz önünde bulundurulur.

18

Duyarlı tasarım yalnız kutuları daraltmak değil; imge, kırpma ve hiyerarşinin farklı koşulda yeniden karar vermesidir.

Bir 16:9 key visual'i 9:16'ya kırpmak yerine görsel odağı, metin alanını ve marka öğelerini yeniden yerleştirin.

Duyarlı görsel yönetimi: aynı dosyayı küçültmek yerine farklı kadraj kararları verinGÖRSEL ÖRNEK
Dorothea Lange, Migrant Mother
Geniş yerleşimYatay alanda çevresel bağlam ve ikincil figürler korunabilir. Metin görselin daha sakin negatif alanına yerleştirilebilir.
Dorothea Lange, Migrant Mother — vertical crop
Dikey / mobil yerleşimOdak yüz ve jest çevresinde sıkılaştırılır. Bu yalnız ‘resize’ değil; yeni bir crop ve hiyerarşi kararıdır.
<picture> <source media="(max-width: 700px)" srcset="portrait-crop.jpg"> <img src="wide-crop.jpg" alt="..."> </picture>
Örnek fotoğraf: Dorothea Lange, Migrant Mother, 1936; ABD federal hükümet görevi kapsamında üretilmiş kamu malı görsel. Aynı kaynak görüntü burada iki farklı kırpma kararıyla gösterilir. Gerçek responsive art direction'da gerektiğinde ayrı kaynak dosyaları kullanılabilir.

Desktop hero'da yatay çevre bilgisi değerli olabilir; mobilde subject'e daha yakın crop gerekebilir.

Picture/kaynak-set ile farklı görüntü kaynakları veya çözünürlükler cihaz/viewport ihtiyacına göre sunulabilir.

duyarlı type için yalnız clamp() kullanmak yeterli değildir; satır uzunluğu, hierarchy ve bileşen içerik limits test edilmelidir.

Breakpoint cihaz modeli listesi değil, içeriğin bozulmaya başladığı noktadır.

19

Dijital tasarımın byte, yüklenme ve rendering maliyeti kullanıcı deneyiminin parçasıdır.

Yüksek çözünürlüklü görsel, çok font veya ağır hareket; doğru optimize edilmezse tasarımın görünmeden gecikmesine neden olur.

Performans: güzel tasarım varlığı geç yüklenirse deneyim yine bozulur GÖRSEL ÖRNEK
HTML CSS HERO LCP candidate yükleme zamanı →
Hero görseli, font ve ağır hareket yükleme zincirine göre optimize edilmelidir.

Hero tasarım varlığı için gerçek displayed size'a uygun duyarlı image üretin; 4000 px görseli 400 px alanda taşımayın.

Lazy yüklenme viewport dışı içerikte yararlıdır; above-the-fold hero'ya yanlış uygulanırsa Largest Contentful Paint'i geciktirebilir.

Font family/weight sayısı, glyph repertuarı ve preload stratejisi düzen shift ve yüklenme performansını etkiler.

Video autoplay, alpha video veya large canvas/GPU efektleri cihaz/batarya/veri maliyetini artırabilir.

20

Ölçüm, tasarım hedefinden türemelidir; yüksek tıklama her proje için başarı değildir.

Exposure, attention, action, conversion, elde tutma ve marka etkisi farklı sorulara cevap verir.

Metrik merdiveni: görünmek ile sonuç üretmek aynı şey değildir GÖRSEL ÖRNEK
EXPOSUREreach / impression

görülme fırsatı

ATTENTIONviewability / dwell

dikkat göstergeleri

ACTIONCTR / task

eylem

OUTCOMEconversion / retention / brand effect

hedef sonucu

En yüksek sayı değil, iletişim/ürün hedefini gerçekten ölçen metrik seçilmelidir.

Reach/impression görünürlük fırsatını gösterir; insanların gerçekten anladığını veya etkilendiğini kanıtlamaz.

görüntülenebilirlik reklamın teknik olarak görülebilir alanda olup olmadığını ölçmeye yaklaşır; actual attention ile aynı değildir.

CTR action metriğidir; kullanıcıyı yanlış beklentiyle tıklatmak tasarım başarısı değildir.

Completion rate video süresine ve platform view tanımına bağlıdır; farklı platform metriklerini doğrudan karşılaştırmak risklidir.

marka lift veya recall farklı araştırma yöntemleri gerektirir ve kısa vadeli conversion ile aynı hedef değildir.

REF

Doğrulanmış kaynaklar.

Bu sayfa kaynaklara geri dönülebilecek bir akademik/teknik başvuru noktası olarak tasarlanmıştır.

ndCrea Kaynak Politikası

Öncelik; standart kuruluşları, resmi teknik dokümantasyon, müze/arşiv koleksiyonları ve akademik/mesleki güvenilir kaynaklardadır. Koşula bağlı teknik değerler evrensel kural gibi sunulmaz.

W3CWeb standards and responsive mediaKaynağa git ↗
W3CWCAG 2.2Kaynağa git ↗
web.devCore Web VitalsKaynağa git ↗
IABDigital advertising standards and researchKaynağa git ↗
MDNResponsive images and web mediaKaynağa git ↗
MDNResponsive imagesKaynağa git ↗