Hogyan tervezzünk könyv-
borítót?
Szerző: Szép Csaba

Tipográfiai alapszabályok, kommunikációs elvek, design flow és ami még jön. A következőkben egy web design könyvnek a borítótervéről lesz szó. Egy rövid áttekintést akarok adni arról, hogyan is jön létre egy ilyen design termék.

nagy bemutató kép
Tipográfiai alapszabályok, kommunikációs elvek, design flow és ami még jön. A következőkben egy web design könyvnek a borítótervéről lesz szó. Egy rövid áttekintést akarok adni arról, hogyan is jön létre egy ilyen design termék.

Van egy projekt feladat! Legyen a megbízó akár igazi business client vagy tanárod, barátod, saját magad, haverod munkatársa vagy kiskutyád édes mindegy. Ha nem vagy egy hanyag, lusta, saját munkádra is igénytelen valaki, akkor úgyis a legjobb tudásod szerint akarod megcsinálni.

"Tervezz egy borítót ennek a könyvnek!" - mondja az ügyfél. Szerencsés esetben, mélyen áttudjátok beszélni a részleteket, hogy milyen egyéb kritériumoknak kellene megfelelni. Én mondjuk azt szeretem a legjobban ha szabadon rám van bízva, és én vezethetem rá az ügyfelet is arra, hogy mi a legjobb irány...persze ennek általában az eredménye az, hogy amikor kész vagyok egy fázissal akkor jön, hogy "Ezt lehetne így, meg úgy megpróbálni?" vagy "Esetleg itt ez a szín , vagy ott egy másik betűtípus?" Na, de nem kell félre érteni! Nem a mindenkori megbízóval van bajom. Természetes, hogy egy megrendelő is a legjobbat akarja, csak úgy, mint én. Azt vettem észre, hogy a megbízó, ha igazán érdekelt a végeredményben, akkor valahogyan neki is végig kell jutnia a design flow-n, akkor lesz nyugodt, ha nála is meg vannak azok a felismerések, ami a designernél...persze ez nagyon megnehezíti a gyors előrehaladást, mert ő nem napi 8-10 órát dolgozik a projekten, hanem 5 perc után alkot véleményt. Nincs ezzel mit tenni. A lényeg, hogy elégedett legyen.

Ennél a projektnél nem lehetett semmilyen képet használni, így tehát fontok, színek, és esetleg egyszerű alakzatok, illusztráció maradt a design eszköztáramban.

1. lépés: Mi az ami adott? Miből dolgozok? Meg kell érteni a terméket!

Patrick Th. Duncan (author)
Responsive Web Design (title)
The Mobile First Paradigm (subtitle)
Google Press (publisher)
Third edition

Egyrészt megvannak azok a tényszerű adatok egy könyv esetében, amiknek mindenkép meg kell jelenniük egy borítón. Ami viszont nincs megadva és nagyon fontos, hogy tudjuk miről szól a könyv, mi a tartalom, a téma, a terület. Ebben az esetben egyszerű hiszen nekem ez szakmai könyv, nekem nem kell bemutatni a 'mobile first' paradigmát, sem a responsive web design-t úgy általában. Patrick Th. Duncan-t bemutathatnák vele még nem találkoztam, de amúgy rendben vagyok az adatokkal.

2. lépes: Ki az akinek készül a design?

Igen megint a célcsoport. Megmondom őszintén néha baromi unalmas újból és újból ezt a csontot körberágni. Nagyon fontos hanem a legfontosabb téma és valószínüleg ha nem napi szinten ezzel foglalkoznék nem zavarna. Tehát a célcsoport, egy ilyen könyv esetében inkább szakmai, mint sem tömeg, nem igen lesz olyan olvasó/vásárló, aki még sosem hallott a responsive web designról és ezt a könyvet fogja olvasni...ugyanis aki a responsive web design felől érdeklődik az már már kicsit is benne van a szakmában és aki meg a "mobile first" paradigmára csorgatja a nyálát az meg még inkább nem lehet elsőző ezen a területen. Ezek a persona-k pedig (jujj még egy "nagyon fancy" szakszó) tisztában vannak a web design szakma jellemző jegyeivel. Ez fogja azt eredményezni, hogy a tervezés során inkább használhatok redundáns információt. (Erről a redundancy-entropy elméletről majd írok kicsit többet valamikor.)

Most annyit elég tudni, hogy egy design termékben mindennek, amit használunk kommunikációs értéke van. Ha egy design elem csak a szépségéért van jelen a termékben, akkor az egy szar design...vagy művészetnek is nevezhetjük :). Ez már más téma, de a design az nem művészet...ha a designban valami szép, de nincs funkciója, akkor az felesleges és ettől a design csak veszít az értékéből...mindeközben a művészetben ezek egészen máshogy, sokkal szubjektívebb megítélés alá esnek. Sose keverjük a kettőt! Vannak művészi szépségű design termékek, de nem ez az elsődleges.

3. lépés: Hogyan vizualizáljam az üzenetet?

Tehát a célcsoport szakmaisága lehetővé teszi, hogy redundáns információt használjak. Redundáns az üzenet akkor, ha az információ amit hordoz kiszámítható és konvencionális. (Fiske 2002) Ne, ne olvasd vissza háromszor. Itt a példa. A borítón az illusztráció egy egyszerű négyzetrács, amire vonalak nyilak meg számok vannak rajzolva. Na most ez az információ redundáns, mert még a laikus is leveszi, hogy itt valami tervezésről lesz szó, de mivel a célcsoport szakmai, nekik meg aztán rögtön leesik, hogy ez egy grid rendszer, ami köztudottan használatos a responsive webes felületek tervezéséhez, valamint a nyílak pixel méretek még egy lapáttal ráerőssítenek az asszociációra. Ráadásul én még ezt tovább is vittem egy fokkal mindjárt szó lesz róla.

web design könyv mockup

A tipográfia ugyanolyan design elem, mint az illusztráció. Sőt, az egyik legfontosabb féle. Egyszerre van funkciója, esztétikai, szemantikai és szimbolikus értéke is. A funkciója mindenkor az, hogy vezessük az olvasó figyelmét. A szimbolikusat emelném még ki, a maradék kettő egyértelmű. A választott betűtípus és használatuk további másodlagos jelentést hordozhat. A példánál maradva egy talpatlan, 'sans-serif' fontot választottam, aminek ráadásul nagyon sok stílusa van. (Stílus = kicsit dőlt, nagyon dölt, félkövér, kicsit félkövér, nagyon félkövér, stb.) Minél több stílusa van egy fontnak annál jobban tudom strukturálni a szöveget mégis megtartva az egységességet. Emellett, még rengeteg dologgal lehet játszani a tipográfia kapcsán, csak a projektre redukálva ezek bemutatását: van itt félkövér nagybetűs, dőlt kapitális, kapitális extra betűközzel.

Milyen többlet jelentést hordoz a választott font?
A talpatlan betűtípusok leginkább a weben használatosak, vagyis itt kifejezetten előtérbe kerülnek, hiszen temérdek mennyiségű tartalom van és ezt el kell bírni olvasni és ehhez a talpatlan betűtípusok a legjobbak. Ez egy könyv borítója, ami azt jelenti, hogy választhattam volna valamilyen díszesebb betűtípust is, hiszen nem hosszú tartalomról van szó, ahol az olvashatóság elve nem feltétlen elsődleges, viszont pontosan ezzel adtam még egy plusz jelentést a borítónak, hogy a használt betűtípusom pont a díszítetlen talpatlansága okán is kifejezi azt, hogy ez egy szakmai webdesign könyv.

közeli bemutató kép

Van itt még egy alapelv vagyis négy egész pontosan: CRAP (Contrast, Repetition, Alignment, Proximity). Ezek közül nekünk most három aktuális. Azzal, hogy kék hátteren a responsive szót még elláttam egy kis belső árnyékkal is, így egyszerre kapott besüllyesztett térhatást és erősebb kontrasztot is. Kontrasztosság elve ugyanúgy érvényes a piros téglalapban lévő alcímre illetve a borító alsó és felső részét elválasztó térhatású átlós árnyékra. Ezek mind irányítják a figyelmet megszabják úgymond az észlelési sorrendet a szemlélőnek. A főcím két sora balra zárt, míg az alcím, kiadó, kiadás és író neve jobra zártak, itt az alignment elv érvényesül. Ez a strukturáltságot segíti elő. A harmadik pedig a 'proximty' (közelség elve, ezt le lehet fordítani). Az író neve, a főcím, az alcím, illetve a kiadásra vonatkozó adatok is külön egymástól kicsit távolabb helyezkednek el. Talán egy kis 'repetition' is van a kiadásra vonatkozó adatoknál.

4. lépés: Kell-e tesztelni egy könyv borító tervet?

Naná, hogy kell. Hiszen Te, mint alkotó/tervező óra hosszákat töltesz a munka előtt és a szemed fedetté válik. Szükség van érintetlen szemekre, akik azt is látják, amit te már/épp nem. És az, hogy egy "hideg kéz" hibát talál a terveden, az nem jelenti azt, hogy ő képes lett volna egy ugyanolyan minőségi designt produkálni. Tanács: sose mutasd meg munkád másnak egy egész napos fárasztó tervezés után. Tuti, hogy ideges leszel az illetőre, bármilyen építő kritikát is kapsz. Majd ha kipihent vagy és te is készen állsz a módosításokra.

Ha észre vettétek a színekről eddig nem esett szó. Az oka végtelenül egyszerű. A tesztelés során kiderült, hogy a színvilág elég fakó lett, nem volt elég élénk. Ami nem jó. Ugyanis ez diszharmónia. A responsive webdesign, a mobile first paradigma, nem új jelenség az IT világban, de semmikép sem tekinthető idejét múltnak. Tehát egy fakó, élettelen színvilág éppen nem harmonizál ezzel a modern, dinamikus, élénk területtel. A jobb oldalon látható milyen volt a véglegesítés előtti verzió.

régi új összehasonlítva

Az irány megmaradt, piros és kék, lévén alapszínek, egyaránt domináns színek, ami jó nekünk. Viszont javítani kellett a élénkségen, mélységen. Kapott még a felső háttér egy finom gradiens átmenetet. Gradienseket használni jó technika, ha modernebb designt akarunk kapni, persze érzékenyen kell bánni a csúszkával...A módosított verzió összképében is sokkal kontrasztosabb lett, így talán már a modern érzet is meg van.

5. lépés: Egy kis extra kreativitás!

Említettem, hogy a grid rendszeres illusztrációm kapcsán még valami rejtve maradt. Még pedig az, hogy a borító megtervezéséhez, ténylegesen alkalmaztam azt a grid rendszert, amit megjelenítettem illusztrációként. És azok a rajzon feltüntetett oszlop szélességek 162, 224, 348, és 720 pixel, ténylegesen használt szélességei minden elemnek a borítón. Például a borítóból felhasznált aktív munkaterület arányos a 720pixeles szélességgel, vagy az alcím piros téglalapja tényleg 348pixeles szélességgel rendelkezik. Ráadásul ez a grid rendszer egy tabletre optimalizált grid, tehát arra érdemes tervezni vele. A tablet pedig a legközelebb áll egy A5 méretű könyv fizikális méreteihez. Na ennyit erről. Ha tetszett, like, oszd meg, kövess és iratkozz fel.

1. Fiske, John (2002): Introduction to Communication Studies

small pic of writer
Szép Csaba vagyok

Ennek a cikknek és blognak az írója. Valamint aktív webdesigner. Minden írás a sajátom. Ha tetszett amit olvastál oszd meg, ha pedig munkát ajánlanál, írj egy emailt és mindenképp kövess be az alábbi platformokon is, hogy le ne maradj munkáimról és írásaimról.