Állandóak a viták arról, hogy a design vagy a tartalom-e a fontosabb. Én úgy gondolom, hogy míg a tartalom az, amely az állandó olvasókat hozza, a design alapján dönti el a látogató, hogy ad-e egy esélyt a tartalomnak. Hiszen a design határozza meg azt is, hogy mennyire olvasható a tartalom, valamint hogy milyen könnyen vagy éppen nehezen találja meg az olvasó, amit keres. És, nem utolsó sorban, a design stílusa is komolyan hozzájárul a látogatótábor milyenségéhez: például egy letisztult, egyszerű design nagy valószínűséggel olyan olvasókat fog meg, akik számára a tartalom az igazán fontos.
Ebben a cikkben a designkészítés technikai részéről írok, a következő bejegyzés arról fog szólni, hogy hogy készíts olyan designt, ami tükrözi a személyiségedet, valamint hogy legyen a designod különleges.

1. A TERVEZÉS
Az első lépés az ötletelés, az alapkoncepció kitalálása valamint annak az eldöntése, hogy milyen stílusú designt szeretnél. Hiszen másképp fog hozzá az ember egy HTML-szerű designhoz és másképp egy Gportálos stílusúhoz, megint másképp egy hivatalos honlapokra hasonlítóhoz. Itt, Gportálon alapvetően ezt a három desingstílust lehet megkülönböztetni (és ezek ötvözését, továbbfejlesztését, természetesen). Hadd mutassak nektek egy-egy példát:
a) HTML stílusú design
b) egyszerű, blogos design
c) hivatalos design
d) HTML + egyszerű, hangsúlyban a HTML
e) HTML + egyszerű, hangsúlyban az egyszerű
Természetesen nem kell egyetlen stílusba tökéletesen behelyezkedni, csupán azért mutattam meg ezeket, hogy tisztában legyél az egyes fogalmakkal (a HTML-stílusú design kifejezés nem helyes, de nem tudok rá jobb szót, valamint a hivatalos design kifejezés is meglehetősen pontatlan, de ismét csak nem találtam jobbat).
Amikor megvan az alapelképzelés a design stílusát illetően, jöhet a következő lépés: a fejléc, a háttér és a design összképének vázlatos megtervezése. Nagyon kevesen vannak, akik az első perctől tudják, hogy mit szeretnének, az ötletek általában munka közben támadnak, és a részletek is akkor kerülnek kidolgozásra. Vannak, akiket egy kép inspirál, vannak, akik a már meglévő ötlethez keresnek képeket. A design megtervezéséről majd egy másik cikkben részletesebben is kitérek, a lényeg, hogy legyen egy alap koncepciód!

2. A SZÍNEK
Ezt a kérdést két oldalról lehet megközelíteni:
a) már megvan a kép/megvannak a képek, amikből a designt szeretnéd
b) nincsenek meg a képek, először a színeket szeretnéd meghatározni
Az első opció esetén rengetegszer találkozom azzal a hibával, hogy adottak a színek a fejlécen vagy a háttéren, de a szerkesztő nem találja el ugyanazokat az árnyalatokat, így teljesen megbomlik a hangsúly. Érdemes a fejlécről/háttéről lepipettázni a színeket és azokat használni fel. Ehhez ajánlom a ColorCop nevű programot, ami nagyon pici, nagyon kevés helyet foglal, de nagyon hasznos; nem kell megnyitnod a Photoshopot és onnan kimásolni a színkódokat, mert ez a program nyomban megjeleníti az adott szín kódját. A másik előnye, hogy nem kell megnyitnod vele a képet, amiről a színt venni szeretnéd, mert bárhová kattinthatsz a képernyőn. Ajánlom ugyanakkor a CSSDrive színpaletta generátorát is, ami nem egy színt ad neked, hanem az összeillő színek egész tárházát, ráadásul mindet a feltöltött képről.
Hogyha a második opció szerint dolgozol, akkor a ColourLovers.com-ot ajánlom, ahol rengeteg színpalettát találsz. Persze, te magad is összeválogathatod a design színeit, viszont van néhány dolog, amire figyelned kell. Tulajdonképpen annyi színt használsz a lapon, amennyit csak akarsz, de figyelj arra, hogy mindegyik árnyalat passzoljon mindegyikhez! A szivárvány összes színében pompázó lap általában nem nyújt túl kellemes látványt, ugyanakkor kerüld az alapárnyalatok (piros, kék, zöld) egymás mellé rakását, mert mindegyik nagyon hangsúlyos. Ugyanezeknek a színeknek más árnyalata viszont máris mutathat jobban (pl. piros, kék, zöld).

3. A FEJLÉC
A fejléc a design leghangsúlyosabb eleme, éppen ezért nagy figyelmet kell fordítani az elkészítésére. A stílusától és az ízlésbeli kérdésektől eltekintve is vannak azonban olyan kritériumok, amelyeknek a fejléc meg kell hogy feleljen:

• Legyen rajta a lap címe - ezt gyakran lefelejtik az emberek, csak a képen szereplő sztár nevét vagy egy idézetet írnak a fejlécre, pedig nagyon fontos, hogy ott legyen a lap címe is.
• Legyenek belinkelve a menüpontok - gyakran, ha fejléces navigációt csinálunk, elfelejtjük belinkelni a menüpontokat. Pedig teljesen fölösleges dísznek menüt tenni a fejlécre, a navigációt pedig elhelyezni egy oldalsó modulban. Persze, az sem baj, ha két navigáció van a lapon: egy a fejlécen, egy pedig oldalt, mert közbejöhet valami probléma, ami miatt a fejléces navigáció nem működik.
• Legyen belinkelve az összes többi hivatkozás is - például ha felteszed a fejlécre az elérhetőségeid ikonját (Facebook, Twitter, Tumblr stb.), akkor ezeket se díszítésként használd, hanem linkeld be őket.
• Az üdvözlőszöveg - sokan teszik az üdvözlőszöveget a fejlécre, de ezzel kapcsolatban is lehet tévedni. Az üdvözlet mindig legyen jól olvasható, kontrasztos, ne takarja el se egy png, se egy fénygömb! Ugyanakkor ne legyen túl hosszú, ha a fejléc háromnegyedét szöveg teszi ki nem is néz ki jól, és a kutya se fogja elolvasni... Ide tartozik az is, hogy ha sztáros lapot szerkesztesz, a sztárról szóló alapinfókat ne tedd fel a fejlécre, mert csak fölösleges helyfoglalás, és zsúfolt lesz a fejléc.

4. A HÁTTEREK
Egy lap nem csak az oldalháttérből (body) áll! Háttere van a moduloknak is (td.modbody), és annak a résznek is, ahol a modulok vannak (td.sitecol), és mindkettő ugyanolyan fontos, mint az alapháttér. Rengetegen esnek abba a hibába, hogy a modulháttérnek valami élénk színt választanak, ezt ajánlott elkerülni, mert csak megnehezíti az olvasást. Ha HTML-stílusú designról van szó, és dobozkákat csinálsz, akkor megengedett a színes háttér, de ekkor se válassz élénk színeket (pl. magenta és magenta), és figyelj arra, hogy a betűk is olvashatóak legyenek (pl. magenta és magenta és magenta). Ha színes háttérre világos színnel írsz, nagyon hasznos az árnyékolás (itt egy példa). De azt ne felejtsd el, hogy ha színes hátteret állítasz be, akkor sokkal nehezebb lesz a formázásoknak olyan színt találni, ami jól néz ki és olvasható. A sitecol hátterét is érdemes beállítani, lehetőleg egy olyan színnel, ami nem üt el az oldal hátterétől, így a modulok nem fognak összeolvadni a háttérrel.

5. AZ ELRENDEZÉS
Gyakori probléma az is, hogy az oldalmodulok sorrendje össze-vissza, így nehezen lehet megtalálni bármit is a lapon. Számomra a következő sorrend vált be: üdvözlő szöveg, infók a szerkesztőről/a sztárról, menü, chat, cserék, blog plusz, oldalinfók, bejelentkezés, számláló. Ez természetesen csak egy példa, a lényeg, hogy a legfontosabb modulok felül legyenek, míg a kevésbé fontosak (belépés, számláló) legalul.
Fontos az is, hogy a középső rész legyen a leghangsúlyosabb, sose legyen szélesebb vagy ugyanolyan széles az oldalsó sáv, mint a középső!

6. A BETŰK
Ez az, ahol a legtöbben elcsúsznak. A lap lényege végülis a tartalom, és ebből következik, hogy a betűknek tökéletesen olvashatónak kell lenniük. Én csak mostanában jöttem rá arra, hogy érdemes minél nagyobb betűket használni, a 9-10 pixeleseket pedig teljesen kerülni, hiszen egy hosszabb szöveget elég nehéz pici betűkkel elolvasni. Ugyanígy a színekre is nagyon oda kell figyelni (erről a 4. pontnál is írtam): fontos a kontraszt, tehát világos alapra sötét betűvel, sötét alapra világos betűvel írjunk. Alap betűszínnél kerülni kell az élénk színeket, mert ez is zavaró lehet, plusz az oldal hangulatán is ront. Beszéljenek helyettem a képek:

Rossz megoldások:

Jó megoldások:

7. AZ ÖSSZHATÁS
Száz szónak is egy a vége: a designkészítéskor a következő dolgokra kell a legjobban figyelned:

• hogy a színek passzoljanak
• hogy ne legyen túl élénk
• hogy minden tökéletesen olvasható legyen
• hogy könnyen lehessen navigálni mind a menüben, mind az oldalmodulok között
• hogy az egyes designelemek is passzoljanak egymáshoz
• hogy minden fontos elem meglegyen (a lap címe a fejlécen, a menü, a chat)