Webdesign

Úgy döntöttem, a Tanácsaim mellé nem csak az írásról, hanem a blog kinézetéről és funkcióiról is szólok pár jó szót. Leginkább azért, hogy a sok kis kezdő bloggernek legyen némi információforrása arról, hogy kell szép blogot csinálni. (Ha már a sok ingyenesregisztrálós-weboldalszerkesztős programmal teletömött net miatt nincs már akkora kereslet webprogramozókra, ezáltal nincs munkám, legalább az ne tépje szét az idegeimet, hogy sorra olyan blogokkal találkozom mindenfelé, amelyek normálisan néznének ki, ha webprogramozó készítette volna... :/ )

Szóval egy weboldal tervezése, designolása is kőkemény tudásra épül, a magamfajta nem csak leprogramozza a háttérfunkciókat, hanem olyan kinézetet szerkeszt, ami kellemes a szemnek, és amit szívesen olvasnak! Példaképp pedig itt az én blogom! :) Nézzük hát akkor a fontos dolgokat:

Ingerek


Tudom, hogy manapság az a menő és "dizis" (fú, de utálom ezt a szót!) és totál állat blog/weboldal, ami tele van ingerekkel, mert fú de menő, meg minden, de hacsak nem az osztályod egynegyedét szánod max. olvasóidnak, akik közül mindenki minél több ingert kér az oldaladra, hanem szeretnéd mindezt sok-sok (több száz, több ezer!) embernek megmutatni, akkor az ingerek mennyiségét csökkentsd le!
Mi az az inger? Hát.. lényegében bármi, ami figyelemfelkelt, ami információ. Az is ingernek számít, hogy mennyi menüpont, írás, reklám, egyéb jelenik meg a főoldaladon, amikor megnyitják az oldalt (nézz meg pl. néhány online újságot, amikor a főoldalra húszezer cikket és címszót tesznek be, na, az hatalmas információáradat, és rengeteg inger!) Ingernek számít a színek kavalkádja is, és BÁRMI, AMI MOZOG! Vagyis a kis villogó-csillogó-izgő-mozgó gif képek! A zenét pedig ne felejtsük ki! Az is ugyanúgy inger.
Egy weboldal tekintetében is él a szabály, miszerint a kevesebb sokszor több! Ha sok ingert teszel az oldalra, az megosztja a figyelmet! Vagyis, ha az előbb felsoroltak mindegyikét egyszerre teszed fel, az alábbival találkozik egy vadonatúj olvasód:
  1. Rengeteg információt talál az oldalon, ami összezavarhatja. Nem tudja, hogy merre nézzen hirtelen, mivel kezdje, esetleg meg sem találja azt, amit valójában keres. Persze, ha rögtön a blog első bejegyzése kerül a címoldalra, és elkezdhetne olvasni, a sok menüpont, hirdetés, ilyenkiskiírás-olyankiskiírás továbbra is elvonhatja a figyelmét a lényegről.
  2. A sok, főleg élénk szín a szemnek sem tesz jót, és szintén figyelmet terelhet el. A legjobb egy harmonikus, 3-4 színből álló, kellemes összeállítás, szigorúan figyelve az olvashatóságra. Ha ugyanis a betűszín és a háttérszín egybeolvad, kisül az olvasód szeme, mire kiböngészi a tartalmat, és nem hinném, hogy bárki bevállalna 4-5 dioptriával erősebb szemüveget a te ízléstelen és figyelmetlen színösszeállításod miatt.
  3. Ha csak villog egy kis piros pötty a sarokban, már az is odavonzza a tekintetet. Márpedig nehéz úgy olvasni valamit, hogy a periférián valami villog, mocorog, mert automatikusan odanéz az ember, aztán keresheti, hogy mi az, amit olvasott épp. Ha ÍRSZ, akkor a legjobb, amit tehetsz, hogy minden design-elemmel az OLVASÁST támogatod, vagyis megkönnyíted az olvasóidnak a szövegre koncentrálást.
  4. Amellett, hogy sok az információ, minden izeg-mozog, ráadásul sok-sok élénk színben vibrálva, még bejön valami tuc-tuc zene is, ami esetleg még csak nem is az olvasó ízlése, + épp hallgatott valami más, kellemes, lágy, olvasáshoz épp jó zenét, vagy a blogod megnyitásakor pl. skype-on telefonált valakivel, akkor az őrületbe fogja kergetni a zenéd. Pláne, ha nem találja a kikapcsolás gombot, mert azt úgy elrejtetted, hogy neked logikus, de másnak nem feltétlenül. 
Összességében: Egy "jól" megszerkesztet bloggal azonnal az őrületbe lehet kergetni valakit, vagy legalábbis azt elérni, hogy mielőtt egy betűbe beleolvasna a tartalomból, meglátva a design-t, meghallva a zenét, amit nem tud kikapcsolni, azonnal a jobb felső sarokban lévő kis X-re kattintson, és soha többé meg se próbálja behozni az oldalad. Ezzel pedig rengeteg olvasót veszíthetsz. Főleg a komolyabbakat. Úgyhogy, ha a sok olvasó a célod, akkor ezekre kínosan ügyelj. Ha nem, akkor nem muszáj tovább olvasni ezt a cikket, ha nem értesz egyet a fentebb leírtakkal. ;) De vegyük sorra lépésről lépésre a dolgot!

Sablonválasztás


Ezeken az oldalakon vannak ugyebár sablonok. Ez teljesen rád van bízva, miképp alakítod ki. A különbségeket megvizsgálhatod szépen, a lényeg ugyebár az, hogy a sablon milyen funkciókkal rendelkezik. Számoljunk az alapvetőekkel: Fejléc, lábléc, felső menü, és egy oldalsó menü, ez utóbbi vagy balra, vagy jobbra. Ez csak kedv kérdése. Nem érdemes két oldalsó menüt csinálni, mert csak elveszi a helyet az írásodtól, szűkíti a tartalmi sávot, és az nem a legjobb döntés. Pláne, ha két oldalról keretezed vele az írást.
Persze, érdemes olyan sablont kinézni, aminek a színvilága megfelel, vagy legalábbis keveset kell módosítanod rajta, bár igazából ezeken már minden változtatható, úgyhogy egy adott sablont gyökeresen át is írhatsz. Persze, ahhoz már nem árt némi gyakorlat, sablont viszont bármikor választhatsz a blogodnak.

Összhatás


Ez a legfontosabb. Elsősorban mindig azt vedd figyelembe, hogy az oldalad első ránézésre, összességében milyen. Nem kell minden ingert mindenhonnan kiszűrni, hisz nem jó az sem, ha puritán és minimalista az oldalad, mert az olyan sótlan lesz, szóval ne ess át a ló túloldalára sem, tartsd meg az egyensúlyt. Ha egy látványos fejlécképet választasz, az pl. már jó kezdés, ám figyelj rá, hogy a háttérképpel ne ütközzön, és a weboldal többi színe is jól menjen hozzá. Érdemes max. néhány képet használni az oldaladon, ezzel sem növelve tovább az ingerek számát feleslegesen, így nem kell mást mellőznöd az oldaladról az összhatás érdekében!

Színvilág


Ez már komolyabb, "tudományosabb" részleg, de egy jó ízléssel könnyedén kialakíthatod az oldalad színvilágát. Ajánlott a témához választani a színeket elsősorban, s lehetőleg lágy, pasztelles színekkel dolgozni.
Az én weboldalamnál persze, nem épp a pasztell színek a jellemzőek, ám összesen én is 4 színnel dolgozok. A választásom egy fekete-rózsaszín háttérképre esett, mivel a főszereplő lány inkább a darkos irányvonalat képviseli, és ebbe a sötét életébe hirtelen bekerült a rózsaszín, mivel az új iskolában ilyen színű, habos-babos-masnis-fodros egyenruhát kell hordania az iskolában. Bár ez a két szín eléggé ellentétes, a fekete sötét, a rózsaszín pedig rikítóan élénk, ez csupán a háttérkép.
Mivel az olvasáshoz sem a fekete-fehér, sem a fekete-rózsaszín nem való, ezért a sablon felajánlott színvilágát követve, a tartalom háttérszínének egy kellemes sötétszürkét választottam, míg a betűk világosszürkék, így jól elkülönülnek egymástól, és nem vibrálnak olvasás közben, nem érzem azt, hogy kisül a szemem.
Másik példának egy általam olvasott blogot hoznék fel: Szerelem Örökké. A képeket leszámítva 4 különböző színt látok rajta, amik jól illenek egymáshoz, és a háttérképhez is. A tartalom háttere kellemes, pasztelles sárga, amin sötét, de nem fekete betűket láthattok. Trükkösen, a menünél ez fordítva van, sötét (némileg áttetsző) háttérre kerültek rá a világos sárga betűk, ami szintén jól olvasható. Még a blog mottója is, amely a háttérképre lett ráírva, jól elkülönül az egyébként mintás háttértől, a menü és oldalcímek feliratainak háttere pedig olyan színt kapott, ami megtalálható a háttérképben. 1-2 reklám, amit ugyebár nem igazán lehet kiszedni egy ingyenes oldalról, és 1-2 kép tűnik fel egyszerre, amikor az oldalt megnyitod, a menü pedig nem tartalmaz hosszú sorokat. Jól összeállított design.

Háttérkép


Rengeteg múlik a sablonon, ezért érdemes jól megválasztani. Amire mindenképp figyelj:
  1. Ne váljon tőle olvashatatlanná a tartalom. Vagyis, ha a tartalomnak nincs külön egyszínű háttere, ami elfedi a blog teljes háttérképét, akkor kerüld az éles kontrasztokat. Ha mindenképp szeretnéd, hogy a szöveg mögött is látszódjon maga a kép, akkor érdemes egy egyszínű, kicsit (kb. 10%-ban) áttetsző felületet tenni oda, ez kellően kivilágosítja vagy besötétíti a hátteret (mint a Szerelem Örökké menüje). Ám az éles vonalakra még így is jobb vigyázni, ezért egy rajz pl. nem feltétlenül jó választás háttérképnek. 
  2. Kerüld az ismétlődő hátteret! Többféle mód is létezik arra, hogy a háttered szép és egységes legyen.
    1. Az első az, amit nálam és az előbb említett blogon is láthatsz: a kép lassan átmegy egy egységes színbe (nálam fekete, a másik oldalon bordó), és lefelé görgetve csak ez a szín marad meg.
    2. Egy másik módszer a tapéta, vagy csempe típusú háttérkép. Az olyan képet nevezem annak, amely a két szélén "összeolvad", vagyis, ha sorba rakod ezt a képet valamilyen irányban, akkor visszatér önmagába, és egységes képnek néz ki, amely időnként ismétlődik. Ezzel tetszőleges szélességű/hosszúságú oldalt "kicsempézhetsz".
    3. Egy bonyolultabban megvalósítható lehetőség pedig a rögzített háttérkép. Ez azt jelenti, hogy ha a weboldaladat legörgetik, a háttérkép akkor sem mozdul meg, csak az, ami fölötte van. Ideális megoldás arra az esetre, ha kellően nagy méretű háttérképpel rendelkezel, ami egy nagy felbontású monitort is kitölt szépen, de nem folyik át egy adott színbe, vagy épp azt szeretnéd, ha az oldalad alján is a kép látszana, és nem csak egy szín.
    Az, ha a háttér éles csíkokkal ismétli magát, mert valamilyen kis méretű képpel tapétáztad ki, amely nem folyik vissza önmagába, roppant zavaró lehet bárkinek.
     

Betűtípus


Ez még egy roppant fontos része a weboldalnak, ugyanis, két probléma szokott ezáltal felmerülni.
  1. A betűtípus nehezen olvasható, csiricsáré-díszített az egész szövegre! Ezzel gondolom, egyértelmű, mi a probléma: olvashatatlan. Ahogy fent már írtam, a célja a designnak az legyen, hogy könnyítse az olvasást, elvégre olvasókat akarsz szerezni magadnak. Ha olyan betűtípust választasz, amelyet úgy kell kisilabizálni, hogy egy-egy "jel" milyen betűt takar, az teljesen olvashatatlanná teszi a szövegedet.
  2. Könnyen olvasható a betűtípus, de nem ismeri az Ő és Ű betűket. Ennél hiába szép a betűtípus, és hiába tudod olvasni is, ha jön valami elütŐ betŰ, amit a böngésző csak az alapbetűtípusokkal (pl. Arial, Times new roman, stb.) jelenít meg. Illúzióromboló. Ezért érdemes figyelni rá, hogy ezen betűtípusoktól ne üssön el túlzottan a két fent említett betű, hogy ne bökje ki az emberek szemét a hiba.
    Persze, címeknél, címszavaknál meg lehet oldani apró trükkökkel a dolgot. Pl. az én blogom fejezetcímei is szép díszes betűkkel jelennek meg, amely nem tudja a kezelni az ő/ű problémát, ezért az egyik címnél ("Szokatlan belépő") lényegében a hosszú ő helyett egy rövid ö került be (vagyis gyakorlatilag "szokatlan belépö" a cím). Nem tűnik fel igazán, ha az ember épp csak ránéz, és az agy automatikusan jól olvassa. Ám ez nem feltétlenül jó megoldás arra, hogy egy egész szöveget megírj vele, mert hosszú távon már nem csak észrevehető, hanem zavaró is... Ám sajnos, a magyar nyelv ékezetei ezzel járnak.

Betűméret

Majdnem kifelejtettem az egyik legfontosabbat: a betűméretet. Ezt neked kell egyénileg megtalálni, ám érdemes más, jól megszerkesztett oldalakat alapul venni. Ha ugyanis a betűméret túl kicsi, olvashatatlan lesz az írás, ha viszont túl nagy, az olyan... gáz. A betűméretet írás közben ne változtasd, ne próbálj meg eltérő betűmérettel kiemelni egy szövegrészt sem! Az ugyanis arra emlékeztet, amikor valaki hirdeti, hogy milyen jó fogyitabit talált, ami hú de hatásos, és azonnal lefogyott vele, és még ma próbáld ki, meg a többi zagyvaság. Egyszerűen... semmi profizmus nincs benne, és taszító.  A teljes betűméret túl nagyra vétele is hasonló hatást érhet el. Az ideális többnyire 12-14 képpontnyi, az ennél kisebb olvashatatlan, a nagyobb pedig zavaró a tartalomra nézve. Az alcímeket viszont mindenképp vedd kicsit nagyobbra, akár félkövérre, hisz a címeket-alcímeket illik kiemelni. Erre a legtöbb szerkesztőben van egy legördülő menü, nálam, a bloggeren a "normál, cím, alcím, másodalcím" listából válogathatok. A normál a tartalom, míg a többinél csökkenő sorrend van, vagyis a cím a legnagyobb, a másodalcím a legkisebb, de még mindig nagyobb, mint a normál.

Szöveg színezése


Ha egy mód van rá: NE csináld. Egyrészt, mert a kiválasztott sablonodon és színein nem mindegyik szín mutat jól és lesz olvasható, másrészt, ugyanúgy a gáz fogyitabis hirdetős oldalt idézi a szöveg mindenféle színekben pompáztatása. Egy blog engem inkább egy történetre, online írt folytatásos "regényre" emlékeztet, ezért is javaslom minden tekintetben a regénystílus megtartását. Ha tényleg jó sztorit akarsz írni, akkor a követelmények a blogoddal szemben a nyomtatott könyvhöz igazodnak, ahol az írás egyszínű, ahol nem zárójelekkel jelzik a cselekvéseket, és ahol az általam javasolt íráskép is szerepel. És ahol képet legfeljebb a könyv borítóján látsz. Épp ezért, maradj meg az egységes színeknél!

Képek


Ez is egy fontos része a blognak, bár ez egyszerre fér el a webdesign és tanácsaim részlegen, a másikba is beiktatom majd valahová.
Ahogy a színezésnél is írtam: egy könyvben legfeljebb a borítón vannak képek. Szép és jó, hogy szeretnéd némi illusztrációval tarkítani a történetedet, és 1-2 alkalommal el is fér, csak arra kérlek, ne legyen erőltetett! Néha megesik, hogy valami pillanatot, jelenetet csak azért írsz be, hogy a kép jól illeszkedjen a sztorihoz, és bár ezt sokan nem veszik észre, nekem feltűnik, és engem zavarni is szokott néha. Pedig egy blogon, egy írásban ne a kép legyen a lényeg, hanem a leírásod. Próbáld meg saját szavaiddal megmutatni, milyen ruhát vett fel a karaktered, írj érzékletes leírást, és érd el, hogy az olvasóid elképzeljék azt, amit te kép formájában betennél. Használd a képet ihletre nyugodtan, de kerüld a túl sok illusztrációt. Ettől még 1-2 elfér, csak tartsd meg az egyensúlyt.

Mozgás kiiktatása


Lehetőleg kerülj bármit, ami mozog. Gifek, villogó pöttyök, vagy csak egy fade in-fade out megjelenítés bármire abszolúte kerülendő. Lehet, hogy szerinted cukcsi meg jaj de csilivili, de még az is bezavarhatja az olvasást, ha a fejlécképen szereplő póninak csillog a haja. Sőt, egyetlen pici pöttyöcske is zavarhat, egyetlen apró kacsintás, vagy mozdulat. És az őrületbe tudja kergetni az értelmesebb olvasókat.
A reklámoknál sajnos, ez elkerülhetetlen, leginkább azért, mert a reklám célja pont a figyelemfelkeltés. Tesz rá, hogy mit olvasol, vagy téged zavar, hogy állandóan magához vonzza a tekinteteket, elvégre ha nézed, és ha elolvasod a folyton megjelenő szövegeket, akkor elérte a célját: eljut hozzád a reklám információja. Úgyhogy a reklámozásnak sajnos, van egy ilyen hátránya. Épp ezért, ha vannak reklámok az oldaladon, amik gyakran izegnek-mozognak, a jó elhelyezés mellett azzal is segítesz, ha semmi más mocorgást nem teszel az oldaladra. Pláne nem háttérképnek, vagy menüre.

Bármiféle változást vagy mozgást csakis felhasználói cselekvésre tegyél be. Vagyis, ha a menü fölé viszem az egeret, akkor a menüpont (de csakis az adott menüpont!) megmozdulhat. Elvégre.. épp arra figyelek. Válthat színt, hogy lássam, hogy arra akarok kattintani, fel is villanhat, csinálhat bármit, de csak az egérre reagálva. Amikor olvasok, akkor semmi, semmi ne kezdjen el meglepetésszerűen mozogni, mert abból legfeljebb anyázás és kis X lehet, és nem érdekel, milyen jól írsz. Sőt, megmondom őszintén, aki ír annyira jól, hogy az írása miatt vállaljam a villogással való küzdelmet, az nem fog villogást tenni az oldalára, mert már rég megértette annak zavaró mivoltát. :)

Zene


Mostanság nagy divat, hogy zenelejátszót építenek a blogba. A véleményem erről az, hogy ne tedd, ha van egy kis eszed, és a 10 fős baráti társaságodon kívül, akik szerint tök menő, hogy olvasás közben Lady Gagát hallgathatnak, más olvasókat is szeretnél látni az oldaladon. Ha mégis ragaszkodsz a zenéhez, akkor az alábbiakat viszont kőkeményen tartsd be:
  1. Ne legyen szövege! A legjobb az, ha sem angol, sem magyar, sem más szövege nem lesz. Miért? Mert értem. Mert hallgatás közben a szövegre figyelek, és nem az olvasottakra. 
  2. Ne legyen túl hangos, ne robbanjon a képembe egy normálra tekert hangfal, ha behozom az oldalad. Olvasni nyugodt körülmények közt szoktunk, pl. a fotelban ülve, csendes szobában, és nem a rockkoncert kellős közepén.
  3. A kikapcsolás gomb szúrja ki az ember szemét, és legyen egyértelmű, hogy melyik az (nem, a "Fuck you" felirat a fejléced tetején még csak véletlenül sem egyértelmű), de az a legjobb, ha a zene nem indul el magától! Ahelyett, hogy az olvasód képébe nyomnád a zene-falatot, hogy nesze, nyeld le, vagy köpd ki, inkább kínáld fel neki a lehetőséget, hogy válasszon. Hagyd, hogy ő nyúljon a zene-falatért, és lehet, hogy már ezért is értékelni fogja a lejátszódat, és elindítja azt. Te, mint író, egy "étterem" vagy, aki kiszolgálja a vendégét, és igyekszik minél több ínyencséget tenni az asztalra, ám nem nyomja le a teljes menüt a kedves vendég torkán.
  4. A zene mindenképp illeszkedjen a blogod hangulatához! Nem valami kellemes egy lágy, szerelmes, romantikus blogon összefutni egy heavy metal zenei aláfestéssel. A zenéd mindenképpen a sztorit támogassa, akár a filmzene a film történetét! Egyébként ha már itt tartunk, egy jó filmzenei aláfestés pl. kifejezetten jó választás lehet.

1 megjegyzés: