Mi a különbség a Print design és a Webdesign között?

Bár a print designban és webdesignban nyilvánvalóan sok a hasonlóság és többnyire ugyanazokat a tervező programokat használjuk, a két terület mégis más. A tervezési elvek és az esztétikai szempontok hasonlóak, de nem szabad elfelejteni, hogy két külön médiumról beszélünk.

A két területnek más a célja, más szempontokra kell figyelni a tervezés során, más fájlformátumokat és terminológiát használunk, a munkafolyamat is más, vagyis mindkét terület specifikus szakértelmet követel.

Ebben a bejegyzésben egy összehasonlítást kaphatsz arról, hogy mik a legnagyobb különbségek a nyomtatott és a webes grafikai tervezés között.

Konkrétan miről beszélünk, amikor külön választjuk ezt a két területet?

Nyomtatott grafika:

magazin, brossúra, könyv,
termék csomagolás,
névjegykártya,
molinó,
logó,
szórólap, matrica…

Webes grafika:

weboldal, webalkalmazás, felhasználói felületek,
e-mail sablon, hírlevél,
reklám banner, hirdetés,
közösségi média felületek,
logó…

Mi a különbség a Print desing és a Webdesign között?

Az egyik legnagyobb különbség a két terület között, hogy míg a nyomtatott grafika egy kész termék, amit a kezedbe foghatsz, addig a webdesign egy interaktív digitális élmény, amit csak a kijelzőn keresztül szemlélhetsz.

Vagyis a grafika különböző médiumon keresztül jut el a végfelhasználókhoz.

Nyomtatott formában a kész terméknek lehetnek egyéb fizikai tulajdonságai, amik fokozhatják annak minőségét és a felhasználókra gyakorolt hatását. Ilyen például a papír alakja, borítása, textúrája, illata stb. Ezek olyan tulajdonságok, melyeket nem lehet reprodukálni digitális formában.

A digitális tartalmaknak is megvannak a saját egyedi tulajdonságai, melyek nem létezhetnek nyomtatott formában, pl: animált illusztrációk, videók, sliderek, hivatkozások, egyéb interaktív lehetőségek.

Statikus, vagy Interaktív

Miután egy brossúrát, vagy egy plakátot kinyomtatnak, az többé nem fog változni, maximum újranyomtatni lehet. A webdesign azonban teljesen átalakítható, attól függően, hogy hol és hogyan kerül megjelenítésre. Ez azt jelenti, hogy ugyanaz a weboldal lehet egy kicsit (vagy nagyon) eltérő egy másik eszközön.

Ezért weboldal tervezéskor figyelembe kell venni azt, hogy a grafika rugalmas és könnyen változtatható, bővíthető legyen.

Az interaktivitás nemcsak látványos, de hozzáadott értéket ad a megjelenésnek, fokozza a vizuális élményt és segít a marketing üzenet közvetítésében.

A tartalom elrendezése, tördelés

Printnél az elrendezéseket egy fix méretre tervezzük, amit a nyomtatási felület határoz meg. Bár vannak szabványos papírméretek (pl: A széria) gyakorlatilag korlátlan lehetőségünk van, bármilyen méretű, vagy alakú nyomtatási felületet ki lehet vágni.

Az, hogy mekkora méretben dolgozunk függ a felhasználástól és egyéb paraméterektől is például ár, felbontás, papír minőség.

Ebből következik, hogy az információt egy korlátozott nyomtatási felületen kell bemutatni.
Hatékonyan kell kitölteni a rendelkezésre álló teret és ügyelni kell az elemek térbeli kapcsolatára.

A weben szinte korlátlan rugalmasságot élvezünk, nincs fix méret. Bármikor hozzá lehet adni egy plusz sort, vagy egy külön aloldalt a weboldalhoz.

Nyomtatásban és a weben is ugyanaz a cél: a formák, színek, képek és a szöveges tartalom között harmónia és megfelelő tagolás legyen.

Marketing szempontok

A nyomtatott anyagokkal legtöbbször csak megpróbáljuk felkelteni a célközönség figyelmét. Ez a lényege a szórólapnak, a névjegykártyának, a termék csomagolásnak is. Miután közönség már figyel, és el jutott hozzá a marketing üzenet, rá kell venni őket a cselekvésre. Hívj fel; Gyere be a boltba; Vedd meg a terméket.

Mindezeket viszonylag kevés információval kell megoldani, hiszen a papír méret véges, nem tudunk kitenni a sorok végére egy “bővebben” linket.

Egy weboldalba végtelen információ belefér (lásd: Facebook). Csak a design és az UX diktálja, hogy mennyi látszódjon egyszerre. Sokkal több lehetőségünk van tagolni, rendszerezni az információt, mint egy nyomtatott felületen.
Ezen kívül mivel egy interaktív felületről van szó, az online marketing teljes fegyvertárát bevethetjük.

Nem szabad elfelejteni azt sem, hogy míg a nyomtatványok általában egyszer gyakorolnak hatást a közönségre, addig a weboldalra a közönség rendszeresen visszajár.

Felbontás

A megjelenítési felbontást DPI-ban mérjük. Minél nagyobb egy kép DPI-a, annál jobb minőségű, tisztább, élesebb lesz. A két bűvös szám a 72 és a 300.

Printhez minimum 300 DPI-os képekkel kell dolgozunk. Alacsony DPI-os képet nem érdemes felhasználni nyomtatásban mert pixeles, elmosódott, torz lesz a grafika. A telefonos fényképminőség természetesen nem elegendő egy igényes nyomtatott anyaghoz.

A digitális kijelzőkön általában 72 DPI-vel dolgozunk, viszont a retina kijelzőkön a 72 DPI-os képek homályossá válhatnak. Ezekhez az eszközökhöz dupla, vagy tripla felbontású, retina változatú képeket ajánlott használni.

Webes használathoz le kell kicsinyíteni a kép fizikai méret (KB-ban) amennyire csak lehet, mégpedig úgy, hogy közben a minőség ne romoljon.

Tegyük fel, hogy a weboldal elkészülte után pár hónappal a tulajdonos kitalálja, hogy szeretne egy print anyagot és használjuk ugyanazokat a képeket, mint weben. Ilyenkor sajnos jön a hideg zuhany, hogy a webes képek nem elég magas felbontásúak a nyomtatáshoz.

Ezért printhez és webhez is a nagy felbontású és magas minőségű képek használatára törekedjünk.

Raszteres és vektoros fájltípusok

A rasztergrafika, vagy pixelgrafika olyan digitális kép, amelyen minden egyes képpont (pixel) önállóan van definiálva. Mint egy mozaik kockái. Felbontása rögzített, a minőség a méret függvényében változik.

Vektoros grafikáknál csomópontokkal és a csomópontok közt húzott görbékkel határozunk meg egy-egy területet. Mivel a képek nem képpontokból állnak, így minőségromlás nélkül nagyíthatók / kicsinyíthetőek, a végeredmény minősége csak a képmegjelenítő eszköztől függ.

Nyomtatott és webes felhasználást tekintve is a legjobb megoldás a vektoros formátum. Nyomtatásban bármekkora felületre nyomtathatunk. Weben pedig csökkenthetünk a betöltési időn, ha az ikonokhoz, illusztrációkhoz SVG formátumot használunk.

CMYK, RGB és Pantone színtér

A színes kijelzőkön és a nyomtatott papíron a színeket különböző módon állítják elő.

A kijelzők 3 csatornás (RGB) színes fényből keverik ki a színt. Az összegzett szín, amit a képernyőn látunk, a 3 alapszín részarányától függ.

A nyomtatás során a 4 alapszín egymás után kerül a papírra és együttesen adják vissza a kívánt színt.

szinterek

A nyomdai grafika színei aránylag jól leképezhetőek RGB színekre, viszont fordítva nem. RGB skálával sokkal több színt elő tudunk állítani, mint CMYK-val, ezért nem lehet tökéletesen leképezni ugyanazt a színárnyalatot papíron, mint amit a monitoron látunk. Ezért van az, hogy a honlapokra és egyéb webes felületekre tervezett színvilág a nyomtatott kiadványokban gyakran más árnyalattal jelenik meg.

A CMYK színskála technológiailag az RGB részhalmazának tekinthető. Ezért nagyon gondos színbeállítást igényel a nyomdai grafikai anyagok készítése.

A legjobb megoldás, ha az arculat, vagy a projekt színeinek kiválasztásakor Pantone skálát használunk. A Pantone színeknek saját hivatkozási száma van, nem négy színből kevert színek, hanem külön színként nyomják.

Érzékelés

A nyomtatott grafikát többnyire nappali fényben látjuk, így nem okoz különösebb gondot, az élénk színek, vagy magasabb kontrasztok befogadása.

A webes grafikát viszont kijelzőkön nézzük, amin háttér világítás van, konkrétan folyamatosan egy fényforrásba nézünk. Ez pedig jobban fárasztja a szemet, mint egy kinyomtatott papír. Nem szerencsés a túl alacsony, vagy a túl nagy kontraszt, valamint a neonos színek sem.

Betűtípusok

Webre és printre különböző formátumú betűket használunk.

A desktop változatot úgy tervezték, hogy a számítógépre feltelepítve használható legyen különböző alkalmazásokban, pl.: MS Word, vagy Photoshop.

A webfont változatot pedig kifejezetten webes felhasználásra tervezték, amit CSS-el tudunk betölteni, az adott weboldalba. A garantált böngésző- és eszközfüggetlen megjelenéshez négyféle formátumban kell a betűt betölteni a weboldalba: TrueType, WOFF, EOT, és SVG fájlként.

Az olvasási sebesség papíron és képernyőn eltér, ezért a betűtípusok kiválasztásánál különösen figyelni kell az olvashatóságra.

Tanulság

Az általános tervezési elveket mindkét területen alkalmazni kell, de a médiumok sajátosságait, tulajdonságait szem előtt tartva!
Nem szabad elfelejteni, hogy a nyomtatott kiadvány egy kész termék, a weboldal pedig egy interaktív felhasználói felület, ahol rendkívül fontos a használhatóság.

Ne lepődjön meg senki azon, ha egy webdesigner túl puritán csomagolást tervez. És azon sem, ha egy printestől programozhatatlan terveket kap. Sok print designer hajlamos azt gondolni, hogy a weboldal egy online változata a nyomtatott szórólapnak, vagy termék katalógusnak.

Egy jó céges megjelenéshez természetesen szükség van minőségi online és offline anyagokra is, ami akkor a legjobb, ha az arculat mindenhol egységes és következetes, a médium sajátosságainak figyelembe vételével.

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.